Spike: Button with css

.storybook/main.js

@@ -9,6 +9,10 @@ module.exports = {
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-links',
+    {
+      name: 'storybook-css-modules',
+      options: {cssModulesLoaderOptions: {modules: {localIdentName: 'prc_[local]-[hash:base64:5]'}}},
+    },
     {
       name: 'storybook-addon-turbo-build',
       options: {

.storybook/preview.css

@@ -0,0 +1,3 @@
+.storybook-debug {
+  outline: 2px solid tomato;
+}

.storybook/preview.js

@@ -2,6 +2,10 @@ import {addons} from '@storybook/addons'
 import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers'
 import {PrimerBreakpoints} from '../src/utils/layout'
 
+import '@primer/css/dist/primitives.css'
+import '@primer/css/dist/color-modes.css'
+import './preview.css'
+
 export const globalTypes = toolbarTypes
 export const decorators = [withThemeProvider, withSurroundingElements]
 

generated/components.json

@@ -4967,6 +4967,81 @@
         }
       ]
     },
+    "drafts_button": {
+      "id": "drafts_button",
+      "name": "Button",
+      "status": "draft",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-button--default",
+          "code": "() => <Button>Default</Button>"
+        }
+      ],
+      "props": [
+        {
+          "name": "children",
+          "required": true,
+          "type": "React.ReactNode",
+          "description": "The content of the button."
+        },
+        {
+          "name": "variant",
+          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
+          "defaultValue": "'default'",
+          "description": "Change the visual style of the button."
+        },
+        {
+          "name": "size",
+          "type": "| 'small'\n| 'medium'\n| 'large'",
+          "defaultValue": "'medium'"
+        },
+        {
+          "name": "leadingIcon",
+          "type": "React.ComponentType<OcticonProps>",
+          "description": "An icon to display before the button text."
+        },
+        {
+          "name": "trailingIcon",
+          "type": "React.ComponentType<OcticonProps>",
+          "description": "An icon to display after the button text."
+        },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "'button'"
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLButtonElement>"
+        }
+      ],
+      "passthrough": {
+        "element": "button",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
+      },
+      "subcomponents": [
+        {
+          "name": "Button.Counter",
+          "props": [
+            {
+              "name": "children",
+              "required": true,
+              "type": "number",
+              "description": "The counter value."
+            },
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
     "drafts_inline_autocomplete": {
       "id": "drafts_inline_autocomplete",
       "name": "InlineAutocomplete",