From a212b6565bc66f56ee58af8d42af65d301985598 Mon Sep 17 00:00:00 2001 From: Mike Mangialardi Date: Fri, 15 May 2020 16:02:51 -0400 Subject: [PATCH 1/5] Implement drawer --- src/Drawer/index.js | 25 +++++++++++++++++++++++++ src/index.mjs | 2 ++ 2 files changed, 27 insertions(+) create mode 100644 src/Drawer/index.js diff --git a/src/Drawer/index.js b/src/Drawer/index.js new file mode 100644 index 0000000..c99ec57 --- /dev/null +++ b/src/Drawer/index.js @@ -0,0 +1,25 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +import { wcBool } from '../utils'; + +const Drawer = ({ children, className, id, label, open, ...rest }) => { + return ( + + {children} + + ); +}; + +Drawer.propTypes = { + className: PropTypes.string, + id: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + open: PropTypes.bool, +}; + +Drawer.defaultProps = { + open: null, +}; + +export default Drawer; diff --git a/src/index.mjs b/src/index.mjs index 9043e83..9f6a358 100644 --- a/src/index.mjs +++ b/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, From 3290a31876b447cdc750ab08f2b12482a9c95749 Mon Sep 17 00:00:00 2001 From: Mike Mangialardi Date: Fri, 15 May 2020 16:03:12 -0400 Subject: [PATCH 2/5] Prettier --- src/Modal/index.js | 7 +------ src/utils.js | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/Modal/index.js b/src/Modal/index.js index d8c6b32..9d2e8c5 100644 --- a/src/Modal/index.js +++ b/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 ( - + {children} ); diff --git a/src/utils.js b/src/utils.js index d04106a..826b2ed 100644 --- a/src/utils.js +++ b/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); From 1158d9b34d2e9b12580e35db01be43e49bd9081e Mon Sep 17 00:00:00 2001 From: Mike Mangialardi Date: Fri, 15 May 2020 16:03:22 -0400 Subject: [PATCH 3/5] Write stories --- src/Drawer/stories.js | 46 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/Drawer/stories.js diff --git a/src/Drawer/stories.js b/src/Drawer/stories.js new file mode 100644 index 0000000..177b7b4 --- /dev/null +++ b/src/Drawer/stories.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { boolean, text } from '@storybook/addon-knobs/react'; + +import Drawer from './index'; +import Button from '../Button'; +import HxDiv from '../HxDiv'; + +storiesOf('Drawer', module).add('All Knobs', () => { + let header = text('header', ''); + let body = text('body', ''); + let footer = text('footer', ''); + let open = boolean('open', true); + + const loremIpsum = ( +

+ 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. +

+ ); + const defaultBody = loremIpsum; + const defaultHeader = 'Drawer Header'; + const defaultFooter = ( + <> + + + + ); + + return ( + + {
{header || defaultHeader}
} + {{body || defaultBody}} + {
{footer || defaultFooter}
} + + ); +}); From 1f7aea2e90db39a6ca580478499398f3b75d6395 Mon Sep 17 00:00:00 2001 From: Mike Mangialardi Date: Fri, 15 May 2020 17:06:44 -0400 Subject: [PATCH 4/5] Address feedback --- src/Drawer/index.js | 8 +++++--- src/Drawer/stories.js | 11 +++++++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/Drawer/index.js b/src/Drawer/index.js index c99ec57..5a9c71b 100644 --- a/src/Drawer/index.js +++ b/src/Drawer/index.js @@ -1,11 +1,13 @@ +import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; +import { SIZES } from '../constants'; import { wcBool } from '../utils'; -const Drawer = ({ children, className, id, label, open, ...rest }) => { +const Drawer = ({ children, className, id, open, size, ...rest }) => { return ( - + {children} ); @@ -14,8 +16,8 @@ const Drawer = ({ children, className, id, label, open, ...rest }) => { Drawer.propTypes = { className: PropTypes.string, id: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, open: PropTypes.bool, + size: PropTypes.oneOf(SIZES), }; Drawer.defaultProps = { diff --git a/src/Drawer/stories.js b/src/Drawer/stories.js index 177b7b4..127a7fb 100644 --- a/src/Drawer/stories.js +++ b/src/Drawer/stories.js @@ -1,16 +1,23 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; -import { boolean, text } from '@storybook/addon-knobs/react'; +import { boolean, select, text } from '@storybook/addon-knobs/react'; import Drawer from './index'; import Button from '../Button'; import HxDiv from '../HxDiv'; +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 loremIpsum = (

@@ -37,7 +44,7 @@ storiesOf('Drawer', module).add('All Knobs', () => { ); return ( - + {

{header || defaultHeader}
} {{body || defaultBody}} {
{footer || defaultFooter}
} From 0e06577cc0a75cf3b87a57e9859805bff12b310f Mon Sep 17 00:00:00 2001 From: Mike Mangialardi Date: Sat, 16 May 2020 16:24:23 -0400 Subject: [PATCH 5/5] More review feedback --- src/Drawer/index.js | 9 ++++++--- src/Drawer/stories.js | 34 +++++++++++++--------------------- src/Modal/stories.js | 18 ++---------------- src/storyUtils.js | 13 +++++++++++++ 4 files changed, 34 insertions(+), 40 deletions(-) create mode 100644 src/storyUtils.js diff --git a/src/Drawer/index.js b/src/Drawer/index.js index 5a9c71b..f8eef93 100644 --- a/src/Drawer/index.js +++ b/src/Drawer/index.js @@ -1,13 +1,14 @@ -import classNames from 'classnames'; 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, open, size, ...rest }) => { +const Drawer = ({ children, className, id, onClose, onOpen, open, size, ...rest }) => { + const hxRef = useEventListener({ onOpen, onClose }); return ( - + {children} ); @@ -16,6 +17,8 @@ const Drawer = ({ children, className, id, open, size, ...rest }) => { Drawer.propTypes = { className: PropTypes.string, id: PropTypes.string.isRequired, + onClose: PropTypes.func, + onOpen: PropTypes.func, open: PropTypes.bool, size: PropTypes.oneOf(SIZES), }; diff --git a/src/Drawer/stories.js b/src/Drawer/stories.js index 127a7fb..9af4bc5 100644 --- a/src/Drawer/stories.js +++ b/src/Drawer/stories.js @@ -1,10 +1,12 @@ import React from 'react'; -import { storiesOf } from '@storybook/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', @@ -19,34 +21,24 @@ storiesOf('Drawer', module).add('All Knobs', () => { let open = boolean('open', true); let size = select('size', SIZES, 'medium'); - const loremIpsum = ( -

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

- ); - const defaultBody = loremIpsum; + const defaultBody =

{getLongText()}

; const defaultHeader = 'Drawer Header'; const defaultFooter = ( - <> +
- +
); return ( - + {
{header || defaultHeader}
} - {{body || defaultBody}} + {{body || defaultBody}} {
{footer || defaultFooter}
} ); diff --git a/src/Modal/stories.js b/src/Modal/stories.js index 8e57910..b460904 100644 --- a/src/Modal/stories.js +++ b/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 = ( -

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

- ); - const longText = [1, 2, 3, 4, 5].map(() => lorumIpsum); + const longText = [1, 2, 3, 4, 5].map(() =>

{getLongText()}

); const defaultFooter = ( <> diff --git a/src/storyUtils.js b/src/storyUtils.js new file mode 100644 index 0000000..c6f0e5d --- /dev/null +++ b/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. + `;