Merge pull request #56 from edx/radio-button

Implement Radio Button Group

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -1010,6 +1010,116 @@ exports[`Storyshots Paragon Welcome 1`] = `
 </div>
 `;
 
+exports[`Storyshots RadioButtonGroup selected minimal usage 1`] = `
+<div
+  aria-label="Radio Button Group"
+  onChange={[Function]}
+  role="radiogroup"
+  tabIndex={-1}
+>
+  <div>
+    <input
+      aria-checked={false}
+      data-index={0}
+      defaultChecked={false}
+      name="rbg"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="radio"
+      value="jaebaebae"
+    />
+    First Value
+  </div>
+  <div>
+    <input
+      aria-checked={true}
+      data-index={1}
+      defaultChecked={true}
+      name="rbg"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="radio"
+      value="value2"
+    />
+    Second Value
+  </div>
+  <div>
+    <input
+      aria-checked={false}
+      data-index={2}
+      defaultChecked={false}
+      name="rbg"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="radio"
+      value="value3"
+    />
+    Third Value
+  </div>
+</div>
+`;
+
+exports[`Storyshots RadioButtonGroup unselected minimal usage 1`] = `
+<div
+  aria-label="Radio Button Group"
+  onChange={[Function]}
+  role="radiogroup"
+  tabIndex={-1}
+>
+  <div>
+    <input
+      aria-checked={false}
+      data-index={0}
+      defaultChecked={false}
+      name="rbg"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="radio"
+      value="jaebaebae"
+    />
+    First Value
+  </div>
+  <div>
+    <input
+      aria-checked={false}
+      data-index={1}
+      defaultChecked={false}
+      name="rbg"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="radio"
+      value="value2"
+    />
+    Second Value
+  </div>
+  <div>
+    <input
+      aria-checked={false}
+      data-index={2}
+      defaultChecked={false}
+      name="rbg"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="radio"
+      value="value3"
+    />
+    Third Value
+  </div>
+</div>
+`;
+
 exports[`Storyshots StatusAlert Non-dismissible alert 1`] = `
 <div
   className="alert fade alert-danger show"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/paragon",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "src/index.js",
   "author": "arizzitano",
@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.2.12",
+    "@storybook/addon-console": "^1.0.0",
     "@storybook/addon-options": "^3.2.6",
     "@storybook/addon-storyshots": "^3.2.8",
     "@storybook/react": "3.2.11",

src/RadioButtonGroup/RadioButtonGroup.stories.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-extraneous-dependencies, no-console */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { setConsoleOptions } from '@storybook/addon-console';
+
+import RadioButtonGroup, { RadioButton } from './index';
+
+setConsoleOptions({
+  panelExclude: ['warn', 'error'],
+});
+
+const onChange = (event) => {
+  console.log(`onChange fired for ${event.target.value}`);
+
+  const selectedIndex = parseInt(event.target.getAttribute('data-index'), 10);
+  console.log(`Selected index should be ${selectedIndex}`);
+
+  action('Radio Button Change');
+};
+
+const onClick = (event) => {
+  console.log(`onClick fired for ${event.target.value}`);
+
+  action('Radio Button Click');
+};
+
+const onFocus = (event) => {
+  console.log(`onFocus fired for ${event.target.value}`);
+
+  action('Radio Button Focus');
+};
+
+const onKeyDown = (event) => {
+  console.log(`onKeyDown fired for ${event.target.value} with key value: ${event.key}`);
+
+  action('Radio Button Key Press');
+};
+
+storiesOf('RadioButtonGroup', module)
+  .add('unselected minimal usage', () => (
+    <RadioButtonGroup
+      name={'rbg'}
+      label={'Radio Button Group'}
+      onBlur={action('Radio Button Blur')}
+      onChange={onChange}
+      onClick={onClick}
+      onFocus={onFocus}
+      onKeyDown={onKeyDown}
+    >
+      <RadioButton value={'jaebaebae'}>First Value</RadioButton>
+      <RadioButton value={'value2'}>Second Value</RadioButton>
+      <RadioButton value={'value3'}>Third Value</RadioButton>
+    </RadioButtonGroup>
+  ))
+  .add('selected minimal usage', () => (
+    <RadioButtonGroup
+      name={'rbg'}
+      label={'Radio Button Group'}
+      onBlur={action('Radio Button Blur')}
+      onChange={onChange}
+      onClick={onClick}
+      onFocus={onFocus}
+      onKeyDown={onKeyDown}
+      selectedIndex={1}
+    >
+      <RadioButton value={'jaebaebae'}>First Value</RadioButton>
+      <RadioButton value={'value2'}>Second Value</RadioButton>
+      <RadioButton value={'value3'}>Third Value</RadioButton>
+    </RadioButtonGroup>
+  ));