diff --git a/config/styleguide.config.js b/config/styleguide.config.js
index 9146492f14..f6cd3e0244 100644
--- a/config/styleguide.config.js
+++ b/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')
- ]
+ ])
}
}
]
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
index d059c180b0..202104ce5a 100644
--- a/src/components/Input/Input.jsx
+++ b/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 (
-
+
diff --git a/src/components/Input/Input.md b/src/components/Input/Input.md
index ec5ff30040..b9bd2820f3 100644
--- a/src/components/Input/Input.md
+++ b/src/components/Input/Input.md
@@ -1,3 +1,3 @@
```
- Input
+
```
diff --git a/src/components/Input/Input.modules.scss b/src/components/Input/Input.modules.scss
index e69de29bb2..eab919f20f 100644
--- a/src/components/Input/Input.modules.scss
+++ b/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;
+ }
+}
diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
index ad9fbcf92e..075d52b67e 100644
--- a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
+++ b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
@@ -3,11 +3,13 @@
exports[`Input renders 1`] = `