Create global style decorator (#1613)

* Add global styles decorator * Simplify stories, use decorator
gnosis · Nov 12, 2020 · 50cb3e8 · 50cb3e8
1 parent 096c168
commit 50cb3e8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/components/TokenPairSelector/TokenPairSelector.stories.tsx b/src/components/TokenPairSelector/TokenPairSelector.stories.tsx
@@ -3,19 +3,14 @@ import React from 'react'
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Meta } from '@storybook/react/types-6-0'
 
-import GlobalStyles from 'components/layout/GenericLayout/GlobalStyles'
+import { GlobalStyles } from 'storybook/decorators'
 import { RouterDecorator } from 'storybook/RouterDecorator'
 import { TokenPairSelector } from 'components/TokenPairSelector'
 
 export default {
   title: 'component/TokenPairSelector',
   component: TokenPairSelector,
-  decorators: [RouterDecorator],
+  decorators: [RouterDecorator, GlobalStyles],
 } as Meta
 
-export const Normal: React.FC = () => (
-  <div>
-    <GlobalStyles />
-    <TokenPairSelector selectedPair="ETH/USDC" selectLabel="Select Pair" />
-  </div>
-)
+export const Normal: React.FC = () => <TokenPairSelector selectedPair="ETH/USDC" selectLabel="Select Pair" />
diff --git a/src/storybook/decorators.tsx b/src/storybook/decorators.tsx
@@ -5,6 +5,14 @@ import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/typ
 import { ApolloProvider } from '@apollo/client'
 import { ApolloClient, InMemoryCache } from '@apollo/client'
 import { useForm, FormProvider, UseFormOptions } from 'react-hook-form'
+import GlobalStylesCss from 'components/layout/GenericLayout/GlobalStyles'
+
+export const GlobalStyles = (DecoratedStory: () => StoryFnReactReturnType): JSX.Element => (
+  <>
+    <GlobalStylesCss />
+    {DecoratedStory()}
+  </>
+)
 
 export const CenteredAndFramed = (DecoratedStory: () => StoryFnReactReturnType): JSX.Element => (
   <div style={{ textAlign: 'center' }}>