Merge pull request #127 from HelixDesignSystem/helix-upgrade

feat: migrate HelixUI to v2.0

Author: 100stacks

package.json

@@ -54,7 +54,7 @@
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
     "babel-loader": "^8.1.0",
-    "helix-ui": "^0.24.0",
+    "helix-ui": "^2.0.0",
     "husky": "^4.2.5",
     "microbundle": "^0.12.3",
     "prettier": "^2.0.4",
@@ -68,7 +68,7 @@
     "use-onclickoutside": "^0.3"
   },
   "peerDependencies": {
-    "helix-ui": "^0.24.0",
+    "helix-ui": "^2.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.6.3"
   },

src/Alert/index.js

@@ -1,18 +1,23 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import useEventListener from '../hooks/useEventListener';
+import useCombinedRefs from '../hooks/useCombinedRefs';
 
-const Alert = ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }) => {
-  const hxRef = useEventListener({ onDismiss, onSubmit });
-  return (
-    <div>
-      {/* Wrappping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
-      <hx-alert class={className} ref={hxRef} {...rest}>
-        {children}
-      </hx-alert>
-    </div>
-  );
-};
+const Alert = React.forwardRef(
+  ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }, ref) => {
+    const hxRef = useEventListener({ onDismiss, onSubmit }, ref);
+    return (
+      <div>
+        {/* Wrappping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
+        <hx-alert class={className} ref={hxRef} {...rest}>
+          {children}
+        </hx-alert>
+      </div>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';
 
 Alert.propTypes = {
   className: PropTypes.string,

src/Breadcrumb/index.js

@@ -8,7 +8,7 @@ const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...re
       ? children.map((child, index) => [
           child,
           addDelimiter && index + 1 < children.length && (
-            <hx-icon class="delimiter" type={icon}></hx-icon>
+            <hx-icon key={index} class="delimiter" type={icon} />
           ),
         ])
       : children;
@@ -22,7 +22,7 @@ const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...re
 
 Breadcrumb.propTypes = {
   icon: PropTypes.string,
-  children: PropTypes.func,
+  children: PropTypes.node,
 };
 
 export default Breadcrumb;

src/Breadcrumb/stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { addParameters, storiesOf } from '@storybook/react';
+import { text } from '@storybook/addon-knobs/react';
 import Breadcrumb from './index';
 
 addParameters({
@@ -8,18 +9,22 @@ addParameters({
 
 storiesOf('Breadcrumb', module)
   .add('Multiple Breadcrumbs', () => {
+    let item1 = text('item1', 'Home');
+    let item2 = text('item2', 'Library');
+    let item3 = text('item3', 'Current');
     return (
       <Breadcrumb>
-        <a href="#">Home</a>
-        <a href="#">Library</a>
-        <a href="#">Current</a>
+        <a href="#">{item1}</a>
+        <a href="#">{item2}</a>
+        <a href="#">{item3}</a>
       </Breadcrumb>
     );
   })
   .add('Single Breadcrumb', () => {
+    let item1 = text('item1', 'Home');
     return (
       <Breadcrumb>
-        <a href="#">Home</a>
+        <a href="#">{item1}</a>
       </Breadcrumb>
     );
   });

src/Busy/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 
 // Storybook story lives in /Progress folder
 const Busy = ({ className, children, ...rest }) => {
-  return <hx-busy class={className} {...rest}></hx-busy>;
+  return <hx-busy class={className} {...rest} />;
 };
 
 Busy.propTypes = {

src/Button/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
+import Busy from '../Busy';
 
 function cssFor(modifier) {
   return {
@@ -34,7 +35,7 @@ class Button extends React.Component {
       <button className={classNames(this.props)} type={type || 'button'} {...props}>
         {headIcon && <Icon type={headIcon} />}
         {children && <span>{children}</span>}
-        {busy ? <hx-busy></hx-busy> : tailIcon && <Icon type={tailIcon} />}
+        {busy ? <Busy /> : tailIcon && <Icon type={tailIcon} />}
       </button>
     );
   }

src/Button/stories.js

@@ -10,24 +10,25 @@ addParameters({
 });
 
 const SIZES = {
-  small: 'Small',
-  '': 'Medium',
-  large: 'Large',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
 };
+
 const VARIANTS = {
-  primary: 'Primary',
-  '': 'Secondary',
-  tertiary: 'Tertiary',
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
 };
 
 storiesOf('Button', module)
   .addDecorator(centered)
   .add('Sizes', () => {
-    const size = select('size', SIZES, '');
+    const size = select('size', SIZES, 'medium');
     return <Button {...(size && { size })}>{SIZES[size]} Button</Button>;
   })
   .add('Variants', () => {
-    const variant = select('variant', VARIANTS, '');
+    const variant = select('variant', VARIANTS, 'primary');
     return <Button {...(variant && { variant })}>{VARIANTS[variant]} Button</Button>;
   })
   .add('Icon Only', () => {

src/Checkbox/index.js

@@ -1,22 +1,27 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
+import useCombinedRefs from '../hooks/useCombinedRefs';
 
-const Checkbox = ({ id, label, indeterminate, className, style, ...rest }) => {
-  const inputRef = useRef();
-  useEffect(() => {
-    inputRef.current.indeterminate = indeterminate;
-  }, [indeterminate]);
+const Checkbox = React.forwardRef(
+  ({ id, label, indeterminate, className, style, ...rest }, ref) => {
+    const hxRef = useCombinedRefs(ref, useRef());
+    useEffect(() => {
+      hxRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
 
-  return (
-    <hx-checkbox-control class={className}>
-      <input ref={inputRef} {...rest} id={id} type="checkbox" />
-      <label htmlFor={id}>
-        <hx-checkbox></hx-checkbox>
-        {label}
-      </label>
-    </hx-checkbox-control>
-  );
-};
+    return (
+      <hx-checkbox-control class={className}>
+        <input ref={hxRef} {...rest} id={id} type="checkbox" />
+        <label htmlFor={id}>
+          <hx-checkbox />
+          {label}
+        </label>
+      </hx-checkbox-control>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';
 
 Checkbox.propTypes = {
   className: PropTypes.string,

src/ChoiceTile/index.js

@@ -18,19 +18,24 @@ const ChoiceTile = ({
   subdued,
   title,
   style,
+  radioInput,
   ...rest
 }) => {
   return (
     <label className={classNames({ hxChoice: true }, className)} style={style}>
-      <input
-        checked={wcBool(checked)}
-        disabled={disabled}
-        invalid={invalid?.toString()}
-        name={name}
-        onChange={onChange}
-        type="radio"
-        {...rest}
-      />
+      {radioInput ? (
+        radioInput
+      ) : (
+        <input
+          checked={wcBool(checked)}
+          disabled={disabled}
+          invalid={invalid?.toString()}
+          name={name}
+          onChange={onChange}
+          type="radio"
+          {...rest}
+        />
+      )}
       <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })}>
         <hx-icon type="checkmark"></hx-icon>
         {icon && (
@@ -53,15 +58,17 @@ ChoiceTile.propTypes = {
   disabled: PropTypes.bool,
   icon: PropTypes.string,
   invalid: PropTypes.bool,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   onChange: PropTypes.func,
   size: PropTypes.oneOf(Object.keys(SIZES)),
   subdued: PropTypes.bool,
   title: PropTypes.string.isRequired,
+  radioInput: PropTypes.node,
 };
 
 ChoiceTile.defaultProps = {
   checked: false,
+  size: 'medium',
 };
 
 export default ChoiceTile;

src/ChoiceTile/stories.js

@@ -17,7 +17,6 @@ const SIZES = {
 };
 
 storiesOf('Choice Tile', module).add('All Knobs', () => {
-  let description = text('description', '');
   let title = text('title', '');
   let checked = boolean('checked', false);
   let disabled = boolean('disabled', false);
@@ -52,16 +51,18 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
         style={{ width: 200, float: 'left' }}
         title={title || defaultTitle}
       >
-        {<p>{description || defaultDescription}</p>}
+        {<p>{'standard choice tile' || defaultDescription}</p>}
       </ChoiceTile>
 
       <ChoiceTile
         icon="bell"
-        name="choiceTileDemo"
+        radioInput={
+          <input type="radio" name="choiceTileDemo" onChange={callback(action('onChange'))} />
+        }
         style={{ marginLeft: 25, width: 200, float: 'left' }}
         title="Other Choice"
       >
-        {<p>{defaultDescription}</p>}
+        {<p>custom radio (see JSX)</p>}
       </ChoiceTile>
     </React.Fragment>
   );