🐛 Fix broken typography docs after upgrading to v8

frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { Text } = Components;
-const { StoryWrapper } = Components.storybook;
 const { typography } = Components.meta;
 
 const typographyIds = typography.sort();
@@ -16,31 +15,112 @@ export default {
       control: { type: "select" },
     },
   },
+  parameters: {
+    controls: { exclude: ["children", "theme", "style"] },
+    backgrounds: { default: "light" },
+  },
+  args: {
+    children: "Lorem ipsum",
+    theme: "light",
+    style: {
+      color: "var(--color-foreground-primary)",
+      background: "var(--color-background-primary)",
+    },
+  },
+  render: ({ style, children, theme, ...args }) => (
+    // TODO: this <div> is a hack until we have proper theming
+    <div style={style} className={theme}>
+      <Text {...args}>{children}</Text>
+    </div>
+  ),
 };
 
 export const Default = {
-  render: ({ typography, ...args }) => (
-    <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>
-        Lorem ipsum
-      </Text>
-    </StoryWrapper>
-  ),
   args: {
     typography: "display",
   },
 };
 
 export const CustomTag = {
-  render: ({ typography, ...args }) => (
-    <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>
-        Lorem ipsum
-      </Text>
-    </StoryWrapper>
-  ),
   args: {
     typography: "display",
     as: "li",
   },
 };
+
+export const Display = {
+  args: {
+    typography: "display",
+    children: "Display 400 36px/1.4 Work Sans",
+  },
+};
+
+export const TitleLarge = {
+  args: {
+    typography: "title-large",
+    children: "Title Large 400 24px/1.4 Work Sans",
+  },
+};
+
+export const TitleMedium = {
+  args: {
+    typography: "title-medium",
+    children: "Title Medium 400 20px/1.4 Work Sans",
+  },
+};
+
+export const TitleSmall = {
+  args: {
+    typography: "title-small",
+    children: "Title Small 400 14px/1.2 Work Sans",
+  },
+};
+
+export const HeadlineLarge = {
+  args: {
+    typography: "headline-large",
+    children: "Headline Large 400 18px/1.4 Work Sans",
+  },
+};
+
+export const HeadlineMedium = {
+  args: {
+    typography: "headline-medium",
+    children: "Headline Medium 400 16px/1.4 Work Sans",
+  },
+};
+
+export const HeadlineSmall = {
+  args: {
+    typography: "headline-small",
+    children: "Headline Small 500 12px/1.2 Work Sans",
+  },
+};
+
+export const BodyLarge = {
+  args: {
+    typography: "body-large",
+    children: "Body Large 400 16px/1.4 Work Sans",
+  },
+};
+
+export const BodyMedium = {
+  args: {
+    typography: "body-medium",
+    children: "Body Medium 400 14px/1.3 Work Sans",
+  },
+};
+
+export const BodySmall = {
+  args: {
+    typography: "body-small",
+    children: "Body Small 400 12px/1.3 Work Sans",
+  },
+};
+
+export const CodeFont = {
+  args: {
+    typography: "code-font",
+    children: "Code Font 400 12px/1.2 Roboto Mono",
+  },
+};

frontend/src/app/main/ui/ds/foundations/typography/typography.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta } from "@storybook/blocks";
 import Components from "@target/components";
+import * as TextStories from "../typography/text.stories";
 
 <Meta title="Foundations/Typography" />
 
@@ -53,59 +54,44 @@ for exceptions based on the size of the components.
 
 Hero style text for transitional pages (Login). If too large use large title in narrow windows.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.Display} />
-  <Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
-</Canvas>
 
-### Title large `title-large`
+### Title Large `title-large`
 
 Page headers for main pages (dashboard, Profiles...). If too big use title
 (medium) in narrow windows.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.TitleLarge} />
-  <Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
-</Canvas>
 
-### Title medium `title-medium`
+### Title Medium `title-medium`
 
 Default page title. Equivalent line height of 32px matches the height
 of buttons and other medium controls. Ideal for page header layout.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.TitleMedium} />
-  <Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
-### Title small `title-small`
+### Title Small `title-small`
 
 Uses the same size as body (large).
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.TitleSmall} />
-  <Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
-</Canvas>
 
 ## Headline
 
-Page sections/subtitles, or names of less important objects in
+Page sections/subtitles, or names of less important objects in page titles
-page titles (automated action titles, for example). Same line height as title (medium).
+(automated action titles, for example). Same line height as title (medium).
 
-### Headline large `headline-large`
+### Headline Large `headline-large`
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.HeadlineLarge} />
-  <Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
-### Headline medium `headline-medium`
+### Headline Medium `headline-medium`
-
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
+<Canvas of={TextStories.HeadlineMedium} />
 
 ### Headline small `headline-small`
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.HeadlineSmall} />
-  <Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
-</Canvas>
 
 ## Body
 
@@ -113,35 +99,26 @@ page titles (automated action titles, for example). Same line height as title (m
 
 Generic content.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.BodyLarge} />
-  <Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
 ### Body medium `body-medium`
 
 Default UI font. Most commonly used for body text.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.BodyMedium} />
-  <Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
-</Canvas>
-
 
 ### Body small `body-small`
 
 Small compact font with a line height of less than 16px.
 Use for single line scenarios, as the small size does not meet accessibility requirements.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.BodySmall} />
-  <Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
-</Canvas>
 
 ## Code font `code-font`
 
 Default style for rendering code blocks.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.CodeFont} />
-  <Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
-</Canvas>
 
 ## Fonts