Drawer

src/Drawer/index.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { SIZES } from '../constants';
+import useEventListener from '../hooks/useEventListener';
+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}>
+      {children}
+    </hx-drawer>
+  );
+};
+
+Drawer.propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  open: PropTypes.bool,
+  size: PropTypes.oneOf(SIZES),
+};
+
+Drawer.defaultProps = {
+  open: null,
+};
+
+export default Drawer;

src/Drawer/stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, select, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+
+import Drawer from './index';
+import Button from '../Button';
+import HxDiv from '../HxDiv';
+import { getLongText } from '../storyUtils';
+
+const SIZES = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+};
+
+storiesOf('Drawer', module).add('All Knobs', () => {
+  let header = text('header', '');
+  let body = text('body', '');
+  let footer = text('footer', '');
+  let open = boolean('open', true);
+  let size = select('size', SIZES, 'medium');
+
+  const defaultBody = <p>{getLongText()}</p>;
+  const defaultHeader = 'Drawer Header';
+  const defaultFooter = (
+    <div class="hxButtonSet">
+      <Button variant="primary">Confirm</Button>
+      <Button variant="tertiary">Cancel</Button>
+    </div>
+  );
+
+  return (
+    <Drawer
+      {...(open && { open })}
+      {...(size && { size })}
+      onOpen={action('onOpen')}
+      onClose={action('onClose')}
+    >
+      {<header>{header || defaultHeader}</header>}
+      {<HxDiv className="hxMd">{body || defaultBody}</HxDiv>}
+      {<footer>{footer || defaultFooter}</footer>}
+    </Drawer>
+  );
+});

src/Modal/index.js

@@ -8,12 +8,7 @@ import { wcBool } from '../utils';
 const Modal = ({ onOpen, onClose, className, open, size, children, ...rest }) => {
   const hxRef = useEventListener({ onOpen, onClose });
   return (
-    <hx-modal
-      class={classNames(className, SIZES[size])}
-      ref={hxRef}
-      open={wcBool(open)}
-      {...rest}
-    >
+    <hx-modal class={classNames(className, SIZES[size])} ref={hxRef} open={wcBool(open)} {...rest}>
       {children}
     </hx-modal>
   );

src/Modal/stories.js

@@ -5,6 +5,7 @@ import { boolean, select, text } from '@storybook/addon-knobs/react';
 import Modal from './index';
 import HxDiv from '../HxDiv';
 import Button from '../Button';
+import { getLongText } from '../storyUtils';
 
 const SIZES = {
   small: 'small',
@@ -21,22 +22,7 @@ storiesOf('Modal', module).add('All Knobs', () => {
 
   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';
-  const lorumIpsum = (
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis
-      ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula
-      ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi
-      sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque
-      adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum
-      non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam
-      ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis
-      feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar
-      elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet
-      nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
-    </p>
-  );
-  const longText = [1, 2, 3, 4, 5].map(() => lorumIpsum);
+  const longText = [1, 2, 3, 4, 5].map(() => <p>{getLongText()}</p>);
   const defaultFooter = (
     <>
       <Button variant="primary">Confirm</Button>

src/index.mjs

@@ -1,6 +1,7 @@
 /* Export helix-react definition */
 import Button from './Button';
 import Alert from './Alert';
+import Drawer from './Drawer';
 import Icon from './Icon';
 import Tooltip from './Tooltip';
 import Modal from './Modal';
@@ -9,6 +10,7 @@ import Select from './Select';
 export default {
   Button,
   Alert,
+  Drawer,
   Icon,
   Modal,
   Select,

src/storyUtils.js

@@ -0,0 +1,13 @@
+export const getLongText = () => `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+  labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis
+  ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula
+  ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi
+  sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque
+  adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum
+  non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam
+  ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis
+  feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar
+  elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet
+  nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.
+ `;

src/utils.js

@@ -4,4 +4,4 @@
  * @param {boolean} bool
  * @return {*}
  */
-export const wcBool = (bool) => bool ? true : null;
+export const wcBool = (bool) => (bool ? true : null);