mirror of
https://github.com/primer/css.git
synced 2024-10-03 20:07:58 +03:00
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
This commit is contained in:
Katie Langerman
GitHub
parent
104228f30f
commit
f824581f30
111
.vscode/story-template.code-snippets
vendored
111
.vscode/story-template.code-snippets
vendored
@ -7,71 +7,70 @@
|
||||
"// 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'",
|
||||
" }",
|
||||
" },",
|
||||
" 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, 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>",
|
||||
"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 someProp=\"Use props from other stories\" />",
|
||||
" </>",
|
||||
" )",
|
||||
" stringExample: 'Default text',",
|
||||
" booleanExample: false",
|
||||
" // children: (",
|
||||
" // <>",
|
||||
" // <StoryTemplateName {...StoryTemplateName.args} />",
|
||||
" // </>",
|
||||
" // )",
|
||||
"}",
|
||||
""
|
||||
],
|
||||
|
||||
@ -6,6 +6,7 @@ module.exports = {
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/preset-scss',
|
||||
'@whitespace/storybook-addon-html',
|
||||
'storybook-addon-designs'
|
||||
'storybook-addon-designs',
|
||||
'storybook-color-picker'
|
||||
]
|
||||
}
|
||||
|
||||
10
docs/.storybook/manager-head.html
Normal file
10
docs/.storybook/manager-head.html
Normal file
@ -0,0 +1,10 @@
|
||||
<style>
|
||||
{# storybook ui overrides #}
|
||||
#color-picker {
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.css-10x86lf-Colors {
|
||||
width: 20ch !important;
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
Helvetica Neue, sans-serif;
|
||||
color: var(--color-fg-default);
|
||||
background-color: var(--color-canvas-default);
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.theme-wrap {
|
||||
@ -12,4 +12,18 @@
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.theme-wrap .story-wrap {
|
||||
padding: 1rem;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.sb-main-padded .theme-wrap {
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.sb-main-padded div:not(.theme-wrap) > [data-dark-theme] {
|
||||
margin: -1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import '../../src/docs.scss'
|
||||
import '../../src/index.scss'
|
||||
import '../../src/base/index.scss'
|
||||
import '../src/stories/helpers/storybook-styles.scss'
|
||||
import renderToHTML from '../src/stories/helpers/code-snippet-html-helper'
|
||||
|
||||
const customViewports = {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
|
||||
"build-content": "gatsby build --prefix-paths",
|
||||
"build": "./script/now-build.sh && ./script/build-storybook.sh",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"storybook": "NODE_ENV=test start-storybook -p 6006",
|
||||
"build-storybook": "./script/build-storybook.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -58,6 +58,7 @@
|
||||
"@storybook/react": "6.3.12",
|
||||
"@whitespace/storybook-addon-html": "^5.0.0",
|
||||
"babel-loader": "^8.2.3",
|
||||
"storybook-addon-designs": "6.2.0"
|
||||
"storybook-addon-designs": "6.2.0",
|
||||
"storybook-color-picker": "2.1.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'medium', 'large']
|
||||
},
|
||||
description: 'small (default), medium, large',
|
||||
|
||||
@ -7,31 +7,173 @@ export default {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
|
||||
}
|
||||
},
|
||||
layout: 'padded'
|
||||
},
|
||||
|
||||
excludeStories: ['ButtonTemplate'],
|
||||
argTypes: {
|
||||
variant: {
|
||||
options: [0, 1, 2, 3], // iterator
|
||||
mapping: [null, 'btn-primary', 'btn-outline', 'btn-danger'], // values
|
||||
options: [0, 1, 2, 3, 4, 5, 6, 7], // iterator
|
||||
mapping: [
|
||||
null,
|
||||
'btn-primary',
|
||||
'btn-outline',
|
||||
'btn-danger',
|
||||
'btn-link',
|
||||
'btn-invisible',
|
||||
'btn-with-count',
|
||||
'btn-octicon'
|
||||
], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'primary', 'outline', 'danger']
|
||||
labels: ['default', 'primary', 'outline', 'danger', 'link', 'invisible', 'close', 'with-count', 'icon-only']
|
||||
},
|
||||
defaultValue: ''
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: [null, 'btn-sm', 'btn-large'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'small', 'large']
|
||||
},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
defaultValue: 'Button',
|
||||
type: 'string',
|
||||
name: 'label',
|
||||
description: 'string'
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
fullWidth: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
closeBtn: {
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
leadingVisual: {
|
||||
name: 'leadingVisual',
|
||||
type: 'string',
|
||||
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
trailingVisual: {
|
||||
name: 'trailingVisual',
|
||||
type: 'string',
|
||||
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
trailingAction: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
focusElement: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on one element',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
focusAllElements: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on all elements for viewing in all themes',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const Template = ({label, variant}) => (
|
||||
const focusMethod = function getFocus() {
|
||||
// find the focusable element
|
||||
var button = document.getElementsByTagName('button')[0]
|
||||
// set focus on element
|
||||
button.focus()
|
||||
}
|
||||
|
||||
export const ButtonTemplate = ({
|
||||
label,
|
||||
variant,
|
||||
disabled,
|
||||
size,
|
||||
fullWidth,
|
||||
leadingVisual,
|
||||
trailingVisual,
|
||||
trailingAction,
|
||||
selected,
|
||||
closeBtn,
|
||||
focusElement,
|
||||
focusAllElements
|
||||
}) => (
|
||||
<>
|
||||
<button className={clsx('btn', variant && `${variant}`)}>{label}</button>
|
||||
<button
|
||||
disabled={disabled}
|
||||
className={clsx(
|
||||
'btn',
|
||||
variant && `${variant}`,
|
||||
size && `${size}`,
|
||||
fullWidth && 'btn-block',
|
||||
closeBtn && 'close-button',
|
||||
focusAllElements && 'focus'
|
||||
)}
|
||||
aria-selected={selected}
|
||||
>
|
||||
{leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />}
|
||||
<span>{label}</span>
|
||||
{trailingVisual && <span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />}
|
||||
{trailingAction && <span class="dropdown-caret"></span>}
|
||||
{closeBtn && (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
{focusElement && focusMethod()}
|
||||
</>
|
||||
)
|
||||
|
||||
export const Button = Template.bind({})
|
||||
export const Playground = ButtonTemplate.bind({})
|
||||
Playground.args = {
|
||||
closeBtn: false,
|
||||
focusElement: false,
|
||||
focusAllElements: false
|
||||
}
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ButtonTemplate} from './Button.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/Button/Features'
|
||||
}
|
||||
|
||||
export const LeadingVisual = ButtonTemplate.bind({})
|
||||
LeadingVisual.storyName = 'Leading icon'
|
||||
LeadingVisual.args = {
|
||||
label: 'Open in Desktop',
|
||||
leadingVisual:
|
||||
'<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
|
||||
}
|
||||
|
||||
export const TrailingVisual = ButtonTemplate.bind({})
|
||||
TrailingVisual.storyName = 'Trailing icon'
|
||||
TrailingVisual.args = {
|
||||
label: 'Open in Desktop',
|
||||
trailingVisual:
|
||||
'<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
|
||||
}
|
||||
|
||||
export const Disabled = ButtonTemplate.bind({})
|
||||
Disabled.storyName = 'Disabled'
|
||||
Disabled.args = {
|
||||
label: 'Disabled',
|
||||
disabled: true
|
||||
}
|
||||
|
||||
export const DisabledWithLeadingVisual = ButtonTemplate.bind({})
|
||||
DisabledWithLeadingVisual.storyName = 'Disabled with leading visual'
|
||||
DisabledWithLeadingVisual.args = {
|
||||
label: 'Disabled',
|
||||
disabled: true,
|
||||
leadingVisual:
|
||||
'<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
|
||||
}
|
||||
|
||||
export const Selected = ButtonTemplate.bind({})
|
||||
Selected.storyName = 'Selected'
|
||||
Selected.args = {
|
||||
label: 'Selected',
|
||||
selected: true
|
||||
}
|
||||
|
||||
export const SelectedWithLeadingVisual = ButtonTemplate.bind({})
|
||||
SelectedWithLeadingVisual.storyName = 'Selected with leading visual'
|
||||
SelectedWithLeadingVisual.args = {
|
||||
label: 'Selected',
|
||||
selected: true,
|
||||
leadingVisual:
|
||||
'<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
|
||||
}
|
||||
121
docs/src/stories/components/Forms/Checkbox.stories.jsx
Normal file
121
docs/src/stories/components/Forms/Checkbox.stories.jsx
Normal file
@ -0,0 +1,121 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/Forms/Checkbox',
|
||||
parameters: {
|
||||
layout: 'padded'
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<form>
|
||||
<Story />
|
||||
</form>
|
||||
)
|
||||
],
|
||||
excludeStories: ['CheckboxTemplate'],
|
||||
argTypes: {
|
||||
disabled: {
|
||||
description: 'disabled field',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
note: {
|
||||
type: 'string',
|
||||
name: 'note',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: 'string',
|
||||
name: 'label',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
highlight: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'highlight label',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
checked: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'checkbox state',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
focusElement: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on element',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
focusAllElements: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on all elements for viewing in all themes',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
type: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['checkbox', 'radio'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['checkbox', 'radio'] // public labels
|
||||
},
|
||||
description: 'input type'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const focusMethod = function getFocus() {
|
||||
// find the focusable element
|
||||
var checkbox = document.getElementsByTagName('input')[0]
|
||||
// set focus on element
|
||||
checkbox.focus()
|
||||
}
|
||||
|
||||
export const CheckboxTemplate = ({label, note, highlight, disabled, checked, focusElement, focusAllElements, type}) => (
|
||||
<>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input
|
||||
type={type}
|
||||
checked={checked}
|
||||
aria-describedby="help-text-for-checkbox"
|
||||
disabled={disabled}
|
||||
className={focusAllElements && 'focus'}
|
||||
/>
|
||||
{label && highlight ? <em class="highlight">{label}</em> : label}
|
||||
</label>
|
||||
{note && (
|
||||
<p class="note" id="help-text-for-checkbox">
|
||||
{note}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{focusElement && focusMethod()}
|
||||
</>
|
||||
)
|
||||
|
||||
export const Playground = CheckboxTemplate.bind({})
|
||||
Playground.args = {
|
||||
label: 'Label',
|
||||
focusElement: false,
|
||||
disabled: false,
|
||||
checked: false,
|
||||
highlight: false,
|
||||
note: '',
|
||||
type: 'checkbox',
|
||||
focusAllElements: false
|
||||
}
|
||||
168
docs/src/stories/components/Forms/Input.stories.jsx
Normal file
168
docs/src/stories/components/Forms/Input.stories.jsx
Normal file
@ -0,0 +1,168 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/Forms/Input',
|
||||
parameters: {
|
||||
layout: 'padded'
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<form>
|
||||
<Story />
|
||||
</form>
|
||||
)
|
||||
],
|
||||
excludeStories: ['InputTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: [null, 'input-sm', 'input-lg'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'small', 'large']
|
||||
},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
block: {
|
||||
description: 'full width',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
monospace: {
|
||||
description: 'monospace text',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
description: 'change input background to light gray',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
description: 'disabled field',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
hideWebKit: {
|
||||
description: 'hide WebKit autofill icon',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: 'string',
|
||||
name: 'placeholder',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: 'string',
|
||||
name: 'label',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
type: {
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
description: 'type',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
id: {
|
||||
name: 'id',
|
||||
type: 'string',
|
||||
description: 'id',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
focusElement: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on element',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
focusAllElements: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on all elements for viewing in all themes',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const focusMethod = function getFocus() {
|
||||
// find the focusable element
|
||||
var input = document.getElementsByTagName('input')[0]
|
||||
// set focus on element
|
||||
input.focus()
|
||||
}
|
||||
|
||||
export const InputTemplate = ({
|
||||
label,
|
||||
type,
|
||||
id,
|
||||
size,
|
||||
block,
|
||||
placeholder,
|
||||
contrast,
|
||||
disabled,
|
||||
hideWebKit,
|
||||
monospace,
|
||||
focusElement,
|
||||
focusAllElements
|
||||
}) => (
|
||||
<>
|
||||
<label for={id}>{label}</label>
|
||||
<input
|
||||
className={clsx(
|
||||
'form-control',
|
||||
size && `${size}`,
|
||||
block && 'input-block',
|
||||
contrast && 'input-contrast',
|
||||
hideWebKit && 'input-hide-webkit-autofill',
|
||||
monospace && 'input-monospace',
|
||||
focusAllElements && 'focus'
|
||||
)}
|
||||
type={type}
|
||||
id={id}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{focusElement && focusMethod()}
|
||||
</>
|
||||
)
|
||||
|
||||
export const Playground = InputTemplate.bind({})
|
||||
Playground.args = {
|
||||
type: 'email',
|
||||
id: 'some-id',
|
||||
placeholder: 'Email address',
|
||||
label: 'Enter email address',
|
||||
block: false,
|
||||
hideWebKit: false,
|
||||
monospace: false,
|
||||
contrast: false,
|
||||
disabled: false,
|
||||
focusElement: false,
|
||||
focusAllElements: false
|
||||
}
|
||||
29
docs/src/stories/components/Forms/Radio.stories.jsx
Normal file
29
docs/src/stories/components/Forms/Radio.stories.jsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {CheckboxTemplate} from './Checkbox.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/Forms/Radio',
|
||||
parameters: {
|
||||
layout: 'padded'
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<form>
|
||||
<Story />
|
||||
</form>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const Playground = CheckboxTemplate.bind({})
|
||||
Playground.args = {
|
||||
label: 'Label',
|
||||
focusElement: false,
|
||||
disabled: false,
|
||||
checked: false,
|
||||
highlight: false,
|
||||
note: '',
|
||||
type: 'radio',
|
||||
focusAllElements: false
|
||||
}
|
||||
112
docs/src/stories/components/Forms/Select.stories.jsx
Normal file
112
docs/src/stories/components/Forms/Select.stories.jsx
Normal file
@ -0,0 +1,112 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/Forms/Select',
|
||||
parameters: {
|
||||
layout: 'padded'
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<form>
|
||||
<Story />
|
||||
</form>
|
||||
)
|
||||
],
|
||||
excludeStories: ['SelectTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: [null, 'select-sm'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'small']
|
||||
},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
description: 'disabled field',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: 'string',
|
||||
name: 'placeholder',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: 'string',
|
||||
name: 'label',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
id: {
|
||||
name: 'id',
|
||||
type: 'string',
|
||||
description: 'id',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
focusElement: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on element',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
focusAllElements: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on all elements for viewing in all themes',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const focusMethod = function getFocus() {
|
||||
// find the focusable element
|
||||
var select = document.getElementsByTagName('select')[0]
|
||||
// set focus on element
|
||||
select.focus()
|
||||
}
|
||||
|
||||
export const SelectTemplate = ({label, id, size, placeholder, disabled, focusElement, focusAllElements}) => (
|
||||
<>
|
||||
<label for={id}>{label}</label>
|
||||
<select
|
||||
className={clsx('form-select', size && `${size}`, focusAllElements && 'focus')}
|
||||
id={id}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
>
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
{focusElement && focusMethod()}
|
||||
</>
|
||||
)
|
||||
|
||||
export const Playground = SelectTemplate.bind({})
|
||||
Playground.args = {
|
||||
id: 'some-id',
|
||||
placeholder: 'Select',
|
||||
label: 'Select one',
|
||||
focusElement: false,
|
||||
focusAllElements: false
|
||||
}
|
||||
154
docs/src/stories/components/Forms/Textarea.stories.jsx
Normal file
154
docs/src/stories/components/Forms/Textarea.stories.jsx
Normal file
@ -0,0 +1,154 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/Forms/Textarea',
|
||||
parameters: {
|
||||
layout: 'padded'
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<form>
|
||||
<Story />
|
||||
</form>
|
||||
)
|
||||
],
|
||||
excludeStories: ['TextareaTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: [null, 'input-sm', 'input-lg'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'small', 'large']
|
||||
},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
block: {
|
||||
description: 'full width',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
description: 'change input background to light gray',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
description: 'disabled field',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
hideWebKit: {
|
||||
description: 'hude WebKit autofill icon',
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: 'string',
|
||||
name: 'placeholder',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: 'string',
|
||||
name: 'label',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
type: {
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
description: 'type',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
id: {
|
||||
name: 'id',
|
||||
type: 'string',
|
||||
description: 'id',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
focusElement: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on element',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
focusAllElements: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on all elements for viewing in all themes',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const focusMethod = function getFocus() {
|
||||
// find the focusable element
|
||||
var textarea = document.getElementsByTagName('textarea')[0]
|
||||
// set focus on element
|
||||
textarea.focus()
|
||||
}
|
||||
|
||||
export const TextareaTemplate = ({
|
||||
label,
|
||||
type,
|
||||
id,
|
||||
size,
|
||||
block,
|
||||
placeholder,
|
||||
contrast,
|
||||
disabled,
|
||||
hideWebKit,
|
||||
focusElement,
|
||||
focusAllElements
|
||||
}) => (
|
||||
<>
|
||||
<label for={id}>{label}</label>
|
||||
<textarea
|
||||
className={clsx(
|
||||
'form-control',
|
||||
size && `${size}`,
|
||||
block && 'input-block',
|
||||
contrast && 'input-contrast',
|
||||
hideWebKit && 'input-hide-webkit-autofill',
|
||||
focusAllElements && 'focus'
|
||||
)}
|
||||
type={type}
|
||||
id={id}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{focusElement && focusMethod()}
|
||||
</>
|
||||
)
|
||||
|
||||
export const Playground = TextareaTemplate.bind({})
|
||||
Playground.args = {
|
||||
type: 'email',
|
||||
id: 'some-id',
|
||||
placeholder: 'Email address',
|
||||
label: 'Enter email address',
|
||||
focusElement: false,
|
||||
focusAllElements: false
|
||||
}
|
||||
88
docs/src/stories/components/Link/Link.stories.jsx
Normal file
88
docs/src/stories/components/Link/Link.stories.jsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/Link',
|
||||
parameters: {
|
||||
layout: 'padded'
|
||||
},
|
||||
|
||||
excludeStories: ['LinkTemplate'],
|
||||
argTypes: {
|
||||
variant: {
|
||||
options: [0, 1, 2, 3, 4], // iterator
|
||||
mapping: [null, 'Link--primary', 'Link--secondary', 'Link--muted', 'Link--onHover'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'primary', 'secondar', 'muted', 'onHover', 'invisible', 'close', 'with-count']
|
||||
},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
noUnderline: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: 'string',
|
||||
name: 'label',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
href: {
|
||||
name: 'href',
|
||||
type: 'string',
|
||||
description: 'url',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
focusElement: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on element',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
focusAllElements: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on all elements for viewing in all themes',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const focusMethod = function getFocus() {
|
||||
// find the focusable element
|
||||
var link = document.getElementsByTagName('a')[0]
|
||||
// set focus on element
|
||||
link.focus()
|
||||
}
|
||||
|
||||
export const LinkTemplate = ({label, variant, href, noUnderline, focusElement, focusAllElements}) => (
|
||||
<>
|
||||
<a
|
||||
href={href}
|
||||
className={clsx(variant && `${variant}`, noUnderline && 'no-underline', focusAllElements && 'focus')}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
{focusElement && focusMethod()}
|
||||
</>
|
||||
)
|
||||
|
||||
export const Playground = LinkTemplate.bind({})
|
||||
Playground.args = {
|
||||
label: 'Link label',
|
||||
href: '/',
|
||||
focusElement: false,
|
||||
focusAllElements: false
|
||||
}
|
||||
23
docs/src/stories/helpers/ColorBlock.jsx
Normal file
23
docs/src/stories/helpers/ColorBlock.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
const ColorBlock = ({backgroundColor, showValueLabel}) => {
|
||||
return (
|
||||
<div className="colorBlock">
|
||||
<div className="colorBlockItem" style={{backgroundColor: backgroundColor}}></div>
|
||||
{showValueLabel && <div>{backgroundColor}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
ColorBlock.propTypes = {
|
||||
backgroundColor: PropTypes.string,
|
||||
showValueLabel: PropTypes.bool
|
||||
}
|
||||
|
||||
ColorBlock.defaultProps = {
|
||||
backgroundColor: null,
|
||||
showValueLabel: false
|
||||
}
|
||||
|
||||
export default ColorBlock
|
||||
21
docs/src/stories/helpers/storybook-styles.scss
Normal file
21
docs/src/stories/helpers/storybook-styles.scss
Normal file
@ -0,0 +1,21 @@
|
||||
// color blocks
|
||||
|
||||
.colorBlockWrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.colorBlockItem {
|
||||
aspect-ratio: 1/1;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.toc {
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
li {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
78
docs/src/stories/playground/ColorPlayground.stories.jsx
Normal file
78
docs/src/stories/playground/ColorPlayground.stories.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import ColorBlock from '../helpers/ColorBlock'
|
||||
import DarkColorblind from '@primer/primitives/dist/json/colors/dark_colorblind.json'
|
||||
import DarkDimmed from '@primer/primitives/dist/json/colors/dark_dimmed.json'
|
||||
import DarkHighContrast from '@primer/primitives/dist/json/colors/dark_high_contrast.json'
|
||||
import Dark from '@primer/primitives/dist/json/colors/dark.json'
|
||||
import Light from '@primer/primitives/dist/json/colors/light.json'
|
||||
import LightColorblind from '@primer/primitives/dist/json/colors/light_colorblind.json'
|
||||
|
||||
/*
|
||||
* Welcome to the Primer CSS Playground!
|
||||
|
||||
* Use the code snippets from [prototyping guide](./Prototyping.stories.mdx) for setting up controls and conditional logic
|
||||
|
||||
* Uncomment any code that you need, and feel free to delete whatever gets in your way
|
||||
|
||||
* argTypes are optional for prototyping
|
||||
*/
|
||||
|
||||
export default {
|
||||
title: 'Prototypes/Color',
|
||||
// layout: 'padded', // add padding around frame
|
||||
layout: 'fullwidth',
|
||||
excludeStories: ['ColorPlaygroundTemplate'],
|
||||
// optional argTypes
|
||||
argTypes: {
|
||||
backgroundColor: {
|
||||
name: 'color',
|
||||
control: 'color',
|
||||
description: 'use with an inline style tag to access a colorpicker control'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const ColorPlaygroundTemplate = ({backgroundColor}) => {
|
||||
return (
|
||||
<div className="colorBlockWrap">
|
||||
<ColorBlock backgroundColor={backgroundColor} showValueLabel />
|
||||
<ColorBlock backgroundColor="var(--color-fg-default)" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Color = ColorPlaygroundTemplate.bind({})
|
||||
Color.args = {
|
||||
backgroundColor: '#000000'
|
||||
}
|
||||
Color.parameters = {
|
||||
colorPalettes: {
|
||||
palettes: [
|
||||
{
|
||||
name: 'dark_colorblind',
|
||||
palette: DarkColorblind
|
||||
},
|
||||
{
|
||||
name: 'dark_dimmed',
|
||||
palette: DarkDimmed
|
||||
},
|
||||
{
|
||||
name: 'dark_high_contrast',
|
||||
palette: DarkHighContrast
|
||||
},
|
||||
{
|
||||
name: 'dark',
|
||||
palette: Dark
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
palette: Light
|
||||
},
|
||||
{
|
||||
name: 'light_colorblind',
|
||||
palette: LightColorblind
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
111
docs/src/stories/playground/Playground.stories.jsx
Normal file
111
docs/src/stories/playground/Playground.stories.jsx
Normal file
@ -0,0 +1,111 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import DarkColorblind from '@primer/primitives/dist/json/colors/dark_colorblind.json'
|
||||
import DarkDimmed from '@primer/primitives/dist/json/colors/dark_dimmed.json'
|
||||
import DarkHighContrast from '@primer/primitives/dist/json/colors/dark_high_contrast.json'
|
||||
import Dark from '@primer/primitives/dist/json/colors/dark.json'
|
||||
import Light from '@primer/primitives/dist/json/colors/light.json'
|
||||
import LightColorblind from '@primer/primitives/dist/json/colors/light_colorblind.json'
|
||||
// import useToggle from '../helpers/useToggle.jsx'
|
||||
// import ColorBlock from '../helpers/ColorBlock'
|
||||
// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions
|
||||
|
||||
/*
|
||||
* Welcome to the Primer CSS Playground!
|
||||
|
||||
* Use the code snippets from [prototyping guide](./Prototyping.stories.mdx) for setting up controls and conditional logic
|
||||
|
||||
* Uncomment any code that you need, and feel free to delete whatever gets in your way
|
||||
|
||||
* argTypes are optional for prototyping
|
||||
*/
|
||||
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
// layout: 'padded', // add padding around frame
|
||||
layout: 'fullwidth',
|
||||
excludeStories: ['PlaygroundTemplate'],
|
||||
|
||||
// optional argType examples below
|
||||
argTypes: {
|
||||
booleanExample: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'true/false toggle to controls'
|
||||
},
|
||||
radioExample: {
|
||||
options: ['string1', 'string2', 'string3', 'string4'],
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'radio buttons mapping to strings (example: use for variant class names)'
|
||||
},
|
||||
stringExample: {
|
||||
name: 'stringExample',
|
||||
type: 'string',
|
||||
description: 'text box control'
|
||||
},
|
||||
slot: {
|
||||
description: 'creates a slot for children'
|
||||
},
|
||||
backgroundColor: {
|
||||
name: 'color',
|
||||
control: 'color',
|
||||
description: 'use with an inline style tag to access a colorpicker control'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Prototype within PlaygroundTemplate
|
||||
// delete argTypes between ({ here }) if not using
|
||||
export const PlaygroundTemplate = ({booleanExample, radioExample, stringExample, slot, backgroundColor}) => {
|
||||
return (
|
||||
<>
|
||||
<div className="example">Your prototype here!</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const Playground = PlaygroundTemplate.bind({})
|
||||
// Set default values for Playground story here
|
||||
Playground.args = {
|
||||
// backgroundColor: ''
|
||||
// stringExample: 'Default text',
|
||||
// booleanExample: false
|
||||
// example: how to use args to set slot content
|
||||
// slot: (
|
||||
// <>
|
||||
// <StoryTemplateName {...StoryTemplateName.args} />
|
||||
// </>
|
||||
// )
|
||||
}
|
||||
// access color primitives from the paintbrush icon in the toolbar
|
||||
Playground.parameters = {
|
||||
colorPalettes: {
|
||||
palettes: [
|
||||
{
|
||||
name: 'dark_colorblind',
|
||||
palette: DarkColorblind
|
||||
},
|
||||
{
|
||||
name: 'dark_dimmed',
|
||||
palette: DarkDimmed
|
||||
},
|
||||
{
|
||||
name: 'dark_high_contrast',
|
||||
palette: DarkHighContrast
|
||||
},
|
||||
{
|
||||
name: 'dark',
|
||||
palette: Dark
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
palette: Light
|
||||
},
|
||||
{
|
||||
name: 'light_colorblind',
|
||||
palette: LightColorblind
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
392
docs/src/stories/playground/Prototyping.stories.mdx
Normal file
392
docs/src/stories/playground/Prototyping.stories.mdx
Normal file
@ -0,0 +1,392 @@
|
||||
import {Meta} from '@storybook/addon-docs'
|
||||
|
||||
<Meta title="Prototypes/Prototyping guide" />
|
||||
|
||||
# Primer CSS Playground
|
||||
|
||||
The Playground file contains an empty story configured to promote quick design prototyping with Primer CSS. It can be used with or without controls/args, and there are no rules! Work directly in the Playground file for temporary drafting and collaborating. If what you're building is more permanant, create a folder under Components or Patterns and move your work there.
|
||||
|
||||
Use this guide as a reference for code snippets, Storybook controls, and configuring conditional logic for interactive prototypes
|
||||
|
||||
### On this page
|
||||
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="#css-class-syntax">CSS class syntax</a>
|
||||
</li>
|
||||
<li><a href="#importing-other-stories">Importing other stories</a></li>
|
||||
<li><a href="#boolean-truefalse">argType: boolean (true/false)</a></li>
|
||||
|
||||
<li>
|
||||
<a href="#execute-function-if-boolean-is-true">argType: boolean with JS function</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#radio-options">argType: radio options (variants)</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#string">argType: string (labels, ids)</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#slots">argType: slot (child component)</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#collapseexpand">interactive: collapse/expand</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#openclose">interactive: open/close</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#html-attribute">interactive: HTML attribute (disabled, checked)</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#css-class">interactive: CSS class (animation)</a></li>
|
||||
<li><a href="#working-with-color">Working with color</a></li>
|
||||
</ul>
|
||||
|
||||
### CSS class syntax
|
||||
|
||||
```jsx
|
||||
// Ways to combine multiple CSS classes
|
||||
// simple Primer classes
|
||||
<div class="btn btn-primary"></div>
|
||||
|
||||
// React/jsx syntax
|
||||
<div className={clsx('btn', 'btn-primary')}></div>
|
||||
|
||||
// conditionally add arg string as css class
|
||||
<div className={clsx('btn', radioExample && `${radioExample}`)}></div>
|
||||
|
||||
// conditionally set css class if arg is true/false (use !booleanExample for false)
|
||||
<div className={clsx('btn', booleanExample && 'someClass')}></div>
|
||||
```
|
||||
|
||||
### Importing other stories
|
||||
|
||||
```jsx
|
||||
import {StoryTemplateName} from './OtherStoryFile.stories'
|
||||
|
||||
// import existing args from story
|
||||
<StoryTemplateName {...StoryTemplateName.args} />
|
||||
|
||||
// optional: set new args
|
||||
<StoryTemplateName someProp='My override' />
|
||||
```
|
||||
|
||||
### Conditional logic using Storybook controls
|
||||
|
||||
Storybook controls can be used to mock interaction, state, and variants in a prototype. These are optional for prototyping, but can come in handy if you need a way to toggle state without writing custom javascript.
|
||||
|
||||
The following examples show each Storybook argType available and a few ways to use them.
|
||||
|
||||
#### Boolean (true/false)
|
||||
|
||||
```jsx
|
||||
// YourStory.stories.jsx
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
argTypes: {
|
||||
booleanExample: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'true/false toggle to controls'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const PlaygroundTemplate = ({booleanExample}) => {
|
||||
return (
|
||||
// render markup if true or !false
|
||||
{booleanExample && <div></div>}
|
||||
{!booleanExample && <div></div>}
|
||||
|
||||
// render css class 'true-class' if true else 'false-class'
|
||||
// can also be undefined if false
|
||||
<div className={booleanExample ? 'true-class' : 'false-class'}></div>
|
||||
<div className={booleanExample ? 'true-class' : undefined}></div>
|
||||
|
||||
// set html attribute
|
||||
<div hidden={booleanExample ? true : undefined}></div>
|
||||
<div aria-expanded={booleanExample ? true : false}></div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Execute function if boolean is true
|
||||
|
||||
```jsx
|
||||
// YourStory.stories.jsx
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
argTypes: {
|
||||
focusElement: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'set focus on element',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// only one element can be focused at a time
|
||||
const focusMethod = function getFocus() {
|
||||
// find the focusable element
|
||||
var button = document.getElementsByTagName('button')[0]
|
||||
// set focus on element
|
||||
button.focus()
|
||||
}
|
||||
|
||||
export const PlaygroundTemplate = ({focusElement}) => {
|
||||
return (
|
||||
<>
|
||||
<button class="btn">Button</button>
|
||||
{focusElement && focusMethod()}
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### Radio options
|
||||
|
||||
`inline-radio` type control is great for setting CSS class variants on a component when multiple class options exist.
|
||||
|
||||
```jsx
|
||||
// YourStory.stories.jsx
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
argTypes: {
|
||||
radioExample: {
|
||||
options: ['string1', 'string2', 'string3', 'string4'],
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'radio buttons mapping to strings (example: use for variant class names)'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const PlaygroundTemplate = ({radioExample}) => {
|
||||
return (
|
||||
// render css class from options
|
||||
<div className={clsx(radioExample && `${radioExample}`)}></div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### String
|
||||
|
||||
```jsx
|
||||
// YourStory.stories.jsx
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
argTypes: {
|
||||
stringExample: {
|
||||
name: 'stringExample',
|
||||
type: 'string',
|
||||
description: 'text box control'
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const PlaygroundTemplate = ({stringExample}) => {
|
||||
return (
|
||||
// text
|
||||
<p>{stringExample}</p>
|
||||
|
||||
// id
|
||||
<div id={stringExample}></div>
|
||||
|
||||
// octicon container
|
||||
<span dangerouslySetInnerHTML={{__html: stringExample}} />
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### Slots
|
||||
|
||||
```jsx
|
||||
// YourStory.stories.jsx
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
argTypes: {
|
||||
slot: {
|
||||
description: 'creates a slot for children'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const PlaygroundTemplate = ({slot}) => {
|
||||
return (
|
||||
// creates a slot for markup or other components
|
||||
<p>{slot}</p>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Interactive prototyping
|
||||
|
||||
Sometimes you may want to prototype interations without relying on Storybook controls. One example of this is rendering a `button` that toggles an overlay to open. You can achieve this with a `boolean` control, but in this case you want to be able to click the button in the prototype (just like an interactive prototype in Figma)
|
||||
|
||||
#### Collapse/expand
|
||||
|
||||
```jsx
|
||||
// import the useToggle React hook
|
||||
import useToggle from '../helpers/useToggle.jsx'
|
||||
|
||||
export const PlaygroundTemplate = ({}) => {
|
||||
const [isCollapsed, itemIsCollapsed] = useToggle()
|
||||
return (
|
||||
<>
|
||||
<button onClick={itemIsCollapsed} class="btn d-block mb-2">
|
||||
Toggle collapse
|
||||
</button>
|
||||
<div aria-expanded={isCollapsed ? 'true' : 'false'} class={isCollapsed ? 'p-4 color-bg-accent' : undefined}></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### Open/close
|
||||
|
||||
```jsx
|
||||
// import the useToggle React hook
|
||||
import useToggle from '../helpers/useToggle.jsx'
|
||||
|
||||
export const PlaygroundTemplate = ({}) => {
|
||||
const [isOpen, itemisOpen] = useToggle()
|
||||
return (
|
||||
<>
|
||||
<details class="details-overlay" onClick={isOpen} open={itemisOpen}>
|
||||
<summary class="btn">More</summary>
|
||||
<div class="border p-3 mt-2">Hidden text</div>
|
||||
</details>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### HTML attribute
|
||||
|
||||
Toggle any HTML attribute, like `aria-etc`, `checked`, `hidden`, etc.
|
||||
|
||||
```jsx
|
||||
// import the useToggle React hook
|
||||
import useToggle from '../helpers/useToggle.jsx'
|
||||
|
||||
export const PlaygroundTemplate = ({}) => {
|
||||
const [isDisabled, itemisDisabled] = useToggle()
|
||||
return (
|
||||
<>
|
||||
<button onClick={itemisDisabled} class="btn d-block mb-2">
|
||||
Toggle
|
||||
</button>
|
||||
<button disabled={isDisabled}>{isDisabled ? 'disabled' : 'button'}</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS class
|
||||
|
||||
Toggle any CSS class to show interaction and/or animation
|
||||
|
||||
```jsx
|
||||
// import the useToggle React hook
|
||||
import useToggle from '../helpers/useToggle.jsx'
|
||||
|
||||
export const PlaygroundTemplate = ({}) => {
|
||||
const [isRotating, itemisRotating] = useToggle()
|
||||
return (
|
||||
<>
|
||||
<button onClick={itemisRotating} class="btn d-block mb-2">
|
||||
Toggle
|
||||
</button>
|
||||
<svg
|
||||
className={isRotating ? 'anim-rotate' : undefined}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009c.103.118.22.222.35.31.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371.13-.088.247-.192.35-.31l.007-.008a.75.75 0 111.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.984 1.984 0 01-.184.213c-.16.166-.338.316-.53.445-.63.418-1.37.638-2.127.629-.946 0-1.652-.308-2.126-.63a3.32 3.32 0 01-.715-.657l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044h.001z"
|
||||
></path>
|
||||
</svg>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Working with color
|
||||
|
||||
Stories have access to all distributed colors from Primer Primitives. Here are some ways you might like to utilize Storybook for testing and prototyping.
|
||||
|
||||
#### View all themes
|
||||
|
||||
In the Theme toolbar menu, selecting "all" will render the story in every theme. This gives you a quick overview of how color primitives interact in each theme, and is especially helpful for checking contrast ratios.
|
||||
|
||||
#### Access the Storybook colorpicker
|
||||
|
||||
Storybook includes a colorpicker control that may be useful for tweaking existing colors or prototyping something totally new.
|
||||
|
||||
By setting the `backgroundColor`, the component also has access to the Primer Primitives color picker. Open the toolbar menu by clicking the paintbrush, and an option to replace `backgroundColor` should show up. From there, select a primitive from a given theme.
|
||||
|
||||
```jsx
|
||||
// YourStory.stories.jsx
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
argTypes: {
|
||||
backgroundColor: {
|
||||
name: 'color',
|
||||
control: 'color',
|
||||
description: 'use with an inline style tag to access a colorpicker control'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const PlaygroundTemplate = ({backgroundColor}) => {
|
||||
return <div className="colorBlockItem" style={{backgroundColor: backgroundColor}}></div>
|
||||
}
|
||||
```
|
||||
|
||||
#### ColorBlock component
|
||||
|
||||
`ColorBlock` is a simple helper component that renders a square, intended to be used for quickly showing a block of color.
|
||||
|
||||
```jsx
|
||||
// YourStory.stories.jsx
|
||||
import ColorBlock from '../helpers/ColorBlock'
|
||||
|
||||
export default {
|
||||
title: 'Prototypes/Playground',
|
||||
argTypes: {
|
||||
// optional arg
|
||||
backgroundColor: {
|
||||
name: 'color',
|
||||
control: 'color',
|
||||
description: 'use with an inline style tag to access a colorpicker control'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const PlaygroundTemplate = ({backgroundColor}) => {
|
||||
return (
|
||||
<div className="colorBlockWrap">
|
||||
// access the color picker + display the hex value as a label
|
||||
<ColorBlock backgroundColor={backgroundColor} showValueLabel />
|
||||
// pass in a primitive, hex value, etc.
|
||||
<ColorBlock backgroundColor="var(--color-marketing-icon-primary)" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### Color Playground
|
||||
|
||||
If you'e just working with color, Color Playground is a quick start template for manipulating `ColorBlock`. Repeat `<ColorBlock />` as many times as you need to test combinations.
|
||||
215
docs/yarn.lock
215
docs/yarn.lock
@ -9,6 +9,22 @@
|
||||
dependencies:
|
||||
tslib "~2.0.1"
|
||||
|
||||
"@babel/cli@^7.14.5":
|
||||
version "7.16.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.16.0.tgz#a729b7a48eb80b49f48a339529fc4129fd7bcef3"
|
||||
integrity sha512-WLrM42vKX/4atIoQB+eb0ovUof53UUvecb4qGjU2PDDWRiZr50ZpiV8NpcLo7iSxeGYrRG0Mqembsa+UrTAV6Q==
|
||||
dependencies:
|
||||
commander "^4.0.1"
|
||||
convert-source-map "^1.1.0"
|
||||
fs-readdir-recursive "^1.1.0"
|
||||
glob "^7.0.0"
|
||||
make-dir "^2.1.0"
|
||||
slash "^2.0.0"
|
||||
source-map "^0.5.0"
|
||||
optionalDependencies:
|
||||
"@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
|
||||
chokidar "^3.4.0"
|
||||
|
||||
"@babel/code-frame@7.10.4":
|
||||
version "7.10.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
|
||||
@ -1139,6 +1155,13 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.13.10":
|
||||
version "7.16.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
|
||||
integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/standalone@^7.12.6":
|
||||
version "7.15.8"
|
||||
resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.15.8.tgz#3cb40b81892a702968a3e0bba2bdd1115f034876"
|
||||
@ -1214,6 +1237,17 @@
|
||||
"@emotion/utils" "0.11.3"
|
||||
"@emotion/weak-memoize" "0.2.5"
|
||||
|
||||
"@emotion/cache@^11.5.0":
|
||||
version "11.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.5.0.tgz#a5eb78cbef8163939ee345e3ddf0af217b845e62"
|
||||
integrity sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.7.4"
|
||||
"@emotion/sheet" "^1.0.3"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
"@emotion/weak-memoize" "^0.2.5"
|
||||
stylis "^4.0.10"
|
||||
|
||||
"@emotion/core@^10.1.1":
|
||||
version "10.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
|
||||
@ -1235,7 +1269,7 @@
|
||||
"@emotion/utils" "0.11.3"
|
||||
babel-plugin-emotion "^10.0.27"
|
||||
|
||||
"@emotion/hash@0.8.0":
|
||||
"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
|
||||
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
|
||||
@ -1252,6 +1286,24 @@
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
|
||||
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
|
||||
|
||||
"@emotion/memoize@^0.7.4":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
|
||||
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
|
||||
|
||||
"@emotion/react@^11.4.0":
|
||||
version "11.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
|
||||
integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@emotion/cache" "^11.5.0"
|
||||
"@emotion/serialize" "^1.0.2"
|
||||
"@emotion/sheet" "^1.0.3"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
"@emotion/weak-memoize" "^0.2.5"
|
||||
hoist-non-react-statics "^3.3.1"
|
||||
|
||||
"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
|
||||
version "0.11.16"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
|
||||
@ -1263,11 +1315,27 @@
|
||||
"@emotion/utils" "0.11.3"
|
||||
csstype "^2.5.7"
|
||||
|
||||
"@emotion/serialize@^1.0.2":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
|
||||
integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.8.0"
|
||||
"@emotion/memoize" "^0.7.4"
|
||||
"@emotion/unitless" "^0.7.5"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@emotion/sheet@0.9.4":
|
||||
version "0.9.4"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
|
||||
integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
|
||||
|
||||
"@emotion/sheet@^1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.3.tgz#00c326cd7985c5ccb8fe2c1b592886579dcfab8f"
|
||||
integrity sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ==
|
||||
|
||||
"@emotion/styled-base@^10.0.27":
|
||||
version "10.0.31"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
|
||||
@ -1291,7 +1359,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
|
||||
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
|
||||
|
||||
"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.0":
|
||||
"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.0", "@emotion/unitless@^0.7.5":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
|
||||
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
|
||||
@ -1301,7 +1369,12 @@
|
||||
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
|
||||
integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
|
||||
|
||||
"@emotion/weak-memoize@0.2.5":
|
||||
"@emotion/utils@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
|
||||
integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
|
||||
|
||||
"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
|
||||
version "0.2.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
|
||||
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
|
||||
@ -1332,6 +1405,32 @@
|
||||
dependencies:
|
||||
"@figspec/components" "^1.0.0"
|
||||
|
||||
"@fortawesome/fontawesome-common-types@^0.2.36":
|
||||
version "0.2.36"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
|
||||
integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
|
||||
|
||||
"@fortawesome/fontawesome-svg-core@^1.2.35":
|
||||
version "1.2.36"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
|
||||
integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.36"
|
||||
|
||||
"@fortawesome/free-solid-svg-icons@^5.15.3":
|
||||
version "5.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
|
||||
integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.36"
|
||||
|
||||
"@fortawesome/react-fontawesome@^0.1.14":
|
||||
version "0.1.16"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz#ce7665490214e20f929368d6b65f68884a99276a"
|
||||
integrity sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
"@gar/promisify@^1.0.1":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
|
||||
@ -1852,6 +1951,11 @@
|
||||
call-me-maybe "^1.0.1"
|
||||
glob-to-regexp "^0.3.0"
|
||||
|
||||
"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
|
||||
version "2.1.8-no-fsevents.3"
|
||||
resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
|
||||
integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
|
||||
|
||||
"@nodelib/fs.scandir@2.1.5":
|
||||
version "2.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
|
||||
@ -1932,7 +2036,7 @@
|
||||
style-value-types "^3.1.7"
|
||||
tslib "^1.10.0"
|
||||
|
||||
"@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
|
||||
"@popperjs/core@^2.10.2", "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
|
||||
version "2.10.2"
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
|
||||
integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
|
||||
@ -3571,6 +3675,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
|
||||
integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
|
||||
|
||||
"@types/pluralize@^0.0.29":
|
||||
version "0.0.29"
|
||||
resolved "https://registry.yarnpkg.com/@types/pluralize/-/pluralize-0.0.29.tgz#6ffa33ed1fc8813c469b859681d09707eb40d03c"
|
||||
integrity sha512-BYOID+l2Aco2nBik+iYS4SZX0Lf20KPILP5RGmM1IgzdwNdTs0eebiFriOPcej1sX9mLnSoiNte5zcFxssgpGA==
|
||||
|
||||
"@types/pretty-hrtime@^1.0.0":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601"
|
||||
@ -5655,7 +5764,7 @@ cheerio@^0.22.0:
|
||||
lodash.reject "^4.4.0"
|
||||
lodash.some "^4.4.0"
|
||||
|
||||
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.4.3, chokidar@^3.5.1:
|
||||
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.4.3, chokidar@^3.5.1:
|
||||
version "3.5.2"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
|
||||
integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
|
||||
@ -5734,7 +5843,7 @@ class-utils@^0.3.5:
|
||||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@2.3.1:
|
||||
classnames@2.3.1, classnames@^2.2.5:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
|
||||
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
|
||||
@ -5951,7 +6060,7 @@ commander@^2.19.0, commander@^2.20.0, commander@^2.20.3:
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
||||
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
|
||||
|
||||
commander@^4.1.1:
|
||||
commander@^4.0.1, commander@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
|
||||
integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
|
||||
@ -6026,6 +6135,20 @@ concat-stream@^1.5.0:
|
||||
readable-stream "^2.2.2"
|
||||
typedarray "^0.0.6"
|
||||
|
||||
concurrently@^6.2.0:
|
||||
version "6.3.0"
|
||||
resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-6.3.0.tgz#63128cb4a6ed54d3c0ed8528728590a5fe54582a"
|
||||
integrity sha512-k4k1jQGHHKsfbqzkUszVf29qECBrkvBKkcPJEUDTyVR7tZd1G/JOfnst4g1sYbFvJ4UjHZisj1aWQR8yLKpGPw==
|
||||
dependencies:
|
||||
chalk "^4.1.0"
|
||||
date-fns "^2.16.1"
|
||||
lodash "^4.17.21"
|
||||
rxjs "^6.6.3"
|
||||
spawn-command "^0.0.2-1"
|
||||
supports-color "^8.1.0"
|
||||
tree-kill "^1.2.2"
|
||||
yargs "^16.2.0"
|
||||
|
||||
configstore@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
|
||||
@ -6111,7 +6234,7 @@ convert-hrtime@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/convert-hrtime/-/convert-hrtime-3.0.0.tgz#62c7593f5809ca10be8da858a6d2f702bcda00aa"
|
||||
integrity sha512-7V+KqSvMiHp8yWDuwfww06XleMWVVB9b9tURBx+G7UTADuo5hYPuowKloz4OzOqbPezxgo+fdQ1522WzPG4OeA==
|
||||
|
||||
convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
|
||||
convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
|
||||
integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
|
||||
@ -6713,7 +6836,7 @@ dataloader@^1.4.0:
|
||||
resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-1.4.0.tgz#bca11d867f5d3f1b9ed9f737bd15970c65dff5c8"
|
||||
integrity sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==
|
||||
|
||||
date-fns@^2.0.1, date-fns@^2.14.0:
|
||||
date-fns@^2.0.1, date-fns@^2.14.0, date-fns@^2.16.1:
|
||||
version "2.25.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"
|
||||
integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==
|
||||
@ -8693,6 +8816,11 @@ fs-monkey@1.0.3:
|
||||
resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
|
||||
integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==
|
||||
|
||||
fs-readdir-recursive@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
|
||||
integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==
|
||||
|
||||
fs-write-stream-atomic@^1.0.8:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
|
||||
@ -9452,7 +9580,7 @@ glob-to-regexp@^0.3.0:
|
||||
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
|
||||
integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
|
||||
|
||||
glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
|
||||
glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
|
||||
integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
|
||||
@ -10036,7 +10164,7 @@ hmac-drbg@^1.0.1:
|
||||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^3.3.0:
|
||||
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
|
||||
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
|
||||
@ -15378,6 +15506,14 @@ react-addons-text-content@^0.0.4:
|
||||
resolved "https://registry.yarnpkg.com/react-addons-text-content/-/react-addons-text-content-0.0.4.tgz#d2e259fdc951d1d8906c08902002108dce8792e5"
|
||||
integrity sha1-0uJZ/clR0diQbAiQIAIQjc6HkuU=
|
||||
|
||||
react-animate-height@^2.0.23:
|
||||
version "2.0.23"
|
||||
resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.23.tgz#2e14ac707b20ae67b87766ccfd581e693e0e7ec7"
|
||||
integrity sha512-DucSC/1QuxWEFzR9IsHMzrf2nrcZ6qAmLIFoENa2kLK7h72XybcMA9o073z7aHccFzdMEW0/fhAdnQG7a4rDow==
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
prop-types "^15.6.1"
|
||||
|
||||
react-clientside-effect@^1.2.5:
|
||||
version "1.2.5"
|
||||
resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz#e2c4dc3c9ee109f642fac4f5b6e9bf5bcd2219a3"
|
||||
@ -15638,7 +15774,16 @@ react-popper-tooltip@^3.1.1:
|
||||
"@popperjs/core" "^2.5.4"
|
||||
react-popper "^2.2.4"
|
||||
|
||||
react-popper@^2.2.4:
|
||||
react-popper-tooltip@^4.3.0:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-4.3.1.tgz#0bfdd40453395865d7a5678a160640243070528e"
|
||||
integrity sha512-/Lj1vjAEFEFxKKWnxupeS9pRrXYQlJd++OAAj/Ht3uOSqjWLtYWDXKV99e+YO6b5hV3SgXbtkHFzHH4eqlMWJA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.15.4"
|
||||
"@popperjs/core" "^2.10.2"
|
||||
react-popper "^2.2.5"
|
||||
|
||||
react-popper@^2.2.4, react-popper@^2.2.5:
|
||||
version "2.2.5"
|
||||
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
|
||||
integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
|
||||
@ -16471,7 +16616,7 @@ rx-lite@*, rx-lite@^4.0.8:
|
||||
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
|
||||
integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
|
||||
|
||||
rxjs@^6.6.0:
|
||||
rxjs@^6.6.0, rxjs@^6.6.3:
|
||||
version "6.6.7"
|
||||
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
|
||||
integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
|
||||
@ -17127,6 +17272,11 @@ space-separated-tokens@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
|
||||
integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
|
||||
|
||||
spawn-command@^0.0.2-1:
|
||||
version "0.0.2-1"
|
||||
resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
|
||||
integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
|
||||
|
||||
spdx-correct@^3.0.0:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
|
||||
@ -17327,6 +17477,23 @@ storybook-addon-outline@^1.4.1:
|
||||
"@storybook/core-events" "^6.3.0"
|
||||
ts-dedent "^2.1.1"
|
||||
|
||||
storybook-color-picker@2.1.4:
|
||||
version "2.1.4"
|
||||
resolved "https://registry.yarnpkg.com/storybook-color-picker/-/storybook-color-picker-2.1.4.tgz#32290cc2cecb4edd3062f0b125d4ccfeed60516e"
|
||||
integrity sha512-YaIQv4XG27r3/WPm7+lrjxUhFNnUlfnLZ+MbE57Wg6cUycR5yYPQZX2swkCNgJLF0m36YmlNclL4CcQ3ZHeitA==
|
||||
dependencies:
|
||||
"@babel/cli" "^7.14.5"
|
||||
"@emotion/react" "^11.4.0"
|
||||
"@fortawesome/fontawesome-svg-core" "^1.2.35"
|
||||
"@fortawesome/free-solid-svg-icons" "^5.15.3"
|
||||
"@fortawesome/react-fontawesome" "^0.1.14"
|
||||
"@types/pluralize" "^0.0.29"
|
||||
concurrently "^6.2.0"
|
||||
pluralize "^8.0.0"
|
||||
react-animate-height "^2.0.23"
|
||||
react-popper-tooltip "^4.3.0"
|
||||
typescript "^4.3.4"
|
||||
|
||||
stream-browserify@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
|
||||
@ -17708,6 +17875,11 @@ stylis@^3.5.0:
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
|
||||
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
|
||||
|
||||
stylis@^4.0.10:
|
||||
version "4.0.10"
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
|
||||
integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
|
||||
|
||||
subscriptions-transport-ws@^0.9.18:
|
||||
version "0.9.19"
|
||||
resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.19.tgz#10ca32f7e291d5ee8eb728b9c02e43c52606cdcf"
|
||||
@ -17750,6 +17922,13 @@ supports-color@^7.0.0, supports-color@^7.1.0:
|
||||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
supports-color@^8.1.0:
|
||||
version "8.1.1"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
|
||||
integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
|
||||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
svg-parser@^2.0.2:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
|
||||
@ -18141,6 +18320,11 @@ tr46@~0.0.3:
|
||||
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
|
||||
integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
|
||||
|
||||
tree-kill@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
|
||||
integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
|
||||
|
||||
trim-trailing-lines@^1.0.0:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
|
||||
@ -18314,6 +18498,11 @@ typedarray@^0.0.6:
|
||||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
|
||||
|
||||
typescript@^4.3.4:
|
||||
version "4.4.4"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
|
||||
integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
|
||||
|
||||
unbox-primitive@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user