diff options
author | Thomas <thomas.b.huang@gmail.com> | 2018-05-09 04:10:26 +0800 |
---|---|---|
committer | Thomas <thomas.b.huang@gmail.com> | 2018-05-09 04:10:26 +0800 |
commit | 26c6bddebff70287b0fe805d78d2a13b0212805e (patch) | |
tree | e455a93a0f1cec3110f82ff2cb1b16ece1be110d /ui/app/components/button | |
parent | d59105299a5d1e192d0abc9ec8d249a22c7bb489 (diff) | |
parent | c3079ff160e0f0d0db8efb1b80692b293a363226 (diff) | |
download | tangerine-wallet-browser-26c6bddebff70287b0fe805d78d2a13b0212805e.tar.gz tangerine-wallet-browser-26c6bddebff70287b0fe805d78d2a13b0212805e.tar.zst tangerine-wallet-browser-26c6bddebff70287b0fe805d78d2a13b0212805e.zip |
Merge branch 'develop' into e2e-tests
Diffstat (limited to 'ui/app/components/button')
-rw-r--r-- | ui/app/components/button/button.component.js | 43 | ||||
-rw-r--r-- | ui/app/components/button/button.stories.js | 41 | ||||
-rw-r--r-- | ui/app/components/button/index.js | 2 |
3 files changed, 86 insertions, 0 deletions
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js new file mode 100644 index 000000000..7769e4875 --- /dev/null +++ b/ui/app/components/button/button.component.js @@ -0,0 +1,43 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const classnames = require('classnames') + +const SECONDARY = 'secondary' +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 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 +} + +class Button extends Component { + render () { + const { type, large, className, ...buttonProps } = this.props + + return ( + h('button', { + className: classnames(getClassName(type, large), className), + ...buttonProps, + }, this.props.children) + ) + } +} + +Button.propTypes = { + type: PropTypes.string, + large: PropTypes.bool, + className: PropTypes.string, + children: PropTypes.string, +} + +module.exports = Button + diff --git a/ui/app/components/button/button.stories.js b/ui/app/components/button/button.stories.js new file mode 100644 index 000000000..d1e14e869 --- /dev/null +++ b/ui/app/components/button/button.stories.js @@ -0,0 +1,41 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import { action } from '@storybook/addon-actions' +import Button from './' +import { text } from '@storybook/addon-knobs/react' + +storiesOf('Button', module) + .add('primary', () => + <Button + onClick={action('clicked')} + type="primary" + > + {text('text', 'Click me')} + </Button> + ) + .add('secondary', () => ( + <Button + onClick={action('clicked')} + type="secondary" + > + {text('text', 'Click me')} + </Button> + )) + .add('large primary', () => ( + <Button + onClick={action('clicked')} + type="primary" + large + > + {text('text', 'Click me')} + </Button> + )) + .add('large secondary', () => ( + <Button + onClick={action('clicked')} + type="secondary" + large + > + {text('text', 'Click me')} + </Button> + )) diff --git a/ui/app/components/button/index.js b/ui/app/components/button/index.js new file mode 100644 index 000000000..3dc7d1eea --- /dev/null +++ b/ui/app/components/button/index.js @@ -0,0 +1,2 @@ +const Button = require('./button.component') +module.exports = Button |