From a6ae3df115a22ba84a5e234bdb5dda9fda49c106 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 31 Jul 2020 17:23:08 -0400
Subject: [PATCH 01/10] Text & Text Area - Using `container` prefix to describe
 the outer most tag. IE: containId, or containsClass

---
 src/Search/SearchAssist.js |  4 +--
 src/Search/index.js        |  6 ++--
 src/Select/index.js        | 11 ++------
 src/Select/stories.js      | 12 +++++---
 src/Text/index.js          | 40 +++++++++++++++++++++++++++
 src/Text/stories.js        | 56 ++++++++++++++++++++++++++++++++++++++
 src/TextArea/index.js      | 36 ++++++++++++++++++++++++
 src/TextArea/stories.js    | 26 ++++++++++++++++++
 src/storyUtils.js          |  2 +-
 9 files changed, 175 insertions(+), 18 deletions(-)
 create mode 100644 src/Text/index.js
 create mode 100644 src/Text/stories.js
 create mode 100644 src/TextArea/index.js
 create mode 100644 src/TextArea/stories.js

diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js
index 09e7a15..95c56da 100644
--- a/src/Search/SearchAssist.js
+++ b/src/Search/SearchAssist.js
@@ -25,7 +25,7 @@ const SearchAssist = ({ children, onFocus, onBlur, position, ...rest }) => {
           setOpen(true);
           onFocus && onFocus(e);
         }}
-        wrapperId={`${rest.id}-hx-search-control`}
+        containerId={`${rest.id}-hx-search-control`}
       />
       {hasChildren && (
         <SearchAssistance
@@ -48,7 +48,7 @@ SearchAssist.propTypes = {
   clearLabel: PropTypes.string,
   label: PropTypes.string,
   id: PropTypes.string.isRequired,
-  wrapperId: PropTypes.string,
+  containerId: PropTypes.string,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
diff --git a/src/Search/index.js b/src/Search/index.js
index 9e71335..9bbe9b9 100644
--- a/src/Search/index.js
+++ b/src/Search/index.js
@@ -18,7 +18,7 @@ const Search = ({
   onClear,
   optional,
   required,
-  wrapperId,
+  containerId,
   value,
   ...rest
 }) => {
@@ -39,7 +39,7 @@ const Search = ({
   }, [value]);
 
   return (
-    <hx-search-control class={className} id={wrapperId}>
+    <hx-search-control class={className} id={containerId}>
       <input
         id={id}
         value={value}
@@ -72,7 +72,7 @@ Search.propTypes = {
   clearLabel: PropTypes.string,
   label: PropTypes.string,
   id: PropTypes.string.isRequired,
-  wrapperId: PropTypes.string,
+  containerId: PropTypes.string,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
diff --git a/src/Select/index.js b/src/Select/index.js
index 25b007f..95b3145 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -2,9 +2,9 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Select = ({ children, disabled, id, label, onChange, optional, required, ...rest }) => {
+const Select = ({ children, containerClass, disabled, id, label, onChange, optional, required, ...rest }) => {
   return (
-    <hx-select-control>
+    <hx-select-control class={containerClass}>
       <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
         {children}
       </select>
@@ -26,6 +26,7 @@ const Select = ({ children, disabled, id, label, onChange, optional, required, .
 
 Select.propTypes = {
   children: PropTypes.node.isRequired,
+  containerClass: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
@@ -34,10 +35,4 @@ Select.propTypes = {
   required: PropTypes.bool,
 };
 
-Select.defaultProps = {
-  disabled: false,
-  optional: false,
-  required: false,
-};
-
 export default Select;
diff --git a/src/Select/stories.js b/src/Select/stories.js
index 890f58d..1965766 100644
--- a/src/Select/stories.js
+++ b/src/Select/stories.js
@@ -5,32 +5,36 @@ import { storiesOf } from '@storybook/react';
 import React from 'react';
 
 import Select from '../Select';
+import { InputContainer } from '../storyUtils';
 
 storiesOf('Select', module)
   .addDecorator(centered)
   .add('All Knobs', () => {
     let disabled = boolean('disabled', false);
-    let label = text('label', '');
     let optional = boolean('optional', false);
     let required = boolean('required', false);
+    let help = text('help', '' );
+    let error = text('error', '' );
 
     return (
       <Demo
         {...(disabled && { disabled })}
-        {...(label && { label })}
+        label="Select Me"
         {...(optional && { optional })}
         {...(required && { required })}
+        {...(help && { help })}
+        {...(error && { error })}
       />
     );
   });
 
 const Demo = (props) => {
   return (
-    <div style={{ padding: 25, width: 500 }}>
+    <InputContainer>
       <Select label="Select" onChange={action(`selected`)} {...props}>
         <Options />
       </Select>
-    </div>
+    </InputContainer>
   );
 };
 
diff --git a/src/Text/index.js b/src/Text/index.js
new file mode 100644
index 0000000..c2ba1ff
--- /dev/null
+++ b/src/Text/index.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const Text = ({ id, label, containerClass, required, optional, children, prefix, suffix, ...rest }) => {
+  return (
+    <hx-text-control class={containerClass}>
+      <input {...rest} id={id} required={required} type="text" />
+      <label
+        className={classnames({
+            hxOptional: optional,
+            hxRequired: required
+        })}
+        htmlFor={id}
+      >
+        {label}
+      </label>
+
+      {prefix && <span className="hxPrefix">{prefix}</span>}
+      {suffix && <span className="hxSuffix">{suffix}</span>}
+      {children}
+    </hx-text-control>
+  );
+};
+
+Text.propTypes = {
+  id: PropTypes.string.isRequired,
+  containerClass: PropTypes.string,
+  children: PropTypes.node,
+  optional: PropTypes.bool,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  label: PropTypes.bool,
+  name: PropTypes.string,
+  prefix: PropTypes.node,
+  suffix: PropTypes.node,
+  onChange: PropTypes.func,
+};
+
+export default Text;
diff --git a/src/Text/stories.js b/src/Text/stories.js
new file mode 100644
index 0000000..831353c
--- /dev/null
+++ b/src/Text/stories.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+import Text from './index';
+import { InputContainer } from '../storyUtils';
+
+storiesOf('Text', module)
+    .add('All Knobs', () => {
+        let disabled = boolean('disabled', false);
+        let required = boolean('required', false);
+        let optional = boolean('optional', false);
+        let prefix = text('prefix', '@' );
+        let suffix = text('suffix', '.example.com' );
+
+        return (
+          <>
+            <InputContainer>
+            <Text
+              id="textDemo"
+              {...(disabled && { disabled })}
+              {...(required && { required })}
+              {...(optional && { optional })}
+              label="Username"
+              onChange={action('onChange')}
+            />
+          </InputContainer>
+
+            <h3>Prefix</h3>
+            <InputContainer>
+              <Text
+                id="textDemo1"
+                {...(disabled && { disabled })}
+                {...(required && { required })}
+                {...(optional && { optional })}
+                {...(prefix && { prefix })}
+                label="twitter handle"
+                onChange={action('onChange')}
+             />
+            </InputContainer>
+
+            <h3>Suffix</h3>
+            <InputContainer>
+              <Text
+                id="textDemo2"
+                {...(disabled && { disabled })}
+                {...(required && { required })}
+                {...(optional && { optional })}
+                {...(suffix && { suffix })}
+                label="Subdomain"
+                onChange={action('onChange')}
+              />
+            </InputContainer>
+          </>
+        );
+    });
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
new file mode 100644
index 0000000..bf650e1
--- /dev/null
+++ b/src/TextArea/index.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const TextArea = ({ id, label, containerClass, required, optional, children, ...rest }) => {
+  return (
+    <hx-textarea-control class={containerClass}>
+      <textarea {...rest} id={id} required={required} />
+      <label
+        className={classnames({
+            hxOptional: optional,
+            hxRequired: required
+        })}
+        htmlFor={id}
+      >
+        {label}
+      </label>
+      {children}
+    </hx-textarea-control>
+  );
+};
+
+TextArea.propTypes = {
+  id: PropTypes.string.isRequired,
+  containerClass: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  optional: PropTypes.bool,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  label: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default TextArea;
diff --git a/src/TextArea/stories.js b/src/TextArea/stories.js
new file mode 100644
index 0000000..9010cb7
--- /dev/null
+++ b/src/TextArea/stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+import TextArea from './index';
+import { InputContainer } from '../storyUtils';
+
+storiesOf('TextArea', module)
+  .add('All Knobs', () => {
+    let disabled = boolean('disabled', false);
+    let required = boolean('required', false);
+    let optional = boolean('optional', false);
+
+    return (
+    <InputContainer>
+      <TextArea
+        id="textAreaDemo"
+        lable="Comments"
+        {...(disabled && { disabled })}
+        {...(required && { required })}
+        {...(optional && { optional })}
+        onChange={action('onChange')}
+      />
+    </InputContainer>
+    );
+  });
diff --git a/src/storyUtils.js b/src/storyUtils.js
index 85b6dfc..061301a 100644
--- a/src/storyUtils.js
+++ b/src/storyUtils.js
@@ -16,4 +16,4 @@ export const getLongText = () => `
   nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
  `;
 
-export const InputContainer = ({ children }) => <div style={{ width: 500 }}>{children}</div>;
+export const InputContainer = ({ children }) => <div style={{ width: 500, marginBottom: 30 }}>{children}</div>;

From a9bf5eb06bcb8395d56b91877571343e601440ee Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 31 Jul 2020 17:24:09 -0400
Subject: [PATCH 02/10] make it pretty

---
 src/Select/index.js     | 12 +++++-
 src/Select/stories.js   |  4 +-
 src/Text/index.js       | 16 ++++++--
 src/Text/stories.js     | 91 ++++++++++++++++++++---------------------
 src/TextArea/index.js   |  4 +-
 src/TextArea/stories.js | 15 ++++---
 src/storyUtils.js       |  4 +-
 7 files changed, 83 insertions(+), 63 deletions(-)

diff --git a/src/Select/index.js b/src/Select/index.js
index 95b3145..5f10cff 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -2,7 +2,17 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Select = ({ children, containerClass, disabled, id, label, onChange, optional, required, ...rest }) => {
+const Select = ({
+  children,
+  containerClass,
+  disabled,
+  id,
+  label,
+  onChange,
+  optional,
+  required,
+  ...rest
+}) => {
   return (
     <hx-select-control class={containerClass}>
       <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
diff --git a/src/Select/stories.js b/src/Select/stories.js
index 1965766..9d3d21e 100644
--- a/src/Select/stories.js
+++ b/src/Select/stories.js
@@ -13,8 +13,8 @@ storiesOf('Select', module)
     let disabled = boolean('disabled', false);
     let optional = boolean('optional', false);
     let required = boolean('required', false);
-    let help = text('help', '' );
-    let error = text('error', '' );
+    let help = text('help', '');
+    let error = text('error', '');
 
     return (
       <Demo
diff --git a/src/Text/index.js b/src/Text/index.js
index c2ba1ff..2f087bb 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -2,14 +2,24 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const Text = ({ id, label, containerClass, required, optional, children, prefix, suffix, ...rest }) => {
+const Text = ({
+  id,
+  label,
+  containerClass,
+  required,
+  optional,
+  children,
+  prefix,
+  suffix,
+  ...rest
+}) => {
   return (
     <hx-text-control class={containerClass}>
       <input {...rest} id={id} required={required} type="text" />
       <label
         className={classnames({
-            hxOptional: optional,
-            hxRequired: required
+          hxOptional: optional,
+          hxRequired: required,
         })}
         htmlFor={id}
       >
diff --git a/src/Text/stories.js b/src/Text/stories.js
index 831353c..2c78d93 100644
--- a/src/Text/stories.js
+++ b/src/Text/stories.js
@@ -5,52 +5,51 @@ import { storiesOf } from '@storybook/react';
 import Text from './index';
 import { InputContainer } from '../storyUtils';
 
-storiesOf('Text', module)
-    .add('All Knobs', () => {
-        let disabled = boolean('disabled', false);
-        let required = boolean('required', false);
-        let optional = boolean('optional', false);
-        let prefix = text('prefix', '@' );
-        let suffix = text('suffix', '.example.com' );
+storiesOf('Text', module).add('All Knobs', () => {
+  let disabled = boolean('disabled', false);
+  let required = boolean('required', false);
+  let optional = boolean('optional', false);
+  let prefix = text('prefix', '@');
+  let suffix = text('suffix', '.example.com');
 
-        return (
-          <>
-            <InputContainer>
-            <Text
-              id="textDemo"
-              {...(disabled && { disabled })}
-              {...(required && { required })}
-              {...(optional && { optional })}
-              label="Username"
-              onChange={action('onChange')}
-            />
-          </InputContainer>
+  return (
+    <>
+      <InputContainer>
+        <Text
+          id="textDemo"
+          {...(disabled && { disabled })}
+          {...(required && { required })}
+          {...(optional && { optional })}
+          label="Username"
+          onChange={action('onChange')}
+        />
+      </InputContainer>
 
-            <h3>Prefix</h3>
-            <InputContainer>
-              <Text
-                id="textDemo1"
-                {...(disabled && { disabled })}
-                {...(required && { required })}
-                {...(optional && { optional })}
-                {...(prefix && { prefix })}
-                label="twitter handle"
-                onChange={action('onChange')}
-             />
-            </InputContainer>
+      <h3>Prefix</h3>
+      <InputContainer>
+        <Text
+          id="textDemo1"
+          {...(disabled && { disabled })}
+          {...(required && { required })}
+          {...(optional && { optional })}
+          {...(prefix && { prefix })}
+          label="twitter handle"
+          onChange={action('onChange')}
+        />
+      </InputContainer>
 
-            <h3>Suffix</h3>
-            <InputContainer>
-              <Text
-                id="textDemo2"
-                {...(disabled && { disabled })}
-                {...(required && { required })}
-                {...(optional && { optional })}
-                {...(suffix && { suffix })}
-                label="Subdomain"
-                onChange={action('onChange')}
-              />
-            </InputContainer>
-          </>
-        );
-    });
+      <h3>Suffix</h3>
+      <InputContainer>
+        <Text
+          id="textDemo2"
+          {...(disabled && { disabled })}
+          {...(required && { required })}
+          {...(optional && { optional })}
+          {...(suffix && { suffix })}
+          label="Subdomain"
+          onChange={action('onChange')}
+        />
+      </InputContainer>
+    </>
+  );
+});
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
index bf650e1..fdd3a28 100644
--- a/src/TextArea/index.js
+++ b/src/TextArea/index.js
@@ -8,8 +8,8 @@ const TextArea = ({ id, label, containerClass, required, optional, children, ...
       <textarea {...rest} id={id} required={required} />
       <label
         className={classnames({
-            hxOptional: optional,
-            hxRequired: required
+          hxOptional: optional,
+          hxRequired: required,
         })}
         htmlFor={id}
       >
diff --git a/src/TextArea/stories.js b/src/TextArea/stories.js
index 9010cb7..deffa40 100644
--- a/src/TextArea/stories.js
+++ b/src/TextArea/stories.js
@@ -5,13 +5,12 @@ import { storiesOf } from '@storybook/react';
 import TextArea from './index';
 import { InputContainer } from '../storyUtils';
 
-storiesOf('TextArea', module)
-  .add('All Knobs', () => {
-    let disabled = boolean('disabled', false);
-    let required = boolean('required', false);
-    let optional = boolean('optional', false);
+storiesOf('TextArea', module).add('All Knobs', () => {
+  let disabled = boolean('disabled', false);
+  let required = boolean('required', false);
+  let optional = boolean('optional', false);
 
-    return (
+  return (
     <InputContainer>
       <TextArea
         id="textAreaDemo"
@@ -22,5 +21,5 @@ storiesOf('TextArea', module)
         onChange={action('onChange')}
       />
     </InputContainer>
-    );
-  });
+  );
+});
diff --git a/src/storyUtils.js b/src/storyUtils.js
index 061301a..2477fa1 100644
--- a/src/storyUtils.js
+++ b/src/storyUtils.js
@@ -16,4 +16,6 @@ export const getLongText = () => `
   nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
  `;
 
-export const InputContainer = ({ children }) => <div style={{ width: 500, marginBottom: 30 }}>{children}</div>;
+export const InputContainer = ({ children }) => (
+  <div style={{ width: 500, marginBottom: 30 }}>{children}</div>
+);

From 274ba8c4299b2b3e30ff62df18f2d5527a3c62aa Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 31 Jul 2020 17:30:09 -0400
Subject: [PATCH 03/10] Remove Help Error

---
 src/Select/stories.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Select/stories.js b/src/Select/stories.js
index 9d3d21e..92980cf 100644
--- a/src/Select/stories.js
+++ b/src/Select/stories.js
@@ -13,8 +13,6 @@ storiesOf('Select', module)
     let disabled = boolean('disabled', false);
     let optional = boolean('optional', false);
     let required = boolean('required', false);
-    let help = text('help', '');
-    let error = text('error', '');
 
     return (
       <Demo
@@ -22,8 +20,6 @@ storiesOf('Select', module)
         label="Select Me"
         {...(optional && { optional })}
         {...(required && { required })}
-        {...(help && { help })}
-        {...(error && { error })}
       />
     );
   });

From 069d38e60be4c4e87fea1a9617cfb2a47272798b Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 14 Aug 2020 13:13:09 -0400
Subject: [PATCH 04/10] Put class names on wrapping element.

After seeing developers interact with these components, it seems like the more intuitive approuch is to expect the className goes on the parent most element. Putting class names wrapping element to improve developer experience.
---
 src/Checkbox/index.js | 5 +++--
 src/Radio/index.js    | 3 ++-
 src/Select/index.js   | 6 +++---
 src/Text/index.js     | 6 +++---
 src/TextArea/index.js | 5 ++---
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index 3a8f373..bbe2dc8 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
 
-const Checkbox = ({ id, label, indeterminate, ...rest }) => {
+const Checkbox = ({ id, label, indeterminate, className, ...rest }) => {
   const inputRef = useRef();
   useEffect(() => {
     inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
 
   return (
-    <hx-checkbox-control>
+    <hx-checkbox-control class={className}>
       <input ref={inputRef} {...rest} id={id} type="checkbox" />
       <label htmlFor={id}>
         <hx-checkbox></hx-checkbox>
@@ -19,6 +19,7 @@ const Checkbox = ({ id, label, indeterminate, ...rest }) => {
 };
 
 Checkbox.propTypes = {
+  className: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
diff --git a/src/Radio/index.js b/src/Radio/index.js
index 00c095f..7cd90e1 100644
--- a/src/Radio/index.js
+++ b/src/Radio/index.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 const Radio = ({ id, label, className, ...rest }) => {
   return (
-    <hx-radio-control>
+    <hx-radio-control class={className}>
       <input {...rest} id={id} type="radio" />
       <label htmlFor={id}>
         <hx-radio></hx-radio>
@@ -14,6 +14,7 @@ const Radio = ({ id, label, className, ...rest }) => {
 };
 
 Radio.propTypes = {
+  className: PropTypes.string,
   checked: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
diff --git a/src/Select/index.js b/src/Select/index.js
index 5f10cff..fed1440 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -4,7 +4,7 @@ import React from 'react';
 
 const Select = ({
   children,
-  containerClass,
+  className,
   disabled,
   id,
   label,
@@ -14,7 +14,7 @@ const Select = ({
   ...rest
 }) => {
   return (
-    <hx-select-control class={containerClass}>
+    <hx-select-control class={className}>
       <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
         {children}
       </select>
@@ -36,7 +36,7 @@ const Select = ({
 
 Select.propTypes = {
   children: PropTypes.node.isRequired,
-  containerClass: PropTypes.string,
+  className: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
diff --git a/src/Text/index.js b/src/Text/index.js
index 2f087bb..2e30dfa 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 const Text = ({
   id,
   label,
-  containerClass,
+  className,
   required,
   optional,
   children,
@@ -14,7 +14,7 @@ const Text = ({
   ...rest
 }) => {
   return (
-    <hx-text-control class={containerClass}>
+    <hx-text-control class={className}>
       <input {...rest} id={id} required={required} type="text" />
       <label
         className={classnames({
@@ -35,7 +35,7 @@ const Text = ({
 
 Text.propTypes = {
   id: PropTypes.string.isRequired,
-  containerClass: PropTypes.string,
+  className: PropTypes.string,
   children: PropTypes.node,
   optional: PropTypes.bool,
   disabled: PropTypes.bool,
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
index fdd3a28..6b57542 100644
--- a/src/TextArea/index.js
+++ b/src/TextArea/index.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const TextArea = ({ id, label, containerClass, required, optional, children, ...rest }) => {
+const TextArea = ({ id, label, className, required, optional, children, ...rest }) => {
   return (
-    <hx-textarea-control class={containerClass}>
+    <hx-textarea-control class={className}>
       <textarea {...rest} id={id} required={required} />
       <label
         className={classnames({
@@ -22,7 +22,6 @@ const TextArea = ({ id, label, containerClass, required, optional, children, ...
 
 TextArea.propTypes = {
   id: PropTypes.string.isRequired,
-  containerClass: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node,
   optional: PropTypes.bool,

From 0ef74bea5fec31aafefc92a8e6aa0da2816571c6 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 14 Aug 2020 13:21:39 -0400
Subject: [PATCH 05/10] make it pretty

---
 src/Text/index.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/Text/index.js b/src/Text/index.js
index 2e30dfa..6a19332 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -2,17 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const Text = ({
-  id,
-  label,
-  className,
-  required,
-  optional,
-  children,
-  prefix,
-  suffix,
-  ...rest
-}) => {
+const Text = ({ id, label, className, required, optional, children, prefix, suffix, ...rest }) => {
   return (
     <hx-text-control class={className}>
       <input {...rest} id={id} required={required} type="text" />

From e2be30778e16a4e4ace67d33051e146f10b887a5 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 14 Aug 2020 15:42:00 -0400
Subject: [PATCH 06/10] Update Helix React, Fix Prop warnings, Add Pill and
 Switch

---
 package.json           |  2 +-
 src/Checkbox/index.js  |  4 ++--
 src/Drawer/index.js    |  3 ++-
 src/Drawer/stories.js  |  3 ++-
 src/Modal/stories.js   |  2 +-
 src/Pill/Status.js     | 24 ++++++++++++++++++++++++
 src/Pill/index.js      | 20 ++++++++++++++++++++
 src/Pill/stories.js    | 27 +++++++++++++++++++++++++++
 src/Popover/stories.js |  2 +-
 src/Radio/index.js     |  4 ++--
 src/Search/stories.js  |  4 ++--
 src/Select/index.js    |  2 +-
 src/Select/stories.js  |  2 +-
 src/Switch/index.js    | 33 +++++++++++++++++++++++++++++++++
 src/Switch/stories.js  | 22 ++++++++++++++++++++++
 src/Text/index.js      |  2 +-
 src/index.mjs          |  4 ++++
 yarn.lock              | 12 +++++++++---
 18 files changed, 155 insertions(+), 17 deletions(-)
 create mode 100644 src/Pill/Status.js
 create mode 100644 src/Pill/index.js
 create mode 100644 src/Pill/stories.js
 create mode 100644 src/Switch/index.js
 create mode 100644 src/Switch/stories.js

diff --git a/package.json b/package.json
index 0a07e76..9961352 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
     "babel-loader": "^8.1.0",
-    "helix-ui": "^0.19.0",
+    "helix-ui": "^0.24.0",
     "husky": "^4.2.5",
     "prettier": "^2.0.4",
     "prop-types": "^15.7.2",
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index bbe2dc8..e999992 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -20,12 +20,12 @@ const Checkbox = ({ id, label, indeterminate, className, ...rest }) => {
 
 Checkbox.propTypes = {
   className: PropTypes.string.isRequired,
-  checked: PropTypes.bool.isRequired,
+  checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   indeterminate: PropTypes.bool,
   required: PropTypes.bool,
-  label: PropTypes.bool,
+  label: PropTypes.string,
   name: PropTypes.string,
   onChange: PropTypes.func,
 };
diff --git a/src/Drawer/index.js b/src/Drawer/index.js
index 2b08614..29c4b52 100644
--- a/src/Drawer/index.js
+++ b/src/Drawer/index.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classnames from 'classnames';
 
 import { SIZES } from '../constants';
 import useEventListener from '../hooks/useEventListener';
@@ -8,7 +9,7 @@ import { wcBool } from '../utils';
 const Drawer = ({ children, className, id, onClose, onOpen, open, size, ...rest }) => {
   const hxRef = useEventListener({ onOpen, onClose });
   return (
-    <hx-drawer class={(className, SIZES[size])} id={id} open={wcBool(open)} ref={hxRef} {...rest}>
+    <hx-drawer class={classnames(className, SIZES[size])} id={id} open={wcBool(open)} ref={hxRef} {...rest}>
       {children}
     </hx-drawer>
   );
diff --git a/src/Drawer/stories.js b/src/Drawer/stories.js
index 09843aa..06eb82a 100644
--- a/src/Drawer/stories.js
+++ b/src/Drawer/stories.js
@@ -24,7 +24,7 @@ storiesOf('Drawer', module).add('All Knobs', () => {
   const defaultBody = <p>{getLongText()}</p>;
   const defaultHeader = 'Drawer Header';
   const defaultFooter = (
-    <div class="hxButtonSet">
+    <div className="hxButtonSet">
       <Button variant="primary">Confirm</Button>
       <Button variant="tertiary">Cancel</Button>
     </div>
@@ -36,6 +36,7 @@ storiesOf('Drawer', module).add('All Knobs', () => {
       {...(size && { size })}
       onOpen={action('onOpen')}
       onClose={action('onClose')}
+      id="drawer-id"
     >
       {<header>{header || defaultHeader}</header>}
       {<Div className="hxMd">{body || defaultBody}</Div>}
diff --git a/src/Modal/stories.js b/src/Modal/stories.js
index eecfa6e..2e3792a 100644
--- a/src/Modal/stories.js
+++ b/src/Modal/stories.js
@@ -18,7 +18,7 @@ storiesOf('Modal', module).add('All Knobs', () => {
   let footer = text('footer', '');
   let open = boolean('open', true);
   let size = select('size', SIZES, 'medium');
-  let scroll = boolean('scroll', false);
+  let scroll = boolean('scroll', undefined);
 
   const smallText =
     'This is the body of a demo modal. Interaction with content behind this modal cannot take place until this modal is closed.\n';
diff --git a/src/Pill/Status.js b/src/Pill/Status.js
new file mode 100644
index 0000000..a56b7b2
--- /dev/null
+++ b/src/Pill/Status.js
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const PILL_VARIANTS = {
+  'grey' : 'hxEmphasisGray',
+  'purple' : 'hxEmphasisPurple',
+  'subdued' : 'hxSubdued'
+};
+
+const Status = ({ className, children, variant, filled, ...rest }) => {
+  return (
+    <hx-status class={classnames(className, PILL_VARIANTS[variant], {'hxFill': filled})} {...rest}>
+      {children}
+    </hx-status>
+  );
+};
+
+Status.propTypes = {
+  variant: PropTypes.oneOf(Object.keys(PILL_VARIANTS)),
+  filled: PropTypes.bool
+};
+
+export default Status;
diff --git a/src/Pill/index.js b/src/Pill/index.js
new file mode 100644
index 0000000..abd9944
--- /dev/null
+++ b/src/Pill/index.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import useEventListener from '../hooks/useEventListener';
+
+const Pill = ({ className, children, onDismiss, ...rest }) => {
+  const hxRef = useEventListener({ onDismiss });
+  return (
+    <hx-pill class={className} {...rest} ref={hxRef} >
+      {children}
+    </hx-pill>
+  );
+};
+
+Pill.propTypes = {
+  persist: PropTypes.bool,
+  onDismiss: PropTypes.func,
+};
+
+export default Pill;
diff --git a/src/Pill/stories.js b/src/Pill/stories.js
new file mode 100644
index 0000000..cd70ef2
--- /dev/null
+++ b/src/Pill/stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text, select} from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+import Pill from './index';
+import Status from './Status';
+
+storiesOf('Pill', module).add('All Knobs', () => {
+  let persist = boolean('persist', false);
+  let pillText = text('pill text', 'status: unicorns!');
+  return (
+    <Pill
+      onDismiss={action('onDismiss')}
+      {...(persist && { persist })}
+    >{pillText}</Pill>
+  );
+}).add('Status Pill', () => {
+  let filled = boolean('filled', false);
+  let pillText = text('pill text', 'default');
+  let variant = select('variant', ['grey', 'purple', 'subdued'])
+  return (
+    <Status
+      variant={variant}
+      {...(filled && { filled })}
+    >{pillText}</Status>
+  );
+});
diff --git a/src/Popover/stories.js b/src/Popover/stories.js
index fab43ef..3caf2a6 100644
--- a/src/Popover/stories.js
+++ b/src/Popover/stories.js
@@ -16,7 +16,7 @@ storiesOf('Popover', module)
     let header = text('header', 'Popover Header');
     let footer = text('footer', '');
     let position = select('positions', POSITIONS, 'bottom-right');
-    let scroll = boolean('scroll', false);
+    let scroll = boolean('scroll', undefined);
 
     const smallText = 'This is the body of a demo popover\n';
     const longText = [1, 2, 3, 4, 5].map(() => <p>{getLongText()}</p>);
diff --git a/src/Radio/index.js b/src/Radio/index.js
index 7cd90e1..a37ed98 100644
--- a/src/Radio/index.js
+++ b/src/Radio/index.js
@@ -15,11 +15,11 @@ const Radio = ({ id, label, className, ...rest }) => {
 
 Radio.propTypes = {
   className: PropTypes.string,
-  checked: PropTypes.bool.isRequired,
+  checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
-  label: PropTypes.bool,
+  label: PropTypes.string,
   name: PropTypes.string,
   onChange: PropTypes.func,
 };
diff --git a/src/Search/stories.js b/src/Search/stories.js
index 5859769..052ba06 100644
--- a/src/Search/stories.js
+++ b/src/Search/stories.js
@@ -25,7 +25,7 @@ storiesOf('Search', module)
           {...(required && { required })}
           {...(position && { position })}
           onChange={action('change')}
-          autocomplete="off"
+          autoComplete="off"
         />
       </InputContainer>
     );
@@ -50,7 +50,7 @@ storiesOf('Search', module)
           }}
           onFocus={(e) => action('onFocus')}
           onBlur={(e) => action('onBlur')}
-          autocomplete="off"
+          autoComplete="off"
           {...(disabled && { disabled })}
           {...(label && { label })}
           {...(optional && { optional })}
diff --git a/src/Select/index.js b/src/Select/index.js
index fed1440..ef59b46 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -37,7 +37,7 @@ const Select = ({
 Select.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-  disabled: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
   onChange: PropTypes.func.isRequired,
diff --git a/src/Select/stories.js b/src/Select/stories.js
index 92980cf..7d8d983 100644
--- a/src/Select/stories.js
+++ b/src/Select/stories.js
@@ -27,7 +27,7 @@ storiesOf('Select', module)
 const Demo = (props) => {
   return (
     <InputContainer>
-      <Select label="Select" onChange={action(`selected`)} {...props}>
+      <Select id="my-select" label="Select" onChange={action(`selected`)} {...props}>
         <Options />
       </Select>
     </InputContainer>
diff --git a/src/Switch/index.js b/src/Switch/index.js
new file mode 100644
index 0000000..c9ba878
--- /dev/null
+++ b/src/Switch/index.js
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const Switch = ({ id, className, onLabel, offLabel,invalid,  ...rest }) => {
+  return (
+    <hx-switch-control class={classnames('switch', className)}>
+      <input type="checkbox" id={id} {...rest} invalid={invalid?.toString()} />
+      <label htmlFor={id}>
+        <hx-switch onlabel={onLabel} offlabel={offLabel} aria-labelledby={id} />
+      </label>
+    </hx-switch-control>
+  );
+};
+
+Switch.propTypes = {
+  id: PropTypes.string.isRequired,
+  onLabel: PropTypes.string.isRequired,
+  offLabel: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  invalid: PropTypes.bool,
+  label: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+Switch.defaultProps = {
+  onLabel: "on",
+  offLabel: "off"
+};
+
+export default Switch;
diff --git a/src/Switch/stories.js b/src/Switch/stories.js
new file mode 100644
index 0000000..d6b5013
--- /dev/null
+++ b/src/Switch/stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+import { InputContainer } from '../storyUtils';
+import Switch from './index';
+
+storiesOf('Switch', module).add('All Knobs', () => {
+  let disabled = boolean('disabled', false);
+  let invalid = boolean('invalid', false);
+
+  return (
+      <InputContainer>
+        <Switch
+          id="textDemo"
+          {...(disabled && { disabled })}
+          {...(invalid && { invalid })}
+          onChange={action('onChange')}
+        />
+      </InputContainer>
+  );
+});
diff --git a/src/Text/index.js b/src/Text/index.js
index 6a19332..f92dd9f 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -30,7 +30,7 @@ Text.propTypes = {
   optional: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
-  label: PropTypes.bool,
+  label: PropTypes.string,
   name: PropTypes.string,
   prefix: PropTypes.node,
   suffix: PropTypes.node,
diff --git a/src/index.mjs b/src/index.mjs
index cfaeea6..632363d 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -6,6 +6,8 @@ import ChoiceTile from './ChoiceTile';
 import Drawer from './Drawer';
 import Icon from './Icon';
 import Modal from './Modal';
+import Pill from './Pill';
+import Status from './Pill/Status';
 import Popover from './Popover';
 import Tooltip from './Tooltip';
 import Radio from './Radio';
@@ -23,11 +25,13 @@ export default {
   Drawer,
   Icon,
   Modal,
+  Pill,
   Popover,
   Tooltip,
   Radio,
   RadioSet,
   Search,
+  Status,
   SearchAssist,
   Select,
 };
diff --git a/yarn.lock b/yarn.lock
index 988c2bc..0679995 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1728,6 +1728,11 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@webcomponents/webcomponentsjs@^2.4.3":
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.4.4.tgz#14b7e78da47f8f0071ff96c35335b871534179bc"
+  integrity sha512-UWXZYbaDLLfhm+xONXTiDciyhOSwKRrZieGQHFMSMGSxY4mbjZ5uYzOKgnuX0luYFvjJw32G3r0sCwQZPJIR4Q==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -4159,9 +4164,10 @@ he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
 
-helix-ui@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/helix-ui/-/helix-ui-0.19.0.tgz#c2c3455081bf620259c39ee87f28d484604a013a"
+helix-ui@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/helix-ui/-/helix-ui-0.24.0.tgz#db5e0c2e4f446192f9277ace0e0e2ded49de7fcd"
+  integrity sha512-vP2t5K9Gj3fdyZvmLobT3FlWU+EDr9J6UhwA6HGQlNmrdA42OeQCzg2I4W2l3a5vtNHQfVvjt4vsURFZ7QO/KA==
 
 highlight.js@~9.13.0:
   version "9.13.1"

From 380e839c21f4fa599b14a9e515c36b47c06866d7 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 14 Aug 2020 15:46:31 -0400
Subject: [PATCH 07/10] make sure all imports are included

---
 src/index.mjs | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/index.mjs b/src/index.mjs
index 632363d..74a7325 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -3,35 +3,44 @@ import Alert from './Alert';
 import Button from './Button';
 import Checkbox from './Checkbox';
 import ChoiceTile from './ChoiceTile';
+import Disclosure from './Disclosure';
+import Div from './Div';
 import Drawer from './Drawer';
 import Icon from './Icon';
 import Modal from './Modal';
 import Pill from './Pill';
 import Status from './Pill/Status';
 import Popover from './Popover';
-import Tooltip from './Tooltip';
 import Radio from './Radio';
 import RadioSet from './Radio/RadioSet';
 import Search from './Search';
 import SearchAssist from './Search/SearchAssist';
 import Select from './Select';
-
+import Switch from './Switch';
+import Text from './Text';
+import TextArea from './TextArea';
+import Tooltip from './Tooltip';
 
 export default {
   Alert,
   Button,
   Checkbox,
   ChoiceTile,
+  Disclosure,
+  Div,
   Drawer,
   Icon,
   Modal,
   Pill,
   Popover,
-  Tooltip,
   Radio,
   RadioSet,
   Search,
   Status,
   SearchAssist,
   Select,
+  Switch,
+  Text,
+  TextArea,
+  Tooltip
 };

From 5b43054b4b7d92e9f34a4b9316b2ce8a4a6de3cf Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 14 Aug 2020 15:46:51 -0400
Subject: [PATCH 08/10] Make it pretty

---
 src/Drawer/index.js   |  8 +++++++-
 src/Pill/Status.js    | 10 +++++-----
 src/Pill/index.js     |  2 +-
 src/Pill/stories.js   | 42 +++++++++++++++++++++---------------------
 src/Switch/index.js   |  6 +++---
 src/Switch/stories.js | 16 ++++++++--------
 6 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/Drawer/index.js b/src/Drawer/index.js
index 29c4b52..70bd582 100644
--- a/src/Drawer/index.js
+++ b/src/Drawer/index.js
@@ -9,7 +9,13 @@ import { wcBool } from '../utils';
 const Drawer = ({ children, className, id, onClose, onOpen, open, size, ...rest }) => {
   const hxRef = useEventListener({ onOpen, onClose });
   return (
-    <hx-drawer class={classnames(className, SIZES[size])} id={id} open={wcBool(open)} ref={hxRef} {...rest}>
+    <hx-drawer
+      class={classnames(className, SIZES[size])}
+      id={id}
+      open={wcBool(open)}
+      ref={hxRef}
+      {...rest}
+    >
       {children}
     </hx-drawer>
   );
diff --git a/src/Pill/Status.js b/src/Pill/Status.js
index a56b7b2..b01a271 100644
--- a/src/Pill/Status.js
+++ b/src/Pill/Status.js
@@ -3,14 +3,14 @@ import React from 'react';
 import classnames from 'classnames';
 
 const PILL_VARIANTS = {
-  'grey' : 'hxEmphasisGray',
-  'purple' : 'hxEmphasisPurple',
-  'subdued' : 'hxSubdued'
+  grey: 'hxEmphasisGray',
+  purple: 'hxEmphasisPurple',
+  subdued: 'hxSubdued',
 };
 
 const Status = ({ className, children, variant, filled, ...rest }) => {
   return (
-    <hx-status class={classnames(className, PILL_VARIANTS[variant], {'hxFill': filled})} {...rest}>
+    <hx-status class={classnames(className, PILL_VARIANTS[variant], { hxFill: filled })} {...rest}>
       {children}
     </hx-status>
   );
@@ -18,7 +18,7 @@ const Status = ({ className, children, variant, filled, ...rest }) => {
 
 Status.propTypes = {
   variant: PropTypes.oneOf(Object.keys(PILL_VARIANTS)),
-  filled: PropTypes.bool
+  filled: PropTypes.bool,
 };
 
 export default Status;
diff --git a/src/Pill/index.js b/src/Pill/index.js
index abd9944..cae8a23 100644
--- a/src/Pill/index.js
+++ b/src/Pill/index.js
@@ -6,7 +6,7 @@ import useEventListener from '../hooks/useEventListener';
 const Pill = ({ className, children, onDismiss, ...rest }) => {
   const hxRef = useEventListener({ onDismiss });
   return (
-    <hx-pill class={className} {...rest} ref={hxRef} >
+    <hx-pill class={className} {...rest} ref={hxRef}>
       {children}
     </hx-pill>
   );
diff --git a/src/Pill/stories.js b/src/Pill/stories.js
index cd70ef2..34909d2 100644
--- a/src/Pill/stories.js
+++ b/src/Pill/stories.js
@@ -1,27 +1,27 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean, text, select} from '@storybook/addon-knobs/react';
+import { boolean, text, select } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
 import Pill from './index';
 import Status from './Status';
 
-storiesOf('Pill', module).add('All Knobs', () => {
-  let persist = boolean('persist', false);
-  let pillText = text('pill text', 'status: unicorns!');
-  return (
-    <Pill
-      onDismiss={action('onDismiss')}
-      {...(persist && { persist })}
-    >{pillText}</Pill>
-  );
-}).add('Status Pill', () => {
-  let filled = boolean('filled', false);
-  let pillText = text('pill text', 'default');
-  let variant = select('variant', ['grey', 'purple', 'subdued'])
-  return (
-    <Status
-      variant={variant}
-      {...(filled && { filled })}
-    >{pillText}</Status>
-  );
-});
+storiesOf('Pill', module)
+  .add('All Knobs', () => {
+    let persist = boolean('persist', false);
+    let pillText = text('pill text', 'status: unicorns!');
+    return (
+      <Pill onDismiss={action('onDismiss')} {...(persist && { persist })}>
+        {pillText}
+      </Pill>
+    );
+  })
+  .add('Status Pill', () => {
+    let filled = boolean('filled', false);
+    let pillText = text('pill text', 'default');
+    let variant = select('variant', ['grey', 'purple', 'subdued']);
+    return (
+      <Status variant={variant} {...(filled && { filled })}>
+        {pillText}
+      </Status>
+    );
+  });
diff --git a/src/Switch/index.js b/src/Switch/index.js
index c9ba878..a233bef 100644
--- a/src/Switch/index.js
+++ b/src/Switch/index.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const Switch = ({ id, className, onLabel, offLabel,invalid,  ...rest }) => {
+const Switch = ({ id, className, onLabel, offLabel, invalid, ...rest }) => {
   return (
     <hx-switch-control class={classnames('switch', className)}>
       <input type="checkbox" id={id} {...rest} invalid={invalid?.toString()} />
@@ -26,8 +26,8 @@ Switch.propTypes = {
 };
 
 Switch.defaultProps = {
-  onLabel: "on",
-  offLabel: "off"
+  onLabel: 'on',
+  offLabel: 'off',
 };
 
 export default Switch;
diff --git a/src/Switch/stories.js b/src/Switch/stories.js
index d6b5013..89818f0 100644
--- a/src/Switch/stories.js
+++ b/src/Switch/stories.js
@@ -10,13 +10,13 @@ storiesOf('Switch', module).add('All Knobs', () => {
   let invalid = boolean('invalid', false);
 
   return (
-      <InputContainer>
-        <Switch
-          id="textDemo"
-          {...(disabled && { disabled })}
-          {...(invalid && { invalid })}
-          onChange={action('onChange')}
-        />
-      </InputContainer>
+    <InputContainer>
+      <Switch
+        id="textDemo"
+        {...(disabled && { disabled })}
+        {...(invalid && { invalid })}
+        onChange={action('onChange')}
+      />
+    </InputContainer>
   );
 });

From 94948f5f6a7c4a7cf474a8fc4b3ec2d4068f5ece Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Tue, 18 Aug 2020 20:34:46 -0400
Subject: [PATCH 09/10] Core Review Changes

- Switch updates
- Proptypes updates
---
 src/Checkbox/index.js      | 2 +-
 src/Pill/stories.js        | 2 +-
 src/Radio/index.js         | 2 +-
 src/Search/SearchAssist.js | 1 -
 src/Switch/index.js        | 8 ++++----
 src/Switch/stories.js      | 7 +++++--
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index e999992..2a0d643 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -19,7 +19,7 @@ const Checkbox = ({ id, label, indeterminate, className, ...rest }) => {
 };
 
 Checkbox.propTypes = {
-  className: PropTypes.string.isRequired,
+  className: PropTypes.string,
   checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
diff --git a/src/Pill/stories.js b/src/Pill/stories.js
index 34909d2..2d3351f 100644
--- a/src/Pill/stories.js
+++ b/src/Pill/stories.js
@@ -18,7 +18,7 @@ storiesOf('Pill', module)
   .add('Status Pill', () => {
     let filled = boolean('filled', false);
     let pillText = text('pill text', 'default');
-    let variant = select('variant', ['grey', 'purple', 'subdued']);
+    let variant = select('variant', ['default' , 'grey', 'purple', 'subdued']);
     return (
       <Status variant={variant} {...(filled && { filled })}>
         {pillText}
diff --git a/src/Radio/index.js b/src/Radio/index.js
index a37ed98..164ec0a 100644
--- a/src/Radio/index.js
+++ b/src/Radio/index.js
@@ -14,12 +14,12 @@ const Radio = ({ id, label, className, ...rest }) => {
 };
 
 Radio.propTypes = {
+  label: PropTypes.string.isRequired,
   className: PropTypes.string,
   checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
-  label: PropTypes.string,
   name: PropTypes.string,
   onChange: PropTypes.func,
 };
diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js
index 95c56da..ce40643 100644
--- a/src/Search/SearchAssist.js
+++ b/src/Search/SearchAssist.js
@@ -48,7 +48,6 @@ SearchAssist.propTypes = {
   clearLabel: PropTypes.string,
   label: PropTypes.string,
   id: PropTypes.string.isRequired,
-  containerId: PropTypes.string,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
diff --git a/src/Switch/index.js b/src/Switch/index.js
index a233bef..8c7c895 100644
--- a/src/Switch/index.js
+++ b/src/Switch/index.js
@@ -15,8 +15,8 @@ const Switch = ({ id, className, onLabel, offLabel, invalid, ...rest }) => {
 
 Switch.propTypes = {
   id: PropTypes.string.isRequired,
-  onLabel: PropTypes.string.isRequired,
-  offLabel: PropTypes.string.isRequired,
+  onLabel: PropTypes.string,
+  offLabel: PropTypes.string,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   invalid: PropTypes.bool,
@@ -26,8 +26,8 @@ Switch.propTypes = {
 };
 
 Switch.defaultProps = {
-  onLabel: 'on',
-  offLabel: 'off',
+  onLabel: '',
+  offLabel: '',
 };
 
 export default Switch;
diff --git a/src/Switch/stories.js b/src/Switch/stories.js
index 89818f0..bcf6974 100644
--- a/src/Switch/stories.js
+++ b/src/Switch/stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs/react';
+import { boolean, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
 import { InputContainer } from '../storyUtils';
 import Switch from './index';
@@ -8,13 +8,16 @@ import Switch from './index';
 storiesOf('Switch', module).add('All Knobs', () => {
   let disabled = boolean('disabled', false);
   let invalid = boolean('invalid', false);
-
+  let onLabel = text('onLabel', '');
+  let offLabel = text('offLabel', '');
   return (
     <InputContainer>
       <Switch
         id="textDemo"
         {...(disabled && { disabled })}
         {...(invalid && { invalid })}
+        {...(onLabel && { onLabel })}
+        {...(offLabel && { offLabel })}
         onChange={action('onChange')}
       />
     </InputContainer>

From 4e3639a44008eae3b36934b454e99dff9f84bcfa Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Tue, 18 Aug 2020 20:35:28 -0400
Subject: [PATCH 10/10] make it pretty

---
 src/Pill/stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pill/stories.js b/src/Pill/stories.js
index 2d3351f..4c8d14a 100644
--- a/src/Pill/stories.js
+++ b/src/Pill/stories.js
@@ -18,7 +18,7 @@ storiesOf('Pill', module)
   .add('Status Pill', () => {
     let filled = boolean('filled', false);
     let pillText = text('pill text', 'default');
-    let variant = select('variant', ['default' , 'grey', 'purple', 'subdued']);
+    let variant = select('variant', ['default', 'grey', 'purple', 'subdued']);
     return (
       <Status variant={variant} {...(filled && { filled })}>
         {pillText}