feat: add control option to Checkbox (#102)

Author: ividic

docs/components/Checkbox.mdx

@@ -18,20 +18,20 @@ Set sizes using `size` prop like `"sm"`, `"md"` or `"lg"`.
     <Checkbox
       size="sm"
       id="sizeCheckbox1"
-      name="sizeCheckboxs"
+      name="sizeCheckboxes"
       value="option1"
     />
     <FormCheckLabel htmlFor="sizeCheckbox1">Small</FormCheckLabel>
   </FormCheck>
   <FormCheck>
-    <Checkbox id="sizeCheckbox2" name="sizeCheckboxs" value="option2" />
+    <Checkbox id="sizeCheckbox2" name="sizeCheckboxes" value="option2" />
     <FormCheckLabel htmlFor="sizeCheckbox2">Medium</FormCheckLabel>
   </FormCheck>
   <FormCheck>
     <Checkbox
       size="lg"
       id="sizeCheckbox3"
-      name="sizeCheckboxs"
+      name="sizeCheckboxes"
       value="option3"
     />
     <FormCheckLabel htmlFor="sizeCheckbox3">Large</FormCheckLabel>
@@ -54,16 +54,55 @@ Disable using `disabled` prop.
   </FormCheck>
 </Playground>
 
+## Control & Validation
+
+* Set `display` to "block" and `width` to "100%" using `control` prop.
+* Set validation using `valid` or `valid={false}`
+
+<Playground>
+  <FormCheck>
+    <Checkbox
+      id="controlCheckbox1"
+      name="controlCheckboxes"
+      value="option1"
+      control
+    />
+    <FormCheckLabel htmlFor="controlCheckbox1">Control</FormCheckLabel>
+  </FormCheck>
+  <FormCheck>
+    <Checkbox
+      id="controlCheckbox2"
+      name="controlCheckboxes"
+      value="option2"
+      control
+      valid
+    />
+    <FormCheckLabel htmlFor="controlCheckbox2">Valid Control</FormCheckLabel>
+  </FormCheck>
+  <FormCheck>
+    <Checkbox
+      id="controlCheckbox3"
+      name="controlCheckboxes"
+      value="option3"
+      control
+      valid={false}
+    />
+    <FormCheckLabel htmlFor="controlCheckbox3">Invalid Control</FormCheckLabel>
+  </FormCheck>
+</Playground>
+
 ## API
 
 ### Checkbox
 
 <PropsTable
   of={PropDesc({
     checked: PropDesc.bool,
+    control: PropDesc.bool,
     disabled: PropDesc.bool,
     onChange: PropDesc.func,
     size: PropDesc.oneOf(['sm', 'lg']),
+    valid: PropDesc.bool,
     value: PropDesc.string,
     ...getSystemPropDesc(Checkbox),
   })}

packages/shared/core/Checkbox.js

@@ -54,6 +54,48 @@ const sizeStyle = {
   `,
 }
 
+const validStyle = css`
+  input + .sui-checkbox-content,
+  input:checked + .sui-checkbox-content {
+    border-color: ${th('success')};
+  }
+
+  input:focus + .sui-checkbox-content {
+    border-color: ${th('success')};
+    box-shadow: ${mixin('controlFocusBoxShadow', 'success')};
+  }
+`
+
+const invalidStyle = css`
+  input + .sui-checkbox-content,
+  input:checked + .sui-checkbox-content {
+    border-color: ${th('danger')};
+  }
+
+  input:focus + .sui-checkbox-content {
+    border-color: ${th('danger')};
+    box-shadow: ${mixin('controlFocusBoxShadow', 'danger')};
+  }
+`
+
+const controlStyle = css`
+  input:focus + .sui-checkbox-content {
+    border-color: ${th('controlFocusBorderColor')};
+    box-shadow: ${mixin('controlFocusBoxShadow', 'primary')};
+  }
+
+  ${p => {
+    switch (p.valid) {
+      case true:
+        return validStyle
+      case false:
+        return invalidStyle
+      default:
+        return null
+    }
+  }};
+`
+
 const containerSystem = compose(
   basics,
   dimensions,
@@ -75,6 +117,7 @@ const system = compose(
 
 const Checkbox = createComponent(() => ({
   name: 'checkbox',
+  omitProps: ['control', 'valid'],
   system,
   applySystem: null,
   render: ({ Component, ref, className, size, ...props }) => (
@@ -134,7 +177,7 @@ const Checkbox = createComponent(() => ({
       }
     }
 
-    input:focused + .sui-checkbox-content {
+    input:focus + .sui-checkbox-content {
       ${mixin('controlFocus')};
     }
 
@@ -143,6 +186,7 @@ const Checkbox = createComponent(() => ({
     }
 
     ${p => sizeStyle[p.size]};
+    ${p => p.control && controlStyle};
 
     ${containerSystem.props};
 
@@ -152,9 +196,11 @@ const Checkbox = createComponent(() => ({
   `,
   propTypes: {
     checked: PropTypes.bool,
+    control: PropTypes.bool,
     disabled: PropTypes.bool,
     onChange: PropTypes.func,
     size: PropTypes.oneOf(['sm', 'md', 'lg']),
+    valid: PropTypes.bool,
     value: PropTypes.string,
   },
   defaultProps: {