Merge pull request #148 from US-CBP/bugfix/storybook-updates-06102024

Bugfix/storybook updates 06102024

packages/web-components/.storybook/main.js

@@ -29,14 +29,14 @@ const config = {
     //getAbsolutePath('@storybook/addon-interactions'), 
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath("@storybook/addon-mdx-gfm"),
+    getAbsolutePath("@storybook/addon-mdx-gfm"),
+    '@chromatic-com/storybook'
   ],
   framework: {
     name: getAbsolutePath('@storybook/web-components-vite'),
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+  docs: {},
   staticDirs: [
     '../dist',
     '../assets'

packages/web-components/.storybook/manager.js

@@ -1,21 +1,8 @@
-// .storybook/manager.js
-
 import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming';
-
-import cbpLogo from '../assets/images/cbp-seal.svg';
-
-const theme =  create({
-  //base: 'light',
-  // Brand assets
-  brandTitle: 'CBP Design System | Web Components',
-  brandImage: cbpLogo,
-  brandTarget: '_self',
-});
 
 addons.setConfig({
-  //theme,
-  theme: themes.dark,
+  theme,
+  //theme: themes.dark,
   toolbar: {
     //zoom: { hidden: true }
   }

packages/web-components/.storybook/preview.js

@@ -65,6 +65,21 @@ const preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        //method: 'alphabetical',
+        order: [
+          'Introduction',
+          'Design Tokens',
+          'About Dark Mode',
+          'Components',
+          'Patterns',
+            [
+              'Page Templates',
+            ]
+        ]
+      }
+    },
     // DEG: Enabling custom viewports seems to be linked to the HTML tab showing generated code instead of source/story code. Disabling custom viewports for further testing.
     viewport: {
       //viewports: CUSTOM_VIEWPORTS,
@@ -109,7 +124,6 @@ export default preview;
 
 
 // Wrap every story with `cbp-app` component, which brings in the high level CSS resets, settings, and variables.
-// DEG: 3/14/2024 - Adding theme=light temporarily until dark mode is implemented properly
 const withWrapper = (story) => {
   //return `<cbp-app theme="light">${story()}</cbp-app>`;
   return `<cbp-app>${story()}</cbp-app>`;

packages/web-components/.storybook/theme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  //base: 'light',
+  brandTitle: 'CBP Design System | Web Components',
+  brandImage: '../assets/images/cbp-seal.svg',
+  brandTarget: '_self',
+});

packages/web-components/CHANGELOG.md

@@ -4,6 +4,12 @@ This CHANGELOG.md tracks the updates to the web components package of the CBP de
 
 The React components are wrappers generated from this package and will share the same changes.
 
+## [unpublished] TBD
+
+* Storybook upgrade and updates.
+* Fixed `cbp-app` so that its dark mode detection is reactive to changes of the user's preferences.
+
+
 ## [0.0.1-develop.10] 06-10-2024
 
 * Implemented dark mode for buttons, links, typography, accordion, drawer, and panel comprised of additional CSS and a `context` property to trigger a specific design contextually and specify whether it inverts or remains constant.

packages/web-components/package.json

@@ -40,26 +40,26 @@
     "@stencil/core": "^4.15.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.2",
+    "@chromatic-com/storybook": "^1.5.0",
     "@custom-elements-manifest/analyzer": "^0.9.4",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.7",
     "@stencil/store": "^2.0.12",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/addon-mdx-gfm": "^8.0.8",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/test": "^8.0.8",
-    "@storybook/web-components": "^8.0.8",
-    "@storybook/web-components-vite": "^8.0.8",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
+    "@storybook/addon-mdx-gfm": "^8.1.6",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/test": "^8.1.6",
+    "@storybook/web-components": "^8.1.6",
+    "@storybook/web-components-vite": "^8.1.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.11",
     "@whitespace/storybook-addon-html": "^6.0.5",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "lit": "^3.1.2",
     "puppeteer": "21.1.1",
-    "storybook": "^8.0.8",
+    "storybook": "^8.1.6",
     "wc-storybook-helpers": "^2.0.1"
   },
   "keywords": [

packages/web-components/src/components/cbp-app/cbp-app.tsx

@@ -24,7 +24,7 @@ export class CbpApp {
   componentDidLoad() {
     const darkMode = window?.matchMedia(`(prefers-color-scheme: dark)`);
     // Only set up the listener if we're using the system default, otherwise, it's being set manually
-    if (this.theme=="system" && darkMode) {
+    if (this.theme == "system") {
       darkMode.addEventListener('change', mql => this.handleThemeChange(mql)); // Add an event listener to the media query
       this.handleThemeChange(darkMode); // Run the theme change handler once on load
     }

packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx

@@ -106,9 +106,9 @@ const UserPreferencesTemplate = ({ position, open, uid, accessibilityText, conte
           id="panelheader"
           context="dark-always"
         >
-          Sidebar Header
+          User Preferences
         </cbp-typography>
-        <p>Sidebar Content</p>
+        <p>Drawer Content</p>
       </cbp-panel>
     </cbp-drawer>
   `;

packages/web-components/src/stories/dark-mode.mdx

@@ -19,7 +19,7 @@ Most web components also support a dark context. Even in "light mode" (via syste
 * dark-inverts
 * dark-always
 
-This supports a number of designs and behaviors. It is not a valid assumption that something with a dark appearance or background in light mode would automatically invert to a light appearance in dark mode. These values support a range of possibilities to meet various design requirements.
+It is not a valid assumption that something with a dark appearance or background in light mode would automatically invert to a light appearance in dark mode. These values support a range of possibilities to meet various design requirements.
 
 The values "light-always" and "dark-always" specify a visual design that does not change based on light or dark mode. However, "light-inverts" (the default value) and "dark-inverts" specify a visual design in light mode that inverts when changing to dark mode.
 

packages/web-components/src/stories/introduction.stories.tsx

@@ -9,10 +9,12 @@ export default {
 const Template = () => {
     return `
     <cbp-app>
-        <img src="assets/images/cbp-seal.svg" height="245" width="245" style={{ display: "block", marginBottom: "2rem", marginLeft: 'auto', marginRight: 'auto' }} />
+        <img src="assets/images/cbp-seal.svg" height="245" width="245" style="margin-bottom: 2rem; margin-inline: auto" />
+
+        <cbp-typography tag="h1" sx='{"text-align":"center","margin-bottom":"1rem"}'>CBP Design System</cbp-typography>
+
+        <cbp-typography tag="h2" sx='{"margin-bottom":"1rem"}'>Work in Progress</cbp-typography>
 
-        <h1 style={{ textAlign: "center" }}>CBP Design System</h1>
-        <h2>Work in Progress</h2>
         <p>
             The CBP Design System (1.0) is still in a stage of **very active development**.
             As such, much of the code base is still somewhat fragile and may break at any time.