diff --git a/addons/rose/.storybook/main.js b/addons/rose/.storybook/main.js index 6238320b3..ac5d3112a 100644 --- a/addons/rose/.storybook/main.js +++ b/addons/rose/.storybook/main.js @@ -6,10 +6,10 @@ module.exports = { '../stories/**/*.stories.mdx', ], addons: [ - '@storybook/addon-knobs', - '@storybook/addon-actions', '@storybook/addon-docs', '@storybook/addon-a11y', + '@storybook/addon-actions', + '@storybook/addon-controls', ], emberOptions: { polyfills: [namedBlockPolyfill], diff --git a/addons/rose/.storybook/preview.js b/addons/rose/.storybook/preview.js index e4fa8bfa0..f65263c47 100644 --- a/addons/rose/.storybook/preview.js +++ b/addons/rose/.storybook/preview.js @@ -1,5 +1,7 @@ import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars'; +import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; -// Registers and enables handlebars language support +// Registers and enables language support SyntaxHighlighter.registerLanguage('handlebars', handlebars); +SyntaxHighlighter.registerLanguage('scss', scss); diff --git a/addons/rose/addon/components/rose/anonymous/index.stories.mdx b/addons/rose/addon/components/rose/anonymous/index.stories.mdx index a8836c0a8..b9fa76ebd 100644 --- a/addons/rose/addon/components/rose/anonymous/index.stories.mdx +++ b/addons/rose/addon/components/rose/anonymous/index.stories.mdx @@ -1,7 +1,4 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs'; -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; +import { Meta } from '@storybook/addon-docs'; diff --git a/addons/rose/addon/components/rose/badge/index.stories.mdx b/addons/rose/addon/components/rose/badge/index.stories.mdx index 5fcf69329..5e1af6f8c 100644 --- a/addons/rose/addon/components/rose/badge/index.stories.mdx +++ b/addons/rose/addon/components/rose/badge/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, select } from '@storybook/addon-knobs'; @@ -19,44 +17,45 @@ Styles: outline, dark, informational, informational-outline, success, success-ou >Badge ``` - - - {{ - template: hbs` ({ + template: hbs` {{text}} `, - context: { - text: text('text', 'Badge'), - style: select( - 'style', - { - none: 'none', - outline: 'outline', - dark: 'dark', - informational: 'informational', - 'informational-outline': 'informational-outline', - success: 'success', - 'success-outline': 'success-outline', - alert: 'alert', - 'alert-outline': 'alert-outline', - error: 'error', - 'error-outline': 'error-outline', - warning: 'warning', - 'warning-outline': 'warning-outline', - }, - 'none' - ), - icon: select( - 'icon', - { - 'flight-icons/svg/org-16': 'flight-icons/svg/org-16', - }, - 'flight-icons/svg/org-16' - ), + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/button/index.stories.mdx b/addons/rose/addon/components/rose/button/index.stories.mdx index 3af770a01..b2dd16ab0 100644 --- a/addons/rose/addon/components/rose/button/index.stories.mdx +++ b/addons/rose/addon/components/rose/button/index.stories.mdx @@ -1,9 +1,22 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; - + # Button @@ -17,59 +30,53 @@ other routes. For accessibility, use links instead. ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` {{text}} `, - context: { - text: text('text', 'Action'), - submit: boolean('submit', true), - disabled: boolean('disabled', false), - style: select( - 'style', - { - primary: 'primary', - secondary: 'secondary', - warning: 'warning', - ghost: 'ghost', - 'inline-link-action': 'inline-link-action', - }, - 'primary' - ), - iconLeft: select( - 'iconLeft', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/check-circle-16' - ), - iconRight: select( - 'iconRight', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/clipboard-copy-16' - ), - onClick: action('clicked'), - }, + context: args, +}); + + + + {Template.bind({})} @@ -77,25 +84,23 @@ Buttons may show only an icon. You should still pass block content into the button in this case for accessibility. - - {{ - template: hbs` - - Icon Only - - `, - context: { - iconOnly: select( - 'iconOnly', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/check-circle-16' - ), + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/card/link/index.stories.mdx b/addons/rose/addon/components/rose/card/link/index.stories.mdx index 03b63420c..b1e2549a8 100644 --- a/addons/rose/addon/components/rose/card/link/index.stories.mdx +++ b/addons/rose/addon/components/rose/card/link/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { text, select } from '@storybook/addon-knobs'; @@ -18,10 +17,8 @@ Card link component wraps content with `LinkTo` component. Supports title and de /> ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` `, - context: { - title: text('title', 'Card title'), - description: text('description', 'Card description'), - id: text('id', 'resource_id_1234'), - icon: select( - 'icon', - { - 'flight-icons/svg/org-16': 'flight-icons/svg/org-16', - }, - 'flight-icons/svg/org-16' - ), - }, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/cards/index.stories.mdx b/addons/rose/addon/components/rose/cards/index.stories.mdx index 12c7688bb..248dca921 100644 --- a/addons/rose/addon/components/rose/cards/index.stories.mdx +++ b/addons/rose/addon/components/rose/cards/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; diff --git a/addons/rose/addon/components/rose/code-editor/index.stories.mdx b/addons/rose/addon/components/rose/code-editor/index.stories.mdx index f3c5cf34b..433bf8a20 100644 --- a/addons/rose/addon/components/rose/code-editor/index.stories.mdx +++ b/addons/rose/addon/components/rose/code-editor/index.stories.mdx @@ -10,10 +10,10 @@ CodeEditor::fieldEditor is where the provided code is displayed with syntax high CodeEditor::toolbar is intended to go on top of the fieldEditor and provides a 'Copy code' button as well as other optional user-provided actions. ```handlebars - + - + ``` @@ -32,59 +32,59 @@ export const codeValue = ' }\n' + '}'; - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` `, - context: { - codeValue: codeValue, - options: { - mode: 'hcl', - readOnly: true, - }, + context: args, +}); + + + + {Template.bind({})} - - {{ - template: hbs` - - - - `, - context: { - codeValue: 'mkdir /home/ubuntu/boundary/', - options: { - mode: 'shell', - readOnly: true, - }, + + {Template.bind({})} - - {{ - template: hbs` - - - - `, - context: { - codeValue: 'mkdir /home/ubuntu/boundary/', - options: { - mode: 'shell', - readOnly: false, - }, + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx b/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx index 8f19dac38..2f1a83371 100644 --- a/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx +++ b/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; @@ -13,10 +12,8 @@ Structure design system. Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's `dependencies` rather than `devDependencies`. - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` <:header>

Cover Header

@@ -26,7 +23,12 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's `, - }} + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/dialog/index.stories.mdx b/addons/rose/addon/components/rose/dialog/index.stories.mdx index 4cc1ab027..b655a4c98 100644 --- a/addons/rose/addon/components/rose/dialog/index.stories.mdx +++ b/addons/rose/addon/components/rose/dialog/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -9,10 +7,8 @@ import { text, boolean, select } from '@storybook/addon-knobs'; A dialog component with optional modal capabilities. - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` `, - context: { - modal: boolean('modal', false), - heading: text('heading', 'Dialog Heading Text'), - dismissButtonText: text('dismissButtonText', 'Dismiss'), - icon: select( - 'icon', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/check-circle-16' - ), - style: select('style', { - default: '', - warning: 'warning', - }), - dismiss: action('dismiss'), - }, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx index 61be50ded..78d1ea98e 100644 --- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx +++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { number, boolean, object } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; @@ -9,11 +7,24 @@ import { action } from '@storybook/addon-actions'; A simple dropdown component with support for links and buttons. - - - {{ - template: hbs` - +```handlebars + + Menu item + Menu item + Button menu item + + + Menu item + + +``` + +export const Template = (args) => ({ + template: hbs` + Menu item Menu item @@ -22,35 +33,43 @@ A simple dropdown component with support for links and buttons. Menu item - - `, - context: { - count: number('count', 0), - showCaret: boolean('showCaret', true), - }, + `, + context: args, +}); + + + + {Template.bind({})} - - {{ - template: hbs` - - Menu item - Menu item - - Button menu item - - `, + + {Template.bind({})} - - - {{ - template: hbs` +export const RadioTemplate = (args) => ({ + template: hbs` @@ -67,50 +86,112 @@ A simple dropdown component with support for links and buttons. `, - }} + context: args, +}); + + + + {RadioTemplate.bind({})} - - - {{ - template: hbs` - + + +export const KeyValueTemplate = (args) => ({ + template: hbs` + - <:key>Name - <:value>Key/Value + <:key>ID + <:value>cl_nbv9375hLHs <:key>Description - <:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus? + <:value>Lorem ipsum - - `, + `, + context: args, +}); + + + + {KeyValueTemplate.bind({})} ```handlebars - - Menu item - Menu item - Button menu item - - - Menu item - - + + + + + + + + + ``` +export const CheckboxTemplate = (args) => ({ + template: hbs` + + + + + + + + + + `, + context: args, +}); + + + + {CheckboxTemplate.bind({})} + + + Dropdown content can be aligned to right edge of the component instead of the default left edge, which is the default setting. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content. ```handlebars ``` -```handlebars - - - - - - - - - - -``` - - - - {{ - template: hbs` - - - - - - - - - - `, - context: { - disabled: boolean('disabled', false), - items: object('items', [ - { id: 1, name: 'Foo' }, - { id: 2, name: 'Bar' }, - { id: 3, name: 'Baz' }, - ]), - selectedItems: object('selectedItems', []), - onChange: action('changed'), - }, - }} - - - -Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with. +Closing dropdown after clicking inside its content can be ignored using `ignoreClickInside`. This is useful when the dropdown contains key-value items that users need to select/copy/interact with. ```handlebars @@ -20,23 +18,27 @@ A footer component that allows four distinct sections to be configured: brand, n ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - + {{footerText}} Section Section - - `, - context: { - brandName: text('brandName', 'Brand Name'), - footerText: text('footerText', 'Text'), - }, + `, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/actions/index.stories.mdx b/addons/rose/addon/components/rose/form/actions/index.stories.mdx index e6fa7099f..1bb6c4972 100644 --- a/addons/rose/addon/components/rose/form/actions/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/actions/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean } from '@storybook/addon-knobs'; @@ -22,24 +20,30 @@ support actions. The cancel button supports a cancel action. /> ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - `, - context: { - submitText: text('submitText', 'Save'), - cancelText: text('cancelText', 'Cancel'), - showCancel: boolean('showCancel', true), - submitDisabled: boolean('submitDisabled', false), - onCancel: action('cancel'), - }, + @cancel={{onCancel}} />`, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx index e0cff83e8..14af075a6 100644 --- a/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select, object } from '@storybook/addon-knobs'; @@ -21,36 +19,45 @@ Renders a form checkboxfield group. ``` - - - {{ - template: hbs` - ({ + template: hbs` + - - `, - context: { - inline: boolean('inline', true), - disabled: boolean('disabled', false), - items: object('items', [ - { id: 1, name: 'Foo' }, - { id: 2, name: 'Bar' }, - { id: 3, name: 'Baz' }, - ]), - selectedItems: object('selectedItems', []), - onChange: action('changed'), - }, + `, + context: args, +}); + + + + {Template.bind({})} @@ -68,36 +75,25 @@ Renders a form checkboxfield group. ``` - - {{ - template: hbs` - - - - `, - context: { - inline: boolean('inline', true), - disabled: boolean('disabled', false), - items: object('items', [ - { id: 1, name: 'Foo' }, - { id: 2, name: 'Bar' }, - { id: 3, name: 'Baz' }, - ]), - selectedItems: object('selectedItems', []), - onChange: action('changed'), - isEqual: (item1, item2) => item1 === item2, - }, + item1.name === item2.name, }} + argTypes={{ + onChange: { action: 'changed' }, + }} + > + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx index fea017516..c958f96bc 100644 --- a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -19,10 +17,8 @@ Renders a form input checkbox. /> ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - `, - context: { - label: text('text', 'Checkbox 🛎'), - description: text('description', 'Short description in label'), - helperText: text('helperText', 'This is an optional help text.'), - name: text('name', 'checkbox-1'), - checked: boolean('checked', false), - error: boolean('error', false), - disabled: boolean('disabled', false), - }, + />`, + context: args, +}); + + + + {Template.bind({})} - - - {{ - template: hbs` +export const ErrorTemplate = (args) => ({ + template: hbs` An error occurred. - - `, - context: { - label: text('text', 'Checkbox 🛎'), - name: text('name', 'checkbox-1'), - checked: boolean('checked', false), - disabled: boolean('disabled', false), - }, + `, + context: args, +}); + + + + {ErrorTemplate.bind({})} @@ -84,10 +92,8 @@ Renders a form input checkbox. /> ``` - - - {{ - template: hbs` +export const InlineTemplate = (args) => ({ + template: hbs` - `, - context: { - description: text('description', 'Short description in label'), - helperText: text('helperText', 'This is an optional help text.'), - checked: boolean('checked', false), - error: boolean('error', false), - disabled: boolean('disabled', false), - inline: boolean('inline', false), - }, + />`, + context: args, +}); + + + + {InlineTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/form/errors/index.stories.mdx b/addons/rose/addon/components/rose/form/errors/index.stories.mdx index 660d469dd..4e90d0bf8 100644 --- a/addons/rose/addon/components/rose/form/errors/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/errors/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean } from '@storybook/addon-knobs'; @@ -16,16 +14,15 @@ Use this component to display one or more error messages. ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` An error message goes here. Another message goes here. - - `, - context: {}, - }} - + `, + context: args, +}); + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx b/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx index 5da1b4ce4..c92ba117c 100644 --- a/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean } from '@storybook/addon-knobs'; @@ -17,15 +15,14 @@ of the `Rose::Form::Errors` component. ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` An error message goes here. - - `, - context: {}, - }} - + `, + context: args, +}); + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx b/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx index 1ff34c2e8..2ff9f49f9 100644 --- a/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -17,18 +15,23 @@ Renders a simple fieldset with title, description and body and an optional helpe ``` +export const Template = (args) => ({ + template: hbs` + + <:title>Title + <:description>Description + <:body>Rest of the form + `, + context: args, +}); + - - {{ - template: hbs` - - <:title>Title - <:description>Description - <:body>Rest of the form - `, - context: { - helperText: text('helperText', 'This is an optional help text.'), - }, + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx b/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx index 46b0dc0ce..b968f498d 100644 --- a/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean } from '@storybook/addon-knobs'; @@ -20,19 +18,23 @@ by form fields and should not be used directly. ``` - - - {{ - template: hbs` - +export const Template = (args) => ({ + template: hbs` + Helper text - - `, - context: { - error: boolean('error', false), - link: text('link', 'http://www.example.net/'), - linkText: text('linkText', 'sample link text'), - }, + `, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/index.stories.mdx b/addons/rose/addon/components/rose/form/index.stories.mdx index 24ba72fec..ec9fc6288 100644 --- a/addons/rose/addon/components/rose/form/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -10,72 +8,61 @@ import { text, boolean, select } from '@storybook/addon-knobs'; A component for building accessible forms. Yields contextual fields and actions. - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - - + as |form| + > + + Choose an option - Value 1 - Value 2 - Value 3 + Value 1 + Value 2 + Value 3 - - - - + + + + - + - - `, - context: { - showEditToggle: boolean('showEditToggle', false), - disabled: boolean('disabled', false), - submit: action('submit'), - cancel: action('cancel'), - selectChange: action('selectChange'), - }, + @submitText='Save' + @cancelText='Cancel' + @enableEditText='Edit' + @showCancel={{true}} + /> + `, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/input/index.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx index 138078db9..53adadaf3 100644 --- a/addons/rose/addon/components/rose/form/input/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -43,10 +41,8 @@ Or a fully contextual component without a wrapper, for maximum flexibility. /> ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - `, - context: { - type: select( - 'type', - { - text: 'text', - email: 'email', - number: 'number', - password: 'password', - }, - 'text' - ), - value: text('value', 'Value'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - link: text('link', 'link goes here'), - linkText: text('linkText', 'link text'), - disabled: boolean('disabled', false), - 'read-only': boolean('readonly', false), - icon: select( - 'icon', - { - none: null, - 'flight-icons/svg/search-16': 'flight-icons/svg/search-16', - }, - 'flight-icons/svg/search-16' - ), + />`, + context: args, +}); + + + + {Template.bind({})} - - - {{ - template: hbs` +export const ErrorTemplate = (args) => ({ + template: hbs` An error occurred. - - `, - context: { - type: select( - 'type', - { - text: 'text', - email: 'email', - number: 'number', - password: 'password', - }, - 'text' - ), - value: text('value', 'Value'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - link: text('link', 'link goes here'), - linkText: text('linkText', 'link text'), - disabled: boolean('disabled', false), - 'read-only': boolean('readonly', false), + `, + context: args, +}); + + + + {ErrorTemplate.bind({})} - - - {{ - template: hbs` +export const ContextualTemplate = (args) => ({ + template: hbs`
Label @@ -153,9 +144,10 @@ Or a fully contextual component without a wrapper, for maximum flexibility. An error occurred.
- - `, - context: {}, - }} - + `, + context: args, +}); + + + {ContextualTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/form/label/index.stories.mdx b/addons/rose/addon/components/rose/form/label/index.stories.mdx index a673aa546..939bf3914 100644 --- a/addons/rose/addon/components/rose/form/label/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/label/index.stories.mdx @@ -1,13 +1,11 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; # Form Label -Renders a simple form label. This componet is used and yielded by form fields +Renders a simple form label. This component is used and yielded by form fields and should not be used directly. ```handlebars @@ -16,17 +14,21 @@ and should not be used directly. ``` - - - {{ - template: hbs` - +export const Template = (args) => ({ + template: hbs` + Form Label - - `, - context: { - error: boolean('error', false), - }, + `, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx index 9f7f4d008..6c5e3c2d6 100644 --- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx @@ -1,8 +1,25 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { text, boolean, select } from '@storybook/addon-knobs'; - + # Form Radiofield in a wide format @@ -20,39 +37,6 @@ Renders a form radiofield in a Wide format. /> ``` - - - {{ - template: hbs` - - `, - context: { - label: text('text', 'Azure'), - error: boolean('error', false), - value: text( - 'value', - 'value and selectedValue must match to select radiofield' - ), - selectedValue: text( - 'selectedValue', - 'value and selectedValue must match to select radiofield' - ), - helperText: text('helperText', 'Record financial transactions using'), - disabled: boolean('disabled', false), - }, - }} - - - Renders a form radiofield in a tile format. ```handlebars @@ -67,10 +51,8 @@ Renders a form radiofield in a tile format. /> ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - `, - context: { - label: text('text', 'Azure'), - error: boolean('error', false), - value: text( - 'value', - 'value and selectedValue must match to select radiofield' - ), - selectedValue: text( - 'selectedValue', - 'value and selectedValue must match to select radiofield' - ), - helperText: text('helperText', 'Record financial transactions using'), - disabled: boolean('disabled', false), - icon: select( - 'icon', - { - none: null, - 'flight-icons/svg/azure-color-16': - 'flight-icons/svg/azure-color-16', - }, - null - ), - }, + @layout={{Layout}} + />`, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx index a343ac1a5..95f9f566b 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -24,56 +22,56 @@ Renders a form radiofield group. ``` +export const Template = (args) => ({ + template: hbs` + + + + + `, + context: args, +}); + - - {{ - template: hbs` - - - - - - `, - context: { - name: text('name', 'mustagree'), - disabled: boolean('disabled', false), - inline: boolean('inline', true), - selectedValue: text('selectedValue', 'disagree'), - firstFieldLabel: text('first label', 'Agree'), - firstFieldValue: text('first value', 'agree'), - firstFieldIcon: select( - 'first icon', - { - 'flight-icons/svg/org-16': 'flight-icons/svg/org-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/org-16' - ), - secondFieldLabel: text('second label', 'Maybe'), - secondFieldValue: text('second value', 'maybe'), - thirdFieldLabel: text('third label', 'Disagree'), - thirdFieldValue: text('third value', 'disagree'), - changed: action('changed'), - }, + + {Template.bind({})} @@ -107,80 +105,6 @@ Renders a form radiofield group. ``` - - - {{ - template: hbs` - - - - - - `, - context: { - name: text('name', 'mustagree'), - disabled: boolean('disabled', false), - selectedValue: text('selectedValue', 'disagree'), - firstFieldLabel: text('first label', 'Agree'), - firstFieldValue: text('first value', 'agree'), - firstFieldIcon: select( - 'firstFieldIcon', - { - none: null, - 'flight-icons/svg/azure-color-16': - 'flight-icons/svg/azure-color-16', - }, - null - ), - secondFieldIcon: select( - 'secondFieldIcon', - { - none: null, - 'flight-icons/svg/azure-color-16': - 'flight-icons/svg/azure-color-16', - }, - null - ), - thirdFieldIcon: select( - 'thirdFieldIcon', - { - none: null, - 'flight-icons/svg/azure-color-16': - 'flight-icons/svg/azure-color-16', - }, - null - ), - secondFieldLabel: text('second label', 'Maybe'), - secondFieldValue: text('second value', 'maybe'), - thirdFieldLabel: text('third label', 'Disagree'), - thirdFieldValue: text('third value', 'disagree'), - changed: action('changed'), - }, - }} - - - ```handlebars ``` - - - {{ - template: hbs` - ({ + template: hbs` + - - `, - context: { - name: text('name', 'mustagree'), - disabled: boolean('disabled', false), - selectedValue: text('selectedValue', 'disagree'), - firstFieldLabel: text('first label', 'Agree'), - firstFieldValue: text('first value', 'agree'), - firstFieldIcon: select( - 'firstFieldIcon', - { - none: null, - 'flight-icons/svg/azure-color-16': - 'flight-icons/svg/azure-color-16', - }, - null - ), - secondFieldLabel: text('second label', 'Maybe'), - secondFieldValue: text('second value', 'maybe'), - thirdFieldLabel: text('third label', 'Disagree'), - thirdFieldValue: text('third value', 'disagree'), - changed: action('changed'), - }, + `, + context: args, +}); + + + + + {CardTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx index ba345a141..f72bed8a9 100644 --- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx @@ -1,8 +1,23 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { text, boolean, select } from '@storybook/addon-knobs'; - + # Form Radiofield @@ -19,10 +34,8 @@ Renders a form radiofield. /> ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - `, - context: { - label: text('text', 'Radiofield'), - error: boolean('error', false), - value: text( - 'value', - 'value and selectedValue must match to select radiofield' - ), - helperText: text('helperText', 'Helper text'), - selectedValue: text( - 'selectedValue', - 'value and selectedValue must match to select radiofield' - ), - disabled: boolean('disabled', false), - icon: select( - 'icon', - { - none: null, - 'flight-icons/svg/org-16': 'flight-icons/svg/org-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - null - ), - }, + />`, + context: args, +}); + + + + {Template.bind({})} @@ -74,10 +79,8 @@ Renders a form radiofield. /> ``` - - - {{ - template: hbs` +export const InlineTemplate = (args) => ({ + template: hbs` + /> + /> - `, - context: { - error: boolean('error', false), - value: text( - 'value', - 'value and selectedValue must match to select radiofield' - ), - selectedValue: text( - 'selectedValue', - 'value and selectedValue must match to select radiofield' - ), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - icon: select( - 'icon', - { - none: null, - 'flight-icons/svg/org-16': 'flight-icons/svg/org-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - null - ), - inline: boolean('inline', false), - }, + />`, + context: args, +}); + + + + {InlineTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/form/select/index.stories.mdx b/addons/rose/addon/components/rose/form/select/index.stories.mdx index 94370f204..26016a9c3 100644 --- a/addons/rose/addon/components/rose/form/select/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/select/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -28,10 +26,8 @@ Renders a form select element. ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` Choose an option - Value 1 - Value 2 - Value 3 + Value 1 + Value 2 + Value 3 - - `, - context: { - value: select( - 'value', - { - null: null, - 'value-1': 'value-1', - 'value-2': 'value-2', - 'value-3': 'value-3', - }, - null - ), - name: text('name', 'select-name'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - onChange: action('changed'), - }, + `, + context: args, +}); + + + + {Template.bind({})} - - - {{ - template: hbs` +export const ErrorTemplate = (args) => ({ + template: hbs` Choose an option - Value 1 - Value 2 - Value 3 + Value 1 + Value 2 + Value 3 An error occurred. - - `, - context: { - value: select( - 'value', - { - null: null, - 'value-1': 'value-1', - 'value-2': 'value-2', - 'value-3': 'value-3', - }, - null - ), - name: text('name', 'select-name'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - onChange: action('changed'), - }, + `, + context: args, +}); + + + + {ErrorTemplate.bind({})} - - - {{ - template: hbs` - +export const ContextualTemplate = (args) => ({ + template: hbs` +
Label
Help
- Value 1 - Value 2 - Value 3 + Value 1 + Value 2 + Value 3
An error occurred.
- - `, - context: {}, - }} - + `, + context: args, +}); + + + {ContextualTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx index c399bde43..367ae34d4 100644 --- a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -23,12 +21,10 @@ Renders a simple form textarea. /> ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - `, - context: { - value: text('value', 'Value'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - link: text('link', 'link'), - linkText: text('linkText', 'link text goes here'), - disabled: boolean('disabled', false), - 'read-only': boolean('readonly', false), - }, + />`, + context: args, +}); + + + + {Template.bind({})} - - - {{ - template: hbs` +export const ErrorTemplate = (args) => ({ + template: hbs` + as |field| + > An error occurred. - - `, - context: { - value: text('value', 'Value'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - 'read-only': boolean('readonly', false), - }, + `, + context: args, +}); + + + + {ErrorTemplate.bind({})} - - - {{ - template: hbs` - +export const ContextualTemplate = (args) => ({ + template: hbs` +
Label
@@ -97,9 +109,10 @@ Renders a simple form textarea. An error occurred.
- - `, - context: {}, - }} - + `, + context: args, +}); + + + {ContextualTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/frame/index.stories.mdx b/addons/rose/addon/components/rose/frame/index.stories.mdx index 9550bb9e8..00b078891 100644 --- a/addons/rose/addon/components/rose/frame/index.stories.mdx +++ b/addons/rose/addon/components/rose/frame/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; @@ -24,8 +23,7 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's <:body>

Frame body

- - `, + `, }} diff --git a/addons/rose/addon/components/rose/header/index.stories.mdx b/addons/rose/addon/components/rose/header/index.stories.mdx index 73fb12955..adabcd28a 100644 --- a/addons/rose/addon/components/rose/header/index.stories.mdx +++ b/addons/rose/addon/components/rose/header/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -38,49 +36,54 @@ A header component that allows three distinct sections to be configured: brand, ``` - - - {{ - template: hbs` - - - - - Menu item - Menu item - Button menu item - - Section - Section - - - - Menu item - Menu item - Button menu item - - - +export const Template = (args) => ({ + template: hbs` + + + + + Menu item + Menu item + Button menu item + + Section + Section + + + + Menu item + Menu item + Button menu item + + + `, - context: { - brandName: text('brandName', 'Brand Name'), - dropdownIcon: select( - 'dropdownIcon', - { - 'flight-icons/svg/user-circle-16': - 'flight-icons/svg/user-circle-16', - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/user-circle-16' - ), + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/icon/index.stories.mdx b/addons/rose/addon/components/rose/icon/index.stories.mdx index 5481d6177..63f64ec6f 100644 --- a/addons/rose/addon/components/rose/icon/index.stories.mdx +++ b/addons/rose/addon/components/rose/icon/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -13,24 +11,36 @@ Renders a simple icon. ``` +export const Template = (args) => ({ + template: hbs` + `, + context: args, +}); + - - {{ - template: hbs` - - `, - context: { - name: select( - 'name', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/check-circle-16' - ), + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/layout/centered/index.stories.mdx b/addons/rose/addon/components/rose/layout/centered/index.stories.mdx index 3b869a097..b0e35021a 100644 --- a/addons/rose/addon/components/rose/layout/centered/index.stories.mdx +++ b/addons/rose/addon/components/rose/layout/centered/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; diff --git a/addons/rose/addon/components/rose/layout/page/index.stories.mdx b/addons/rose/addon/components/rose/layout/page/index.stories.mdx index d2e109382..b9017504c 100644 --- a/addons/rose/addon/components/rose/layout/page/index.stories.mdx +++ b/addons/rose/addon/components/rose/layout/page/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; @@ -25,7 +24,7 @@ A page layout/positioning component that allows five distinct sections to be con Breadcrumbs Header - Actions + Actions Navigation Body diff --git a/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx b/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx index 3683df6fd..b113430eb 100644 --- a/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx +++ b/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; diff --git a/addons/rose/addon/components/rose/link-button/index.stories.mdx b/addons/rose/addon/components/rose/link-button/index.stories.mdx index 44412da2c..94a094b25 100644 --- a/addons/rose/addon/components/rose/link-button/index.stories.mdx +++ b/addons/rose/addon/components/rose/link-button/index.stories.mdx @@ -1,13 +1,26 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; - + # LinkButton -An achor element component styled to mimic `Rose::Button` component. +An anchor element component styled to mimic `Rose::Button` component. Styles supported: primary, secondary, warning, and ghost. Disabling link button is not supported as it is an action on form components only. @@ -21,54 +34,48 @@ Disabling link button is not supported as it is an action on form components onl ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` {{text}} `, - context: { - text: text('text', 'Content'), - style: select( - 'style', - { - primary: 'primary', - secondary: 'secondary', - warning: 'warning', - ghost: 'ghost', - 'inline-link-action': 'inline-link-action', - }, - 'primary' - ), - iconLeft: select( - 'iconLeft', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/clipboard-copy-16' - ), - iconRight: select( - 'iconRight', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/clipboard-copy-16': - 'flight-icons/svg/clipboard-copy-16', - }, - 'flight-icons/svg/clipboard-copy-16' - ), + context: args, +}); + + + + {Template.bind({})} @@ -83,33 +90,23 @@ Similar to `Rose::Button`, icon only link button is supported. ``` - - {{ - template: hbs` - - `, - context: { - style: select( - 'style', - { - primary: 'primary', - secondary: 'secondary', - warning: 'warning', - ghost: 'ghost', - 'inline-link-action': 'inline-link-action', - }, - 'primary' - ), - iconOnly: select( - 'iconOnly', - { - 'flight-icons/svg/check-circle-16': - 'flight-icons/svg/check-circle-16', - 'flight-icons/svg/help-16': 'flight-icons/svg/help-16', - }, - 'flight-icons/svg/help-16' - ), + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/list/key-value/index.stories.mdx b/addons/rose/addon/components/rose/list/key-value/index.stories.mdx index f609d02cd..018ef0e5d 100644 --- a/addons/rose/addon/components/rose/list/key-value/index.stories.mdx +++ b/addons/rose/addon/components/rose/list/key-value/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; @@ -12,47 +11,50 @@ A simple key/value list with support for embedded form fields and buttons. {{ template: hbs` - - - Key - Value - - - Key - Value - - - Key - Value - - + - - Key - - - - - - Add - + Key + Value - - - - Key - - - - - - Remove - + Key + Value - - - `, + + Key + Value + + + + + Key + + + + + + Add + + + + + + + Key + + + + + + Remove + + + + `, }} diff --git a/addons/rose/addon/components/rose/message/index.stories.mdx b/addons/rose/addon/components/rose/message/index.stories.mdx index 6bb71161b..fcf1a4a73 100644 --- a/addons/rose/addon/components/rose/message/index.stories.mdx +++ b/addons/rose/addon/components/rose/message/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -10,41 +8,51 @@ import { text, boolean, select } from '@storybook/addon-knobs'; A message component containing a title, description, and nav links. Title can be configured with optional icon and subtitle. - - - {{ - template: hbs` - - - {{description}} - - - - Go back - - - Need help? - - +export const Template = (args) => ({ + template: hbs` + + + {{description}} + + + + Go back + + + Need help? + + `, - context: { - title: text('title', 'Page not found'), - subtitle: text('subtitle', 'Error 404'), - description: text( - 'description', - 'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.' - ), - icon: select( - 'icon', - { - 'flight-icons/svg/alert-circle-16': - 'flight-icons/svg/alert-circle-16', - 'flight-icons/svg/help-16': 'flight-icons/svg/help-16', - }, - 'flight-icons/svg/help-16' - ), + context: args, +}); + + + + {Template.bind({})} @@ -69,24 +77,27 @@ Title can be configured with optional icon and subtitle. Message can be configured without icons and navigation links. +export const BasicTemplate = (args) => ({ + template: hbs` + + + {{description}} + + `, + context: args, +}); + - - {{ - template: hbs` - - - {{description}} - - - `, - context: { - title: text('title', 'No logs received yet'), - description: text( - 'description', - 'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.' - ), - }, + + {BasicTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx b/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx index 0216e2527..cc1d182a5 100644 --- a/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx +++ b/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; @@ -15,15 +14,15 @@ A breadcrumbs component with links as crumbs. ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - Level 1 - Level 2 - - `, - }} - + Level 1 + Level 2 + `, + context: args, +}); + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/nav/link/index.stories.mdx b/addons/rose/addon/components/rose/nav/link/index.stories.mdx index 3299e9227..516ba3df2 100644 --- a/addons/rose/addon/components/rose/nav/link/index.stories.mdx +++ b/addons/rose/addon/components/rose/nav/link/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -13,13 +11,12 @@ Proxies the built-in `LinkTo` component, applying a class `rose-nav-link`. Text ``` +export const Template = (args) => ({ + template: hbs` + Text`, + context: args, +}); + - - {{ - template: hbs` - Text - `, - context: {}, - }} - + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx b/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx index e2d3c5753..c9df9274c 100644 --- a/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx +++ b/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -9,19 +7,18 @@ import { text, boolean, select } from '@storybook/addon-knobs'; A simple navigation component intended for use in the sidebar layout region. - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` Item Name Item Name - - `, - context: { - title: text('title', 'Title'), - }, - }} + `, + context: args, +}); + + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx b/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx index 03589ebeb..0c6ba0bff 100644 --- a/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx +++ b/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -17,17 +15,16 @@ A simple tabbed navigation component. ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` Text Text Text - - `, - context: {}, - }} - + `, + context: args, +}); + + + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/notification/index.stories.mdx b/addons/rose/addon/components/rose/notification/index.stories.mdx index ea122bd94..3aa184729 100644 --- a/addons/rose/addon/components/rose/notification/index.stories.mdx +++ b/addons/rose/addon/components/rose/notification/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -27,62 +25,81 @@ handler takes appropriate action and hides the notification. ``` - - - {{ - template: hbs` +export const Template = (args) => ({ + template: hbs` - Some useful information. - - `, - context: {}, + {{text}} + `, + context: args, +}); + + + + {Template.bind({})} - - - {{ - template: hbs` +export const AllNotificationsTemplate = (args) => ({ + template: hbs` Some useful information. Good job! Careful now. An error occurred. - - `, - context: { - dismiss: action('dismiss'), - }, - }} + `, + context: args, +}); + + + + {AllNotificationsTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/separator/index.stories.mdx b/addons/rose/addon/components/rose/separator/index.stories.mdx index 8cd5204b3..0ceea174a 100644 --- a/addons/rose/addon/components/rose/separator/index.stories.mdx +++ b/addons/rose/addon/components/rose/separator/index.stories.mdx @@ -1,7 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; @@ -9,15 +7,14 @@ import { text, boolean, select } from '@storybook/addon-knobs'; A simple styled `
` element. +export const Template = (args) => ({ + template: hbs` + `, + context: args, +}); + - - {{ - template: hbs` - - `, - context: {}, - }} - + {Template.bind({})} ```handlebars diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx index c8ed3f917..a632fe1f6 100644 --- a/addons/rose/addon/components/rose/table/index.stories.mdx +++ b/addons/rose/addon/components/rose/table/index.stories.mdx @@ -1,14 +1,27 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { boolean, select } from '@storybook/addon-knobs'; - + # Table -A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, and cells can be shrinked to its content with, and center/right cell alignment is supported. +A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. +Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. +Rows can be visually hidden, and cells can be shrunk to its content width, and center/right cell alignment is supported. -Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row. +Cell shrink should be applied to all the cells in a row. Otherwise, the bigger cell with shrink applied will determine the width of the row. ```handlebars @@ -48,69 +61,94 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce ``` +export const Template = (args) => ({ + template: hbs` + + + + Address + Host Set + Name + Description + + + + + 1.1.1.1 + host-set-1, host-set-2 + optional name + description + + + 1.1.1.1 + host-set-2 + optional name + description + + + 1.1.1.1 + host-set-1 + optional name + description + + + + + Footer + + + `, + context: args, +}); + - - {{ - template: hbs` - - - - Address - Host Set - Name - Description - - - - - 1.1.1.1 - host-set-1, host-set-2 - optional name - description - - - 1.1.1.1 - host-set-2 - optional name - description - - - 1.1.1.1 - host-set-1 - optional name - description - - - - - Footer - - - - `, - context: { - hideHeaderRow: boolean('hideHeaderRow', false), - cellShrink: boolean('cellShrink', false), - style: select('style', { - default: '', - condensed: 'condensed', - }), - cellAlignmentCenter: boolean('cellAlignmentCenter', false), - cellAlignmentRight: boolean('cellAlignmentRight', false), - }, + + {Template.bind({})} - - - {{ - template: hbs` +export const KeyValueTemplate = (args) => ({ + template: hbs` - + Key - Value + Value @@ -122,26 +160,27 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce - Remove + Remove Key - + Choose an option - Value 1 - Value 2 - Value 3 + Value 1 + Value 2 + Value 3 - Add + Add @@ -152,35 +191,28 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce - Add + Add Key - + - Add + Add - Footer + Footer - - `, - context: { - style: select('style', { - condensed: 'condensed', - default: '', - }), - }, - }} - + `, + context: args, +}); + + + {KeyValueTemplate.bind({})} diff --git a/addons/rose/addon/components/rose/toolbar/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/index.stories.mdx index 2445021d2..c08666f0b 100644 --- a/addons/rose/addon/components/rose/toolbar/index.stories.mdx +++ b/addons/rose/addon/components/rose/toolbar/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; @@ -21,14 +20,14 @@ predefined "regions" for left and right alignment, respectively. ``` +export const Template = (args) => ({ + template: hbs` + + toolbar + `, + context: args, +}); + - - {{ - template: hbs` - - toolbar - - `, - }} - + {Template.bind({})} diff --git a/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx index cff5f97e0..3f6e75ea6 100644 --- a/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx +++ b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; @@ -14,14 +13,14 @@ Used to display non-interactive information in a toolbar. ``` +export const Template = (args) => ({ + template: hbs` + + 30 seconds ago + `, + context: args, +}); + - - {{ - template: hbs` - - 30 seconds ago - - `, - }} - + {Template.bind({})} diff --git a/addons/rose/package.json b/addons/rose/package.json index 241562a92..60a21fc99 100644 --- a/addons/rose/package.json +++ b/addons/rose/package.json @@ -55,8 +55,8 @@ "@hashicorp/flight-icons": "^2.6.0", "@storybook/addon-a11y": "^6.3.12", "@storybook/addon-actions": "^6.3.10", + "@storybook/addon-controls": "^6.5.12", "@storybook/addon-docs": "^6.3.8", - "@storybook/addon-knobs": "^6.3.1", "@storybook/addons": "^6.3.9", "@storybook/api": "^6.3.12", "@storybook/cli": "^6.3.10", diff --git a/addons/rose/stories/colors.stories.mdx b/addons/rose/stories/colors.stories.mdx index 328b1a6fe..a775a1949 100644 --- a/addons/rose/stories/colors.stories.mdx +++ b/addons/rose/stories/colors.stories.mdx @@ -1,21 +1,19 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs'; -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; +import { Meta } from '@storybook/addon-docs'; # Colors -Colors are available using CSS custom properties. Find the color swatch you +Colors are available using CSS custom properties. Find the color swatch you need and copy the CSS custom property variable into your stylesheet. Use only these properties when specifying colors instead of absolute SCSS color -variables. This ensures consistency and dark mode compatibility. +variables. This ensures consistency and dark mode compatibility. -**Tip**: Try it out in dark mode. Set your system to dark mode to see these +**Tip**: Try it out in dark mode. Set your system to dark mode to see these swatches in a different light. For example... + ```css .my-component { color: var(--stark); @@ -25,7 +23,7 @@ For example... ## Relative Poles -These colors depend on light or dark mode. Use these most often +These colors depend on light or dark mode. Use these most often when specifying primary foreground and background colors.
    @@ -46,7 +44,7 @@ when specifying primary foreground and background colors. ## Absolute Poles -Some colors don't change in dark vs light mode. Use these values sparingly. +Some colors don't change in dark vs light mode. Use these values sparingly.
    • @@ -70,37 +68,52 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
      • -
        +
        --info-subtler-3
      • -
        +
        --info-subtler-2
      • -
        +
        --info-subtler-1
      • -
        +
        --info
      • -
        +
        --info-starker-1
      • -
        +
        --info-starker-2
        @@ -111,25 +124,34 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
        • -
          +
          --alert-subtler-2
        • -
          +
          --alert-subtler-1
        • -
          +
          --alert
        • -
          +
          --alert-starker-1
          @@ -140,25 +162,37 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
          • -
            +
            --warning-subtler-2
          • -
            +
            --warning-subtler-1
          • -
            +
            --warning
          • -
            +
            --warning-starker-1
            @@ -169,25 +203,37 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
            • -
              +
              --failure-subtler-2
            • -
              +
              --failure-subtler-1
            • -
              +
              --failure
            • -
              +
              --failure-starker-1
              @@ -198,25 +244,37 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
              • -
                +
                --success-subtler-2
              • -
                +
                --success-subtler-1
              • -
                +
                --success
              • -
                +
                --success-starker-1
                @@ -227,25 +285,34 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
                • -
                  +
                  --action-subtler-2
                • -
                  +
                  --action-subtler-1
                • -
                  +
                  --action
                • -
                  +
                  --action-starker-1
                  @@ -256,13 +323,19 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
                  • -
                    +
                    --ui-border-subtler-1
                  • -
                    +
                    --ui-border
                    @@ -273,67 +346,100 @@ Some colors don't change in dark vs light mode. Use these values sparingly.
                    • -
                      +
                      --ui-gray-subtler-6
                    • -
                      +
                      --ui-gray-subtler-5
                    • -
                      +
                      --ui-gray-subtler-4
                    • -
                      +
                      --ui-gray-subtler-3
                    • -
                      +
                      --ui-gray-subtler-2
                    • -
                      +
                      --ui-gray-subtler-1
                    • -
                      +
                      --ui-gray
                    • -
                      +
                      --ui-gray-starker-1
                    • -
                      +
                      --ui-gray-starker-2
                    • -
                      +
                      --ui-gray-starker-3
                    • -
                      +
                      --ui-gray-starker-4
                      diff --git a/addons/rose/stories/sizing.stories.mdx b/addons/rose/stories/sizing.stories.mdx index df1d3ce1c..8e1c68dfc 100644 --- a/addons/rose/stories/sizing.stories.mdx +++ b/addons/rose/stories/sizing.stories.mdx @@ -1,21 +1,18 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs'; -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; +import { Meta } from '@storybook/addon-docs'; # Sizing Use sizing function for things like margins, -padding, and borders. Sizes are returned in rem units rather than +padding, and borders. Sizes are returned in rem units rather than pixels, but have been calibrated with pixel equivalents in mind. To use the rems sizing function, first import the sizing module, -then use it in your code wherever you normally specify a size. For example... +then use it in your code wherever you normally specify a size. For example... ```scss -@import "variables/sizing"; +@import 'variables/sizing'; border: sizing.rems(xxxxs) solid; ``` @@ -30,63 +27,103 @@ border: sizing.rems(xxxxs) solid; -xxl -48 -sizing.rems(xxl) + + xxl + + 48 + + sizing.rems(xxl) + -xl -36 -sizing.rems(xl) + + xl + + 36 + + sizing.rems(xl) + -l -24 -sizing.rems(l) + + l + + 24 + + sizing.rems(l) + -m -16 -sizing.rems(m) + + m + + 16 + + sizing.rems(m) + -s -12 -sizing.rems(s) + + s + + 12 + + sizing.rems(s) + -xs -8 -sizing.rems(xs) + + xs + + 8 + + sizing.rems(xs) + -off-xs -5 -sizing.rems(off-xs) + + off-xs + + 5 + + sizing.rems(off-xs) + -xxs -4 -sizing.rems(xxs) + + xxs + + 4 + + sizing.rems(xxs) + -xxxs -2 -sizing.rems(xxxs) + + xxxs + + 2 + + sizing.rems(xxxs) + -xxxxs -1 -sizing.rems(xxxxs) + + xxxxs + + 1 + + sizing.rems(xxxxs) + diff --git a/addons/rose/stories/typography.stories.mdx b/addons/rose/stories/typography.stories.mdx index b9adac8db..2dc5a5455 100644 --- a/addons/rose/stories/typography.stories.mdx +++ b/addons/rose/stories/typography.stories.mdx @@ -1,21 +1,18 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs'; -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; +import { Meta } from '@storybook/addon-docs'; # Typography To specify custom typography, use the SCSS mixin. -The type mixin accepts two parameters: a font size name +The type mixin accepts two parameters: a font size name (required) and an optional font weight name (normal, semibold, bold). This mixin sets both font size and line height, and optionally weight. For example... ```scss -@import "utilities/type"; +@import 'utilities/type'; .my-component { @include type.type(m, bold); } @@ -94,42 +91,36 @@ For example... - -h1 - -28 - -@include type.type(h1); - - -Same as xl, but different line height. - + + h1 + + 28 + + @include type.type(h1); + + Same as xl, but different line height. - -h2 - -20 - -@include type.type(h2); - - -Same as l, but different line height. - + + h2 + + 20 + + @include type.type(h2); + + Same as l, but different line height. - -h3 - -16 - -@include type.type(h3); - - -Same as m, but different line height. - + + h3 + + 16 + + @include type.type(h3); + + Same as m, but different line height. diff --git a/yarn.lock b/yarn.lock index 47e7c1c4b..f756168b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1641,6 +1641,16 @@ "@babel/helper-create-class-features-plugin" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" +"@babel/plugin-proposal-private-property-in-object@^7.12.1", "@babel/plugin-proposal-private-property-in-object@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503" + integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.18.6" + "@babel/helper-create-class-features-plugin" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.6" + "@babel/plugin-syntax-private-property-in-object" "^7.14.5" + "@babel/plugin-proposal-private-property-in-object@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.5.tgz#9f65a4d0493a940b4c01f8aa9d3f1894a587f636" @@ -1671,16 +1681,6 @@ "@babel/helper-plugin-utils" "^7.16.7" "@babel/plugin-syntax-private-property-in-object" "^7.14.5" -"@babel/plugin-proposal-private-property-in-object@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503" - integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw== - dependencies: - "@babel/helper-annotate-as-pure" "^7.18.6" - "@babel/helper-create-class-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/plugin-syntax-private-property-in-object" "^7.14.5" - "@babel/plugin-proposal-unicode-property-regex@^7.14.5", "@babel/plugin-proposal-unicode-property-regex@^7.4.4": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz#0f95ee0e757a5d647f378daa0eca7e93faa8bbe8" @@ -3194,7 +3194,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": version "7.15.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b" integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA== @@ -4077,7 +4077,7 @@ broccoli-funnel "^3.0.5" ember-cli-babel "^7.23.1" -"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9": +"@emotion/cache@^10.0.27": version "10.0.29" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ== @@ -4087,7 +4087,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.9", "@emotion/core@^10.1.1": +"@emotion/core@^10.1.1": version "10.1.1" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3" integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA== @@ -4099,7 +4099,7 @@ "@emotion/sheet" "0.9.4" "@emotion/utils" "0.11.3" -"@emotion/css@^10.0.27", "@emotion/css@^10.0.9": +"@emotion/css@^10.0.27": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c" integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw== @@ -5102,6 +5102,24 @@ util-deprecate "^1.0.2" uuid-browser "^3.1.0" +"@storybook/addon-controls@^6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.5.12.tgz#01978f624b3ef29610e8e573e93fa063be37d7af" + integrity sha512-UoaamkGgAQXplr0kixkPhROdzkY+ZJQpG7VFDU6kmZsIgPRNfX/QoJFR5vV6TpDArBIjWaUUqWII+GHgPRzLgQ== + dependencies: + "@storybook/addons" "6.5.12" + "@storybook/api" "6.5.12" + "@storybook/client-logger" "6.5.12" + "@storybook/components" "6.5.12" + "@storybook/core-common" "6.5.12" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/node-logger" "6.5.12" + "@storybook/store" "6.5.12" + "@storybook/theming" "6.5.12" + core-js "^3.8.2" + lodash "^4.17.21" + ts-dedent "^2.0.0" + "@storybook/addon-docs@^6.3.8": version "6.3.8" resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.8.tgz#14ef3faebecc80e33e29fa6581659311a730ebe8" @@ -5152,23 +5170,6 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-knobs@^6.3.1": - version "6.3.1" - resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-6.3.1.tgz#2115c6f0d5759e4fe73d5f25710f4a94ebd6f0db" - integrity sha512-2GGGnQSPXXUhHHYv4IW6pkyQlCPYXKYiyGzfhV7Zhs95M2Ban08OA6KLmliMptWCt7U9tqTO8dB5u0C2cWmCTw== - dependencies: - copy-to-clipboard "^3.3.1" - core-js "^3.8.2" - escape-html "^1.0.3" - fast-deep-equal "^3.1.3" - global "^4.4.0" - lodash "^4.17.20" - prop-types "^15.7.2" - qs "^6.10.0" - react-colorful "^5.1.2" - react-lifecycles-compat "^3.0.4" - react-select "^3.2.0" - "@storybook/addons@6.3.10": version "6.3.10" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.10.tgz#a9fab13e6b81279f1dcdc54220dc4becac4b7a21" @@ -5214,6 +5215,23 @@ global "^4.4.0" regenerator-runtime "^0.13.7" +"@storybook/addons@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.12.tgz#891767b5f88ea99b956cf19e9e2893594068adc7" + integrity sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw== + dependencies: + "@storybook/api" "6.5.12" + "@storybook/channels" "6.5.12" + "@storybook/client-logger" "6.5.12" + "@storybook/core-events" "6.5.12" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.12" + "@storybook/theming" "6.5.12" + "@types/webpack-env" "^1.16.0" + core-js "^3.8.2" + global "^4.4.0" + regenerator-runtime "^0.13.7" + "@storybook/addons@^6.3.9": version "6.3.9" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.9.tgz#e12c8d4351b861d67cb6b8d64ed33b1f6b90994f" @@ -5333,6 +5351,29 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/api@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.12.tgz#7cc82087fc9298be03f15bf4ab9c4aab294b3bac" + integrity sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ== + dependencies: + "@storybook/channels" "6.5.12" + "@storybook/client-logger" "6.5.12" + "@storybook/core-events" "6.5.12" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.12" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.5.12" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + store2 "^2.12.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/builder-webpack4@6.3.8": version "6.3.8" resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.8.tgz#9ffe866fbd50a94b3cf3ecde1fe4d5f29dd337e8" @@ -5484,6 +5525,15 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/channels@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.12.tgz#98baf01691d263e2ac341853361ec69c1a6621bc" + integrity sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw== + dependencies: + core-js "^3.8.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/cli@^6.3.10": version "6.3.10" resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-6.3.10.tgz#5ad3438a0b73299870deda09728dba77717573bf" @@ -5628,6 +5678,14 @@ core-js "^3.8.2" global "^4.4.0" +"@storybook/client-logger@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.12.tgz#d9809e13dc7939eb61452a5e94b1ccb61c4a022c" + integrity sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw== + dependencies: + core-js "^3.8.2" + global "^4.4.0" + "@storybook/codemod@6.3.10": version "6.3.10" resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-6.3.10.tgz#aad0ee5ca8ef59b4d134ff45e213e198d64c9974" @@ -5737,6 +5795,20 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/components@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.12.tgz#e137f0683ea92e22de116bfa62cfd65ce4efe01d" + integrity sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig== + dependencies: + "@storybook/client-logger" "6.5.12" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/theming" "6.5.12" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + util-deprecate "^1.0.2" + "@storybook/core-client@6.3.8": version "6.3.8" resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.8.tgz#9223b9f22ab86d205dac605bcef15ba0f0068e15" @@ -5814,6 +5886,62 @@ util-deprecate "^1.0.2" webpack "4" +"@storybook/core-common@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.12.tgz#9f8d5cb3812382c49c84dcfb4279a39e228a1b83" + integrity sha512-gG20+eYdIhwQNu6Xs805FLrOCWtkoc8Rt8gJiRt8yXzZh9EZkU4xgCRoCxrrJ03ys/gTiCFbBOfRi749uM3z4w== + dependencies: + "@babel/core" "^7.12.10" + "@babel/plugin-proposal-class-properties" "^7.12.1" + "@babel/plugin-proposal-decorators" "^7.12.12" + "@babel/plugin-proposal-export-default-from" "^7.12.1" + "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1" + "@babel/plugin-proposal-object-rest-spread" "^7.12.1" + "@babel/plugin-proposal-optional-chaining" "^7.12.7" + "@babel/plugin-proposal-private-methods" "^7.12.1" + "@babel/plugin-proposal-private-property-in-object" "^7.12.1" + "@babel/plugin-syntax-dynamic-import" "^7.8.3" + "@babel/plugin-transform-arrow-functions" "^7.12.1" + "@babel/plugin-transform-block-scoping" "^7.12.12" + "@babel/plugin-transform-classes" "^7.12.1" + "@babel/plugin-transform-destructuring" "^7.12.1" + "@babel/plugin-transform-for-of" "^7.12.1" + "@babel/plugin-transform-parameters" "^7.12.1" + "@babel/plugin-transform-shorthand-properties" "^7.12.1" + "@babel/plugin-transform-spread" "^7.12.1" + "@babel/preset-env" "^7.12.11" + "@babel/preset-react" "^7.12.10" + "@babel/preset-typescript" "^7.12.7" + "@babel/register" "^7.12.1" + "@storybook/node-logger" "6.5.12" + "@storybook/semver" "^7.3.2" + "@types/node" "^14.0.10 || ^16.0.0" + "@types/pretty-hrtime" "^1.0.0" + babel-loader "^8.0.0" + babel-plugin-macros "^3.0.1" + babel-plugin-polyfill-corejs3 "^0.1.0" + chalk "^4.1.0" + core-js "^3.8.2" + express "^4.17.1" + file-system-cache "^1.0.5" + find-up "^5.0.0" + fork-ts-checker-webpack-plugin "^6.0.4" + fs-extra "^9.0.1" + glob "^7.1.6" + handlebars "^4.7.7" + interpret "^2.2.0" + json5 "^2.1.3" + lazy-universal-dotenv "^3.0.1" + picomatch "^2.3.0" + pkg-dir "^5.0.0" + pretty-hrtime "^1.0.3" + resolve-from "^5.0.0" + slash "^3.0.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + webpack "4" + "@storybook/core-events@6.3.10": version "6.3.10" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.10.tgz#82b41291b8baf1fae8848c603f0b825b3c42e3b5" @@ -5842,6 +5970,13 @@ dependencies: core-js "^3.8.2" +"@storybook/core-events@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.12.tgz#28bd727cc4216012409bfac412fcb708346c56bc" + integrity sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg== + dependencies: + core-js "^3.8.2" + "@storybook/core-events@^6.3.0": version "6.4.13" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.4.13.tgz#caf1adafd743f8d53a151bc402449f841896cb9c" @@ -5944,6 +6079,13 @@ dependencies: lodash "^4.17.15" +"@storybook/csf@0.0.2--canary.4566f4d.1": + version "0.0.2--canary.4566f4d.1" + resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz#dac52a21c40ef198554e71fe4d20d61e17f65327" + integrity sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ== + dependencies: + lodash "^4.17.15" + "@storybook/ember-cli-storybook@^0.5.0": version "0.5.0" resolved "https://registry.yarnpkg.com/@storybook/ember-cli-storybook/-/ember-cli-storybook-0.5.0.tgz#b97fc212e6920871f0d6ac4348d663c335ff61b4" @@ -6037,6 +6179,17 @@ npmlog "^4.1.2" pretty-hrtime "^1.0.3" +"@storybook/node-logger@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.12.tgz#0f9efcd1a37c7aae493b22fe33cacca87c135b9b" + integrity sha512-jdLtT3mX5GQKa+0LuX0q0sprKxtCGf6HdXlKZGD5FEuz4MgJUGaaiN0Hgi+U7Z4tVNOtSoIbYBYXHqfUgJrVZw== + dependencies: + "@types/npmlog" "^4.1.2" + chalk "^4.1.0" + core-js "^3.8.2" + npmlog "^5.0.1" + pretty-hrtime "^1.0.3" + "@storybook/postinstall@6.3.8": version "6.3.8" resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.8.tgz#9c3a4ad631a4b952b3fdf686cf60716c62f3e131" @@ -6108,6 +6261,17 @@ qs "^6.10.0" ts-dedent "^2.0.0" +"@storybook/router@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.12.tgz#58efbc1f2f301c8584802af1c710b2f6f03f948c" + integrity sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w== + dependencies: + "@storybook/client-logger" "6.5.12" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + "@storybook/semver@^7.3.2": version "7.3.2" resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0" @@ -6132,6 +6296,27 @@ prettier "~2.2.1" regenerator-runtime "^0.13.7" +"@storybook/store@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.12.tgz#f1624ba942162cb9627a2ddcac72bfc9062e17a2" + integrity sha512-SMQOr0XvV0mhTuqj3XOwGGc4kTPVjh3xqrG1fqkj9RGs+2jRdmO6mnwzda5gPwUmWNTorZ7FxZ1iEoyfYNtuiQ== + dependencies: + "@storybook/addons" "6.5.12" + "@storybook/client-logger" "6.5.12" + "@storybook/core-events" "6.5.12" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + slash "^3.0.0" + stable "^0.1.8" + synchronous-promise "^2.0.15" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/theming@6.3.10": version "6.3.10" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.10.tgz#9a46bff3517fd6bfcc816376b426476811712f2e" @@ -6204,6 +6389,16 @@ resolve-from "^5.0.0" ts-dedent "^2.0.0" +"@storybook/theming@6.5.12": + version "6.5.12" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.12.tgz#7df1b52913d49c5e84fc1f2e837c02d9fa8cc639" + integrity sha512-uWOo84qMQ2R6c1C0faZ4Q0nY01uNaX7nXoJKieoiJ6ZqY9PSYxJl1kZLi3uPYnrxLZjzjVyXX8MgdxzbppYItA== + dependencies: + "@storybook/client-logger" "6.5.12" + core-js "^3.8.2" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + "@storybook/theming@^6.3.0": version "6.4.13" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.4.13.tgz#1a8aadeddb6c3a115f739aa1a4bbd7e65d4a3830" @@ -6641,6 +6836,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.9.tgz#b97c057e6138adb7b720df2bd0264b03c9f504fd" integrity sha512-CMjgRNsks27IDwI785YMY0KLt3co/c0cQ5foxHYv/shC2w8oOnVwz5Ubq1QG5KzrcW+AXk6gzdnxIkDnTvzu3g== +"@types/node@^14.0.10 || ^16.0.0": + version "16.11.67" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.67.tgz#b499556b395182e4ab9e591cb0b4d2561580a4b0" + integrity sha512-A+ogdyb7/N8SzE4H9o6yXqSez+acp2XCYSv/PBx2yP7yUVRWf+hO4lSqwt27G9F+4KxnWxybJIe+4FV+Zv+iEg== + "@types/node@^9.6.0": version "9.6.61" resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.61.tgz#29f124eddd41c4c74281bd0b455d689109fc2a2d" @@ -7579,6 +7779,14 @@ archy@~1.0.0: resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40" integrity sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw== +are-we-there-yet@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz#372e0e7bd279d8e94c653aaa1f67200884bf3e1c" + integrity sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw== + dependencies: + delegates "^1.0.0" + readable-stream "^3.6.0" + are-we-there-yet@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz#ba20bd6b553e31d62fc8c31bd23d22b95734390d" @@ -7997,6 +8205,16 @@ babel-jest@^27.4.6: graceful-fs "^4.2.4" slash "^3.0.0" +babel-loader@^8.0.0, babel-loader@^8.2.5: + version "8.2.5" + resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e" + integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ== + dependencies: + find-cache-dir "^3.3.1" + loader-utils "^2.0.0" + make-dir "^3.1.0" + schema-utils "^2.6.5" + babel-loader@^8.0.6, babel-loader@^8.2.2: version "8.2.2" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81" @@ -8007,16 +8225,6 @@ babel-loader@^8.0.6, babel-loader@^8.2.2: make-dir "^3.1.0" schema-utils "^2.6.5" -babel-loader@^8.2.5: - version "8.2.5" - resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e" - integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ== - dependencies: - find-cache-dir "^3.3.1" - loader-utils "^2.0.0" - make-dir "^3.1.0" - schema-utils "^2.6.5" - babel-messages@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e" @@ -10244,7 +10452,7 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-support@^1.1.3: +color-support@^1.1.2, color-support@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== @@ -11397,14 +11605,6 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" -dom-helpers@^5.0.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" - integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== - dependencies: - "@babel/runtime" "^7.8.7" - csstype "^3.0.2" - dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -13382,7 +13582,7 @@ escape-goat@^2.0.0: resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675" integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q== -escape-html@^1.0.3, escape-html@~1.0.3: +escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= @@ -14953,6 +15153,21 @@ galactus@^0.2.1: flora-colossus "^1.0.0" fs-extra "^4.0.0" +gauge@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395" + integrity sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q== + dependencies: + aproba "^1.0.3 || ^2.0.0" + color-support "^1.1.2" + console-control-strings "^1.0.0" + has-unicode "^2.0.1" + object-assign "^4.1.1" + signal-exit "^3.0.0" + string-width "^4.2.3" + strip-ansi "^6.0.1" + wide-align "^1.1.2" + gauge@^4.0.3: version "4.0.4" resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce" @@ -15515,7 +15730,7 @@ gzip-size@5.1.1: duplexer "^0.1.1" pify "^4.0.1" -handlebars@^4.0.13, handlebars@^4.0.4, handlebars@^4.3.1, handlebars@^4.4.2, handlebars@^4.7.3: +handlebars@^4.0.13, handlebars@^4.0.4, handlebars@^4.3.1, handlebars@^4.4.2, handlebars@^4.7.3, handlebars@^4.7.7: version "4.7.7" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1" integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA== @@ -19271,11 +19486,6 @@ memfs@^3.1.2: dependencies: fs-monkey "1.0.3" -memoize-one@^5.0.0: - version "5.2.1" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" - integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== - memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -20498,6 +20708,16 @@ npmlog@^4.1.2, npmlog@~4.1.2: gauge "~2.7.3" set-blocking "~2.0.0" +npmlog@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0" + integrity sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw== + dependencies: + are-we-there-yet "^2.0.0" + console-control-strings "^1.1.0" + gauge "^3.0.0" + set-blocking "^2.0.0" + npmlog@^6.0.0: version "6.0.2" resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-6.0.2.tgz#c8166017a42f2dea92d6453168dd865186a70830" @@ -21318,7 +21538,7 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== -picomatch@^2.3.1: +picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -21896,7 +22116,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -22298,13 +22518,6 @@ react-helmet-async@^1.0.7: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-input-autosize@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85" - integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg== - dependencies: - prop-types "^15.5.8" - react-inspector@^5.1.0: version "5.1.1" resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8" @@ -22346,20 +22559,6 @@ react-popper@^2.2.4: react-fast-compare "^3.0.1" warning "^4.0.2" -react-select@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe" - integrity sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/cache" "^10.0.9" - "@emotion/core" "^10.0.9" - "@emotion/css" "^10.0.9" - memoize-one "^5.0.0" - prop-types "^15.6.0" - react-input-autosize "^3.0.0" - react-transition-group "^4.3.0" - react-sizeme@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.1.tgz#4d12f4244e0e6a0fb97253e7af0314dc7c83a5a0" @@ -22401,16 +22600,6 @@ react-textarea-autosize@^8.3.0: use-composed-ref "^1.0.0" use-latest "^1.0.0" -react-transition-group@^4.3.0: - version "4.4.2" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" - integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react@16.14.0, react@^16: version "16.14.0" resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" @@ -24946,6 +25135,11 @@ sync-disk-cache@^2.0.0: rimraf "^3.0.0" username-sync "^1.0.2" +synchronous-promise@^2.0.15: + version "2.0.16" + resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.16.tgz#669b75e86b4295fdcc1bb0498de9ac1af6fd51a9" + integrity sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A== + tabbable@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c" @@ -25020,6 +25214,20 @@ telejson@^5.3.2: lodash "^4.17.21" memoizerific "^1.11.3" +telejson@^6.0.8: + version "6.0.8" + resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7" + integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg== + dependencies: + "@types/is-function" "^1.0.0" + global "^4.4.0" + is-function "^1.0.2" + is-regex "^1.1.2" + is-symbol "^1.0.3" + isobject "^4.0.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + temp-dir@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e" @@ -26556,7 +26764,7 @@ wide-align@1.1.3, wide-align@^1.1.0: dependencies: string-width "^1.0.2 || 2" -wide-align@^1.1.5: +wide-align@^1.1.2, wide-align@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3" integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==