Update emotion dependencies and usage (#124)

* Replace emotion injectGlobalStyles styles usage with @emotion/core Global component * Replace remaining emotion injectGlobal with emotion/core Global component styling, rearrange decorators * Remove unused optionConfig import from storybook config * Remove now-unused framework-agnostic emotion dependency * Bump emotion dependencies to 10.0.14 * Update snapshots (TODO: change non-dom attribute to camelCase) * Move optionConfig content directly into config, delete optionConfig
curology · Jun 27, 2019 · c2f9631 · c2f9631
1 parent f234bb8
commit c2f9631
Show file tree

Hide file tree

Showing 7 changed files with 299 additions and 227 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,36 +1,116 @@
 import { configure } from '@storybook/react';
-import { injectGlobal } from 'emotion';
+import { addParameters, addDecorator } from '@storybook/react';
+import Theme from './theme';
+import { withA11y } from '@storybook/addon-a11y';
+import { addReadme } from 'storybook-readme';
+import centered from '@storybook/addon-centered/react';
+import { configureReadme } from 'storybook-readme';
+import { Global, css } from '@emotion/core';
+import {
+  resetStyles,
+  brandStyles,
+} from '../src/utils/injectGlobalStyles/style';
 
-import injectGlobalStyles from 'src/utils/injectGlobalStyles';
+const InjectGlobalStyles = storyFn => (
+  <div>
+    <Global styles={resetStyles} />
+    <Global styles={brandStyles} />
+    <Global
+      styles={css`
+        @font-face {
+          font-family: 'nocturno';
+          src: url('https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.eot');
+          src: url('https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.eot?#iefix')
+              format('embedded-opentype'),
+            url('https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.woff2')
+              format('woff2'),
+            url('https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.woff')
+              format('woff'),
+            url('https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.svg#Typotheque_webfonts_service')
+              format('svg');
+        }
+      `}
+    />
+    <Global
+      styles={css`
+        @font-face {
+          font-family: 'larssiet';
+          src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.eot');
+          src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.eot?#iefix')
+              format('embedded-opentype'),
+            url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.woff2')
+              format('woff2'),
+            url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.woff')
+              format('woff'),
+            url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.ttf')
+              format('truetype');
+        }
+      `}
+    />
+    <Global
+      styles={css`
+        @font-face {
+          font-family: 'larssiet';
+          font-weight: bold;
+          src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.eot');
+          src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.eot?#iefix')
+              format('embedded-opentype'),
+            url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.woff2')
+              format('woff2'),
+            url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.woff')
+              format('woff'),
+            url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.ttf')
+              format('truetype');
+        }
+      `}
+    />
+    {storyFn()}
+  </div>
+);
 
-import optionConfig from './optionConfig';
+addDecorator(InjectGlobalStyles);
+addDecorator(centered);
+addDecorator(withA11y);
+addDecorator(addReadme);
 
-injectGlobal`
-  @font-face {
-    font-family: 'nocturno';
-    src: url("https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.eot");
-    src: url("https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.woff2") format("woff2"), url("https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.woff") format("woff"), url("https://s3-us-west-1.amazonaws.com/fonts-california.typotheque.com/WF-029669-009918-001560-fa6dd062b0c32d6d9a297bd175bb0381.svg#Typotheque_webfonts_service") format("svg");
-  }
-`;
+configureReadme({
+  DocPreview: ({ children }) => (
+    <div
+      css={css`
+        padding: 1rem;
+      `}
+    >
+      {children}
+    </div>
+  ),
+  StoryPreview: ({ children }) => (
+    <div
+      css={css`
+        padding: 1rem;
+      `}
+    >
+      {children}
+    </div>
+  ),
+});
 
-injectGlobal`
-  @font-face {
-    font-family: 'larssiet';
-    src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.eot');
-    src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.eot?#iefix') format('embedded-opentype'),url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.woff2') format('woff2'),url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.woff') format('woff'),url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_1_0.ttf') format('truetype');
-  }
-`;
-
-injectGlobal`
-  @font-face {
-    font-family: 'larssiet';
-    font-weight: bold;
-    src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.eot');
-    src: url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.eot?#iefix') format('embedded-opentype'),url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.woff2') format('woff2'),url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.woff') format('woff'),url('https://s3.amazonaws.com/curology-cdn.com/fonts/larssiet/34535B_0_0.ttf') format('truetype');
-  }
-`;
-
-injectGlobalStyles();
+addParameters({
+  options: {
+    theme: Theme,
+    isFullscreen: false,
+    showNav: true,
+    showPanel: true,
+    panelPosition: 'right',
+    hierarchySeparator: null,
+    hierarchyRootSeparator: null,
+    sidebarAnimations: true,
+    enableShortcuts: true,
+    isToolshown: true,
+  },
+  viewport: {
+    defaultViewport: 'responsive',
+  },
+});
 
 const req = require.context('../stories', true, /.js$/);
 function loadStories() {

diff --git a/.storybook/optionConfig.js b/.storybook/optionConfig.js
diff --git a/package.json b/package.json
@@ -74,7 +74,6 @@
     "babel-plugin-transform-svg-import-to-string": "^0.0.1",
     "circular-dependency-plugin": "^5.0.2",
     "create-index": "PocketDerm/create-index#master",
-    "emotion": "^10.0.7",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "eslint": "^5.7.0",

diff --git a/src/shared-components/button/__snapshots__/test.js.snap b/src/shared-components/button/__snapshots__/test.js.snap
@@ -233,22 +233,26 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
 <button
   className="emotion-6 emotion-7"
   disabled={true}
+  loading={false}
   onClick={[Function]}
   type="button"
 >
   <div
     className="emotion-2 emotion-3"
+    loading={false}
   >
     <svg />
     <span
       className="emotion-0 emotion-1"
+      loading={false}
     >
       Button Text
     </span>
   </div>
   <div
     className="emotion-4 emotion-5"
     disabled={true}
+    loading={false}
   >
     <div>
       <span />

diff --git a/src/shared-components/button/components/roundButton/__snapshots__/test.js.snap b/src/shared-components/button/components/roundButton/__snapshots__/test.js.snap
@@ -239,13 +239,15 @@ exports[`<RoundButton /> UI snapshots renders with props 1`] = `
   <button
     className="emotion-2 emotion-3"
     disabled={true}
+    loading={false}
     onClick={[Function]}
     type="button"
   >
     <svg />
     <div
       className="emotion-0 emotion-1"
       disabled={true}
+      loading={false}
     >
       <div>
         <span />

diff --git a/src/utils/injectGlobalStyles/index.js b/src/utils/injectGlobalStyles/index.js