From d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 3 May 2018 10:51:15 -0700 Subject: Add storybook integration --- ui/app/components/button/button.component.js | 43 ++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 ui/app/components/button/button.component.js (limited to 'ui/app/components/button/button.component.js') 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 + -- cgit v1.2.3 From 4f6b53c1aa383c05fa3c356adb332fcc6dbf45e9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sat, 19 May 2018 23:04:19 -0700 Subject: Update designs for Add Token screen --- ui/app/components/button/button.component.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'ui/app/components/button/button.component.js') diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js index 7769e4875..fe3bf363c 100644 --- a/ui/app/components/button/button.component.js +++ b/ui/app/components/button/button.component.js @@ -1,7 +1,6 @@ -const { Component } = require('react') -const h = require('react-hyperscript') -const PropTypes = require('prop-types') -const classnames = require('classnames') +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' const SECONDARY = 'secondary' const CLASSNAME_PRIMARY = 'btn-primary' @@ -24,10 +23,12 @@ class Button extends Component { const { type, large, className, ...buttonProps } = this.props return ( - h('button', { - className: classnames(getClassName(type, large), className), - ...buttonProps, - }, this.props.children) + ) } } @@ -39,5 +40,5 @@ Button.propTypes = { children: PropTypes.string, } -module.exports = Button +export default Button -- cgit v1.2.3