feat(checkbox): Initial commit to reset globally scoped CSS styles

config/styleguide.config.js

@@ -260,6 +260,7 @@ module.exports = {
             return compact([
               path.resolve('src/components/Button/Button.jsx'),
               path.resolve('src/components/Input/Input.jsx'),
+              toggleByEnv('Checkbox', path.resolve('src/components/Checkbox/Checkbox.jsx')),
               toggleByEnv('Textarea', path.resolve('src/components/Textarea/Textarea.jsx')),
               toggleByEnv('Select', path.resolve('src/components/Select/Select.jsx')),
               path.resolve('src/components/Tooltip/Tooltip.jsx'),

src/components/Checkbox/Checkbox.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import safeRest from '../../utils/safeRest'
+import generateId from '../../utils/generateId'
+
+import Text from '../Typography/Text/Text'
+
+// import styles from './Checkbox.modules.scss'
+
+const Checkbox = ({ label, ...rest }) => {
+  const checkboxId = generateId(rest.id, rest.name, label)
+
+  return (
+    <label data-no-global-styles htmlFor={checkboxId.identity()}>
+      <input {...safeRest(rest)} type="checkbox" data-no-global-styles id={checkboxId.identity()} />
+      <Text size="medium">{label}</Text>
+    </label>
+  )
+}
+
+Checkbox.propTypes = {
+  label: PropTypes.string.isRequired,
+}
+
+Checkbox.defaultProps = {}
+
+export default Checkbox

src/components/Checkbox/Checkbox.md

@@ -0,0 +1,3 @@
+```
+<Checkbox label="Choice A one two three four five six seven eight nine ten eleven twelve" />
+```

src/components/Checkbox/Checkbox.modules.scss

@@ -0,0 +1,28 @@
+@import '../../scss/settings/variables';
+@import '../../scss/utility/mixins';
+
+/* FIXME: resetting globally scoped styles in form.scss
+   because of input:not(type='radio')
+*/
+input[data-no-global-styles] {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  color: transparent;
+  font-size: inherit;
+  line-height: inherit;
+  outline: inherit;
+  padding: 0;
+  width: auto;
+  transition: none;
+  font-family: inherit;
+
+  &:focus {
+    box-shadow: none;
+    border-color: inherit;
+  }
+
+  @include from-breakpoint(medium) {
+    letter-spacing: inherit;
+  }
+}

src/components/Checkbox/__tests__/Checkbox.spec.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Checkbox from '../Checkbox'
+
+describe('Checkbox', () => {
+  const defaultProps = {
+    label: 'The input',
+  }
+  const doShallow = (overrides = {}) => shallow(<Checkbox {...defaultProps} {...overrides} />)
+  const findInputElement = input => input.find('input')
+
+  it('renders', () => {
+    const checkbox = doShallow()
+
+    expect(checkbox).toMatchSnapshot()
+  })
+
+  it('does other things', () => {
+    const checkbox = doShallow()
+
+    expect(checkbox).toBePresent()
+  })
+
+  it('passes additional attributes to the element', () => {
+    const checkbox = doShallow({
+      disabled: 'true',
+      'data-some-attr': 'some value',
+    })
+    expect(findInputElement(checkbox)).toHaveProp('disabled', 'true')
+    expect(findInputElement(checkbox)).toHaveProp('data-some-attr', 'some value')
+  })
+
+  it('does not allow custom CSS', () => {
+    const checkbox = doShallow({
+      className: 'my-custom-class',
+      style: { color: 'hotpink' },
+    })
+
+    expect(findInputElement(checkbox)).not.toHaveProp('className', 'my-custom-class')
+    expect(findInputElement(checkbox)).not.toHaveProp('style')
+  })
+})

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders 1`] = `
+<label
+  data-no-global-styles={true}
+  htmlFor="the-input"
+>
+  <input
+    data-no-global-styles={true}
+    id="the-input"
+    type="checkbox"
+  />
+  <Text
+    block={false}
+    bold={false}
+    invert={false}
+    size="medium"
+  >
+    The input
+  </Text>
+</label>
+`;

src/scss/elements/_forms.scss

@@ -15,16 +15,16 @@ textarea:not([data-no-global-styles]),
 select:not([data-no-global-styles]) {
   border: 1px solid $color-shuttle-grey;
   border-radius: $form-field-border-radius;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
   color: $color-shark;
   font-family: $font-telus;
   font-size: rem($body-text-size);
-  letter-spacing: .4px;
+  letter-spacing: 0.4px;
   line-height: 1.4;
   outline: 0;
   padding: 11px;
   width: 100%;
-  transition: background-color .1s linear;
+  transition: background-color 0.1s linear;
 
   .field & {
     margin-bottom: $form-field-bottom-spacing;
@@ -40,7 +40,7 @@ select:not([data-no-global-styles]) {
   }
 
   @include from-breakpoint(medium) {
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
   }
 }
 
@@ -53,7 +53,7 @@ textarea:not([data-no-global-styles]):focus {
   @extend %input-focus-style;
 }
 
-input[type='checkbox']:focus + span::before,
+input[type='checkbox']:not([data-no-global-styles]):focus + span::before,
 input[type='radio']:focus + span::before {
   @extend %input-focus-style;
 }
@@ -93,7 +93,7 @@ label:not([data-no-global-styles]) {
   display: inline-block;
   color: $color-shark;
   font-weight: 700;
-  letter-spacing: -.6px;
+  letter-spacing: -0.6px;
   margin-bottom: 3px;
 }
 
@@ -218,7 +218,7 @@ textarea:not([data-no-global-styles]) {
   padding: 11px 16px 16px;
   border-radius: 4px;
   margin-bottom: 11px;
-  transition: background-color .1s linear;
+  transition: background-color 0.1s linear;
 
   &--success {
     background: $color-panache;
@@ -254,7 +254,7 @@ $radio-checked-stroke-size: 6px;
 }
 
 [type='radio'],
-[type='checkbox'] {
+[type='checkbox']:not([data-no-global-styles]) {
   @extend %accessible-hide;
 
   cursor: pointer;
@@ -270,7 +270,7 @@ $radio-checked-stroke-size: 6px;
       & + .choice__text {
         &::before {
           border-color: $color-shark;
-          box-shadow: 0 0 0 1px rgba(35, 135, 0, .25);
+          box-shadow: 0 0 0 1px rgba(35, 135, 0, 0.25);
         }
       }
     }
@@ -320,7 +320,7 @@ $radio-checked-stroke-size: 6px;
       height: 22px;
       width: 22px;
       line-height: 1.4;
-      transition: all .1s linear;
+      transition: all 0.1s linear;
     }
   }
 }
@@ -362,7 +362,7 @@ $radio-checked-stroke-size: 6px;
   }
 }
 
-[type='checkbox'] {
+[type='checkbox']:not([data-no-global-styles]) {
   &:checked {
     & + .choice__text {
       &::before {
@@ -462,7 +462,7 @@ $radio-checked-stroke-size: 6px;
     width: 200px;
     padding: 15px 20px;
     background-color: white;
-    box-shadow: 0 0 2px 0 #2a2c2e, 0 3px 2px 0 rgba(84, 89, 95, .25);
+    box-shadow: 0 0 2px 0 #2a2c2e, 0 3px 2px 0 rgba(84, 89, 95, 0.25);
     border-radius: 4px;
     transform: translate(15px, -100%);
 
@@ -476,7 +476,7 @@ $radio-checked-stroke-size: 6px;
     // The 'before' pseudo element is the triangle at the bottom of the
     // speech bubble.
     &::before {
-      box-shadow: 2px 2px 3px 0 rgba(42, 42, 44, .4);
+      box-shadow: 2px 2px 3px 0 rgba(42, 42, 44, 0.4);
       background-color: white;
       bottom: -7px;
       right: 12px;