From 528d3715da34050f1e7932bdee80724c5ad5a444 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Sat, 27 Jun 2020 21:21:59 -0700
Subject: [PATCH] feat: Create a button component

---
 src/components/Button.js          | 34 +++++++++++++++++++++++++++++++
 src/components/Button.module.scss | 25 +++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/components/Button.js
 create mode 100644 src/components/Button.module.scss

diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 000000000..34469ad95
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './Button.module.scss';
+
+const Button = ({
+  as: Component = 'button',
+  children,
+  className,
+  variant,
+  ...props
+}) => (
+  <Component
+    {...props}
+    className={cx(className, styles.button, styles[variant])}
+  >
+    {children}
+  </Component>
+);
+
+Button.VARIANT = {
+  PRIMARY: 'primary',
+  NORMAL: 'normal',
+};
+
+Button.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  variant: PropTypes.oneOf(Object.values(Button.VARIANT)).isRequired,
+};
+
+export default Button;
diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss
new file mode 100644
index 000000000..2832691b6
--- /dev/null
+++ b/src/components/Button.module.scss
@@ -0,0 +1,25 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 3px;
+  font-family: var(--primary-font-family);
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.primary {
+  color: #fff;
+  border-color: var(--color-brand-800);
+  background-color: var(--color-brand-800);
+}
+
+.normal {
+  color: var(--color-neutrals-800);
+  border-color: var(--color-neutrals-100);
+  background-color: var(--color-neutrals-100);
+}