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",