docs(storybook): isolate styles per story (#15)

* docs(storybook): add `Decorator` status icons * docs(storybook): structure styles to facilitate Sass processing * docs(storybook): structure styles to facilitate Sass processing * docs(storybook): isolate styles per story * docs(storybook): isolate styles per story * docs(storybook): isolate styles per story
carbon-design-system · Jul 10, 2020 · c9eb079 · c9eb079
1 parent ddee2ea
commit c9eb079
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 5 deletions.
diff --git a/packages/core/.storybook/index.scss b/packages/core/.storybook/index.scss
@@ -5,4 +5,11 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@import '@carbon/type/scss/reset';
+@import 'carbon-components/scss/globals/scss/css--font-face';
+
+$css--reset: false;
+
 @import 'carbon-components/scss/globals/scss/css--body';
+
+@include carbon--type-reset;
diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js
@@ -23,6 +23,11 @@ module.exports = {
             ],
           },
         },
+
+        // https://webpack.js.org/loaders/style-loader/#lazystyletag
+        styleLoaderOptions: {
+          injectType: 'lazyStyleTag',
+        },
       },
     },
   ],

diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
@@ -9,7 +9,9 @@ import centered from '@storybook/addon-centered/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { addDecorator } from '@storybook/react';
 
-import './index.scss';
+import React, { useEffect } from 'react';
+
+import index from './index.scss';
 
 addDecorator(withKnobs);
 
@@ -19,3 +21,25 @@ addDecorator((...args) =>
     ? args[0]()
     : centered(...args)
 );
+
+const Style = ({ children, styles }) => {
+  const { unuse, use } = styles;
+
+  useEffect(() => {
+    use();
+
+    return () => unuse();
+  });
+
+  return children;
+};
+
+addDecorator((storyFn, { parameters: { styles } }) => {
+  const story = storyFn();
+
+  return (
+    <Style styles={index}>
+      {styles ? <Style styles={styles}>{story}</Style> : story}
+    </Style>
+  );
+});
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.10.1",
+    "@carbon/type": "^10.12.0",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-centered": "^5.3.19",
     "@storybook/addon-docs": "^5.3.19",

diff --git a/packages/security/src/ComboButton/ComboButton.stories.js b/packages/security/src/ComboButton/ComboButton.stories.js
@@ -12,7 +12,7 @@ import { sectionTitle } from '../../config';
 
 import { ComboButton, ComboButtonItem } from '..';
 
-import './_index.scss';
+import styles from './_index.scss';
 
 export const Default = () => (
   <ComboButton>
@@ -26,4 +26,5 @@ export const Default = () => (
 export default {
   title: `${sectionTitle}/ComboButton`,
   component: ComboButton,
+  parameters: { styles },
 };
diff --git a/packages/security/src/ErrorPage/ErrorPage.stories.js b/packages/security/src/ErrorPage/ErrorPage.stories.js
@@ -11,7 +11,7 @@ import React from 'react';
 import { sectionTitle } from '../../config';
 import { ErrorPage } from '..';
 
-import './_index.scss';
+import styles from './_index.scss';
 
 const {
   defaultProps: { errorMessage, errorName, statusCode, title },
@@ -38,5 +38,5 @@ export const Default = () => (
 export default {
   title: `${sectionTitle}/ErrorPage`,
   component: ErrorPage,
-  parameters: { centered: { disable: true } },
+  parameters: { centered: { disable: true }, styles },
 };
diff --git a/yarn.lock b/yarn.lock
@@ -1494,7 +1494,7 @@
     "@carbon/import-once" "^10.3.0"
     "@carbon/layout" "^10.9.2"
 
-"@carbon/type@^10.10.2":
+"@carbon/type@^10.10.2", "@carbon/type@^10.12.0":
   version "10.12.0"
   resolved "https://registry.yarnpkg.com/@carbon/type/-/type-10.12.0.tgz#e36d9982344305f93830548346b304571606d8b8"
   integrity sha512-dzkl0t83VMKkbQPLJEFGfysOn8fBl1y1eENZ2yP28IVcgmNS0WR4cIWIgVnINx2maxvCYQgQkWILk0AYM2PSjg==
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,11 @@ module.exports = { @@
                 ],
               },
             },
+            // https://webpack.js.org/loaders/style-loader/#lazystyletag
+            styleLoaderOptions: {
+              injectType: 'lazyStyleTag',
+            },
           },
         },
       ],
@@ Expand Down @@