IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: storybook: Simplified button stories

Browse Source
This commit is contained in:
Alexey Safronov 2019-06-28 11:36:06 +03:00
parent 039890582b
commit c6c17a7f83
10 changed files with 9 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/ASC.Web.Components/example/stories/buttons/base/README.md
View File

@ -8,7 +8,7 @@ import { Button } from 'asc-web-components';
#### Description
Base Button is used for a action on a page.
Button is used for a action on a page.
#### Usage
@ -20,8 +20,10 @@ Base Button is used for a action on a page.
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `isLoading` | `bool` | - | - | - | Tells when the button should show loader icon |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |

3
web/ASC.Web.Components/example/stories/buttons/base/base.button.stories.js
View File

@ -14,11 +14,12 @@ storiesOf('Components|Buttons', module)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Section>
<Button
<Button
size={select('size', sizeOptions, 'base')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
isLoading={boolean('isLoading', false)}
label={text('label', 'Base button')}
/>
</Section>

27
web/ASC.Web.Components/example/stories/buttons/big/README.md
View File

@ -1,27 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Big Button is used for a action on a page.
#### Usage
```js
<Button size='big' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

25
web/ASC.Web.Components/example/stories/buttons/big/big.button.stories.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('big', () => (
<Section>
<Button
size={select('size', sizeOptions, 'big')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
label={text('label', 'Base button')}
/>
</Section>
));

27
web/ASC.Web.Components/example/stories/buttons/huge/README.md
View File

@ -1,27 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Huge Button is used for a action on a page.
#### Usage
```js
<Button size='huge' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

25
web/ASC.Web.Components/example/stories/buttons/huge/huge.button.stories.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('huge', () => (
<Section>
<Button
size={select('size', sizeOptions, 'huge')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
label={text('label', 'Base button')}
/>
</Section>
));

28
web/ASC.Web.Components/example/stories/buttons/middle/README.md
View File

@ -1,28 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Middle Button is used for a action on a page.
#### Usage
```js
<Button size='middle' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

25
web/ASC.Web.Components/example/stories/buttons/middle/middle.button.stories.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('middle', () => (
<Section>
<Button
size={select('size', sizeOptions, 'middle')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
label={text('label', 'Base button')}
/>
</Section>
));

28
web/ASC.Web.Components/example/stories/buttons/with-Loader/README.md
View File

@ -1,28 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Middle Button is used for a action on a page.
#### Usage
```js
<Button size='middle' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

26
web/ASC.Web.Components/example/stories/buttons/with-Loader/with-loader.button.stories.js
View File

@ -1,26 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('with loader', () => (
<Section>
<Button
size={select('size', sizeOptions, 'base')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
isLoading={boolean('isLoading', true)}
label={text('label', 'Loading...')}
/>
</Section>
));