mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
7a9f53c99d
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.
79 lines
1.5 KiB
JavaScript
79 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { action } from '@storybook/addon-actions'
|
|
import Button from '.'
|
|
import { text, boolean } from '@storybook/addon-knobs/react'
|
|
|
|
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>
|
|
)
|