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

public/objects/typography/Heading.jsx

@@ -24,15 +24,15 @@
 import React from 'react';
 
 const Heading = (props) => {
-  let level = props.level || 1;
+  let { level, size, className } = props;
+
+  level = level || 1;
+  size = size || 1;
+
   let CustomTag = "h"+level;
-  let clazz = "o-heading o-heading--"+level;
-  if(props.className) clazz += " " + props.className;
-
-
-  return (
-    <CustomTag {...props} className={clazz} />
-  );
+  let clazz = `o-heading o-heading--${size}`;
+  if(className) clazz += ` ${className}`;
+  return <CustomTag {...props} className={clazz} />;
 }
 export default Heading;
 
@@ -44,10 +44,5 @@ const Heading5 = (props) => { return <Heading {...props} level="5" />; };
 const Heading6 = (props) => { return <Heading {...props} level="6" />; };
 
 export {
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6
+  Heading1, Heading2, Heading3, Heading4, Heading5, Heading6
 };

public/objects/typography/Paragraph.jsx

@@ -24,8 +24,6 @@
 import React from 'react';
 
 export default (props) => {
-  let clazz = "o-paragraph";
-  if(props.className) clazz += " "+props.className;
-
-  return <p {...props} className={clazz} />
+  let { className } = props;
+  return <p {...props} className={"o-paragraph"+(className?` ${className}`: "")} />;
 };

public/objects/typography/Subtitle.jsx

@@ -24,9 +24,6 @@
 import React from 'react';
 
 export default function(props) {
-  return (
-    <p className={ "o-subtitle" + ( props.className ? " " + props.className : "") }>
-      { props.children }
-    </p>
-  );
+  let { className } = props;
+  return <p {...props} className={"o-subtitle"+(className?` ${className}`: "")} />;
 }

public/objects/typography/Title.jsx

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

public/objects/typography/Typography.jsx

@@ -21,6 +21,8 @@
 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+import Styles from './Typography';
+
 import Title from './Title';
 import Subtitle from './Subtitle';
 import Paragraph from './Paragraph';

public/objects/typography/Typography.scss

@@ -0,0 +1,43 @@
+/*
+ *  Title
+ *    Title Headings
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_responsive.scss
+ *
+ *  Version:
+ *    1.0.1 - 2018/06/05
+ */
+@import '~@styles/global';
+
+//Font Sizes will scale according to
+.o-title {
+  font-size: 1.75em;
+  margin: 0.25em 0;
+}
+
+.o-subtitle {
+  font-size: 1em;
+  margin: 0 0 0.5em 0;
+}
+
+@include t-media-query($s-small-up) {
+  .o-title {
+    font-size: 2.5em;
+  }
+
+  .o-subtitle {
+    font-size: 1.25em;
+  }
+}
+
+@include t-media-query($s-medium-up) {
+  .o-title {
+    font-size: 3em;
+  }
+
+  .o-subtitle {
+    font-size: 1.75em;
+  }
+}