Merge branch 'main' into reformat-rgba-colors

primer · Dec 3, 2021 · 1bc4dc4 · 1bc4dc4
2 parents 9d75c52 + 99537d3
commit 1bc4dc4
Show file tree

Hide file tree

Showing 8 changed files with 1,348 additions and 1,141 deletions.
diff --git a/.changeset/long-panthers-provide.md b/.changeset/long-panthers-provide.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix local dev (revert webpack 5.5.0 → 6.0.0)
diff --git a/DEVELOP.md b/DEVELOP.md
@@ -46,7 +46,7 @@ All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and l
 Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic. 
 
 ```sh
-npm storybook
+npm run storybook
 ```
 
 ### The Storybook directory

diff --git a/docs/.storybook/preview.js b/docs/.storybook/preview.js
@@ -97,123 +97,46 @@ export const parameters = {
   viewport: {viewports: customViewports}
 }
 
+const themes = [
+  'light',
+  'light_colorblind',
+  'light_high_contrast',
+  'dark',
+  'dark_dimmed',
+  'dark_high_contrast',
+  'dark_colorblind'
+]
+
 export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Switch themes',
     defaultValue: 'light',
     toolbar: {
       icon: 'circlehollow',
-      items: [
-        'light',
-        'light_colorblind',
-        'light_high_contrast',
-        'dark',
-        'dark_dimmed',
-        'dark_high_contrast',
-        'dark_colorblind',
-        'all'
-      ],
+      items: [...themes, 'all'],
       showName: true
     }
   }
 }
 
 export const decorators = [
   (Story, context) => {
-    if (context.globals.theme === 'all') {
-      return (
-        <div class="theme-wrap">
-          <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-
-          <div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
-            <Story {...context} />
-          </div>
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'light') {
-      return (
-        <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'light_colorblind') {
-      return (
-        <div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'light_high_contrast') {
-      return (
-        <div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark_dimmed') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark_high_contrast') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
-    if (context.globals.theme === 'dark_colorblind') {
-      return (
-        <div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
-          <Story {...context} />
-        </div>
-      )
-    }
-
     return (
-      <div className="story-wrap" id="story">
-        <Story {...context} />
+      <div class="theme-wrap">
+        { themes.map((theme) => {
+            if (context.globals.theme === theme || context.globals.theme === 'all') {
+              return <div
+                id="story"
+                className="story-wrap"
+                data-color-mode={theme.startsWith('dark') ? 'dark' : 'light'}
+                data-light-theme={theme.startsWith('light') ? theme : undefined}
+                data-dark-theme={theme.startsWith('dark') ? theme : undefined}
+              >
+                <Story {...context} />
+              </div>
+            }
+          })}
       </div>
     )
   }

diff --git a/docs/content/utilities/details.md b/docs/content/utilities/details.md
@@ -26,7 +26,9 @@ Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
 ```html live
 <details class="details-overlay details-overlay-dark">
   <summary class="btn">More</summary>
-  <div class="border p-3 mt-2">Hidden text</div>
+  <div class="position-relative color-bg-default rounded p-3 mt-2" style="z-index: 112;">
+    Hidden text
+  </div>
 </details>
 ```
 

diff --git a/docs/package.json b/docs/package.json
@@ -13,17 +13,17 @@
   "dependencies": {
     "@babel/preset-react": "^7.16.0",
     "@koddsson/postcss-sass": "5.0.0",
-    "@primer/components": "31.1.0",
-    "@primer/gatsby-theme-doctocat": "2.0.0",
+    "@primer/components": "32.1.0",
+    "@primer/gatsby-theme-doctocat": "3.0.1",
     "@primer/octicons": "16.1.1",
     "@primer/octicons-react": "16.0.0",
-    "@primer/primitives": "6.1.0",
+    "@primer/primitives": "7.1.1",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.4.0",
     "babel-preset-gatsby": "^2.0.0",
     "chroma-js": "^2.1.2",
     "clsx": "^1.1.1",
-    "core-js": "^3.19.0",
+    "core-js": "^3.19.2",
     "gatsby": "2.32.13",
     "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-sass": "3.2.0",
@@ -49,16 +49,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
-    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-a11y": "6.4.3",
     "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-essentials": "^6.4.3",
+    "@storybook/addon-links": "^6.4.3",
     "@storybook/addon-postcss": "2.0.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "6.3.12",
+    "@storybook/react": "6.4.3",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-loader": "^8.2.3",
     "storybook-addon-designs": "6.2.0",
-    "storybook-color-picker": "2.1.4"
+    "storybook-color-picker": "2.1.5"
   }
 }