Merge pull request #1103 from primer/storybook-themeprovider

Wrap Storybook stories in ThemeProvider

Author: T-Hugs

src/stories/Button.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react'
 import {Meta} from '@storybook/react'
+import {ThemeProvider} from 'styled-components'
 
 import {
   BaseStyles,
@@ -11,7 +12,8 @@ import {
   ButtonInvisible,
   ButtonOutline,
   ButtonPrimary,
-  ButtonTableList
+  ButtonTableList,
+  theme
 } from '..'
 import {ButtonStyleProps} from 'styled-system'
 import {ButtonBaseProps} from '../Button/ButtonBase'
@@ -23,9 +25,11 @@ export default {
   decorators: [
     Story => {
       return (
-        <BaseStyles>
-          <Story />
-        </BaseStyles>
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
       )
     }
   ],

src/stories/Portal.stories.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react'
 import {Meta} from '@storybook/react'
+import {ThemeProvider} from 'styled-components'
 
-import {BaseStyles, Box} from '..'
+import {BaseStyles, Box, theme} from '..'
 import Portal, {registerPortalRoot} from '../Portal'
 
 export default {
@@ -14,9 +15,11 @@ export default {
       // story works in isolation.
       registerPortalRoot(undefined)
       return (
-        <BaseStyles>
-          <Story />
-        </BaseStyles>
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
       )
     }
   ]

src/stories/useAnchoredPosition.stories.tsx

@@ -2,9 +2,9 @@
 import React from 'react'
 import {Meta} from '@storybook/react'
 
-import {BaseStyles, Box, ButtonPrimary, Position} from '..'
+import {BaseStyles, Box, ButtonPrimary, Position, theme} from '..'
 import {useAnchoredPosition} from '../hooks/useAnchoredPosition'
-import styled from 'styled-components'
+import styled, {ThemeProvider} from 'styled-components'
 import {get} from '../constants'
 import {AnchorSide} from '../behaviors/anchoredPosition'
 import Portal, {registerPortalRoot} from '../Portal'
@@ -15,7 +15,11 @@ export default {
     // Note: For some reason, if you use <BaseStyles><Story /></BaseStyles>,
     // the component gets unmounted from the root every time a control changes!
     Story => {
-      return <BaseStyles>{Story()}</BaseStyles>
+      return (
+        <ThemeProvider theme={theme}>
+          <BaseStyles>{Story()}</BaseStyles>
+        </ThemeProvider>
+      )
     }
   ],
   argTypes: {
@@ -229,7 +233,7 @@ export const WithPortal = () => {
                 left={position?.left ?? 0}
                 width={250}
                 height={400}
-                sx={{visibility: position ? "visible" : "hidden"}}
+                sx={{visibility: position ? 'visible' : 'hidden'}}
               >
                 An un-constrained overlay!
               </Float>
@@ -239,7 +243,9 @@ export const WithPortal = () => {
       </Nav>
       <Box sx={{flexGrow: 1}} p={3}>
         <h1>The body!</h1>
-        <p><em>Note: The controls below have no effect in this story.</em></p>
+        <p>
+          <em>Note: The controls below have no effect in this story.</em>
+        </p>
       </Box>
     </Main>
   )