- {title && {title}}
- {isDescriptionComponent ? (
- description
- ) : (
- {description}
- )}
+
+ {title && {title}}
+ {description && {description}}
+
{storyButtons &&
- storyButtons.map(
- (button) =>
- button.url && (
-
-
-
-
- )
- )}
+ storyButtons.map((button) => {
+ return (
+
+
+
+ );
+ })}
@@ -42,47 +64,46 @@ const HeaderWrapper = styled("div")({
position: "relative",
display: "flex",
justifyContent: "center",
- borderBottom: "1px solid #EEEE",
- background:
- "linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0%, rgba(255, 255, 255, 0) 100%)",
});
const HeaderContent = styled("div")({
- paddingTop: "56px",
- paddingLeft: "40px",
- paddingRight: "40px",
- minWidth: 300,
- maxWidth: 1280,
+ minWidth: "300px",
+ maxWidth: "1200px",
flex: 1,
+ borderBottom: "1px solid var(--border)",
+});
+
+const ButtonWrapper = styled("div")({
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "flex-start",
+ marginBottom: "32px",
+ gap: "8px",
"@media (max-width: 960px)": {
- paddingTop: "20px",
- paddingLeft: "20px",
- paddingRight: "20px",
+ marginBottom: "32px",
},
});
-const HeaderTitle = styled(Display)({
+const ComponentName = styled(Title)({
+ marginBottom: "16px",
fontSize: "3rem",
- marginBottom: "24px",
- "@media (max-width: 960px)": {
- maxWidth: "230px",
- fontSize: "2rem",
- overflowWrap: "break-word",
- },
+ lineHeight: "1.2",
+ maxWidth: "860px",
});
-const HeaderDescription = styled(Body)({
- fontSize: "1.2rem",
- lineHeight: "1.4",
- maxWidth: "600px",
- color: "#000",
- marginBottom: "32px",
+const Label = styled.label({
+ color: "var(--green-primary)",
+ fontSize: "0.875rem",
+ lineHeight: "1.5rem",
+ textTransform: "uppercase",
+ fontWeight: 700,
+ marginBottom: 0,
+ marginTop: 0,
});
-const ButtonWrapper = styled("div")({
- display: "flex",
- marginBottom: "42px",
- "@media (max-width: 960px)": {
- marginBottom: "32px",
- },
+const Description = styled(Text)({
+ fontSize: "1.25rem",
+ color: "var(--text-secondary)",
+ maxWidth: "860px",
+ marginBottom: "16px",
});
diff --git a/src/webapp/layout/story/atom/Markdown.tsx b/src/webapp/layout/story/atom/Markdown.tsx
index 4718b47..783ab59 100644
--- a/src/webapp/layout/story/atom/Markdown.tsx
+++ b/src/webapp/layout/story/atom/Markdown.tsx
@@ -1,6 +1,7 @@
-import { Prism } from '@mantine/prism';
-import { Text, Title, Code } from '@mantine/core';
-import MarkdownToJsx from 'markdown-to-jsx';
+import { Text, Title, Code } from "@mantine/core";
+import MarkdownToJsx from "markdown-to-jsx";
+import { CodeHighlight } from "@mantine/code-highlight";
+import styled from "@emotion/styled";
interface Props {
children: string;
@@ -10,18 +11,57 @@ export function Markdown({ children }: Props) {
return
;
}
+const Link = ({ children, ...props }: { children: React.ReactNode }) => {
+ return
{children};
+};
+
const options = {
forceBlock: true,
overrides: {
code: {
component: (p: any) => {
- const match = /lang-(\w+)/.exec(p.className || '');
- if (match && typeof p.children === 'string') {
- return
;
+ const match = /lang-(\w+)/.exec(p.className || "");
+ if (match && typeof p.children === "string") {
+ return (
+
+ );
}
- return
{p.children}
;
+ return (
+
+ {p.children}
+
+ );
},
},
+ a: {
+ component: Link,
+ },
p: {
component: Text,
},
@@ -29,43 +69,47 @@ const options = {
component: Title,
props: {
order: 1,
- style: { marginBottom: 24 },
+ style: { marginBottom: "24px" },
},
},
h2: {
component: Title,
props: {
order: 2,
- style: { margin: '12px 0' },
+ style: { margin: "12px 0" },
},
},
h3: {
component: Title,
props: {
order: 3,
- style: { margin: '12px 0' },
+ style: { margin: "12px 0" },
},
},
h4: {
component: Title,
props: {
order: 4,
- style: { margin: '12px 0' },
+ style: { margin: "12px 0" },
},
},
h5: {
component: Title,
props: {
order: 5,
- style: { margin: '12px 0' },
+ style: { margin: "12px 0" },
},
},
h6: {
component: Title,
props: {
order: 6,
- style: { margin: '12px 0' },
+ style: { margin: "12px 0" },
},
},
},
};
+
+const LinkStyled = styled("a")({
+ color: "var(--green-primary)",
+});
diff --git a/src/webapp/layout/story/atom/typo.tsx b/src/webapp/layout/story/atom/typo.tsx
deleted file mode 100644
index c6c1e5a..0000000
--- a/src/webapp/layout/story/atom/typo.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import styled from "@emotion/styled";
-
-interface BodyProps {
- color?: "$text-primary" | "$text-secondary";
- size?: "small";
- children: string;
- className?: string;
-}
-
-export const Body = styled.p
(({ size, color }) => ({
- fontWeight: 400,
- fontFamily: "'DM Sans',sans-serif",
- margin: 0,
- padding: 0,
- fontSize: size == "small" ? "0.875rem" : "1rem",
- lineHeight: size == "small" ? "1.25rem" : "1.375rem",
- maxWidth: "600px",
- color: color == "$text-primary" ? "#212121" : "#6A6A6A",
-}));
-
-interface DisplayProps {
- gutterBottom?: boolean;
- children: string;
- className?: string;
-}
-
-export const Display = styled.h1(({ gutterBottom }) => ({
- fontWeight: 700,
- lineHeight: "2.875rem",
- fontFamily: "'Kivra Sans', 'DM Sans', sans-serif",
- color: "#212121",
- margin: 0,
- padding: 0,
- fontSize: "3rem",
- marginBottom: gutterBottom ? "1.5rem" : 0,
-}));
diff --git a/src/webapp/layout/story/control/ColorControl.tsx b/src/webapp/layout/story/control/ColorControl.tsx
index bc65f3d..586d188 100644
--- a/src/webapp/layout/story/control/ColorControl.tsx
+++ b/src/webapp/layout/story/control/ColorControl.tsx
@@ -1,7 +1,7 @@
-import { Group, ColorSwatch } from '@mantine/core';
-import { action } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import { ColorControl as ColorControlType } from './useControl';
+import { Group, ColorSwatch } from "@mantine/core";
+import { action } from "mobx";
+import { observer } from "mobx-react-lite";
+import { ColorControl as ColorControlType } from "./useControl";
interface Props {
control: ColorControlType;
@@ -9,8 +9,8 @@ interface Props {
export const ColorControl = observer(({ control }: Props) => {
return (
-
- {control.options.map(c => {
+
+ {control.options.map((c) => {
return (
{
color={c}
onClick={action(() => (control.value = c))}
style={{
- color: '#fff',
- cursor: 'pointer',
- border: control.value === c ? '5px solid black' : 'none',
+ color: "#fff",
+ cursor: "pointer",
+ border: control.value === c ? "5px solid black" : "none",
}}
/>
);
diff --git a/src/webapp/layout/story/control/Controls.tsx b/src/webapp/layout/story/control/Controls.tsx
index b95b015..06b790f 100644
--- a/src/webapp/layout/story/control/Controls.tsx
+++ b/src/webapp/layout/story/control/Controls.tsx
@@ -1,6 +1,5 @@
import styled from "@emotion/styled";
-import { Switch, Text, Button, ActionIcon, Tooltip } from "@mantine/core";
-import { action } from "mobx";
+import { Text, Button } from "@mantine/core";
import { observer } from "mobx-react-lite";
import { Fragment } from "react";
import { ControlTitle } from "./atoms";
@@ -10,47 +9,21 @@ import { SegmentControl } from "./SegmentControl";
import { TextControl } from "./TextControl";
import { NumberControl } from "./NumberControl";
import { Control } from "./useControl";
-import { DarkMode } from "./useIsDarkMode";
-import { FocusIcon } from "../../../icons/FocusIcon";
interface Props {
controls: Control;
- darkMode: DarkMode;
sectionId: string;
}
-export const Controls = observer(({ controls, darkMode, sectionId }: Props) => {
+export const Controls = observer(({ controls }: Props) => {
return (
<>
-
-
- {
- const resetEl = document.getElementById(`reset-${sectionId}`);
- if (resetEl) {
- resetEl.focus();
- }
- }}
- size="lg"
- >
-
-
-
-
-
- darkMode.setIsDarkMode(event.currentTarget.checked)
- )}
- />
-
{Object.entries(controls.state).map(([name, control]) => {
switch (control.type) {
case "color":
return (
- {control.displayName}
+ {control.displayName}
@@ -58,7 +31,7 @@ export const Controls = observer(({ controls, darkMode, sectionId }: Props) => {
case "boolean":
return (
-
+
{control.description}
{
case "text":
return (
- {control.displayName}
-
+ {control.displayName}
+
{control.description}
@@ -83,8 +56,8 @@ export const Controls = observer(({ controls, darkMode, sectionId }: Props) => {
case "number":
return (
- {control.displayName}
-
+ {control.displayName}
+
{control.description}
@@ -113,12 +86,6 @@ export const Controls = observer(({ controls, darkMode, sectionId }: Props) => {
);
});
-const HelpActions = styled("div")`
- margin-top: -6px;
- margin-bottom: 16px;
- padding-bottom: 6px;
-`;
-
const ControlSpace = styled.div`
margin-bottom: 12px;
`;
diff --git a/src/webapp/layout/story/control/SegmentControl.tsx b/src/webapp/layout/story/control/SegmentControl.tsx
index eb36d90..2e2a481 100644
--- a/src/webapp/layout/story/control/SegmentControl.tsx
+++ b/src/webapp/layout/story/control/SegmentControl.tsx
@@ -1,8 +1,8 @@
-import { SegmentedControl, Select } from '@mantine/core';
-import { action } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import { SegmentControl as SegmentControlType } from './useControl';
-import { ControlTitle } from './atoms';
+import { SegmentedControl, Select } from "@mantine/core";
+import { action } from "mobx";
+import { observer } from "mobx-react-lite";
+import { SegmentControl as SegmentControlType } from "./useControl";
+import { ControlTitle } from "./atoms";
interface Props {
control: SegmentControlType;
@@ -10,29 +10,29 @@ interface Props {
}
export const SegmentControl = observer(({ control, name }: Props) => {
- if (control.showAs === 'segment') {
+ if (control.showAs === "segment") {
return (
<>
- {name}
+ {name}
({ value, label }))}
value={control.value}
- onChange={action(newValue => (control.value = newValue))}
+ onChange={action((newValue) => (control.value = newValue))}
/>
>
);
} else {
return (
<>
- {name}
+ {name}