From 916ed065dcb8af2adfa4933a916fc3085aa17104 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Fri, 22 May 2020 12:27:51 -0400 Subject: [PATCH 1/6] Rename HxDiv to Div --- src/Drawer/stories.js | 4 ++-- src/Modal/stories.js | 6 ++--- src/Popover/stories.js | 53 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 src/Popover/stories.js diff --git a/src/Drawer/stories.js b/src/Drawer/stories.js index 9af4bc5..09843aa 100644 --- a/src/Drawer/stories.js +++ b/src/Drawer/stories.js @@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react'; import Drawer from './index'; import Button from '../Button'; -import HxDiv from '../HxDiv'; +import Div from '../Div'; import { getLongText } from '../storyUtils'; const SIZES = { @@ -38,7 +38,7 @@ storiesOf('Drawer', module).add('All Knobs', () => { onClose={action('onClose')} > {
{header || defaultHeader}
} - {{body || defaultBody}} + {
{body || defaultBody}
} {} ); diff --git a/src/Modal/stories.js b/src/Modal/stories.js index b460904..eecfa6e 100644 --- a/src/Modal/stories.js +++ b/src/Modal/stories.js @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { boolean, select, text } from '@storybook/addon-knobs/react'; import Modal from './index'; -import HxDiv from '../HxDiv'; +import Div from '../Div'; import Button from '../Button'; import { getLongText } from '../storyUtils'; @@ -43,10 +43,10 @@ storiesOf('Modal', module).add('All Knobs', () => {

{header}

)} - +
{smallText} {scroll ? longText : null} - +
{
{footer || defaultFooter}
} ); diff --git a/src/Popover/stories.js b/src/Popover/stories.js new file mode 100644 index 0000000..eecfa6e --- /dev/null +++ b/src/Popover/stories.js @@ -0,0 +1,53 @@ +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 Modal from './index'; +import Div from '../Div'; +import Button from '../Button'; +import { getLongText } from '../storyUtils'; + +const SIZES = { + small: 'small', + medium: 'medium', + large: 'large', +}; + +storiesOf('Modal', module).add('All Knobs', () => { + let header = text('header in H3', 'Modal Header'); + let footer = text('footer', ''); + let open = boolean('open', true); + let size = select('size', SIZES, 'medium'); + let scroll = boolean('scroll', false); + + 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 longText = [1, 2, 3, 4, 5].map(() =>

{getLongText()}

); + const defaultFooter = ( + <> + + + + ); + + return ( + + {header && ( +
+

{header}

+
+ )} +
+ {smallText} + {scroll ? longText : null} +
+ {
{footer || defaultFooter}
} + + ); +}); From 3eaa289148896398ec2866f7de8112a275985111 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Fri, 22 May 2020 13:29:58 -0400 Subject: [PATCH 2/6] Popover, Disclosure, rename Div --- src/Disclosure/index.js | 22 +++++++++++++ src/{HxDiv => Div}/index.js | 6 ++-- src/Popover/index.js | 33 +++++++++++++++++++ src/Popover/stories.js | 66 +++++++++++++++++++------------------ src/index.mjs | 6 ++-- 5 files changed, 96 insertions(+), 37 deletions(-) create mode 100644 src/Disclosure/index.js rename src/{HxDiv => Div}/index.js (75%) create mode 100644 src/Popover/index.js diff --git a/src/Disclosure/index.js b/src/Disclosure/index.js new file mode 100644 index 0000000..89fc6ee --- /dev/null +++ b/src/Disclosure/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Disclosure = ({ className, ariaControls, ariaExpanded, ...rest }) => { + return ; +}; + +Disclosure.propTypes = { + ariaControls: PropTypes.string, + ariaExpanded: PropTypes.string, + role: PropTypes.string, + tabindex: PropTypes.string, + className: PropTypes.string, + children: PropTypes.node.isRequired, +}; + +export default Disclosure; diff --git a/src/HxDiv/index.js b/src/Div/index.js similarity index 75% rename from src/HxDiv/index.js rename to src/Div/index.js index 28b584f..60715ab 100644 --- a/src/HxDiv/index.js +++ b/src/Div/index.js @@ -1,14 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -const HxDiv = ({ className, ...rest }) => { +const Div = ({ className, ...rest }) => { return ; }; -HxDiv.propTypes = { +Div.propTypes = { className: PropTypes.string, children: PropTypes.node.isRequired, scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']), }; -export default HxDiv; +export default Div; diff --git a/src/Popover/index.js b/src/Popover/index.js new file mode 100644 index 0000000..79e2cb2 --- /dev/null +++ b/src/Popover/index.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import useEventListener from '../hooks/useEventListener'; +import { POSITIONS } from '../constants'; +import { wcBool } from '../utils'; + +const Popover = ({ onOpen, onClose, onReposition, className, open, children, ...rest }) => { + const hxRef = useEventListener({ onOpen, onClose, onReposition}); + return ( + + {children} + + ); +}; + +Popover.propTypes = { + id: PropTypes.string, + position: PropTypes.oneOf(POSITIONS), + children: PropTypes.node.isRequired, + className: PropTypes.string, + open: PropTypes.bool, + onClose: PropTypes.func, + onOpen: PropTypes.func, + onReposition: PropTypes.func, +}; + +export default Popover; diff --git a/src/Popover/stories.js b/src/Popover/stories.js index eecfa6e..98b1447 100644 --- a/src/Popover/stories.js +++ b/src/Popover/stories.js @@ -1,53 +1,55 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import centered from '@storybook/addon-centered/react'; import { boolean, select, text } from '@storybook/addon-knobs/react'; -import Modal from './index'; +import Popover from '.'; import Div from '../Div'; import Button from '../Button'; import { getLongText } from '../storyUtils'; +import { POSITIONS } from '../constants'; +import Disclosure from '../Disclosure'; -const SIZES = { - small: 'small', - medium: 'medium', - large: 'large', -}; - -storiesOf('Modal', module).add('All Knobs', () => { - let header = text('header in H3', 'Modal Header'); +storiesOf('Popover', module) + .addDecorator(centered) + .add('All Knobs', () => { + let header = text('header', 'Popover Header'); let footer = text('footer', ''); - let open = boolean('open', true); - let size = select('size', SIZES, 'medium'); + let position = select('positions', POSITIONS); let scroll = boolean('scroll', false); - 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 smallText = 'This is the body of a demo popover\n'; const longText = [1, 2, 3, 4, 5].map(() =>

{getLongText()}

); const defaultFooter = ( <> - + ); return ( - - {header && ( -
-

{header}

-
- )} -
- {smallText} - {scroll ? longText : null} -
- {
{footer || defaultFooter}
} - + <> + + + + + {header && ( +
+ {header} +
+ )} +
+ {smallText} + {scroll ? longText : null} +
+ {
{footer || defaultFooter}
} + + ); }); diff --git a/src/index.mjs b/src/index.mjs index 9f6a358..779609e 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -3,8 +3,9 @@ import Button from './Button'; import Alert from './Alert'; import Drawer from './Drawer'; import Icon from './Icon'; -import Tooltip from './Tooltip'; import Modal from './Modal'; +import Popover from './Popover'; +import Tooltip from './Tooltip'; import Select from './Select'; export default { @@ -13,6 +14,7 @@ export default { Drawer, Icon, Modal, + Popover, Select, - Tooltip + Tooltip, }; From 5a199bbe2d635ffc24faeab71ff8fd581a85dd38 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Fri, 22 May 2020 13:30:51 -0400 Subject: [PATCH 3/6] Pritified --- src/Disclosure/index.js | 6 ++-- src/Popover/index.js | 9 ++---- src/Popover/stories.js | 72 +++++++++++++++++++---------------------- 3 files changed, 40 insertions(+), 47 deletions(-) diff --git a/src/Disclosure/index.js b/src/Disclosure/index.js index 89fc6ee..0dd9e14 100644 --- a/src/Disclosure/index.js +++ b/src/Disclosure/index.js @@ -2,12 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; const Disclosure = ({ className, ariaControls, ariaExpanded, ...rest }) => { - return ; + /> + ); }; Disclosure.propTypes = { diff --git a/src/Popover/index.js b/src/Popover/index.js index 79e2cb2..083f6af 100644 --- a/src/Popover/index.js +++ b/src/Popover/index.js @@ -6,14 +6,9 @@ import { POSITIONS } from '../constants'; import { wcBool } from '../utils'; const Popover = ({ onOpen, onClose, onReposition, className, open, children, ...rest }) => { - const hxRef = useEventListener({ onOpen, onClose, onReposition}); + const hxRef = useEventListener({ onOpen, onClose, onReposition }); return ( - + {children} ); diff --git a/src/Popover/stories.js b/src/Popover/stories.js index 98b1447..bec8f33 100644 --- a/src/Popover/stories.js +++ b/src/Popover/stories.js @@ -13,43 +13,39 @@ import Disclosure from '../Disclosure'; storiesOf('Popover', module) .addDecorator(centered) .add('All Knobs', () => { - let header = text('header', 'Popover Header'); - let footer = text('footer', ''); - let position = select('positions', POSITIONS); - let scroll = boolean('scroll', false); + let header = text('header', 'Popover Header'); + let footer = text('footer', ''); + let position = select('positions', POSITIONS); + let scroll = boolean('scroll', false); - const smallText = 'This is the body of a demo popover\n'; - const longText = [1, 2, 3, 4, 5].map(() =>

{getLongText()}

); - const defaultFooter = ( - <> - - - - ); + const smallText = 'This is the body of a demo popover\n'; + const longText = [1, 2, 3, 4, 5].map(() =>

{getLongText()}

); + const defaultFooter = ( + <> + + + + ); - return ( - <> - - - - - {header && ( -
- {header} -
- )} -
- {smallText} - {scroll ? longText : null} -
- {
{footer || defaultFooter}
} - - - ); -}); + return ( + <> + + + + + {header &&
{header}
} +
+ {smallText} + {scroll ? longText : null} +
+ {
{footer || defaultFooter}
} + + + ); + }); From 8b005c64f1abf859c7ee59eecf3f658e92dd6b90 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Tue, 26 May 2020 11:50:56 -0400 Subject: [PATCH 4/6] Review Fixes --- src/Disclosure/index.js | 7 ++++--- src/Popover/index.js | 9 +++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/Disclosure/index.js b/src/Disclosure/index.js index 0dd9e14..e5e440a 100644 --- a/src/Disclosure/index.js +++ b/src/Disclosure/index.js @@ -1,20 +1,21 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { wcBool } from '../utils'; const Disclosure = ({ className, ariaControls, ariaExpanded, ...rest }) => { return ( ); }; Disclosure.propTypes = { - ariaControls: PropTypes.string, - ariaExpanded: PropTypes.string, + ariaControls: PropTypes.string.isRequired, + ariaExpanded: PropTypes.bool, role: PropTypes.string, tabindex: PropTypes.string, className: PropTypes.string, diff --git a/src/Popover/index.js b/src/Popover/index.js index 083f6af..bc35650 100644 --- a/src/Popover/index.js +++ b/src/Popover/index.js @@ -5,20 +5,21 @@ import useEventListener from '../hooks/useEventListener'; import { POSITIONS } from '../constants'; import { wcBool } from '../utils'; -const Popover = ({ onOpen, onClose, onReposition, className, open, children, ...rest }) => { +const Popover = ({ onOpen, onClose, onReposition, className, open, children, relativeTo, ...rest }) => { const hxRef = useEventListener({ onOpen, onClose, onReposition }); return ( - + {children} ); }; Popover.propTypes = { - id: PropTypes.string, - position: PropTypes.oneOf(POSITIONS), children: PropTypes.node.isRequired, className: PropTypes.string, + id: PropTypes.string, + position: PropTypes.oneOf(POSITIONS), + relativeTo: PropTypes.string, open: PropTypes.bool, onClose: PropTypes.func, onOpen: PropTypes.func, From 3402dd2ba003ef4fdf6feded8623dd00b504716e Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Tue, 26 May 2020 11:51:29 -0400 Subject: [PATCH 5/6] prittier --- src/Popover/index.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/Popover/index.js b/src/Popover/index.js index bc35650..0b04eae 100644 --- a/src/Popover/index.js +++ b/src/Popover/index.js @@ -5,10 +5,25 @@ import useEventListener from '../hooks/useEventListener'; import { POSITIONS } from '../constants'; import { wcBool } from '../utils'; -const Popover = ({ onOpen, onClose, onReposition, className, open, children, relativeTo, ...rest }) => { +const Popover = ({ + onOpen, + onClose, + onReposition, + className, + open, + children, + relativeTo, + ...rest +}) => { const hxRef = useEventListener({ onOpen, onClose, onReposition }); return ( - + {children} ); From e8f32bdc7c534a2dcc37b0233caa56fce29eeaff Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo <35456401+nicko-winner@users.noreply.github.com> Date: Tue, 26 May 2020 17:07:33 -0400 Subject: [PATCH 6/6] Update src/Popover/stories.js make 'bottom-right' the default --- src/Popover/stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Popover/stories.js b/src/Popover/stories.js index bec8f33..fab43ef 100644 --- a/src/Popover/stories.js +++ b/src/Popover/stories.js @@ -15,7 +15,7 @@ storiesOf('Popover', module) .add('All Knobs', () => { let header = text('header', 'Popover Header'); let footer = text('footer', ''); - let position = select('positions', POSITIONS); + let position = select('positions', POSITIONS, 'bottom-right'); let scroll = boolean('scroll', false); const smallText = 'This is the body of a demo popover\n';