mirror of
https://github.com/primer/css.git
synced 2024-12-23 14:13:14 +03:00
f824581f30
* 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
80 lines
3.2 KiB
Plaintext
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"
|
|
}
|
|
}
|