feat(input): Add initial styles

config/styleguide.config.js

@@ -207,10 +207,11 @@ module.exports = {
         {
           name: 'Forms',
           components() {
-            return [
+            return compact([
               path.resolve('src/components/Button/Button.jsx'),
+              toggle(path.resolve('src/components/Input/Input.jsx')),
               path.resolve('src/old-components/SelectorCounter/SelectorCounter.jsx')
-            ]
+            ])
           }
         }
       ]

src/components/Input/Input.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import safeRest from '../../safeRest'
 
-// import styles from './Input.modules.scss'
+import styles from './Input.modules.scss'
 
 const textToId = text => text.toLowerCase().replace(/ /g, '-')
 
@@ -42,9 +42,9 @@ class Input extends React.Component {
 
     return (
       <div>
-        <label htmlFor={id}>{label}</label>
+        <label htmlFor={id} className={styles.label}>{label}</label>
         <input
-          {...safeRest(rest)} id={id} type={type}
+          {...safeRest(rest)} id={id} type={type} className={styles.input}
           value={this.state.value} onChange={this.onChange}
         />
       </div>

src/components/Input/Input.md

@@ -1,3 +1,3 @@
 ```
-<Input> Input </Input>
+<Input label="First name" />
 ```

src/components/Input/Input.modules.scss

@@ -0,0 +1,41 @@
+@import '../../scss/settings/colours';
+@import '../../scss/settings/typography';
+
+$form-field-border-radius: 4px;
+
+.label {
+  composes: medium boldFont from '../Typography/Text/Text.modules.scss';
+
+  display: block;
+  margin-bottom: 3px;
+
+  color: $color-text;
+}
+
+// TODO: All of these are being overridden by forms.scss :(
+.input {
+  width: 100%;
+  padding: 11px;
+
+  outline: 0;
+  border: 1px solid $color-shuttle-grey;
+  border-radius: $form-field-border-radius;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
+
+  font-family: $font-telus;
+
+  // TODO: Adjust the font properties to use the Text modules
+  font-size: rem($body-text-size);
+  letter-spacing: .4px;
+  line-height: 1.4;
+
+  color: $color-shark;
+  background-color: $color-white;
+
+  transition: background-color .1s linear;
+
+  &:focus {
+    border-color: transparent;
+    box-shadow: 0 0 4px 1px $color-shuttle-grey;
+  }
+}

src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap

@@ -3,11 +3,13 @@
 exports[`Input renders 1`] = `
 <div>
   <label
+    className="label"
     htmlFor="the-label"
   >
     The label
   </label>
   <input
+    className="input"
     id="the-label"
     onChange={[Function]}
     type="text"