CLLLEANED the forms, inputs, buttons, labels and form/button groups

public/objects/input/button/Button.jsx

@@ -24,81 +24,61 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-export default class Button extends React.Component {
-  constructor(props) {
-    super(props);
+import Styles from './Button.scss';
+
+export default props => {
+  let newProps = {...props};
+  let {
+    className, href, to, style, type, value, children,
+    error, danger, primary, warning, manager
+  } = newProps;
+
+  [
+    "style", "value", "href", "to", "children", "error", "danger", "primary",
+    "warning", "manager"
+  ].forEach(e => delete newProps[e]);
+
+  type = type || "button";
+  children = children || value;
+
+  if(primary) style = "primary";
+  if(warning) style = "warning";
+  if(error || danger) style = "danger";
+
+
+  let ElementType = "button";//Upper Camel-Case because of react requriements
+  let clazzes = "o-btn";
+
+  //Basic Element Determining
+  if(type) {
+    //Buttons and Input Buttons
+    clazzes += " is-button";
+
+  } else if(href) {
+    //Anchor Tags!
+    ElementType = "a";
+    clazzes += " is-link is-anchor";
+    newProps.href = to || href;
+
+  } else if(to) {
+    ElementType = NavLink;
+    clazzes += " is-link is-nav-link";
+    newProps.to = to || href;
+
+  } else {
+    //Everything Else (button without a type);
+    clazzes += " is-not-button";
+
   }
 
-  render() {
-    let ElementType = "button";//Upper Camel-Case because of react requriements
-    let clazzes = "o-btn";
-    let type = "button";
-    let contents;
-    let href;
-    let to;
-    let activeClassName;
-    let style;
+  if(style) clazzes += ` o-btn--style-${style}`;
+  if(className) clazzes += ` ${className}`;
 
-    //Basic Element Determining
-    if(this.props.type) {
-      //Buttons and Input Buttons
-      type = this.props.type;
-      clazzes += " is-button";
-    } else if(this.props.href) {
-      //Anchor Tags1
-      ElementType = "a";
-      href = this.props.href;
-      clazzes += " is-link is-anchor";
-    } else if(this.props.to) {
-      //React NavLink/Link
-      to = this.props.to;
-      ElementType = NavLink;
-      clazzes += " is-link is-nav-link";
-      activeClassName = "is-active";
-    } else {
-      //Everything Else (button without a type);
-      clazzes += " is-not-button";
-    }
-
-    if(this.props.value) {
-      contents = this.props.value;
-    } else {
-      contents = this.props.children;
-    }
-
-    //Determine Style
-    if(this.props.primary) {
-      style = "primary"
-    } else if(this.props.secondary) {
-      style = "secondary";
-    } else if(this.props.danger) {
-      style = "danger";
-    } else if(this.props.warning) {
-      style = "warning";
-    } else if(this.props.style) {
-      style = this.props.style;
-    }
-
-    //Style Clazzes
-    if(style) {
-      clazzes += " o-btn--style-"+style;
-    }
-
-    //Determine extra clazzes
-    if(this.props.className) this.clazzes += " "+this.props.className;
-
-    return (
-      <ElementType
-        {...this.props}
-        type={type}
-        className={clazzes}
-        href={href}
-        to={to}
-      >
-        <span className={ "o-btn__inner" + (style ? " o-btn--style-" + style + "__inner" : "") }>
-          {contents}
-        </span>
-      </ElementType>
-    );
-  }
+  return (
+    <ElementType {...newProps} className={clazzes}>
+      <span className={"o-btn__inner"+(style?` o-btn--style-${style}__inner`:"")}>
+        {contents}
+      </span>
+    </ElementType>
+  );
 }

public/objects/input/button/Button.scss

@@ -0,0 +1,48 @@
+/*
+ *  Button
+ *    Clicky Tappy Touchy Buttons!
+ *
+ *  Dependencies:
+ *    styles/settings/animation.scss
+ *    styles/settings/colors.scss
+ *    styles/tools/_box-shadow.scss
+ *
+ *
+ *  Version:
+ *    1.0.1 - 2018/05/14
+ */
+
+@import '~@styles/global';
+
+//Default Button (applies to all styles)
+.o-btn {
+  cursor: pointer;
+  @include t-input--style-dp();
+
+  &__inner {
+    padding: ( $t-input--style-dp__padding / 2 ) $t-input--style-dp__padding;
+  }
+
+  &:hover {
+    text-decoration: none;/* Override Standard Link Underline */
+  }
+}
+
+//Button Group
+.o-btn-group {
+  .o-btn + .o-btn {
+    margin-left: 1em;
+  }
+}
+
+/*** Custom Button Styles ***/
+@mixin o-basic-button-design($top, $bottom) {
+  &::before,
+  &:active &__inner {
+    background: $bottom;
+  }
+
+  &__inner {
+    background: $top;
+  }
+}

public/objects/input/button/ButtonGroup.jsx

@@ -23,10 +23,9 @@
 
 import React from 'react';
 
-export default function(props) {
+export default props => {
+  let { className } = props;
   return (
-    <div {...props} className={"o-btn-group" + (props.className ? " "+props.className : "")}>
-      {props.children}
-    </div>
+    <div {...props} className={"o-btn-group" + (className?` ${className}`:"")} />
   );
 }