feat(radio): add radios (#27)

* add checkbox primary

* add hover states

* use class name

* Add transition:

* disabled state

* add class for no outline

* add mixin for no-select

* add radios

* add focus states

* remoev focus, too weird

* remove no-outline

* fix color conflicts

* unify

* clean up class names

* split up stories

Author: Celeste Glavin

packages/ray/lib/application.scss

@@ -10,6 +10,7 @@
 
 @import './components/card/card';
 @import './components/button/button';
+@import './components/radio-checkbox/radio-checkbox';
 @import 'responsive';
 @import 'forms';
 @import 'image';

packages/ray/lib/components/radio-checkbox/_radio-checkbox.scss

@@ -0,0 +1,80 @@
+$radio-checkbox-border-width: 3px;
+$radio-checkbox-width: 1rem;
+
+.#{$prefix}radio,
+.#{$prefix}checkbox {
+  @include no-select;
+
+  label {
+    padding-left: 1rem;
+  }
+
+  &__input {
+    appearance: none;
+    background-color: $ray-color-white;
+    border: $radio-checkbox-border-width double $ray-color-black;
+    width: $radio-checkbox-width;
+    height: $radio-checkbox-width;
+    transform: translateY(16%);
+
+    &::after {
+      content: '';
+      width: calc(#{$radio-checkbox-width} - 2 * #{$radio-checkbox-border-width});
+      height: calc(#{$radio-checkbox-width} - 2 * #{$radio-checkbox-border-width});
+      background: $ray-color-white;
+      display: block;
+      transition: $transition;
+    }
+
+    &:checked {
+      border-color: $ray-color-blue-50;
+
+      &::after {
+        background: $ray-color-blue-50;
+      }
+
+      &:hover {
+        border-color: $ray-color-blue-70;
+
+        &::after {
+          background: $ray-color-blue-70;
+        }
+      }
+    }
+
+    &:not(:checked) {
+      &:hover {
+        &::after {
+          background: $ray-color-blue-10;
+        }
+      }
+    }
+
+    &[disabled] {
+      border-color: #B0B0B0;
+
+      &:hover {
+        &::after {
+          background: $ray-color-white;
+        }
+      }
+
+      + label {
+        cursor: not-allowed;
+        color: #B0B0B0;
+      }
+    }
+  }
+}
+
+.#{$prefix}radio__input {
+  border-radius: 50%;
+
+  &::after {
+    border-radius: 50%;
+  }
+}
+
+.#{$prefix}checkbox__input {
+  border-radius: $border-radius;
+}

packages/ray/lib/global/_functions.scss

@@ -29,3 +29,12 @@
     @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
   }
 }
+
+@mixin no-select {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}

packages/ray/lib/global/_variables.scss

@@ -4,6 +4,8 @@ $font-stack-sans-serif: 'Apercu', Avenir, -apple-system, BlinkMacSystemFont,
   'Helvetica Neue', Helvetica, 'Calibri', 'Roboto', Arial, sans-serif !default;
 $font-stack-mono: 'Apercu Mono', monospace !default;
 
+$transition: all 0.125s ease;
+
 $breakpoint-mobile-px: 400px !default;
 $breakpoint-tablet-px: 600px !default;
 $breakpoint-desktop-px: 840px !default;

packages/ray/stories/radio-checkbox.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withPadding from './util/withPadding';
+
+storiesOf('Forms - Radio buttons and Checkboxes', module)
+  .addWithJSX('Radio button', () =>
+    withPadding(
+      <React.Fragment>
+        <div className="ray-radio">
+          <input id="radio-1" name="radio-button-story" type="radio" className="ray-radio__input" />
+          <label htmlFor="radio-1">Choose me</label>
+        </div>
+        <div className="ray-radio">
+          <input id="radio-2" name="radio-button-story" type="radio" className="ray-radio__input" />
+          <label htmlFor="radio-2">Choose me</label>
+        </div>
+        <div className="ray-radio">
+          <input id="radio-3" name="radio-button-story" type="radio" className="ray-radio__input" disabled />
+          <label htmlFor="radio-3">Choose me</label>
+        </div>
+      </React.Fragment>
+  ))
+  .addWithJSX('Checkbox', () =>
+    withPadding(
+      <div className="ray-checkbox">
+        <input id="check" type="checkbox" className="ray-checkbox__input" />
+        <label htmlFor="check">Check me out</label>
+      </div>
+    )
+  )
+  .addWithJSX('Checkbox - disabled', () =>
+    withPadding(
+      <div className="ray-checkbox">
+        <input id="check" type="checkbox" className="ray-checkbox__input" disabled />
+        <label htmlFor="check">Check me out</label>
+      </div>
+    )
+  );

packages/ray/stories/forms.stories.js renamed to packages/ray/stories/textFields.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 
 import withPadding from './util/withPadding';
 
-storiesOf('Forms', module)
+storiesOf('Forms - Text Fields', module)
   .addWithJSX('Text field', () =>
     withPadding(
       <div className="ray-field">