diff options
author | Bruno <brunobar79@gmail.com> | 2018-05-17 10:38:51 +0800 |
---|---|---|
committer | Bruno <brunobar79@gmail.com> | 2018-05-17 10:38:51 +0800 |
commit | 3dd58463caef98c2cc1f068931624795a43912db (patch) | |
tree | b49a2e4feffd33e3b96d43ec29f2ca1071912e67 /ui/app/components/button | |
parent | 3180b69b974f8ffc0d6546a647725d1bf8539483 (diff) | |
parent | 708422432c634ffbd4c73388f980c43f766b3355 (diff) | |
download | tangerine-wallet-browser-3dd58463caef98c2cc1f068931624795a43912db.tar.gz tangerine-wallet-browser-3dd58463caef98c2cc1f068931624795a43912db.tar.zst tangerine-wallet-browser-3dd58463caef98c2cc1f068931624795a43912db.zip |
Merge remote-tracking branch 'upstream/develop' into develop
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 |