1
1
mirror of https://github.com/primer/css.git synced 2024-12-23 06:01:54 +03:00
css/.vscode/story-template.code-snippets
Katie Langerman f824581f30
Storybook enhancements - prototyping + docs (#1747)
* set up prototyping playground

* colorblock component

* add color picker

* update select to radio

* check focus state shortcut

* move stories from focus pr + add focus control

* add all form elements

* typo

* add toc, fix radio options

* fix dev script

* add focus state as class for theme testing

* fix radio example in playground
2021-11-16 11:46:47 -08:00

80 lines
3.2 KiB
Plaintext

{
"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'],",
" layout: 'padded',",
" argTypes: {",
" booleanExample: {",
" control: {type: 'boolean'},",
" description: 'true/false toggle to controls',",
" table: {",
" category: 'Pick one: CSS, HTML, Interactive'",
" }",
" },",
" radioExample: {",
" options: ['string1', 'string2', 'string3', 'string4'],",
" control: {",
" type: 'inline-radio',",
" },",
" description: 'radio buttons 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, radioExample, stringExample, children}) => (",
" <div",
" // use clsx for multiple classnames",
" className={clsx('defaultClass', radioExample && `radioExample`, 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 {...StoryTemplateName.args} />",
" // </>",
" // )",
"}",
""
],
"description": "Basic component story jsx template"
}
}