aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-05-04 01:51:15 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-05-04 01:51:15 +0800
commitd5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca (patch)
treecbaabb282c6238cded03acedc6faf779f5118c88 /ui/app
parent096851d091385ee786ab1374e83aaf6a1aa7cbce (diff)
downloadtangerine-wallet-browser-d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca.tar
tangerine-wallet-browser-d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca.tar.gz
tangerine-wallet-browser-d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca.tar.bz2
tangerine-wallet-browser-d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca.tar.lz
tangerine-wallet-browser-d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca.tar.xz
tangerine-wallet-browser-d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca.tar.zst
tangerine-wallet-browser-d5759cf4a8041d1a7cfd55a7d55d8b7ecb29caca.zip
Add storybook integration
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/button/button.component.js43
-rw-r--r--ui/app/components/button/button.stories.js41
-rw-r--r--ui/app/components/button/index.js2
-rw-r--r--ui/app/css/itcss/components/buttons.scss1
-rw-r--r--ui/app/send-v2.js11
5 files changed, 96 insertions, 2 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
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 04e1ed96e..86daf60d8 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -18,6 +18,7 @@
padding: 0 20px;
min-width: 140px;
text-transform: uppercase;
+ outline: none;
}
.btn-primary,
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index bd00b186e..6736b5571 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -31,6 +31,7 @@ const {
} = require('./components/send/send-utils')
const { isValidAddress } = require('./util')
const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes')
+const Button = require('./components/button')
SendTransactionScreen.contextTypes = {
t: PropTypes.func,
@@ -497,13 +498,19 @@ SendTransactionScreen.prototype.renderFooter = function () {
const noErrors = !amountError && toError === null
return h('div.page-container__footer', [
- h('button.btn-secondary--lg.page-container__footer-button', {
+ h(Button, {
+ type: 'secondary',
+ large: true,
+ className: 'page-container__footer-button',
onClick: () => {
clearSend()
history.push(DEFAULT_ROUTE)
},
}, this.context.t('cancel')),
- h('button.btn-primary--lg.page-container__footer-button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'page-container__footer-button',
disabled: !noErrors || !gasTotal || missingTokenBalance,
onClick: event => this.onSubmit(event),
}, this.context.t('next')),