From 63f6d9d3f25396212384a936fbdc746e582eb617 Mon Sep 17 00:00:00 2001
From: Maciek Sitkowski <58401630+sitek94@users.noreply.github.com>
Date: Thu, 25 Nov 2021 14:32:52 +0100
Subject: [PATCH] feat(storybook): add theme toggle (#44234)

---
 tools/ui-components/.storybook/preview.js  | 34 ++++++++++++++++++++++
 tools/ui-components/src/button.stories.tsx | 21 ++-----------
 tools/ui-components/src/button.types.ts    |  1 -
 tools/ui-components/src/global.css         |  2 +-
 4 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/tools/ui-components/.storybook/preview.js b/tools/ui-components/.storybook/preview.js
index 30f63ee296..cb63227087 100644
--- a/tools/ui-components/.storybook/preview.js
+++ b/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>
+  );
+}
diff --git a/tools/ui-components/src/button.stories.tsx b/tools/ui-components/src/button.stories.tsx
index 6b885bdeeb..12f8758210 100644
--- a/tools/ui-components/src/button.stories.tsx
+++ b/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({});
diff --git a/tools/ui-components/src/button.types.ts b/tools/ui-components/src/button.types.ts
index 980eb1b779..9c57f74bfd 100644
--- a/tools/ui-components/src/button.types.ts
+++ b/tools/ui-components/src/button.types.ts
@@ -6,5 +6,4 @@ export interface ButtonProps {
   label: string;
   customKey?: string;
   onClick: () => void;
-  theme?: 'light' | 'dark';
 }
diff --git a/tools/ui-components/src/global.css b/tools/ui-components/src/global.css
index 03e6bcf9ee..a57ee26204 100644
--- a/tools/ui-components/src/global.css
+++ b/tools/ui-components/src/global.css
@@ -1,4 +1,4 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import './colors';
+@import './colors.css';