adds Label text element

src/client/components/elements/Label/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+const baseClass = 'label';
+
+const Label = ({ children, as: Element, htmlFor }) => {
+  return (
+    <Element
+      className={baseClass}
+      htmlFor={htmlFor}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Label.defaultProps = {
+  as: 'span',
+  htmlFor: undefined,
+};
+
+Label.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+  ]).isRequired,
+  as: PropTypes.oneOf(['label', 'span']),
+  htmlFor: PropTypes.string,
+};
+
+export default Label;

src/client/components/elements/Label/index.scss

@@ -0,0 +1,7 @@
+@import '../../../scss/styles.scss';
+
+.label {
+  font-size: .87rem;
+  line-height: $baseline;
+  color: $color-gray;
+}

src/client/components/forms/Label/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import LabelElement from '../../elements/Label';
 
 import './index.scss';
 
@@ -10,7 +11,8 @@ const Label = (props) => {
 
   if (label) {
     return (
-      <label
+      <LabelElement
+        as="label"
         htmlFor={htmlFor}
         className="field-label"
       >
@@ -18,7 +20,7 @@ const Label = (props) => {
         {required
           && <span className="required">*</span>
         }
-      </label>
+      </LabelElement>
     );
   }
 

src/client/components/forms/field-types/shared.scss

@@ -17,18 +17,22 @@
     &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
       color: $color-gray;
       font-weight: normal;
+      font-size: 1rem;
     }
     &::-moz-placeholder { /* Firefox 19+ */
       color: $color-gray;
       font-weight: normal;
+      font-size: 1rem;
     }
     &:-ms-input-placeholder { /* IE 10+ */
       color: $color-gray;
       font-weight: normal;
+      font-size: 1rem;
     }
     &:-moz-placeholder { /* Firefox 18- */
       color: $color-gray;
       font-weight: normal;
+      font-size: 1rem;
     }
 
     &:focus,

src/client/scss/app.scss

@@ -12,6 +12,7 @@
 html {
   font-size: $baseline-body-size;
   line-height: $baseline;
+  background: $color-background-gray;
 }
 
 html, body, #app {