Merge branch 'main' into tokens-v2

MetaMask · May 22, 2024 · 3f72760 · 3f72760
2 parents e71ad5d + 5f6674d
commit 3f72760
Show file tree

Hide file tree

Showing 7 changed files with 945 additions and 488 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     // All other stories here
     '../**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -25,12 +26,16 @@ const config: StorybookConfig = {
       },
     },
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: true,
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
+
+  docs: {}
 };
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -22,6 +22,8 @@ const preview: Preview = {
       ],
     },
   },
+
+  tags: ['autodocs']
 };
 
 export default preview;
diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx
@@ -39,7 +39,12 @@ export const CSS: Story = {
       >
         {/* Mapping through each brand color and rendering a ColorSwatch component for it */}
         {Object.values(cssBrandColors).map(({ color, name }) => (
-          <ColorSwatch key={name} color={color} name={name} />
+          <ColorSwatch
+            key={name}
+            color={color}
+            backgroundColor={name}
+            name={name}
+          />
         ))}
       </div>
     );

diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx
@@ -67,7 +67,12 @@ export const CSSLightTheme = {
       >
         {Object.entries(lightThemeColors).map(
           ([name, { color, name: colorName }]) => (
-            <ColorSwatch key={name} color={color} name={colorName} />
+            <ColorSwatch
+              key={name}
+              color={color}
+              backgroundColor={colorName}
+              name={colorName}
+            />
           ),
         )}
       </div>
@@ -99,6 +104,7 @@ export const CSSDarkTheme = {
                 key={name}
                 color={color}
                 name={colorName}
+                backgroundColor={colorName}
                 borderColor="var(--color-border-muted)"
                 textBackgroundColor="var(--color-background-default)"
                 textColor="var(--color-text-default)"

diff --git a/docs/components/ColorSwatch/ColorSwatch.tsx b/docs/components/ColorSwatch/ColorSwatch.tsx
@@ -6,6 +6,10 @@ interface ColorSwatchProps {
    * The color of the swatch
    */
   color?: string;
+  /**
+   * The background color of the swatch defaults to the color
+   */
+  backgroundColor?: string;
   /**
    * The color of text background that contains the name of the color defaults to lightTheme.colors.background.default
    */
@@ -26,6 +30,7 @@ interface ColorSwatchProps {
 
 export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
   color,
+  backgroundColor,
   borderColor = lightTheme.colors.border.muted,
   textBackgroundColor = lightTheme.colors.background.default,
   textColor = lightTheme.colors.text.default,
@@ -36,8 +41,8 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
     <div
       style={{
         height: 120,
-        backgroundColor: color,
-        border: `1px solid ${borderColor}`,
+        backgroundColor: backgroundColor ? backgroundColor : color,
+        border: `2px solid ${borderColor}`,
         display: 'flex',
         flexDirection: 'column-reverse',
         borderRadius: '8px',

diff --git a/package.json b/package.json
@@ -56,21 +56,21 @@
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@chromatic-com/storybook": "^1.3.3",
+    "@chromatic-com/storybook": "^1.4.0",
     "@lavamoat/allow-scripts": "^3.0.4",
     "@lavamoat/preinstall-always-fail": "^2.0.0",
     "@metamask/auto-changelog": "^3.4.3",
     "@metamask/eslint-config": "^12.2.0",
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-vite": "^8.0.9",
-    "@storybook/test": "^8.0.9",
+    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-interactions": "^8.1.2",
+    "@storybook/addon-links": "^8.1.2",
+    "@storybook/blocks": "^8.1.2",
+    "@storybook/react": "^8.1.2",
+    "@storybook/react-vite": "^8.1.2",
+    "@storybook/test": "^8.1.2",
     "@types/babel__core": "^7",
     "@types/jest": "^28.1.6",
     "@types/node": "^18",
@@ -100,7 +100,7 @@
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "sass": "^1.75.0",
-    "storybook": "^8.0.9",
+    "storybook": "^8.1.2",
     "ts-jest": "^28.0.7",
     "ts-node": "^10.7.0",
     "tsup": "^7.2.0",
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,8 @@ const preview: Preview = { @@
           ],
         },
       },
+      tags: ['autodocs']
     };
     export default preview;