feat: add form validation

Also expose defaultTheme

Author: gregberge

src/ControlFeedBack.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import defaultTheme from './style/defaultTheme'
+
+const ControlFeedbackComponent = ({ className, valid, ...props }) => (
+  <div
+    className={classNames(
+      'sui-control-feedback',
+      {
+        'sui-is-valid': valid === true,
+        'sui-is-invalid': valid === false,
+      },
+      className,
+    )}
+    {...props}
+  />
+)
+
+const ControlFeedback = styled(ControlFeedbackComponent)`
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 80%;
+
+  &.sui-is-valid {
+    color: ${props => props.theme.colors.success};
+  }
+
+  &.sui-is-invalid {
+    color: ${props => props.theme.colors.danger};
+  }
+`
+
+ControlFeedback.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  valid: PropTypes.bool.isRequired,
+}
+
+ControlFeedback.defaultProps = {
+  theme: defaultTheme,
+}
+
+/** @component */
+export default ControlFeedback

src/ControlFeedBack.md

@@ -0,0 +1 @@
+See [`FormGroup`](#formgroup).

src/FormGroup.md

@@ -1,6 +1,33 @@
+`FormGroup` creates easy form layout.
+
 ```js
-<FormGroup>
-  <Label htmlFor="form-group-input">This is it</Label>
-  <Input control id="form-group-input" />
-</FormGroup>
+<div>
+  <FormGroup>
+    <Label htmlFor="form-group-input-name">Name</Label>
+    <Input control id="form-group-input-name" />
+  </FormGroup>
+  <FormGroup>
+    <Label htmlFor="form-group-input-firstname">Firstname</Label>
+    <Input control id="form-group-input-firstname" />
+  </FormGroup>
+</div>
+```
+
+### Validation
+
+You can set validation using `valid` props.
+
+```js
+<div>
+  <FormGroup>
+    <Label htmlFor="form-group-input-valid">Name</Label>
+    <Input control valid id="form-group-input-valid" />
+    <ControlFeedback valid>Looks good!</ControlFeedback>
+  </FormGroup>
+  <FormGroup>
+    <Label htmlFor="form-group-input-invalid">Firstname</Label>
+    <Input control valid={false} id="form-group-input-invalid" />
+    <ControlFeedback valid={false}>It is required.</ControlFeedback>
+  </FormGroup>
+</div>
 ```

src/Input.js

@@ -5,13 +5,15 @@ import styled from 'styled-components'
 import handleRef from './internal/handleRef'
 import defaultTheme from './style/defaultTheme'
 
-const InputComponent = ({ className, size, control, ...props }) => (
+const InputComponent = ({ className, size, control, valid, ...props }) => (
   <input
     {...props}
     className={classNames(
       'sui-input',
       {
         'sui-control': control,
+        'sui-is-valid': valid === true,
+        'sui-is-invalid': valid === false,
         [`sui-input-${size}`]: size,
       },
       className,
@@ -66,6 +68,7 @@ Input.propTypes = {
   theme: PropTypes.object,
   control: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'lg']),
+  valid: PropTypes.bool,
 }
 
 Input.defaultProps = {

src/index.js

@@ -2,6 +2,7 @@ export { default as Box } from './Box'
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as Col } from './Col'
+export { default as ControlFeedBack } from './ControlFeedBack'
 export { default as FormCheck } from './FormCheck'
 export { default as FormCheckLabel } from './FormCheckLabel'
 export { default as FormGroup } from './FormGroup'
@@ -13,3 +14,4 @@ export { default as Row } from './Row'
 export { default as Select } from './Select'
 export { default as Switch } from './Switch'
 export { default as Textarea } from './Textarea'
+export { default as defaultTheme } from './style/defaultTheme'

src/style/defaultTheme.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { injectGlobal, css } from 'styled-components'
 import { transparentize, lighten } from 'polished'
 
@@ -14,9 +15,39 @@ injectGlobal`
 `
 /* eslint-enable no-unused-expressions */
 
+const white = '#fff'
+const gray100 = '#f8f9fa'
+const gray200 = '#e9ecef'
+const gray300 = '#dee2e6'
+const gray400 = '#ced4da'
+const gray500 = '#adb5bd'
+const gray600 = '#6c757d'
+const gray700 = '#495057'
+const gray800 = '#343a40'
+const gray900 = '#212529'
+const black = '#000'
+
+const blue = '#007bff'
+const indigo = '#6610f2'
+const purple = '#6f42c1'
+const pink = '#e83e8c'
+const red = '#dc3545'
+const orange = '#fd7e14'
+const yellow = '#ffc107'
+const green = '#28a745'
+const teal = '#20c997'
+const cyan = '#17a2b8'
+
+const primary = blue
+const secondary = gray600
+const success = green
+const info = cyan
+const warning = yellow
+const danger = red
+const light = gray100
+const dark = gray800
+
 const primaryColor = '#bd4932'
-const secondaryColor = '#063855'
-const accentColor = '#46AFBD'
 const grayLightColor = '#f6f6f6'
 const grayDarkColor = '#aaa'
 const grayDarkerColor = '#333'
@@ -25,9 +56,19 @@ export default {
   colors: {
     primary: primaryColor,
     primaryLight: lighten(0.3, primaryColor),
-    secondary: secondaryColor,
-    secondaryLight: '#E6EBEE',
-    accent: accentColor,
+    danger,
+    success,
+    white,
+    gray100,
+    gray200,
+    gray300,
+    gray400,
+    gray500,
+    gray600,
+    gray700,
+    gray800,
+    gray900,
+    black,
     grayLight: '#f6f6f6',
     gray: '#cfcfcf',
     grayDark: grayDarkColor,
@@ -40,7 +81,6 @@ export default {
     disabledControlBg: grayLightColor,
     disabledControlText: grayDarkColor,
     placeholder: grayDarkColor,
-    white: '#fff',
   },
   borderRadius: {
     sm: '.2rem',
@@ -72,19 +112,40 @@ export default {
         padding: 0.375rem 0.75rem;
         font-size: 1rem;
         line-height: 1.5;
-        color: #495057;
-        background-color: #fff;
+        color: ${props => props.theme.colors.gray700};
+        background-color: ${props => props.theme.colors.white};
         background-clip: padding-box;
-        border: 1px solid #ced4da;
+        border: 1px solid ${props => props.theme.colors.gray400};
         border-radius: 0.25rem;
         transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
         &:focus {
-          color: #495057;
-          background-color: #fff;
-          border-color: #80bdff;
+          color: ${props => props.theme.colors.gray700};
+          background-color: ${props => props.theme.colors.white};
+          border-color: ${props => lighten(0.25, props.theme.colors.primary)};
           outline: 0;
-          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+          box-shadow: 0 0 0 0.2rem
+            ${props => transparentize(0.75, props.theme.colors.primary)};
+        }
+
+        &.sui-is-valid {
+          border-color: ${props => props.theme.colors.success};
+
+          &:focus {
+            border-color: ${props => props.theme.colors.success};
+            box-shadow: 0 0 0 0.2rem
+              ${props => transparentize(0.75, props.theme.colors.success)};
+          }
+        }
+
+        &.sui-is-invalid {
+          border-color: ${props => props.theme.colors.danger};
+
+          &:focus {
+            border-color: ${props => props.theme.colors.danger};
+            box-shadow: 0 0 0 0.2rem
+              ${props => transparentize(0.75, props.theme.colors.danger)};
+          }
         }
       }
     `,

styleguide.config.js

@@ -40,6 +40,7 @@ module.exports = {
         path.resolve(__dirname, 'src/Box.js'),
         path.resolve(__dirname, 'src/Button.js'),
         path.resolve(__dirname, 'src/Checkbox.js'),
+        path.resolve(__dirname, 'src/ControlFeedBack.js'),
         path.resolve(__dirname, 'src/FormCheck.js'),
         path.resolve(__dirname, 'src/FormCheckLabel.js'),
         path.resolve(__dirname, 'src/FormGroup.js'),