Convert LogIn to use shared Button

Author: andrewn

client/common/Button.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+
+import { remSize, prop } from '../theme';
+
+// The '&&&' will increase the specificity of the
+// component's CSS so that it overrides the more
+// general global styles
+const StyledButton = styled.button`
+  &&& {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: max-content;
+    text-decoration: none;
+
+    background-color: ${prop('buttonColorBackground')};
+    color: ${prop('buttonColor')};
+    cursor: pointer;
+    border: 2px solid ${prop('buttonBorderColor')};
+    border-radius: 2px;
+    padding: ${remSize(8)} ${remSize(25)};
+    line-height: 1;
+    
+    &:hover:not(:disabled) {
+      color: ${prop('buttonHoverColor')};
+      background-color: ${prop('buttonHoverColorBackground')};
+    }
+
+    &:disabled {
+      color: ${prop('buttonDisabledColor')};
+      background-color: ${prop('buttonDisabledColorBackground')};
+      cursor: not-allowed;
+    }
+  }
+`;
+
+/**
+ * A Button performs an primary action
+ */
+const Button = ({
+  children, href, label, to, type, ...props
+}) => {
+  if (href) {
+    return <StyledButton as="a" aria-label={label} href={href} {...props}>{children}</StyledButton>;
+  }
+
+  if (to) {
+    return <StyledButton as={Link} aria-label={label} to={to} {...props}>{children}</StyledButton>;
+  }
+
+  return <StyledButton aria-label={label} type={type} {...props}>{children}</StyledButton>;
+};
+
+Button.defaultProps = {
+  disabled: false,
+  href: null,
+  to: null,
+  type: 'button',
+};
+
+Button.propTypes = {
+  /**
+   * The visible part of the button, telling the user what
+   * the action is
+   */
+  children: PropTypes.element.isRequired,
+  /**
+    If the button can be activated or not
+  */
+  disabled: PropTypes.bool,
+  /**
+   * Specifying an href will use an <a> to link to the URL
+   */
+  href: PropTypes.string,
+  /*
+   * An ARIA Label used for accessibility
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Specifying a to URL will use a react-router Link
+   */
+  to: PropTypes.string,
+  /**
+   * If using a button, then type is defines the type of button
+   */
+  type: PropTypes.oneOf(['button', 'submit']),
+};
+
+export default Button;

client/components/Button/Button.stories.jsx renamed to client/common/Button.stories.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { boolean, text } from '@storybook/addon-knobs';
 
-import Button from '.';
+import Button from './Button';
 
 export default {
-  title: 'Common/Button (JS)',
+  title: 'Common/Button',
   component: Button
 };
 
@@ -26,3 +26,11 @@ export const SubmitButton = () => (
 export const PrimaryButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
 
 export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;
+
+export const AnchorButton = () => (
+  <Button href="http://p5js.org" label="submit">Actually an anchor</Button>
+);
+
+export const ReactRouterLink = () => (
+  <Button to="./somewhere" label="submit">Actually a Link</Button>
+);

client/components/Button/Button.stories.mdx

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+
+import Button from '../../../common/Button';
+
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function LoginForm(props) {
@@ -30,7 +33,12 @@ function LoginForm(props) {
         />
         {password.touched && password.error && <span className="form-error">{password.error}</span>}
       </p>
-      <input type="submit" disabled={submitting || pristine} value="Log In" aria-label="login" />
+      <Button
+        aria-label="login"
+        type="submit"
+        disabled={submitting || pristine}
+      >Log In
+      </Button>
     </form>
   );
 }