-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add async action button component * docs: add documentation for async button * fix: rename to StatefulButton and add component export
- Loading branch information
1 parent
2ac0705
commit d1ed714
Showing
10 changed files
with
653 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # Stateful Button | ||
|
|
||
| A button that can display different states. Each state has: | ||
|
|
||
| - A label (required) | ||
| - An icon | ||
| - an option to be disabled | ||
|
|
||
| These are controlled by the props `labels`, `icons`, and `disabledStates`. | ||
|
|
||
| Button states can be whatever you want them to be, but default icons exist for: | ||
|
|
||
| - `pending`, `complete`, and `error`. | ||
|
|
||
| Control the state with the `state` prop. Example usage: | ||
|
|
||
| ```jsx | ||
| <StatefulButton | ||
| state="pending" | ||
| labels={{ | ||
| default: 'Download', | ||
| pending: 'Downloading', | ||
| complete: 'Downloaded', | ||
| }} | ||
| icons={{ | ||
| default: <Icon className="fa fa-download" />, | ||
| pending: <Icon className="fa fa-spinner fa-spin" />, | ||
| complete: <Icon className="fa fa-check" />, | ||
| }} | ||
| disabledStates=['pending'] | ||
| className='btn-primary mr-2' | ||
| /> | ||
| ``` | ||
|
|
||
| All other props sent to this component will be passed through to the underlying Button component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .pgn__stateful-btn-icon { | ||
| margin-right: .5em; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
|
|
||
| import StatefulButton from './index'; | ||
| import Icon from '../Icon'; | ||
| import README from './README.md'; | ||
|
|
||
| storiesOf('Basics|StatefulButton', module) | ||
| .addParameters({ info: { text: README } }) | ||
| .add('basic usage', () => { | ||
| const props = { | ||
| labels: { | ||
| default: 'Saved', | ||
| pending: 'Saving', | ||
| complete: 'Saved', | ||
| }, | ||
| className: 'btn-primary mr-2', | ||
| }; | ||
| return ( | ||
| <div> | ||
| <StatefulButton {...props} /> | ||
| <StatefulButton state="pending" {...props} /> | ||
| <StatefulButton state="complete" {...props} /> | ||
| </div> | ||
| ); | ||
| }) | ||
| .add('custom icons and disable during state', () => { | ||
| const downloadButtonProps = { | ||
| labels: { | ||
| default: 'Download', | ||
| pending: 'Downloading', | ||
| complete: 'Downloaded', | ||
| }, | ||
| icons: { | ||
| default: <Icon className="fa fa-download" />, | ||
| pending: <Icon className="fa fa-spinner fa-spin" />, | ||
| complete: <Icon className="fa fa-check" />, | ||
| }, | ||
| disabledStates: ['pending'], | ||
| className: 'btn-primary mr-2', | ||
| }; | ||
| return ( | ||
| <React.Fragment> | ||
| <StatefulButton state="default" {...downloadButtonProps} /> | ||
| <StatefulButton state="pending" {...downloadButtonProps} /> | ||
| <StatefulButton state="complete" {...downloadButtonProps} /> | ||
| </React.Fragment> | ||
| ); | ||
| }) | ||
| .add('custom states', () => { | ||
| const buttonProps = { | ||
| labels: { | ||
| unedited: 'Save (no changes)', | ||
| edited: 'Save Changes', | ||
| }, | ||
| icons: { | ||
| unedited: <Icon className="fa fa-save" />, | ||
| edited: <Icon className="fa fa-save" />, | ||
| }, | ||
| disabledStates: ['unedited'], | ||
| className: 'btn-primary mr-2', | ||
| }; | ||
| return ( | ||
| <React.Fragment> | ||
| <StatefulButton state="unedited" {...buttonProps} /> | ||
| <StatefulButton state="edited" {...buttonProps} /> | ||
| </React.Fragment> | ||
| ); | ||
| }); |
Oops, something went wrong.