Merge pull request #512 from dnum-mi/docs/use-addon-styling

Docs/use addon styling

Author: laruiss

.storybook/main.js

@@ -1,10 +1,9 @@
-import { mergeConfig } from 'vite'
-
 module.exports = {
   stories: ["../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-styling",
     "@storybook/addon-interactions",
     {
       name: '@storybook/addon-postcss',

.storybook/preview.js

@@ -1,8 +1,8 @@
 import * as jest from "@storybook/jest"
-import { defineComponent } from 'vue'
 import { setup } from '@storybook/vue3'
+import { withThemeByDataAttribute } from "@storybook/addon-styling"
 import { FocusTrap } from 'focus-trap-vue'
-// import '@gouvfr/dsfr/dist/core/core.module.js'
+import { defineComponent } from 'vue'
 
 import '../src/assets/variables-fdr.css'
 import '@gouvfr/dsfr/dist/dsfr.min.css'
@@ -23,14 +23,6 @@ export const parameters = {
       date: /Date$/,
     },
   },
-  backgrounds: {
-    values: [
-      {name: 'black', value: '#000'},
-      {name: 'dark', value: '#222'},
-      {name: 'light', value: '#eee'},
-      {name: 'white', value: '#fff'},
-    ]
-  },
   viewport: {
     viewports: {
       DSFR_XS: {
@@ -83,6 +75,17 @@ export const parameters = {
   }
 }
 
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      Clair: 'light',
+      Sombre: 'dark',
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-fr-theme',
+  })
+]
+
 
 const RouterLink = defineComponent({
   name: 'RouterLink',

.storybook/theme.css

@@ -15,3 +15,7 @@
   -webkit-box-shadow: none;
   box-shadow: none;
 }
+
+[data-fr-theme="dark"] .docs-story {
+  background-color: var(--background-default-grey);
+}