fix: storybook dark theme (#1065)

* remove out dated addons * update to latest storybook remove deprecated image config * add global decorator for sfds class name * global decorator removes need for all the sfds divs * personnel data component doesn't need auth context * prefer test to it * update Pagination stories to new format * remove unused import * fix pagination styling in storybook and make it more generic * refactor GovBanner stories to match new style * upgrade storybook again * add theme toggle to storybook * remove unneeded comments * fix lint warning by using new pattern for story * upgrade storybook to 7.1.0 --------- Co-authored-by: Shauna Keating <shauna@truss.works>
USSF-ORBIT · Jul 19, 2023 · c5deda3 · c5deda3
1 parent 109f58d
commit c5deda3
Show file tree

Hide file tree

Showing 54 changed files with 2,217 additions and 2,029 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -7,7 +7,6 @@ module.exports = {
     'storybook-addon-apollo-client',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    'storybook-theme-toggle',
     'storybook-addon-mock',
     'storybook-addon-launchdarkly',
   ],

diff --git a/.storybook/preview.js → .storybook/preview.tsx b/.storybook/preview.js → .storybook/preview.tsx
@@ -1,6 +1,8 @@
+import React from 'react'
+import { Preview } from '@storybook/react'
 import { RouterContext } from 'next/dist/shared/lib/router-context'
-import * as NextImage from 'next/image'
 import { MockedProvider } from '@apollo/client/testing'
+import { ThemeProvider } from 'next-themes'
 
 // happo support
 import 'happo-plugin-storybook/register'
@@ -9,14 +11,6 @@ import 'happo-plugin-storybook/register'
 import 'styles/index.scss'
 import 'initIcons'
 
-// Storybook and next/image component do not play nice together
-// This enables us to use the <Image/> component and still view in Storybook
-const OriginalNextImage = NextImage.default
-Object.defineProperty(NextImage, 'default', {
-  configurable: true,
-  value: (props) => <OriginalNextImage {...props} unoptimized />,
-})
-
 const SFDS_VIEWPORTS = {
   mobile: {
     name: 'Mobile (small)',
@@ -92,47 +86,78 @@ const SFDS_VIEWPORTS = {
   },
 }
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
-  },
-  nextRouter: {
-    Provider: RouterContext.Provider,
-  },
-  options: {
-    storySort: {
-      order: [
-        'Welcome',
-        'USSF Design System',
-        'Global',
-        'Navigation',
-        'Base',
-        'Components',
-        'Layout',
+    nextRouter: {
+      Provider: RouterContext.Provider,
+    },
+    options: {
+      storySort: {
+        order: [
+          'Welcome',
+          'USSF Design System',
+          'Global',
+          'Navigation',
+          'Base',
+          'Components',
+          'Layout',
+        ],
+      },
+    },
+    apolloClient: {
+      MockedProvider,
+    },
+    viewport: {
+      viewports: SFDS_VIEWPORTS,
+    },
+    backgrounds: {
+      default: '#d9e8f6',
+      values: [
+        {
+          name: 'dark',
+          value: '#0f305a',
+        },
+        {
+          name: 'white',
+          value: '#FFFFFF',
+        },
       ],
     },
   },
-  apolloClient: {
-    MockedProvider,
-  },
-  viewport: {
-    viewports: SFDS_VIEWPORTS,
-  },
-  backgrounds: {
-    default: '#d9e8f6',
-    values: [
-      {
-        name: 'dark',
-        value: '#0f305a',
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: ['light', 'dark'],
+        dynamicTitle: true,
       },
-      {
-        name: 'white',
-        value: '#FFFFFF',
-      },
-    ],
+    },
   },
+  decorators: [
+    (Story, context) => (
+      <ThemeProvider
+        forcedTheme={context.globals.theme}
+        enableSystem={false}
+        attribute={'data-color-theme'}>
+        <Story />
+      </ThemeProvider>
+    ),
+    (Story) => (
+      <div className="sfds">
+        <Story />
+      </div>
+    ),
+  ],
 }
+
+export default preview
diff --git a/package.json b/package.json
@@ -99,13 +99,13 @@
     "@graphql-codegen/typescript-operations": "2.5.13",
     "@graphql-codegen/typescript-react-apollo": "3.3.7",
     "@shelf/jest-mongodb": "3.0.2",
-    "@storybook/addon-a11y": "7.0.24",
-    "@storybook/addon-actions": "7.0.24",
-    "@storybook/addon-essentials": "7.0.24",
-    "@storybook/addon-links": "7.0.24",
-    "@storybook/nextjs": "7.0.24",
-    "@storybook/react": "7.0.24",
-    "@storybook/theming": "7.0.24",
+    "@storybook/addon-a11y": "7.1.0",
+    "@storybook/addon-actions": "7.1.0",
+    "@storybook/addon-essentials": "7.1.0",
+    "@storybook/addon-links": "7.1.0",
+    "@storybook/nextjs": "7.1.0",
+    "@storybook/react": "7.1.0",
+    "@storybook/theming": "7.1.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/react-hooks": "8.0.1",
@@ -148,16 +148,14 @@
     "lint-staged": "13.2.2",
     "next-test-api-route-handler": "3.1.8",
     "passport-custom": "1.1.1",
-    "postcss": "8.4.24",
+    "postcss": "8.4.26",
     "prettier": "2.8.8",
-    "sass": "1.63.4",
+    "sass": "1.63.6",
     "sass-loader": "13.3.2",
-    "storybook": "7.0.24",
+    "storybook": "7.1.0",
     "storybook-addon-apollo-client": "5.0.0",
-    "storybook-addon-launchdarkly": "1.0.2",
-    "storybook-addon-mock": "4.0.0",
-    "storybook-css-modules-preset": "1.1.1",
-    "storybook-theme-toggle": "0.1.2",
+    "storybook-addon-launchdarkly": "2.0.0",
+    "storybook-addon-mock": "4.1.0",
     "style-loader": "3.3.3",
     "typescript": "4.9.5",
     "util": "0.12.5"

diff --git a/src/components/AddWidget/AddWidget.stories.tsx b/src/components/AddWidget/AddWidget.stories.tsx
@@ -71,13 +71,6 @@ export default {
     handleSelectCollection: { action: 'Select collection from template' },
     handleCreateCollection: { action: 'Create new collection' },
   },
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 export const DefaultAddWidget = (argTypes: StorybookArgTypes) => (

diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
@@ -5,13 +5,6 @@ import { Alert } from '@trussworks/react-uswds'
 export default {
   title: 'Base/Alert',
   component: Alert,
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 const successMsg = 'Successful alert'

diff --git a/src/components/Announcement/Announcement.stories.tsx b/src/components/Announcement/Announcement.stories.tsx
@@ -5,13 +5,6 @@ import Announcement from './Announcement'
 export default {
   title: 'Components/Announcement',
   component: Announcement,
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 const mockAnnouncements = [

diff --git a/src/components/ApplicationsTable/ApplicationsTable.stories.tsx b/src/components/ApplicationsTable/ApplicationsTable.stories.tsx
@@ -13,13 +13,6 @@ export default {
   argTypes: {
     handleAddToCollection: { action: 'Add to collection' },
   },
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 const exampleBookmarks: CMSBookmark[] = [

diff --git a/src/components/ArticleDateIcon/ArticleDateIcon.stories.tsx b/src/components/ArticleDateIcon/ArticleDateIcon.stories.tsx
@@ -6,13 +6,6 @@ import { ArticleDateIcon } from './ArticleDateIcon'
 export default {
   title: 'Components/ArticleList/ArticleDateIcon',
   component: ArticleDateIcon,
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 const testDate = new Date('May 16 2022')

diff --git a/src/components/ArticleList/ArticleList.module.scss b/src/components/ArticleList/ArticleList.module.scss
@@ -21,31 +21,3 @@
 p.NoArticlesText {
   color: var(--text);
 }
-
-// TODO: Find a new place for these styles to live as the Pagination component could
-// potentially be used somewhere outside of ArticleList in the future.
-.pagination {
-  :global {
-    .usa-pagination__list {
-      > li.usa-pagination__item.usa-pagination__arrow > a {
-        > span {
-          color: var(--link-primary);
-        }
-
-        > svg {
-          color: var(--link-primary);
-        }
-      }
-
-      > li > a.usa-pagination__button {
-        background: transparent;
-        border: 1px solid var(--pagination-page-number-border);
-      }
-
-      > li > a.usa-pagination__button.usa-current {
-        background: var(--pagination-page-number-bg);
-        color: var(--pagination-page-number-active);
-      }
-    }
-  }
-}
diff --git a/src/components/ArticleList/ArticleList.stories.tsx b/src/components/ArticleList/ArticleList.stories.tsx
@@ -8,13 +8,6 @@ import type { ArticleListItemRecord } from 'types'
 export default {
   title: 'Components/ArticleList',
   component: ArticleList,
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 const testArticle: ArticleListItemRecord = {

diff --git a/src/components/ArticleListItem/ArticleListItem.stories.tsx b/src/components/ArticleListItem/ArticleListItem.stories.tsx
@@ -8,13 +8,6 @@ import type { ArticleListItemRecord } from 'types'
 export default {
   title: 'Components/ArticleList/ArticleListItem',
   component: ArticleListItem,
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 const testArticle: ArticleListItemRecord = {

diff --git a/src/components/Bookmark/Bookmark.stories.tsx b/src/components/Bookmark/Bookmark.stories.tsx
@@ -11,13 +11,6 @@ export default {
   title: 'Components/Collections/Bookmark',
   component: Bookmark,
   argTypes: { onDelete: { action: 'Deleted' }, onEdit: { action: 'Edited' } },
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 export const ExampleBookmark = () => <Bookmark href="#">Example</Bookmark>

diff --git a/src/components/BreadcrumbNav/BreadcrumbNav.stories.tsx b/src/components/BreadcrumbNav/BreadcrumbNav.stories.tsx
@@ -6,13 +6,6 @@ import BreadcrumbNav from './BreadcrumbNav'
 export default {
   title: 'Components/BreadcrumbNav',
   component: BreadcrumbNav,
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 export const NewsAndAnnouncements = () => (

diff --git a/src/components/Collection/Collection.stories.tsx b/src/components/Collection/Collection.stories.tsx
@@ -6,13 +6,6 @@ import Bookmark from 'components/Bookmark/Bookmark'
 export default {
   title: 'Components/Collections/Collection',
   component: Collection,
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 export const ExampleCollection = () => (

diff --git a/src/components/CustomCollection/CustomCollection.stories.tsx b/src/components/CustomCollection/CustomCollection.stories.tsx
@@ -22,13 +22,6 @@ export default {
     handleRemoveCollection: { action: 'Remove collection' },
     handleEditCollection: { action: 'Edit collection' },
   },
-  decorators: [
-    (Story) => (
-      <div className="sfds">
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta
 
 export const ExampleCustomCollection = (argTypes: StorybookArgTypes) => (

diff --git a/src/components/CustomModal/CustomModal.stories.tsx b/src/components/CustomModal/CustomModal.stories.tsx
@@ -10,7 +10,7 @@ export default {
     (Story) => {
       return (
         <ModalProvider>
-          <div className="sfds" id="modal-root">
+          <div id="modal-root">
             <Story />
           </div>
         </ModalProvider>

diff --git a/src/components/DropdownFilter/DropdownFilter.stories.tsx b/src/components/DropdownFilter/DropdownFilter.stories.tsx
@@ -5,10 +5,9 @@ import { DropdownFilter } from './DropdownFilter'
 export default {
   title: 'Base/DropdownFilter',
   component: DropdownFilter,
-
   decorators: [
     (Story) => (
-      <div className={`sfds ${styles.toolbar} ${styles.toolbarLeft}`}>
+      <div className={`${styles.toolbar} ${styles.toolbarLeft}`}>
         <Story />
       </div>
     ),