Loader (#117)

Add Loader

Author: nicko-winner

src/Busy/index.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Storybook story lives in /Progress folder
+const Busy = ({ className, children, ...rest }) => {
+  return <hx-busy class={className} {...rest}></hx-busy>;
+};
+
+Busy.propTypes = {
+  paused: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default Busy;

src/Progress/index.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import useEventListener from '../hooks/useEventListener';
+
+const Progress = ({ className, children, value, ...rest }) => {
+  return <hx-progress class={className} {...rest} value={value.toString()}></hx-progress>;
+};
+
+Progress.propTypes = {
+  value: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export default Progress;

src/Progress/stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { boolean, number } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+import Busy from '../Busy';
+import Progress from './index';
+
+storiesOf('Loader', module)
+  .add('Busy', () => {
+    let paused = boolean('paused', false);
+    return <Busy {...(paused && { paused })} />;
+  })
+  .add('Progress', () => {
+    const options = {
+      range: true,
+      min: 0,
+      max: 100,
+      step: 1,
+    };
+    let value = number('value', 40, options);
+    return <Progress value={value.toString()} />;
+  });

src/index.mjs

@@ -1,6 +1,7 @@
 /* Export helix-react definition */
 import Alert from './Alert';
 import Button from './Button';
+import Busy from './Busy';
 import Checkbox from './Checkbox';
 import ChoiceTile from './ChoiceTile';
 import Disclosure from './Disclosure';
@@ -9,6 +10,7 @@ import Drawer from './Drawer';
 import Icon from './Icon';
 import Modal from './Modal';
 import Pill from './Pill';
+import Progress from './Progress';
 import Status from './Pill/Status';
 import Popover from './Popover';
 import Radio from './Radio';
@@ -24,6 +26,7 @@ import Tooltip from './Tooltip';
 export {
   Alert,
   Button,
+  Busy,
   Checkbox,
   ChoiceTile,
   Disclosure,
@@ -33,6 +36,7 @@ export {
   Modal,
   Pill,
   Popover,
+  Progress,
   Radio,
   RadioSet,
   Search,