docs: add data-theme attribute to storybook html

website/.storybook/main.js

@@ -1,12 +1,13 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
-  ],
-  "framework": "@storybook/react"
-}
+    stories: [
+        '../src/**/*.stories.mdx',
+        '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        'storybook-addon-root-attribute/register',
+    ],
+    framework: '@storybook/react',
+};

website/.storybook/preview.js

@@ -1,4 +1,5 @@
 import '../src/css/custom.css';
+import { withRootAttribute } from 'storybook-addon-root-attribute';
 
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -8,4 +9,24 @@ export const parameters = {
             date: /Date$/,
         },
     },
+    layout: 'fullscreen',
+
+    // add docusaurus theming to storybook iframes
+    rootAttribute: {
+        root: 'html',
+        attribute: 'data-theme',
+        defaultState: {
+            name: 'Light',
+            value: 'light',
+        },
+        states: [
+            {
+                name: 'Dark',
+                value: 'dark',
+            },
+        ],
+        tooltip: true,
+    },
 };
+
+export const decorators = [withRootAttribute];

website/package.json

@@ -58,6 +58,7 @@
     "@storybook/addon-links": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
-    "babel-loader": "^8.2.3"
+    "babel-loader": "^8.2.3",
+    "storybook-addon-root-attribute": "^1.0.2"
   }
 }

website/src/components/UserFeedback/UserFeedback.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './styles.module.css';
+
+const Component = ({ text }) => (
+    <article className="user-feedback">{text}</article>
+);
+
+export default Component;

website/src/components/UserFeedback/UserFeedback.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Component from './UserFeedback';
+
+export default {
+    title: 'User feedback component',
+    component: Component,
+};
+
+const Template = (args) => <Component {...args} />;
+
+export const A = Template.bind({});
+A.args = {
+    x: true,
+    y: 45,
+    text: 'blah blah blah',
+};

website/src/components/UserFeedback/styles.module.css

@@ -0,0 +1,3 @@
+.user-feedback {
+    background: goldenrod;
+}