diff options
Diffstat (limited to 'ui/app/components/button')
-rw-r--r-- | ui/app/components/button/button.component.js | 44 | ||||
-rw-r--r-- | ui/app/components/button/button.stories.js | 41 | ||||
-rw-r--r-- | ui/app/components/button/index.js | 2 |
3 files changed, 87 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..fe3bf363c --- /dev/null +++ b/ui/app/components/button/button.component.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import classnames from '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 ( + <button + className={classnames(getClassName(type, large), className)} + { ...buttonProps } + > + { this.props.children } + </button> + ) + } +} + +Button.propTypes = { + type: PropTypes.string, + large: PropTypes.bool, + className: PropTypes.string, + children: PropTypes.string, +} + +export default 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..33ae95ae2 --- /dev/null +++ b/ui/app/components/button/index.js @@ -0,0 +1,2 @@ +import Button from './button.component' +module.exports = Button |