m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Use Component Story Format for stories (#8108)

Browse Source 
The recommended way of writing stories changed in Storybook v5.2 to
the Component Story Format (CSF). Instead of using `storiesOf` and
running everything upon module import, the new story format is a
declarative description of each component that uses ES6 import
semantics.
This commit is contained in:
Mark Stacey 2020-02-26 10:13:56 -04:00 committed by GitHub
parent cb995d66da
commit 7a9f53c99d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 175 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
ui/app/components/ui/button-group/button-group.stories.js
View File

@ -1,49 +1,52 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import ButtonGroup from '.'
import Button from '../button'
import { text, boolean } from '@storybook/addon-knobs/react'
storiesOf('ButtonGroup', module)
.add('with Buttons', () => (
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
defaultActiveButtonIndex={1}
export default {
title: 'ButtonGroup',
}
export const withButtons = () => (
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
defaultActiveButtonIndex={1}
>
<Button
onClick={action('cheap')}
>
<Button
onClick={action('cheap')}
>
{text('Button1', 'Cheap')}
</Button>
<Button
onClick={action('average')}
>
{text('Button2', 'Average')}
</Button>
<Button
onClick={action('fast')}
>
{text('Button3', 'Fast')}
</Button>
</ButtonGroup>
))
.add('with a disabled Button', () => (
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
{text('Button1', 'Cheap')}
</Button>
<Button
onClick={action('average')}
>
<Button
onClick={action('enabled')}
>
{text('Button1', 'Enabled')}
</Button>
<Button
onClick={action('disabled')}
disabled
>
{text('Button2', 'Disabled')}
</Button>
</ButtonGroup>
))
{text('Button2', 'Average')}
</Button>
<Button
onClick={action('fast')}
>
{text('Button3', 'Fast')}
</Button>
</ButtonGroup>
)
export const withDisabledButton = () => (
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
>
<Button
onClick={action('enabled')}
>
{text('Button1', 'Enabled')}
</Button>
<Button
onClick={action('disabled')}
disabled
>
{text('Button2', 'Disabled')}
</Button>
</ButtonGroup>
)

139
ui/app/components/ui/button/button.stories.js
View File

@ -1,71 +1,78 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import Button from '.'
import { text, boolean } from '@storybook/addon-knobs/react'
// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')}
storiesOf('Button', module)
.add('Button - Primary', () => (
<Button
onClick={action('clicked')}
type="primary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('Button - Secondary', () => (
<Button
onClick={action('clicked')}
type="secondary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('Button - Default', () => (
<Button
onClick={action('clicked')}
type="default"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('Button - Warning', () => (
<Button
onClick={action('clicked')}
type="warning"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('Button - Danger', () => (
<Button
onClick={action('clicked')}
type="danger"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('Button - Danger Primary', () => (
<Button
onClick={action('clicked')}
type="danger-primary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
.add('Button - Link', () => (
<Button
onClick={action('clicked')}
type="link"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
))
export default {
title: 'Button',
}
export const primaryType = () => (
<Button
onClick={action('clicked')}
type="primary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
export const secondaryType = () => (
<Button
onClick={action('clicked')}
type="secondary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
export const defaultType = () => (
<Button
onClick={action('clicked')}
type="default"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
export const warningType = () => (
<Button
onClick={action('clicked')}
type="warning"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
export const dangerType = () => (
<Button
onClick={action('clicked')}
type="danger"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
export const dangerPrimaryType = () => (
<Button
onClick={action('clicked')}
type="danger-primary"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)
export const linkType = () => (
<Button
onClick={action('clicked')}
type="link"
disabled={boolean('disabled', false)}
>
{text('text', 'Click me')}
</Button>
)

108
ui/app/components/ui/text-field/text-field.stories.js
View File

@ -1,53 +1,61 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import TextField from '.'
storiesOf('TextField', module)
.add('text', () => (
<TextField
label="Text"
type="text"
/>
))
.add('password', () => (
<TextField
label="Password"
type="password"
/>
))
.add('error', () => (
<TextField
type="text"
label="Name"
error="Invalid value"
/>
))
.add('Mascara text', () => (
<TextField
label="Text"
type="text"
largeLabel
/>
))
.add('Material text', () => (
<TextField
label="Text"
type="text"
theme="material"
/>
))
.add('Material password', () => (
<TextField
label="Password"
type="password"
theme="material"
/>
))
.add('Material error', () => (
<TextField
type="text"
label="Name"
error="Invalid value"
theme="material"
/>
))
export default {
title: 'TextField',
}
export const text = () => (
<TextField
label="Text"
type="text"
/>
)
export const password = () => (
<TextField
label="Password"
type="password"
/>
)
export const error = () => (
<TextField
type="text"
label="Name"
error="Invalid value"
/>
)
export const mascaraText = () => (
<TextField
label="Text"
type="text"
largeLabel
/>
)
export const materialText = () => (
<TextField
label="Text"
type="text"
theme="material"
/>
)
export const materialPassword = () => (
<TextField
label="Password"
type="password"
theme="material"
/>
)
export const materialError = () => (
<TextField
type="text"
label="Name"
error="Invalid value"
theme="material"
/>
)