diff options
author | kumavis <aaron@kumavis.me> | 2018-06-07 02:08:29 +0800 |
---|---|---|
committer | kumavis <aaron@kumavis.me> | 2018-06-07 02:08:29 +0800 |
commit | 9d77b0a19648fa5c4de594bbecaab2137d5d5658 (patch) | |
tree | fe87a5798021ac1b3332a3a13a70f5c4a930e126 /ui/app/components/button | |
parent | 32293a959c367ce5dd585111d4ee0d873072c830 (diff) | |
parent | c2e3194dbf4e2a3fd2bdffb3300ec0cd822dc78e (diff) | |
download | tangerine-wallet-browser-9d77b0a19648fa5c4de594bbecaab2137d5d5658.tar.gz tangerine-wallet-browser-9d77b0a19648fa5c4de594bbecaab2137d5d5658.tar.zst tangerine-wallet-browser-9d77b0a19648fa5c4de594bbecaab2137d5d5658.zip |
Merge branch 'develop' of github.com:MetaMask/metamask-extension into network-remove-provider-engine
Diffstat (limited to 'ui/app/components/button')
-rw-r--r-- | ui/app/components/button/button.component.js | 23 | ||||
-rw-r--r-- | ui/app/components/button/button.stories.js | 19 |
2 files changed, 29 insertions, 13 deletions
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js index fe3bf363c..e8e798445 100644 --- a/ui/app/components/button/button.component.js +++ b/ui/app/components/button/button.component.js @@ -2,20 +2,15 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -const SECONDARY = 'secondary' +const CLASSNAME_DEFAULT = 'btn-default' const CLASSNAME_PRIMARY = 'btn-primary' -const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg' const CLASSNAME_SECONDARY = 'btn-secondary' -const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg' +const CLASSNAME_LARGE = 'btn--large' -const getClassName = (type, large = false) => { - let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY - - if (large) { - output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}` - } - - return output +const typeHash = { + default: CLASSNAME_DEFAULT, + primary: CLASSNAME_PRIMARY, + secondary: CLASSNAME_SECONDARY, } class Button extends Component { @@ -24,7 +19,11 @@ class Button extends Component { return ( <button - className={classnames(getClassName(type, large), className)} + className={classnames( + typeHash[type], + large && CLASSNAME_LARGE, + className + )} { ...buttonProps } > { this.props.children } diff --git a/ui/app/components/button/button.stories.js b/ui/app/components/button/button.stories.js index d1e14e869..dec084a25 100644 --- a/ui/app/components/button/button.stories.js +++ b/ui/app/components/button/button.stories.js @@ -13,13 +13,21 @@ storiesOf('Button', module) {text('text', 'Click me')} </Button> ) - .add('secondary', () => ( + .add('secondary', () => <Button onClick={action('clicked')} type="secondary" > {text('text', 'Click me')} </Button> + ) + .add('default', () => ( + <Button + onClick={action('clicked')} + type="default" + > + {text('text', 'Click me')} + </Button> )) .add('large primary', () => ( <Button @@ -39,3 +47,12 @@ storiesOf('Button', module) {text('text', 'Click me')} </Button> )) + .add('large default', () => ( + <Button + onClick={action('clicked')} + type="default" + large + > + {text('text', 'Click me')} + </Button> + )) |