diff --git a/package-lock.json b/package-lock.json index debb963836..c68d8e166d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11898,11 +11898,6 @@ } } }, - "body-scroll-lock": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", - "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==" - }, "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -26526,39 +26521,6 @@ "picomatch": "^2.2.1" } }, - "reakit": { - "version": "1.3.11", - "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.3.11.tgz", - "integrity": "sha512-mYxw2z0fsJNOQKAEn5FJCPTU3rcrY33YZ/HzoWqZX0G7FwySp1wkCYW79WhuYMNIUFQ8s3Baob1RtsEywmZSig==", - "requires": { - "@popperjs/core": "^2.5.4", - "body-scroll-lock": "^3.1.5", - "reakit-system": "^0.15.2", - "reakit-utils": "^0.15.2", - "reakit-warning": "^0.6.2" - } - }, - "reakit-system": { - "version": "0.15.2", - "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.15.2.tgz", - "integrity": "sha512-TvRthEz0DmD0rcJkGamMYx+bATwnGNWJpe/lc8UV2Js8nnPvkaxrHk5fX9cVASFrWbaIyegZHCWUBfxr30bmmA==", - "requires": { - "reakit-utils": "^0.15.2" - } - }, - "reakit-utils": { - "version": "0.15.2", - "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.15.2.tgz", - "integrity": "sha512-i/RYkq+W6hvfFmXw5QW7zvfJJT/K8a4qZ0hjA79T61JAFPGt23DsfxwyBbyK91GZrJ9HMrXFVXWMovsKBc1qEQ==" - }, - "reakit-warning": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.6.2.tgz", - "integrity": "sha512-z/3fvuc46DJyD3nJAUOto6inz2EbSQTjvI/KBQDqxwB0y02HDyeP8IWOJxvkuAUGkWpeSx+H3QWQFSNiPcHtmw==", - "requires": { - "reakit-utils": "^0.15.2" - } - }, "rechoir": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", @@ -30831,9 +30793,9 @@ } }, "yargs-parser": { - "version": "21.0.0", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz", - "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==" + "version": "21.0.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz", + "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==" } } }, diff --git a/packages/ui/package.json b/packages/ui/package.json index db865018ff..9150fd7783 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -90,7 +90,6 @@ "date-fns": "2.28.0", "modern-css-reset": "1.4.0", "query-string": "7.1.1", - "reakit": "1.3.11", "use-query-params": "1.2.3" } } diff --git a/packages/ui/src/ui/index.js b/packages/ui/src/ui/index.js index 3fe8e60455..db1724030b 100644 --- a/packages/ui/src/ui/index.js +++ b/packages/ui/src/ui/index.js @@ -10,7 +10,6 @@ export { Input } from './input'; export { Loader } from './loader'; export { Logo } from './logo'; export { Panels } from './panels'; -export { Popover } from './popover'; export { Skeleton } from './skeleton'; export { SortDropdown } from './sort-dropdown'; export { Table } from './table'; diff --git a/packages/ui/src/ui/popover/__snapshots__/popover.stories.storyshot b/packages/ui/src/ui/popover/__snapshots__/popover.stories.storyshot deleted file mode 100644 index 78505214c7..0000000000 --- a/packages/ui/src/ui/popover/__snapshots__/popover.stories.storyshot +++ /dev/null @@ -1,1768 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots UI/Popover default 1`] = ` -
- - - -
- - - - - - -
, - } - } - unstable_arrowStyles={Object {}} - unstable_disclosureRef={ - Object { - "current": , - } - } - unstable_idCountRef={ - Object { - "current": 0, - } - } - unstable_originalPlacement="top" - unstable_popoverRef={ - Object { - "current": , - } - } - unstable_popoverStyles={ - Object { - "left": "100%", - "position": "fixed", - "top": "100%", - } - } - unstable_referenceRef={ - Object { - "current": , - } - } - unstable_update={[Function]} - visible={false} - > - - - - - - - -
, - } - } - unstable_arrowStyles={Object {}} - unstable_disclosureRef={ - Object { - "current": , - } - } - unstable_idCountRef={ - Object { - "current": 0, - } - } - unstable_originalPlacement="top" - unstable_popoverRef={ - Object { - "current": , - } - } - unstable_popoverStyles={ - Object { - "left": "100%", - "position": "fixed", - "top": "100%", - } - } - unstable_referenceRef={ - Object { - "current": , - } - } - unstable_update={[Function]} - visible={false} - > - - - - - } - > - , - } - } - unstable_arrowStyles={Object {}} - unstable_disclosureRef={ - Object { - "current": , - } - } - unstable_idCountRef={ - Object { - "current": 0, - } - } - unstable_originalPlacement="top" - unstable_popoverRef={ - Object { - "current": , - } - } - unstable_popoverStyles={ - Object { - "left": "100%", - "position": "fixed", - "top": "100%", - } - } - unstable_referenceRef={ - Object { - "current": , - } - } - unstable_update={[Function]} - visible={false} - > -
- - - - -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`Storyshots UI/Popover with icon 1`] = ` -
- - - -
- - - - - - -
, - } - } - unstable_arrowStyles={Object {}} - unstable_disclosureRef={ - Object { - "current": , - } - } - unstable_idCountRef={ - Object { - "current": 0, - } - } - unstable_originalPlacement="top" - unstable_popoverRef={ - Object { - "current": , - } - } - unstable_popoverStyles={ - Object { - "left": "100%", - "position": "fixed", - "top": "100%", - } - } - unstable_referenceRef={ - Object { - "current": , - } - } - unstable_update={[Function]} - visible={false} - > - - - - - - - -
, - } - } - unstable_arrowStyles={Object {}} - unstable_disclosureRef={ - Object { - "current": , - } - } - unstable_idCountRef={ - Object { - "current": 0, - } - } - unstable_originalPlacement="top" - unstable_popoverRef={ - Object { - "current": , - } - } - unstable_popoverStyles={ - Object { - "left": "100%", - "position": "fixed", - "top": "100%", - } - } - unstable_referenceRef={ - Object { - "current": , - } - } - unstable_update={[Function]} - visible={false} - > - - - - - } - > - , - } - } - unstable_arrowStyles={Object {}} - unstable_disclosureRef={ - Object { - "current": , - } - } - unstable_idCountRef={ - Object { - "current": 0, - } - } - unstable_originalPlacement="top" - unstable_popoverRef={ - Object { - "current": , - } - } - unstable_popoverStyles={ - Object { - "left": "100%", - "position": "fixed", - "top": "100%", - } - } - unstable_referenceRef={ - Object { - "current": , - } - } - unstable_update={[Function]} - visible={false} - > -
- - - - -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; diff --git a/packages/ui/src/ui/popover/index.js b/packages/ui/src/ui/popover/index.js deleted file mode 100644 index 1f4904cff9..0000000000 --- a/packages/ui/src/ui/popover/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './popover'; diff --git a/packages/ui/src/ui/popover/popover.jsx b/packages/ui/src/ui/popover/popover.jsx deleted file mode 100644 index ea7fa85a91..0000000000 --- a/packages/ui/src/ui/popover/popover.jsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useCallback } from 'react'; -import PropTypes from 'prop-types'; -import cx from 'classnames'; -import { - usePopoverState, - Popover as UIPopover, - PopoverDisclosure as UIPopoverDisclosure, - PopoverArrow as UIPopoverArrow, -} from 'reakit/Popover'; - -import { Icon } from '../icon'; -import css from './popover.module.css'; - -export const Popover = ({ className, icon, label, ariaLabel, children }) => { - const popover = usePopoverState({ - baseId: process.env.NODE_ENV === 'test' && 'id-test', - gutter: 12, - modal: true, - placement: 'top', - }); - - const onCloseButtonClick = useCallback( - (event) => { - event.preventDefault(); - popover.toggle(); - }, - [popover], - ); - - const onButtonClick = useCallback( - (event) => { - event.preventDefault(); - popover.toggle(); - }, - [popover], - ); - - return ( - <> - - {icon && (typeof icon === 'string' ? : icon)} - {label && {label}} - - - - - {typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children} - - - - - ); -}; - -Popover.propTypes = { - className: PropTypes.string, - label: PropTypes.element, - icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired, - ariaLabel: PropTypes.string, -}; - -Popover.defaultProps = { - className: '', - icon: '', - label: '', - ariaLabel: 'View more info', -}; diff --git a/packages/ui/src/ui/popover/popover.module.css b/packages/ui/src/ui/popover/popover.module.css deleted file mode 100644 index 1f64ca9667..0000000000 --- a/packages/ui/src/ui/popover/popover.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.button { - display: inline-flex; - align-items: center; - justify-content: flex-start; - border: none; - outline: none; - padding: 0; - background: none; - color: inherit; - cursor: pointer; - line-height: inherit; - text-align: inherit; -} - -.button:hover, -.button:active, -.button:focus { - color: var(--color-primary); -} - -.button:hover .label { - text-decoration: underline; -} - -.popover { - padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small); - border-radius: var(--radius-small); - max-width: 360px; - outline: none; - filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow)); - background: var(--color-light); - font-size: var(--size-small); -} - -.arrow svg { - display: block; -} - -.arrow :global .fill { - fill: var(--color-light); -} - -.arrow :global .stroke { - fill: var(--color-light); -} - -.closeBtn { - position: absolute; - right: 0; - top: 0; - width: var(--space-large); - height: var(--space-large); - padding: var(--space-xxsmall); - background: none; - border: none; - cursor: pointer; - color: var(--color-text-ultra-light); - transition: var(--transition-out); -} - -.closeBtn:hover, -.closeBtn:active, -.closeBtn:focus { - color: var(--color-text-light); - transition: var(--transition-in); -} diff --git a/packages/ui/src/ui/popover/popover.stories.jsx b/packages/ui/src/ui/popover/popover.stories.jsx deleted file mode 100644 index 65518340ea..0000000000 --- a/packages/ui/src/ui/popover/popover.stories.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; - -import { getWrapperDecorator } from '../../stories'; -import { Popover } from '.'; - -const stories = storiesOf('UI/Popover', module); -stories.addDecorator(getWrapperDecorator({ padding: '64px' })); - -stories.add('default', () => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - -)); - -stories.add('with icon', () => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - -));