CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 💡 migrate component stories to storybook docs

Browse Source
This commit is contained in:
Randall Morey committed 2020-05-08 15:38:53 -04:00
1 parent 9cbfa9760f
commit a17abdb126
9 files changed
+1893 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/.storybook/main.js
+2 -3
View File
@@ -1,9 +1,8 @@
module.exports = {
stories: ['../stories/**/*.stories.js'],
stories: ['../addon/components/**/*.stories.(js|mdx)'],
addons: [
'@storybook/addon-knobs',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-storysource'
'@storybook/addon-docs',
]
};
addons/rose/addon/components/rose/button.stories.mdx
+98
View File
@@ -0,0 +1,98 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Button" component="Button" />
# Button
A simple button component that renders an HTML `<button>` element. May be used
to trigger actions or to submit forms. Avoid using buttons as simple links to
other routes. For accessibility, use links instead.
```htmlbars
<Rose::Button @style="primary" @iconRight="chevron-right">
Action
</Rose::Button>
```
<Preview>
<Story name="Advanced">{{
template: hbs`
<Rose::Button
@submit={{submit}}
@disabled={{disabled}}
@style={{style}}
@iconLeft={{iconLeft}}
@iconRight={{iconRight}}
{{on "click" onClick}}
>
{{text}}
</Rose::Button>
`,
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',
{
'check-circle-outline': 'check-circle-outline',
'copy-action': 'copy-action',
'unfold-more': 'unfold-more',
'unfold-less': 'unfold-less',
},
'check-circle-outline'
),
iconRight: select(
'iconRight',
{
'check-circle-outline': 'check-circle-outline',
'copy-action': 'chevron-right',
'copy-action': 'copy-action',
'unfold-more': 'unfold-more',
'unfold-less': 'unfold-less',
},
'chevron-right'
),
onClick: action('clicked'),
},
}}</Story>
</Preview>
Buttons may show only an icon. You should still pass block content into the
button in this case for accessibility.
<Preview>
<Story name="Icon Only">{{
template: hbs`
<Rose::Button @style="secondary" @iconOnly={{iconOnly}}>
Icon Only
</Rose::Button>
`,
context: {
iconOnly: select(
'iconOnly',
{
'check-circle-outline': 'check-circle-outline',
'copy-action': 'copy-action',
'unfold-more': 'unfold-more',
'unfold-less': 'unfold-less',
},
'check-circle-outline'
),
},
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/checkbox.stories.mdx
+44
View File
@@ -0,0 +1,44 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Form/Checkbox" component="Form/Checkbox" />
# Form Checkobx
Renders a form input checkbox.
```htmlbars
<Rose::Form::Checkbox
@id="form-field-1"
name="boolean-value"
@label="Yes?"
@checked={{false}}
@error={{false}}
disabled={{false}}
/>
```
<Preview>
<Story name="Basic" height="10rem">{{
template: hbs`
<Rose::Form::Checkbox
@id={{id}}
name={{name}}
@label={{label}}
@checked={{checked}}
@error={{error}}
disabled={{disabled}}
/>
`,
context: {
label: text('text', 'Checkbox 🛎'),
id: text('id', 'checkbox-1'),
name: text('name', 'checkbox-1'),
checked: boolean('checked', false),
error: boolean('error', false),
disabled: boolean('disabled', false),
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/input.stories.mdx
+56
View File
@@ -0,0 +1,56 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Form/Input" component="Form/Input" />
# Form Input
Renders a simple form input.
```htmlbars
<Rose::Form::Input
@type="email"
@value="info@example.com"
@label="Email"
@helperText="Enter your email"
@error={{false}}
disabled={{false}}
readonly={{false}}
/>
```
<Preview>
<Story name="Basic">{{
template: hbs`
<Rose::Form::Input
@type={{type}}
@value={{value}}
@label={{label}}
@helperText={{helperText}}
@error={{error}}
disabled={{disabled}}
readonly={{read-only}}
/>
`,
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'),
disabled: boolean('disabled', false),
'read-only': boolean('readonly', false),
error: boolean('error', false),
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/select.stories.mdx
+67
View File
@@ -0,0 +1,67 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Form/Select" component="Form/Select" />
# Form Select
Renders a form select element.
```htmlbars
<Rose::Form::Select
@id="select-id"
@value="green"
@label="Color"
@helperText="Set your desired color"
disabled={{false}}
@error={{false}}
as |select|
>
<select.option>Choose a color</select.option>
<select.option @value="red">Red</select.option>
<select.option @value="green">Green</select.option>
<select.option @value="blue">Blue</select.option>
</Rose::Form::Select>
```
<Preview>
<Story name="Basic" height="10rem">{{
template: hbs`
<Rose::Form::Select
@id={{id}}
@value={{value}}
@label={{label}}
@helperText={{helperText}}
disabled={{disabled}}
@error={{error}}
@onChange={{fn onChange}}
as |select|
>
<select.option>Choose an option</select.option>
<select.option @value="value-1">Value 1</select.option>
<select.option @value="value-2">Value 2</select.option>
<select.option @value="value-3">Value 3</select.option>
</Rose::Form::Select>
`,
context: {
value: select(
'value',
{
null: null,
'value-1': 'value-1',
'value-2': 'value-2',
'value-3': 'value-3',
},
null
),
id: text('id', 'field-id'),
label: text('label', 'Label'),
helperText: text('helperText', 'Helper text'),
disabled: boolean('disabled', false),
error: boolean('error', false),
onChange: action('changed'),
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/form/textarea.stories.mdx
+44
View File
@@ -0,0 +1,44 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Form/Textarea" component="Form/Textarea" />
# Form Textarea
Renders a simple form textarea.
```htmlbars
<Rose::Form::Textarea
@value="Descriptive content"
@label="Description"
@helperText="Enter a description"
@error={{false}}
disabled={{false}}
readonly={{false}}
/>
```
<Preview>
<Story name="Basic" height="10rem">{{
template: hbs`
<Rose::Form::Textarea
@value={{value}}
@label={{label}}
@helperText={{helperText}}
@error={{error}}
disabled={{disabled}}
readonly={{read-only}}
/>
`,
context: {
value: text('value', 'Value'),
label: text('label', 'Label'),
helperText: text('helperText', 'Helper text'),
disabled: boolean('disabled', false),
'read-only': boolean('readonly', false),
error: boolean('error', false),
}
}}</Story>
</Preview>
addons/rose/addon/components/rose/icon.stories.mdx
+36
View File
@@ -0,0 +1,36 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { text, boolean, select } from '@storybook/addon-knobs';
<Meta title="Rose|Icon" component="Icon" />
# Icon
Renders a simple icon from [Structure Icons][structure-icons].
[structure-icons]: https://github.com/hashicorp/structure-icons
```htmlbars
<Rose::Icon @name={{name}} @size={{size}} />
```
<Preview>
<Story name="Basic">{{
template: hbs`
<Rose::Icon @name={{name}} @size={{size}} />
`,
context: {
name: select(
'name',
{
'check-circle-outline': 'check-circle-outline',
'copy-action': 'copy-action',
'unfold-more': 'unfold-more',
'unfold-less': 'unfold-less',
},
'check-circle-outline'
),
}
}}</Story>
</Preview>
addons/rose/package.json
+1 -2
View File
@@ -36,9 +36,8 @@
"@glimmer/tracking": "^1.0.0",
"@hashicorp/structure-icons": "^1.8.1",
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-docs": "^5.3.18",
"@storybook/addon-knobs": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addon-storysource": "^5.3.18",
"@storybook/ember": "^5.3.18",
"@storybook/ember-cli-storybook": "^0.2.1",
"babel-eslint": "^10.0.3",
yarn.lock
+1545 -80
View File
File diff suppressed because it is too large. Load diff