feat: add react button components

Author: RickEyre

packages/tiger-san/src/button/button.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const getButtonClassName = ({ className, color, inverse, loading }) => (
+  classnames(className, 'button', {
+    'button--is-inverse': inverse,
+    'button--is-loading': loading,
+    [`button--is-${color}`]: color
+  })
+)
+
+export const Button = ({
+  children, onClick, className, type, color, inverse, loading
+}) => (
+  <button
+    type={type}
+    className={getButtonClassName({ className, color, inverse, loading })}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+)
+
+Button.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.elementType,
+    PropTypes.func
+  ]).isRequired,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  type: PropTypes.string,
+  color: PropTypes.oneOf([
+    'primary', 'yellow', 'red', 'blue', 'green', 'grey', 'white', 'black'
+  ]),
+  inverse: PropTypes.bool,
+  loading: PropTypes.bool
+}
+
+Button.defaultProps = {
+  inverse: false,
+  loading: false
+}

packages/tiger-san/src/button/index.js

@@ -0,0 +1 @@
+export { Button } from './button'

packages/tiger-san/src/form/form-button.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { Button } from '../button'
+
+const getFormButtonClassName = ({ className }) => (
+  classnames('form__button', className)
+)
+
+export const FormButton = ({ ...props }) => (
+  <Button
+    {...props}
+    type="submit"
+    className={getFormButtonClassName({ ...props })}
+  />
+)
+
+FormButton.propTypes = {
+  ...Button.propTypes
+}

packages/tiger-san/src/form/index.js

@@ -0,0 +1 @@
+export { FormButton } from './form-button'