Storybook: add Label stories (#1708)

* add label stories * playgrounds * add features * Create dirty-pillows-drop.md Co-authored-by: Jon Rohan <yes@jonrohan.codes>
primer · Oct 28, 2021 · f7c44c3 · f7c44c3
1 parent bc50203
commit f7c44c3
Show file tree

Hide file tree

Showing 10 changed files with 515 additions and 0 deletions.
diff --git a/.changeset/dirty-pillows-drop.md b/.changeset/dirty-pillows-drop.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Storybook: add Label stories
diff --git a/.vscode/story-template.code-snippets b/.vscode/story-template.code-snippets
@@ -0,0 +1,80 @@
+{
+    "story-template": {
+        "prefix": "story-template",
+        "body": [
+            "import React from 'react'",
+            "import clsx from 'clsx'",
+            "// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions",
+            "",
+            "export default {",
+            "    title: 'Components/ComponentName',",
+            "    excludeStories: ['ComponentTemplateName'],",
+            "    argTypes: {",
+            "        booleanExample: {",
+            "            control: { type: 'boolean' },",
+            "            description: 'true/false toggle to controls',",
+            "            table: {",
+            "                category: 'Pick one: CSS, HTML, Interactive'",
+            "            }",
+            "        },",
+            "        selectExample: {",
+            "            options: [0, 1, 2, 3], // iterator",
+            "            mapping: ['string1', 'string2', 'string3', 'string4'], // values",
+            "            control: {",
+            "                type: 'select',",
+            "                labels: ['string1-label', 'string2-label', 'string3-label', 'string4-label'] // public labels",
+            "            },",
+            "            description: 'select menu mapping to strings (example: use for variant class names)',",
+            "            table: {",
+            "                category: 'Pick one: CSS, HTML, Interactive'",
+            "            }",
+            "        },",
+            "        stringExample: {",
+            "            name: 'stringExample',",
+            "            type: 'string',",
+            "            description: 'text box control',",
+            "            table: {",
+            "                category: 'Pick one: CSS, HTML, Interactive'",
+            "            }",
+            "        },",
+            "        children: {",
+            "            description: 'creates a slot for children',",
+            "            table: {",
+            "                category: 'HTML'",
+            "            }",
+            "        },",
+            "    }",
+            "}",
+            "",
+            "// build every component case here in the template (private api)",
+            "export const ComponentTemplateName = ({ booleanExample, selectExample, stringExample, children }) => (",
+            "    <div",
+            "        // use clsx for multiple classnames",
+            "        className={clsx('defaultClass', selectExample && `${selectExample}`, booleanExample && 'defaultClass--modifier')}",
+            "        // use undefined for values that shouldn't be set if false",
+            "        aria-hidden={booleanExample ? 'true' : undefined}",
+            "    >",
+            "        {/* use {children} for wrapper component templates */}",
+            "        <>",
+            "        {stringExample}",
+            "        {children}",
+            "        </>",
+            "    </div>",
+            ")",
+            "",
+            "// create a \"playground\" demo page that may set some defaults and allow story to access component controls",
+            "export const Playground = ComponentTemplateName.bind({})",
+            "Playground.args = {",
+            "    stringExample: 'Default text',",
+            "    booleanExample: false,",
+            "    children: (",
+            "        <>",
+            "            <StoryTemplateName someProp=\"Use props from other stories\" />",
+            "        </>",
+            "    )",
+            "}",
+            ""
+        ],
+        "description": "Basic component story jsx template"
+    }
+}
diff --git a/docs/src/stories/Button.stories.jsx → ...ries/components/Button/Button.stories.jsx b/docs/src/stories/Button.stories.jsx → ...ries/components/Button/Button.stories.jsx
diff --git a/docs/src/stories/components/Label/IssueLabel.stories.jsx b/docs/src/stories/components/Label/IssueLabel.stories.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Label/IssueLabel',
+  excludeStories: ['IssueLabelTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: [
+        'color-bg-accent-emphasis',
+        'color-bg-danger-emphasis',
+        'color-bg-success-emphasis',
+        'color-bg-attention-emphasis'
+      ], // values
+      control: {
+        type: 'select',
+        labels: ['accent', 'danger', 'success', 'attention'] // public labels
+      },
+      description: 'Colors',
+      table: {
+        category: 'CSS'
+      }
+    },
+    size: {
+      options: [0, 1], // iterator
+      mapping: ['', 'IssueLabel--big'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'big'] // public labels
+      },
+      description: 'Size',
+      table: {
+        category: 'CSS'
+      }
+    },
+    text: {
+      name: 'stringExample',
+      type: 'string',
+      description: 'Label text',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+// build every component case here in the template (private api)
+export const IssueLabelTemplate = ({variant, size, text}) => (
+  <span className={clsx('IssueLabel', 'color-fg-on-emphasis', variant && `${variant}`, size && `${size}`)}>{text}</span>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = IssueLabelTemplate.bind({})
+Playground.args = {
+  text: 'bug 🐛',
+  variant: 'color-bg-accent-emphasis'
+}
diff --git a/docs/src/stories/components/Label/Label.stories.jsx b/docs/src/stories/components/Label/Label.stories.jsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Label/Label',
+  excludeStories: ['LabelTemplate'],
+  argTypes: {
+    inline: {
+      control: {type: 'boolean'},
+      description: 'Display label inline',
+      table: {
+        category: 'CSS'
+      }
+    },
+    variant: {
+      options: [0, 1, 2, 3, 4, 5], // iterator
+      mapping: [
+        '',
+        'Label--primary',
+        'Label--secondary',
+        'Label--info',
+        'Label--success',
+        'Label--warning',
+        'Label--danger'
+      ], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger']
+      },
+      description: 'Colors',
+      table: {
+        category: 'HTML'
+      }
+    },
+    size: {
+      options: [0, 1], // iterator
+      mapping: ['', 'Label--large'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'large'] // public labels
+      },
+      description: 'Colors',
+      table: {
+        category: 'CSS'
+      }
+    },
+    text: {
+      name: 'text',
+      type: 'string',
+      description: 'Label text',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+export const LabelTemplate = ({inline, variant, size, text}) => (
+  <span className={clsx('Label', variant && `${variant}`, size && `${size}`, inline && 'Label--inline')}>{text}</span>
+)
+
+export const Playground = LabelTemplate.bind({})
+Playground.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--primary'
+}
diff --git a/docs/src/stories/components/Label/LabelCounter.stories.jsx b/docs/src/stories/components/Label/LabelCounter.stories.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Label/Counter',
+  excludeStories: ['LabelCounterTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2], // iterator
+      mapping: ['', 'Counter--primary', 'Counter--secondary'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'secondary'] // public labels
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    text: {
+      name: 'text',
+      type: 'string',
+      description: 'Label text',
+      table: {
+        category: 'HTML'
+      }
+    },
+    icon: {
+      defaultValue: '',
+      name: 'icon',
+      type: 'string',
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+// build every component case here in the template (private api)
+export const LabelCounterTemplate = ({variant, text, icon}) => (
+  <span className={clsx('Counter', variant && `${variant}`)}>
+    <>
+      {icon && icon}
+      {text}
+    </>
+  </span>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = LabelCounterTemplate.bind({})
+Playground.args = {
+  text: '23',
+  variant: 'Counter--primary'
+}
diff --git a/docs/src/stories/components/Label/LabelDiffstat.stories.jsx b/docs/src/stories/components/Label/LabelDiffstat.stories.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+export default {
+  title: 'Components/Label/Diffstat',
+  excludeStories: ['LabelDiffstatTemplate'],
+  argTypes: {
+    diffValueIntent: {
+      options: [0, 1, 2], // iterator
+      mapping: ['', 'color-fg-success', 'color-fg-danger'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'success', 'danger'] // public labels
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    diffValue: {
+      name: 'diffValue',
+      type: 'string',
+      description: '7',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+// build every component case here in the template (private api)
+export const LabelDiffstatTemplate = ({diffValue, diffValueIntent}) => (
+  <span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions &amp; 3 deletions">
+    {diffValueIntent === 'color-fg-success' && <span class="color-fg-success">+{diffValue}</span>}
+    {diffValueIntent === 'color-fg-danger' && <span class="color-fg-danger">-{diffValue}</span>}
+    {diffValueIntent === '' && diffValue} <span class="diffstat-block-added"></span>
+    <span class="diffstat-block-added"></span>
+    <span class="diffstat-block-deleted"></span>
+    <span class="diffstat-block-deleted"></span>
+    <span class="diffstat-block-neutral"></span>
+  </span>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = LabelDiffstatTemplate.bind({})
+Playground.args = {
+  diffValue: '7',
+  diffValueIntent: ''
+}
diff --git a/docs/src/stories/components/Label/LabelFeatures.stories.jsx b/docs/src/stories/components/Label/LabelFeatures.stories.jsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import {LabelTemplate} from './Label.stories' // import stories for component compositions
+
+export default {
+  title: 'Components/Label/Label/Features'
+}
+
+export const VariantDefault = LabelTemplate.bind({})
+VariantDefault.storyName = '[Variant] Default'
+VariantDefault.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--default'
+}
+
+export const VariantPrimary = LabelTemplate.bind({})
+VariantPrimary.storyName = '[Variant] Primary'
+VariantPrimary.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--primary'
+}
+
+export const VariantInfo = LabelTemplate.bind({})
+VariantInfo.storyName = '[Variant] Info'
+VariantInfo.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--info'
+}
+
+export const VariantSuccess = LabelTemplate.bind({})
+VariantSuccess.storyName = '[Variant] Success'
+VariantSuccess.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--success'
+}
+
+export const VariantWarning = LabelTemplate.bind({})
+VariantWarning.storyName = '[Variant] Warning'
+VariantWarning.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--warning'
+}
+
+export const VariantDanger = LabelTemplate.bind({})
+VariantDanger.storyName = '[Variant] Danger'
+VariantDanger.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--danger'
+}
+
+export const AllVariants = ({}) => (
+  <>
+    <LabelTemplate text="Default" variant="Label--default" />
+    <LabelTemplate text="Primary" variant="Label--primary" />
+    <LabelTemplate text="Info" variant="Label--info" />
+    <LabelTemplate text="Success" variant="Label--success" />
+    <LabelTemplate text="Warning" variant="Label--warning" />
+    <LabelTemplate text="Danger" variant="Label--danger" />
+  </>
+)
+AllVariants.decorators = [
+  Story => (
+    <div style={{display: 'flex', gap: '0.5rem'}}>
+      <Story />
+    </div>
+  )
+]