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`] = `