Checkbox, Radio, RadioSet

src/Checkbox/index.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect } from 'react';
+
+const Checkbox = ({ id, label, indeterminate, ...rest }) => {
+  const inputRef = useRef();
+  useEffect(() => {
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  return (
+    <hx-checkbox-control>
+      <input ref={inputRef} {...rest} id={id} type="checkbox" />
+      <label htmlFor={id}>
+        <hx-checkbox></hx-checkbox>
+        {label}
+      </label>
+    </hx-checkbox-control>
+  );
+};
+
+Checkbox.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  indeterminate: PropTypes.bool,
+  required: PropTypes.bool,
+  label: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default Checkbox;

src/Checkbox/stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+
+import Checkbox from './index';
+
+storiesOf('Checkbox', module).add('All Knobs', () => {
+  let label = text('label', 'check me out');
+  let checked = boolean('checked', false);
+  let disabled = boolean('disabled', false);
+  let indeterminate = boolean('indeterminate', false);
+  let required = boolean('required', false);
+  return (
+    <Checkbox
+      id="chkDemo"
+      {...(checked && { checked })}
+      {...(disabled && { disabled })}
+      {...(indeterminate && { indeterminate })}
+      {...(required && { required })}
+      {...(label && { label })}
+      onChange={action('onChange')}
+    />
+  );
+});

src/Radio/RadioSet.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const RadioSet = ({ className, children, ...rest }) => {
+  return (
+    <hx-radio-set class={className} {...rest}>
+      {children}
+    </hx-radio-set>
+  );
+};
+
+RadioSet.propTypes = {
+  children: PropTypes.node,
+};
+
+export default RadioSet;

src/Radio/index.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Radio = ({ id, label, className, ...rest }) => {
+  return (
+    <hx-radio-control>
+      <input {...rest} id={id} type="radio" />
+      <label htmlFor={id}>
+        <hx-radio></hx-radio>
+        {label}
+      </label>
+    </hx-radio-control>
+  );
+};
+
+Radio.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  label: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default Radio;

src/Radio/stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+
+import Radio from './index';
+import RadioSet from './RadioSet';
+
+storiesOf('Radio', module)
+  .add('All Knobs', () => {
+    let label = text('label', 'Radio Label');
+    let checked = boolean('checked', false);
+    let disabled = boolean('disabled', false);
+    let required = boolean('required', false);
+    return (
+      <Radio
+        id="radioDemo"
+        {...(checked && { checked })}
+        {...(disabled && { disabled })}
+        {...(required && { required })}
+        {...(label && { label })}
+        onChange={action('onChange')}
+      />
+    );
+  })
+  .add('Radio Set', () => {
+    let checked = boolean('default checked', false);
+    let disabled = boolean('disabled', false);
+    let required = boolean('required', false);
+    return (
+      <RadioSet>
+        <Radio
+          id="radioDemo1"
+          name="myRadios"
+          value="option1"
+          label="option 1"
+          {...(checked && { checked })}
+          {...(disabled && { disabled })}
+          {...(required && { required })}
+          onChange={action('onChange')}
+        />
+        <Radio
+          id="radioDemo2"
+          name="myRadios"
+          value="option2"
+          label="option 2"
+          {...(disabled && { disabled })}
+          {...(required && { required })}
+          onChange={action('onChange')}
+        />
+      </RadioSet>
+    );
+  });

src/index.mjs

@@ -1,26 +1,33 @@
 /* Export helix-react definition */
 import Alert from './Alert';
 import Button from './Button';
+import Checkbox from './Checkbox';
 import ChoiceTile from './ChoiceTile';
 import Drawer from './Drawer';
 import Icon from './Icon';
 import Modal from './Modal';
 import Popover from './Popover';
 import Tooltip from './Tooltip';
-import Select from './Select';
+import Radio from './Radio';
+import RadioSet from './Radio/RadioSet';
 import Search from './Search';
 import SearchAssist from './Search/SearchAssist';
+import Select from './Select';
+
 
 export default {
   Alert,
   Button,
+  Checkbox,
   ChoiceTile,
   Drawer,
   Icon,
   Modal,
   Popover,
-  Select,
   Tooltip,
+  Radio,
+  RadioSet,
   Search,
-  SearchAssist
+  SearchAssist,
+  Select,
 };