feat(storybook): add theme toggle (#44234)

tools/ui-components/.storybook/preview.js

@@ -5,5 +5,39 @@ export const parameters = {
       color: /(background|color)$/i,
       date: /Date$/
     }
+  },
+  backgrounds: {
+    values: [
+      {
+        name: 'light',
+        value: '#ffffff'
+      },
+      {
+        name: 'dark',
+        value: '#0a0a23'
+      }
+    ]
   }
 };
+
+export const decorators = [renderTheme];
+
+/**
+ * Gets matching theme name for currently selected background and provides it
+ * to the story.
+ */
+function renderTheme(Story, context) {
+  const selectedBackgroundValue = context.globals.backgrounds?.value;
+  const selectedBackgroundName = parameters.backgrounds.values.find(
+    bg => bg.value === selectedBackgroundValue
+  )?.name;
+
+  // There can be no background selected, prevent "undefined" className
+  const className = selectedBackgroundName || '';
+
+  return (
+    <div className={className}>
+      <Story />
+    </div>
+  );
+}

tools/ui-components/src/button.stories.tsx

@@ -5,28 +5,11 @@ import { ButtonProps } from './button.types';
 
 const story = {
   title: 'Example/Button',
-  component: Button,
-  argTypes: {
-    theme: {
-      options: ['dark', 'light'],
-      control: { type: 'radio' },
-      defaultValue: 'light'
-    }
-  }
+  component: Button
 };
 
 const Template: Story<ButtonProps> = args => {
-  return (
-    <div
-      className={`flex h-screen justify-center items-center ${
-        args.theme === 'dark'
-          ? 'dark bg-dark-theme-background'
-          : 'light bg-light-theme-background'
-      }`}
-    >
-      <Button {...args} />
-    </div>
-  );
+  return <Button {...args} />;
 };
 
 export const Primary = Template.bind({});

tools/ui-components/src/button.types.ts

@@ -6,5 +6,4 @@ export interface ButtonProps {
   label: string;
   customKey?: string;
   onClick: () => void;
-  theme?: 'light' | 'dark';
 }

tools/ui-components/src/global.css

@@ -1,4 +1,4 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import './colors';
+@import './colors.css';