From f5cf84625976168b356e66d351cbd8b117134641 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Mon, 13 Feb 2017 11:54:13 +0000
Subject: [PATCH] Move button to its own component fix css linting errors

---
 src/components/Button/Button.css         | 27 ++++++++++++++++++
 src/components/Button/Button.js          | 23 +++++++++++++++
 src/components/Button/package.json       |  6 ++++
 src/components/Layout/Layout.css         |  1 -
 src/components/RsvpButton/RsvpButton.css | 26 -----------------
 src/components/RsvpButton/RsvpButton.js  |  5 ++--
 src/routes/adminPeople/AdminPeople.css   | 33 +---------------------
 src/routes/adminPeople/AdminPeople.js    |  9 +++---
 src/routes/adminPerson/AdminPerson.css   | 36 +++---------------------
 src/routes/adminPerson/AdminPerson.js    |  5 ++--
 10 files changed, 72 insertions(+), 99 deletions(-)
 create mode 100644 src/components/Button/Button.css
 create mode 100644 src/components/Button/Button.js
 create mode 100644 src/components/Button/package.json

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
new file mode 100644
index 0000000..0de60bc
--- /dev/null
+++ b/src/components/Button/Button.css
@@ -0,0 +1,27 @@
+@import '../variables.css';
+
+.root {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px 16px;
+  width: 100%;
+  opacity: 0.75;
+  outline: 0;
+  border: 4px solid #fff;
+  border-radius: 14px;
+  background: var(--colour-nearblack);
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 1.3333333;
+  cursor: pointer;
+  transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
+}
+
+.root:hover,
+.root:focus {
+  opacity: 0.9;
+  box-shadow: 0 0 4px #fff;
+}
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
new file mode 100644
index 0000000..b4d6c51
--- /dev/null
+++ b/src/components/Button/Button.js
@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Button.css';
+
+class Button extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+  };
+
+  handleClick = (event) => {
+    if (this.props.onClick) {
+      this.props.onClick(event);
+    }
+  };
+
+  render() {
+    const { children, ...props } = this.props;
+    return <button className={s.root} {...props} onClick={this.handleClick}>{children}</button>;
+  }
+}
+
+export default withStyles(s)(Button);
diff --git a/src/components/Button/package.json b/src/components/Button/package.json
new file mode 100644
index 0000000..b7a877a
--- /dev/null
+++ b/src/components/Button/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "Button",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Button.js"
+}
diff --git a/src/components/Layout/Layout.css b/src/components/Layout/Layout.css
index 3ec5cfb..0fe50f6 100644
--- a/src/components/Layout/Layout.css
+++ b/src/components/Layout/Layout.css
@@ -1,5 +1,4 @@
 @import '../../../node_modules/normalize.css/normalize.css';
-
 @import '../variables.css';
 
 /*
diff --git a/src/components/RsvpButton/RsvpButton.css b/src/components/RsvpButton/RsvpButton.css
index 7744262..5f23fbe 100644
--- a/src/components/RsvpButton/RsvpButton.css
+++ b/src/components/RsvpButton/RsvpButton.css
@@ -76,32 +76,6 @@
   opacity: 0.9;
 }
 
-.button {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 10px 16px;
-  width: 100%;
-  opacity: 0.75;
-  outline: 0;
-  border: 4px solid #fff;
-  border-radius: 14px;
-  background: var(--colour-nearblack);
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  font-size: 18px;
-  line-height: 1.3333333;
-  cursor: pointer;
-  transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
-}
-
-.button:hover,
-.button:focus {
-  opacity: 0.9;
-  box-shadow: 0 0 4px #fff;
-}
-
 @keyframes shake {
   8%,
   41% {
diff --git a/src/components/RsvpButton/RsvpButton.js b/src/components/RsvpButton/RsvpButton.js
index b53e069..1fafef2 100644
--- a/src/components/RsvpButton/RsvpButton.js
+++ b/src/components/RsvpButton/RsvpButton.js
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './RsvpButton.css';
 import fetch from '../../core/fetch';
+import Button from '../Button';
 
 class RsvpButton extends React.Component {
   static propTypes = {
@@ -79,9 +80,9 @@ class RsvpButton extends React.Component {
             !this.state.showRsvpForm ? s.rsvpVisible : null,
           ].join(' ')}
         >
-          <button className={s.button} onClick={this.showRsvpForm}>
+          <Button onClick={this.showRsvpForm}>
             RSVP
-          </button>
+          </Button>
         </div>
         <div
           className={[
diff --git a/src/routes/adminPeople/AdminPeople.css b/src/routes/adminPeople/AdminPeople.css
index 854ab73..f449c93 100644
--- a/src/routes/adminPeople/AdminPeople.css
+++ b/src/routes/adminPeople/AdminPeople.css
@@ -37,41 +37,10 @@
   color: #616161;
   font-size: 18px;
   line-height: 1.3333333;
-  transition: border-color ease-in-out 0.15s,
-              box-shadow ease-in-out 0.15s,
-              background-color ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s;
 }
 
 .input:focus {
   border-color: var(--colour-tertiary);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
 }
-
-.button {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 10px 16px;
-  width: 100%;
-  outline: 0;
-  border: 1px solid var(--colour-secondary);
-  border-radius: 0;
-  background: var(--colour-primary);;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  font-size: 18px;
-  line-height: 1.3333333;
-  cursor: pointer;
-}
-
-.button:hover {
-  background: var(--colour-secondary);
-}
-
-.button:focus {
-  border-color: var(--colour-tertiary);
-  box-shadow: 0 0 8px var(--colour-secondary);
-}
-
-
diff --git a/src/routes/adminPeople/AdminPeople.js b/src/routes/adminPeople/AdminPeople.js
index 1933075..c578a6b 100644
--- a/src/routes/adminPeople/AdminPeople.js
+++ b/src/routes/adminPeople/AdminPeople.js
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './AdminPeople.css';
 import Link from '../../components/Link';
+import Button from '../../components/Button';
 
 class AdminPeople extends React.Component {
   static propTypes = {
@@ -41,9 +42,9 @@ class AdminPeople extends React.Component {
                   <td>
                     <form method="post" action="/admin/person/delete">
                       <input type="hidden" name="key" value={person.key} />
-                      <button className={s.button} type="submit">
+                      <Button type="submit">
                         Delete
-                      </button>
+                      </Button>
                     </form>
                   </td>
                 </tr>
@@ -98,9 +99,9 @@ class AdminPeople extends React.Component {
               />
             </div>
             <div className={s.formGroup}>
-              <button className={s.button} type="submit">
+              <Button type="submit">
                 Save
-              </button>
+              </Button>
             </div>
           </form>
         </div>
diff --git a/src/routes/adminPerson/AdminPerson.css b/src/routes/adminPerson/AdminPerson.css
index 854ab73..584efa8 100644
--- a/src/routes/adminPerson/AdminPerson.css
+++ b/src/routes/adminPerson/AdminPerson.css
@@ -37,41 +37,13 @@
   color: #616161;
   font-size: 18px;
   line-height: 1.3333333;
-  transition: border-color ease-in-out 0.15s,
-              box-shadow ease-in-out 0.15s,
-              background-color ease-in-out 0.15s;
+  transition:
+    border-color ease-in-out 0.15s,
+    box-shadow ease-in-out 0.15s,
+    background-color ease-in-out 0.15s;
 }
 
 .input:focus {
   border-color: var(--colour-tertiary);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
 }
-
-.button {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 10px 16px;
-  width: 100%;
-  outline: 0;
-  border: 1px solid var(--colour-secondary);
-  border-radius: 0;
-  background: var(--colour-primary);;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  font-size: 18px;
-  line-height: 1.3333333;
-  cursor: pointer;
-}
-
-.button:hover {
-  background: var(--colour-secondary);
-}
-
-.button:focus {
-  border-color: var(--colour-tertiary);
-  box-shadow: 0 0 8px var(--colour-secondary);
-}
-
-
diff --git a/src/routes/adminPerson/AdminPerson.js b/src/routes/adminPerson/AdminPerson.js
index 4ecf74c..2abe8f7 100644
--- a/src/routes/adminPerson/AdminPerson.js
+++ b/src/routes/adminPerson/AdminPerson.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './AdminPerson.css';
+import Button from '../../components/Button';
 
 class AdminPerson extends React.Component {
   static propTypes = {
@@ -86,9 +87,9 @@ class AdminPerson extends React.Component {
               />
             </div>
             <div className={s.formGroup}>
-              <button className={s.button} type="submit">
+              <Button type="submit">
                 Save
-              </button>
+              </Button>
             </div>
           </form>