Merge pull request #4408 from MetaMask/v4.7.0rc2

Version 4.7.0 - rc2

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