improves buttons, adds route for add new

src/client/components/controls/Button/Button.scss

@@ -31,7 +31,7 @@
 
         &:hover {
             background: $green;
-            border-color: $green;
+            border: $stroke-width solid $green;
             color: $black;
 
             &.btn-icon {
@@ -41,7 +41,7 @@
     }
 
     &.btn-small {
-        padding: rem(.25) rem(.5);
+        padding: rem(0) rem(.25) rem(.05);
     }
 
     &.btn-text {
@@ -56,6 +56,9 @@
         }
     }
 
+    &:hover {
+      border: 0;
+    }
 
     &:focus, &:active {
         outline: none;

src/client/components/controls/Button/index.js

@@ -1,28 +1,49 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 import './Button.css';
 
-class Button extends Component {
-  render() {
-    let classes = this.props.className ? `btn ${this.props.className}` : 'btn';
+export default props => {
+  let classes = props.className ? `btn ${props.className}` : 'btn';
 
-    if (this.props.type) {
-      classes += ` btn-${this.props.type}`;
-    }
+  if (props.type) {
+    classes += ` btn-${props.type}`;
+  }
 
-    if (this.props.size) {
-      classes += ` btn-${this.props.size}`;
-    }
+  if (props.size) {
+    classes += ` btn-${props.size}`;
+  }
 
-    if (this.props.icon) {
-      classes += ' btn-icon';
-    }
+  if (props.icon) {
+    classes += ' btn-icon';
+  }
+
+  const buttonProps = {
+    className: classes,
+    onClick: props.onClick,
+    ...props
+  };
+
+  switch (props.el) {
+  case 'link':
     return (
-      <button className={classes} onClick={this.props.onClick}>
-        {this.props.children}
+      <Link {...buttonProps} to={props.url}>
+        {props.children}
+      </Link>
+    );
+
+  case 'anchor':
+    return (
+      <a {...buttonProps} href={props.url}>
+        {props.children}
+      </a>
+    );
+
+  default:
+    return (
+      <button {...buttonProps}>
+        {props.children}
       </button>
     );
   }
-}
-
-export default Button;
+};

src/client/components/layout/HeadingButton/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Button from 'payload/client/components/controls/Button';
+
+import './index.css';
+
+export default props => {
+  return (
+    <header className="heading-button">
+      <h1>{props.heading}</h1>
+      <Button size="small" type="secondary" el={props.buttonType} url={props.buttonUrl}>{props.buttonLabel}</Button>
+    </header>
+  );
+};

src/client/components/layout/HeadingButton/index.scss

@@ -0,0 +1,10 @@
+@import '_styles';
+
+.heading-button {
+  display: flex;
+  align-items: center;
+
+  h1 {
+    margin: 0 rem(.5) 0 0;
+  }
+}

src/client/components/routes/Collections.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+export default props => {
+  return props.collections.map((collection) => {
+    return (
+      <Switch key={collection.attrs.slug}>
+        <Route path={`/collections/${collection.attrs.slug}/add-new`} exact component={collection.components.add} />
+        <Route path={`/collections/${collection.attrs.slug}`} exact component={collection.components.archive} />
+        <Route path={`/collections/${collection.attrs.slug}/:id`} component={collection.components.edit} />
+      </Switch>
+    );
+  });
+};

src/client/components/views/CollectionAdd/index.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import SetStepNav from 'payload/client/components/utilities/SetStepNav';
+
+class CollectionAdd extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <article className="collection-add">
+        <SetStepNav nav={ [
+          {
+            url: `/collections/${this.props.collection}`,
+            label: this.props.collection
+          },
+          {
+            url: `/collections/${this.props.collection}/add-new`,
+            label: `Add New`
+          }
+        ] } />
+        {this.props.children}
+      </article>
+    );
+  }
+}
+
+export default CollectionAdd;