Text, Text Area, Switch, Pill

package.json

@@ -53,7 +53,7 @@
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
     "babel-loader": "^8.1.0",
-    "helix-ui": "^0.23.0",
+    "helix-ui": "^0.24.0",
     "husky": "^4.2.5",
     "parcel-bundler": "^1.12.4",
     "prettier": "^2.0.4",

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,12 +19,13 @@ const Checkbox = ({ id, label, indeterminate, ...rest }) => {
 };
 
 Checkbox.propTypes = {
-  checked: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  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,
 };

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,13 @@ 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>
   );

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>}

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';

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;

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;

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', ['default', 'grey', 'purple', 'subdued']);
+    return (
+      <Status variant={variant} {...(filled && { filled })}>
+        {pillText}
+      </Status>
+    );
+  });

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>);

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,11 +14,12 @@ const Radio = ({ id, label, className, ...rest }) => {
 };
 
 Radio.propTypes = {
-  checked: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  checked: PropTypes.bool,
   id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
-  label: PropTypes.bool,
   name: PropTypes.string,
   onChange: PropTypes.func,
 };

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,6 @@ SearchAssist.propTypes = {
   clearLabel: PropTypes.string,
   label: PropTypes.string,
   id: PropTypes.string.isRequired,
-  wrapperId: PropTypes.string,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

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,

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 })}

src/Select/index.js

@@ -2,9 +2,19 @@ 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,
+  className,
+  disabled,
+  id,
+  label,
+  onChange,
+  optional,
+  required,
+  ...rest
+}) => {
   return (
-    <hx-select-control>
+    <hx-select-control class={className}>
       <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
         {children}
       </select>
@@ -26,18 +36,13 @@ const Select = ({ children, disabled, id, label, onChange, optional, required, .
 
 Select.propTypes = {
   children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   optional: PropTypes.bool,
   required: PropTypes.bool,
 };
 
-Select.defaultProps = {
-  disabled: false,
-  optional: false,
-  required: false,
-};
-
 export default Select;

src/Select/stories.js

@@ -5,19 +5,19 @@ 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);
 
     return (
       <Demo
         {...(disabled && { disabled })}
-        {...(label && { label })}
+        label="Select Me"
         {...(optional && { optional })}
         {...(required && { required })}
       />
@@ -26,11 +26,11 @@ storiesOf('Select', module)
 
 const Demo = (props) => {
   return (
-    <div style={{ padding: 25, width: 500 }}>
-      <Select label="Select" onChange={action(`selected`)} {...props}>
+    <InputContainer>
+      <Select id="my-select" label="Select" onChange={action(`selected`)} {...props}>
         <Options />
       </Select>
-    </div>
+    </InputContainer>
   );
 };
 

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,
+  offLabel: PropTypes.string,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  invalid: PropTypes.bool,
+  label: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+Switch.defaultProps = {
+  onLabel: '',
+  offLabel: '',
+};
+
+export default Switch;

src/Switch/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 { InputContainer } from '../storyUtils';
+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>
+  );
+});