✨ Support theme switching within Storybook

frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx

@@ -2,8 +2,7 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { Icon } = Components;
-const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
-  Components.storybook;
+const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
 const { icons } = Components.meta;
 
 const iconList = Object.entries(icons)
@@ -23,11 +22,12 @@ export default {
       control: { type: "radio" },
     },
   },
+  render: ({ ...args }) => <Icon {...args} />,
 };
 
 export const All = {
   render: ({ size }) => (
-    <StoryWrapper theme="default">
+    <>
       <StoryHeader>
         <h1>All Icons</h1>
         <p>Hover on an icon to see its ID.</p>
@@ -43,7 +43,7 @@ export const All = {
           </StoryGridCell>
         ))}
       </StoryGrid>
-    </StoryWrapper>
+    </>
   ),
   args: {
     size: "m",
@@ -55,11 +55,6 @@ export const All = {
 };
 
 export const Default = {
-  render: ({ id, ...args }) => (
-    <StoryWrapper theme="default">
-      <Icon id={id} {...args} />
-    </StoryWrapper>
-  ),
   args: {
     id: "pin",
   },
@@ -69,11 +64,6 @@ export const Default = {
 };
 
 export const CustomSize = {
-  render: ({ id, size, ...args }) => (
-    <StoryWrapper theme="default">
-      <Icon id={id} size={size} {...args} />
-    </StoryWrapper>
-  ),
   args: {
     id: "pin",
     size: "m",

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx

@@ -2,8 +2,7 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { RawSvg } = Components;
-const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
-  Components.storybook;
+const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
 const { svgs } = Components.meta;
 
 const assetList = Object.entries(svgs)
@@ -19,11 +18,12 @@ export default {
       control: { type: "select" },
     },
   },
+  render: ({ ...args }) => <RawSvg {...args} />,
 };
 
 export const All = {
   render: ({}) => (
-    <StoryWrapper theme="light">
+    <>
       <StoryHeader>
         <h1>All SVG Assets</h1>
         <p>Hover on an asset to see its ID.</p>
@@ -36,7 +36,7 @@ export const All = {
           </StoryGridCell>
         ))}
       </StoryGrid>
-    </StoryWrapper>
+    </>
   ),
   parameters: {
     controls: { exclude: ["id"] },
@@ -45,12 +45,8 @@ export const All = {
 };
 
 export const Default = {
-  render: ({ id, ...args }) => (
-    <StoryWrapper theme="default">
-      <RawSvg id={id} {...args} width="200" />
-    </StoryWrapper>
-  ),
   args: {
     id: "brand-gitlab",
+    width: 200,
   },
 };

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

@@ -2,7 +2,6 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { Heading } = Components;
-const { StoryWrapper } = Components.storybook;
 const { typography } = Components.meta;
 
 const typographyIds = typography.sort();
@@ -33,10 +32,7 @@ export default {
     },
   },
   render: ({ style, children, theme, ...args }) => (
-    // TODO: this <div> is a hack until we have proper theming
-    <div style={style} className={theme}>
-      <Heading {...args}>{children}</Heading>
-    </div>
+    <Heading {...args}>{children}</Heading>
   ),
 };
 

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

@@ -17,22 +17,11 @@ export default {
   },
   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>
-  ),
+  render: ({ children, ...args }) => <Text {...args}>{children}</Text>,
 };
 
 export const Default = {
@@ -48,11 +37,20 @@ export const CustomTag = {
   },
 };
 
+const docsParams = {
+  parameters: {
+    themes: {
+      themeOverride: "light",
+    },
+  },
+};
+
 export const Display = {
   args: {
     typography: "display",
     children: "Display 400 36px/1.4 Work Sans",
   },
+  ...docsParams,
 };
 
 export const TitleLarge = {
@@ -60,6 +58,7 @@ export const TitleLarge = {
     typography: "title-large",
     children: "Title Large 400 24px/1.4 Work Sans",
   },
+  ...docsParams,
 };
 
 export const TitleMedium = {
@@ -67,6 +66,7 @@ export const TitleMedium = {
     typography: "title-medium",
     children: "Title Medium 400 20px/1.4 Work Sans",
   },
+  ...docsParams,
 };
 
 export const TitleSmall = {
@@ -74,6 +74,7 @@ export const TitleSmall = {
     typography: "title-small",
     children: "Title Small 400 14px/1.2 Work Sans",
   },
+  ...docsParams,
 };
 
 export const HeadlineLarge = {
@@ -81,6 +82,7 @@ export const HeadlineLarge = {
     typography: "headline-large",
     children: "Headline Large 400 18px/1.4 Work Sans",
   },
+  ...docsParams,
 };
 
 export const HeadlineMedium = {
@@ -88,6 +90,7 @@ export const HeadlineMedium = {
     typography: "headline-medium",
     children: "Headline Medium 400 16px/1.4 Work Sans",
   },
+  ...docsParams,
 };
 
 export const HeadlineSmall = {
@@ -95,6 +98,7 @@ export const HeadlineSmall = {
     typography: "headline-small",
     children: "Headline Small 500 12px/1.2 Work Sans",
   },
+  ...docsParams,
 };
 
 export const BodyLarge = {
@@ -102,6 +106,7 @@ export const BodyLarge = {
     typography: "body-large",
     children: "Body Large 400 16px/1.4 Work Sans",
   },
+  ...docsParams,
 };
 
 export const BodyMedium = {
@@ -109,6 +114,7 @@ export const BodyMedium = {
     typography: "body-medium",
     children: "Body Medium 400 14px/1.3 Work Sans",
   },
+  ...docsParams,
 };
 
 export const BodySmall = {
@@ -116,6 +122,7 @@ export const BodySmall = {
     typography: "body-small",
     children: "Body Small 400 12px/1.3 Work Sans",
   },
+  ...docsParams,
 };
 
 export const CodeFont = {
@@ -123,4 +130,5 @@ export const CodeFont = {
     typography: "code-font",
     children: "Code Font 400 12px/1.2 Roboto Mono",
   },
+  ...docsParams,
 };

frontend/src/app/main/ui/ds/product/loader.stories.jsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { Loader } = Components;
-const { StoryWrapper } = Components.storybook;
 
 export default {
   title: "Product/Loader",
@@ -10,9 +9,5 @@ export default {
 };
 
 export const Default = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <Loader title="Loading" />
-    </StoryWrapper>
-  ),
+  render: () => <Loader title="Loading" />,
 };