introducing a radio button component and a radio button group component

src/Components/RadioButton/Documentation/RadioButton.md

@@ -0,0 +1,32 @@
+# Radio Button
+
+This is a variation of an input with type radio.
+
+### Usage
+
+```tsx
+import {Button} from '@influxdata/clockface'
+```
+
+```tsx
+<RadioButton
+  value="test-1"
+  id="test-1"
+  type={InputToggleType.Radio}
+  toolTipText="tooltip text"
+  size={ComponentSize.small}
+  ref={radioButtonRef}
+  labelText={'Radio Button'}
+  onChange={() => {}}
+></RadioButton>
+```
+
+### Example
+
+<!-- STORY -->
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/RadioButton/Documentation/RadioButton.stories.tsx

@@ -0,0 +1,151 @@
+// Libraries
+import React, {RefObject, createRef} from 'react'
+import marked from 'marked'
+
+// Storybook
+import {storiesOf} from '@storybook/react'
+import {withKnobs, select, text} from '@storybook/addon-knobs'
+import {mapEnumKeys} from '../../../Utils/storybook'
+
+// Components
+import {
+  RadioButton,
+  RadioButtonRef,
+  RadioButtonGroup,
+  RadioButtonGroupRef,
+} from '../'
+
+// Types
+
+// Notes
+import RadioButtonReadMe from './RadioButton.md'
+import RadioButtonGroupReadMe from './RadioButtonGroup.md'
+import {
+  InputToggleType,
+  ComponentSize,
+  ComponentOrientation,
+} from '../../../Types'
+
+const RadioButtonStories = storiesOf(
+  'Component|RadioButton',
+  module
+).addDecorator(withKnobs)
+
+RadioButtonStories.add(
+  'RadioButton',
+  () => {
+    const radioButtonRef: RefObject<RadioButtonRef> = createRef()
+
+    const logRef = (): void => {
+      /* eslint-disable */
+      console.log(radioButtonRef.current)
+      /* eslint-enable */
+    }
+
+    return (
+      <div className="story--example">
+        <RadioButton
+          value="test-1"
+          id="test-1"
+          type={InputToggleType.Radio}
+          toolTipText={text('titleText', 'Title Text')}
+          size={
+            ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]
+          }
+          ref={radioButtonRef}
+          labelText={text('labelText', 'Radio Button')}
+          /* eslint-disable */
+          onChange={value => console.log(value)}
+          /* eslint-disable */
+        ></RadioButton>
+        <div className="story--test-buttons">
+          <button onClick={logRef}>Log Ref</button>
+        </div>
+      </div>
+    )
+  },
+  {
+    readme: {
+      content: marked(RadioButtonReadMe),
+    },
+  }
+)
+
+RadioButtonStories.add(
+  'RadioButtonGroup',
+  () => {
+    const radioButtonGroupRef: RefObject<RadioButtonGroupRef> = createRef()
+    const radioButtonRef1: RefObject<RadioButtonRef> = createRef()
+    const radioButtonRef2: RefObject<RadioButtonRef> = createRef()
+    const radioButtonRef3: RefObject<RadioButtonRef> = createRef()
+
+    const logRef = (): void => {
+      /* eslint-disable */
+      console.log(radioButtonGroupRef.current)
+      /* eslint-enable */
+    }
+
+    return (
+      <div className="story--example">
+        <RadioButtonGroup
+          ref={radioButtonGroupRef}
+          orientation={
+            ComponentOrientation[
+              select(
+                'orientation',
+                mapEnumKeys(ComponentOrientation),
+                'Horizontal'
+              )
+            ]
+          }
+          name={'hello-1'}
+          /* eslint-disable */
+          onChange={value => console.log(value)}
+          /* eslint-disable */
+        >
+          <RadioButton
+            value="test-1"
+            id="test-1"
+            type={InputToggleType.Radio}
+            toolTipText={text('titleText', 'Title Text')}
+            size={
+              ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]
+            }
+            ref={radioButtonRef1}
+            labelText={'Hello 1'}
+          ></RadioButton>
+          <RadioButton
+            value="test-2"
+            id="test-2"
+            type={InputToggleType.Radio}
+            toolTipText={text('titleText', 'Title Text')}
+            size={
+              ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]
+            }
+            ref={radioButtonRef2}
+            labelText={'Hello 2'}
+          ></RadioButton>
+          <RadioButton
+            value="test-3"
+            id="test-3"
+            type={InputToggleType.Radio}
+            toolTipText={text('titleText', 'Title Text')}
+            size={
+              ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]
+            }
+            ref={radioButtonRef3}
+            labelText={'Hello 3'}
+          ></RadioButton>
+        </RadioButtonGroup>
+        <div className="story--test-buttons">
+          <button onClick={logRef}>Log Ref</button>
+        </div>
+      </div>
+    )
+  },
+  {
+    readme: {
+      content: marked(RadioButtonGroupReadMe),
+    },
+  }
+)

src/Components/RadioButton/Documentation/RadioButtonGroup.md

@@ -0,0 +1,56 @@
+# Radio Button
+
+This is a group wrapper for when you have multiple radio buttons.
+
+### Usage
+
+```tsx
+import {Button} from '@influxdata/clockface'
+```
+
+```tsx
+<RadioButtonGroup
+  ref={radioButtonGroupRef}
+  orientation={ComponentOrientation.horizontal}
+  name={'hello-1'}
+  onChange={() => {}}
+>
+  <RadioButton
+    value="test-1"
+    id="test-1"
+    type={InputToggleType.Radio}
+    toolTipText={'toolTip Text')}
+    size={ComponentSize.small}
+    ref={radioButtonRef1}
+    labelText={'Radio Button'}
+  />
+  <RadioButton
+    value="test-2"
+    id="test-2"
+    type={InputToggleType.Radio}
+    toolTipText={'toolTip Text')}
+    size={ComponentSize.small}
+    ref={radioButtonRef2}
+    labelText={'Radio Button'}
+  />
+  <RadioButton
+    value="test-3"
+    id="test-3"
+    type={InputToggleType.Radio}
+    toolTipText={'toolTip Text')}
+    size={ComponentSize.small}
+    ref={radioButtonRef3}
+    labelText={'Radio Button'}
+  />
+</RadioButtonGroup>
+```
+
+### Example
+
+<!-- STORY -->
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/RadioButton/RadioButton.scss

@@ -0,0 +1,100 @@
+@import "../../Styles/variables";
+
+.cf-radio-button {
+  input {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    & + .cf-radio-button--label {
+      color: $cf-label--default;
+
+      .cf-radio-button--indicator {
+        &::before {
+          position: relative;
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          background-color: $c-pool;
+          content: "";
+          border-radius: 50%;
+          transform: scale(1);
+          transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
+          opacity: 0;
+        }
+      }
+    }
+
+    &:checked + .cf-radio-button--label {
+      color: $cf-label--active;
+
+      .cf-radio-button--indicator {
+        &::before {
+          opacity: 1;
+          transform: scale(0.5);
+        }
+      }
+    }
+    &:focus + .cf-radio-button--label .cf-radio-button--indicator {
+      background-color: $cf-input-background--focused;
+      border-color: $cf-input-border--focused;
+      box-shadow: $cf-input--box-shadow;
+    }
+  }
+}
+
+.cf-radio-button--label {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  cursor: pointer;
+  font-weight: $cf-font-weight--medium;
+  &:hover > .cf-radio-button--indicator {
+    background-color: $cf-input-background--hover;
+    border-color: $cf-input-border--hover;
+  }
+}
+
+.cf-radio-button--indicator {
+  display: inline-block;
+  border-radius: 50%;
+  border-width: $cf-border;
+  border-style: solid;
+  margin: 0px;
+  background-color: $cf-input-background--default;
+  border-color: $cf-input-border--default;
+}
+
+/*
+  Size Modifiers
+  ------------------------------------------------------------------------------
+*/
+@mixin radioButtonSizeModifier($fontSize, $size, $labelGap) {
+  height: $size;
+
+  .cf-radio-button--indicator {
+    height: $size;
+    width: $size;
+    margin-right: $labelGap;
+  }
+
+  .cf-radio-button--label {
+    font-size: $fontSize;
+  }
+}
+
+.cf-radio-button__xs {
+  @include radioButtonSizeModifier($cf-form-xs-font, $cf-form-xs-height, $cf-form-xs-padding);
+}
+.cf-radio-button__sm {
+  @include radioButtonSizeModifier($cf-form-sm-font, $cf-form-sm-height, $cf-form-sm-padding);
+}
+.cf-radio-button__md {
+  @include radioButtonSizeModifier($cf-form-md-font, $cf-form-md-height, $cf-form-md-padding);
+}
+.cf-radio-button__lg {
+  @include radioButtonSizeModifier($cf-form-lg-font, $cf-form-lg-height, $cf-form-lg-padding);
+}