@transferwise/components 46.12.0 → 46.14.0

package/src/decision/Decision.spec.js

@@ -3,16 +3,16 @@ import '@testing-library/jest-dom';
 
 import Avatar from '../avatar';
 import { Breakpoint, Size } from '../common';
-import { render, fireEvent } from '../test-utils';
+import { mockMatchMedia } from '../mocks';
+import { render, fireEvent, screen } from '../test-utils';
 
-import { Presentation, Type } from './decisionEnums';
-
-import Decision from '.';
+import Decision, { DecisionPresentation, DecisionType } from '.';
 
 jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
+mockMatchMedia(jest);
 
 describe('Decision', () => {
-  const props = {
+  const commonProps = {
     options: [
       {
         media: {
@@ -25,112 +25,107 @@ describe('Decision', () => {
         onClick: jest.fn(),
       },
     ],
-    presentation: Presentation.LIST_BLOCK,
-    type: Type.NAVIGATION,
+    presentation: DecisionPresentation.LIST_BLOCK,
+    type: DecisionType.NAVIGATION,
   };
 
+  const initialInnerWidth = window.innerWidth;
   const resetClientWidth = (width) => {
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      value: width,
-    });
+    window.innerWidth = width;
   };
 
   afterAll(() => {
-    const originalClientWidth = Object.getOwnPropertyDescriptor(
-      HTMLElement.prototype,
-      'clientWidth',
-    );
-
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
+    window.innerWidth = initialInnerWidth;
   });
 
-  let container;
   beforeEach(() => {
     resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
+    const props = { ...commonProps };
 
     it('renders only Navigation Option before first breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders only Tile after first breakpoint', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).not.toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toHaveClass('np-tile--small');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK_GRID}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} presentation={Presentation.LIST_BLOCK_GRID} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
 
     it('renders only Navigation Option before first breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders only Tile after first breakpoint', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).not.toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toHaveClass('np-tile--small');
     });
 
     it('renders container as a grid', () => {
       resetClientWidth(Breakpoint.SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(container.querySelector('.np-decision')).toHaveClass('np-decision--grid');
-      expect(container.querySelector('.np-size-swapper')).toHaveClass('flex-wrap');
+      const decisionElement = container.querySelector('.np-decision');
+      expect(decisionElement).toHaveClass('np-decision--grid');
+      expect(decisionElement).toHaveClass('flex-wrap');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST_BLOCK} and size is Small`, () => {
-    beforeEach(() => {
-      ({ container } = render(
-        <Decision {...props} presentation={Presentation.LIST_BLOCK} size={Size.SMALL} />,
-      ));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
+    const props = {
+      ...commonProps,
+      presentation: DecisionPresentation.LIST_BLOCK,
+      size: Size.SMALL,
+    };
 
     it('renders only Navigation Option before breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
 
     it('renders Small Tile after breakpoint', () => {
       resetClientWidth(Breakpoint.EXTRA_SMALL);
-      fireEvent(window, new Event('resize'));
+      const { container } = render(<Decision {...props} />);
 
-      expect(getNavigationOption()).not.toBeInTheDocument();
-      expect(getTile()).toBeInTheDocument();
-      expect(getTile()).toHaveClass('np-tile--small');
+      expect(getNavigationOption(container)).not.toBeInTheDocument();
+      expect(getTile(container)).toBeInTheDocument();
+      expect(getTile(container)).toHaveClass('np-tile--small');
     });
   });
 
-  describe(`when presentation is ${Presentation.LIST}`, () => {
-    beforeEach(() => {
-      ({ container } = render(<Decision {...props} presentation={Presentation.LIST} />));
-    });
+  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
 
     it('renders Navigation Option before breakpoint', () => {
-      expect(getNavigationOption()).toBeInTheDocument();
-      expect(getTile()).not.toBeInTheDocument();
+      const { container } = render(<Decision {...props} />);
+
+      expect(getNavigationOption(container)).toBeInTheDocument();
+      expect(getTile(container)).not.toBeInTheDocument();
     });
   });
 
-  const getNavigationOption = () => container.querySelector('.np-navigation-option');
-  const getTile = () => container.querySelector('.np-tile');
+  const getNavigationOption = (container) => container.querySelector('.np-navigation-option');
+  const getTile = (container) => container.querySelector('.np-tile');
 });

package/src/decision/{Decision.story.js → Decision.story.tsx}

@@ -21,7 +21,7 @@ export const Basic = () => {
   const disabled = boolean('disabled', false);
   const showMediaCircleInList = boolean('showMediaCircleInList', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL]);
+  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
     <>
@@ -33,7 +33,7 @@ export const Basic = () => {
             href: '#href1',
             disabled,
             media: {
-              block: <Illustration name="globe" alt="" disableMargin />,
+              block: <Illustration name="globe" alt="" disablePadding />,
               list: (
                 <Avatar size="md" type="initials">
                   HM
@@ -49,7 +49,7 @@ export const Basic = () => {
             disabled,
             href: '#href2',
             media: {
-              block: <Illustration name="confetti" alt="" disableMargin />,
+              block: <Illustration name="confetti" alt="" disablePadding />,
               list: (
                 <Avatar size="md" type="initials">
                   HM
@@ -61,7 +61,7 @@ export const Basic = () => {
           {
             description: "I'm disabled and don't require an onClick or href.",
             media: {
-              block: <Illustration name="briefcase" alt="" disableMargin />,
+              block: <Illustration name="briefcase" alt="" disablePadding />,
               list: (
                 <img
                   src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
@@ -91,7 +91,7 @@ export const grid = () => {
     DecisionPresentation.LIST_BLOCK_GRID,
   );
   const disabled = boolean('disabled', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL]);
+  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
     <>

package/src/decision/Decision.tsx

@@ -0,0 +1,133 @@
+import classNames from 'classnames';
+
+import { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';
+import { useScreenSize } from '../common/hooks/useScreenSize';
+import NavigationOption from '../navigationOption';
+import Tile from '../tile';
+
+interface DecisionOption {
+  description?: React.ReactNode;
+  disabled?: boolean;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  media: {
+    block: React.ReactNode;
+    list: React.ReactNode;
+  };
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  title: React.ReactNode;
+}
+
+export enum DecisionPresentation {
+  LIST = 'LIST',
+  LIST_BLOCK = 'LIST_BLOCK',
+  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',
+}
+
+export enum DecisionType {
+  NAVIGATION = 'NAVIGATION',
+}
+
+export interface DecisionProps {
+  /**  A list of elements to be rendered */
+  options: DecisionOption[];
+  /**  Handles the display mode of the component */
+  presentation?: `${DecisionPresentation}`;
+  /** Size currently affects only Tile dimension */
+  size?: SizeSmall | SizeMedium;
+  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */
+  type?: `${DecisionType}`;
+
+  /** Display media in a circle in list presentation */
+  showMediaCircleInList?: boolean;
+
+  /** Sets navigation options to be aligned with the parent container */
+  isContainerAligned?: boolean;
+}
+
+const Decision = ({
+  options,
+  presentation = DecisionPresentation.LIST,
+  size = Size.MEDIUM,
+  type = DecisionType.NAVIGATION,
+  showMediaCircleInList = true,
+  isContainerAligned = false,
+}: DecisionProps) => {
+  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+
+  if (type === DecisionType.NAVIGATION) {
+    const renderedOptions = options.map(
+      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (
+        <NavigationOption
+          // eslint-disable-next-line react/no-array-index-key
+          key={`nav-${key}`}
+          complex={false}
+          content={description}
+          disabled={disabled}
+          href={href}
+          target={target}
+          media={list}
+          showMediaAtAllSizes
+          showMediaCircle={showMediaCircleInList}
+          isContainerAligned={isContainerAligned}
+          title={title}
+          onClick={onClick}
+        />
+      ),
+    );
+
+    if (
+      presentation === DecisionPresentation.LIST_BLOCK ||
+      presentation === DecisionPresentation.LIST_BLOCK_GRID
+    ) {
+      const isSmall = size === Size.SMALL;
+      const breakpoint = isSmall ? screenXs : screenSm;
+
+      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;
+
+      return (
+        <div
+          className={classNames(
+            'np-decision d-flex',
+            {
+              'np-decision--small': isSmall,
+              'np-decision--grid': isGrid,
+            },
+            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',
+          )}
+        >
+          {breakpoint
+            ? options.map(
+                (
+                  { description, disabled, href, target, media: { block }, onClick, title },
+                  key,
+                ) => (
+                  <Tile
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`tile-${key}`}
+                    className={classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
+                      'np-decision__tile--fixed-width': isGrid,
+                    })}
+                    description={description}
+                    disabled={disabled}
+                    href={href}
+                    target={target}
+                    media={block}
+                    size={isSmall ? Size.SMALL : Size.MEDIUM}
+                    title={title}
+                    onClick={onClick}
+                  />
+                ),
+              )
+            : renderedOptions}
+        </div>
+      );
+    }
+    // LIST
+    return <>{renderedOptions}</>;
+  }
+  return null;
+};
+
+export default Decision;

package/src/decision/index.ts

@@ -0,0 +1 @@
+export { default, DecisionPresentation, DecisionType } from './Decision';

package/src/drawer/Drawer.js

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -16,17 +17,27 @@ const Drawer = ({ children, className, footerContent, headerTitle, onClose, open
   );
 
   const { isMobile } = useLayout();
+  const titleId = useId();
 
   return (
     <Dimmer open={open} onClose={onClose}>
       <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
-        <div className={classNames('np-drawer', className)} role="dialog">
+        <div
+          role="dialog"
+          aria-modal
+          aria-labelledby={headerTitle ? titleId : undefined}
+          className={classNames('np-drawer', className)}
+        >
           <div
             className={classNames('np-drawer-header', {
               'np-drawer-header--withborder': headerTitle,
             })}
           >
-            {headerTitle && <Title type={Typography.TITLE_BODY}>{headerTitle}</Title>}
+            {headerTitle && (
+              <Title id={titleId} type={Typography.TITLE_BODY}>
+                {headerTitle}
+              </Title>
+            )}
             <CloseButton onClick={onClose} />
           </div>
           {children && <div className={classNames('np-drawer-content')}>{children}</div>}

package/src/drawer/__snapshots__/Drawer.rtl.spec.js.snap

@@ -11,6 +11,7 @@ exports[`Drawer renders content when open 1`] = `
       class="sliding-panel"
     >
       <div
+        aria-modal="true"
         class="np-drawer"
         role="dialog"
       >

package/src/index.ts

@@ -1,7 +1,9 @@
 /**
  * Types
  */
+export type { DecisionProps } from './decision/Decision';
 export type { InputProps } from './inputs/Input';
+export type { DateInputProps } from './dateInput';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';
 export type { SearchInputProps } from './inputs/SearchInput';

package/src/main.css

@@ -1598,95 +1598,19 @@ button.np-option {
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small + .np-decision__tile--small {
-  margin-left: 16px;
-  margin-left: var(--size-16);
-}
-[dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile--small {
-  margin-left: 0;
-  margin-bottom: 16px !important;
-  margin-bottom: var(--size-16) !important;
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
-  margin-left: 16px;
-  margin-left: var(--size-16);
-  margin-right: 0;
-  margin-right: initial;
-}
-.np-decision__tile + .np-decision__tile {
-  margin-left: 24px;
-  margin-left: var(--size-24);
-}
-[dir="rtl"] .np-decision__tile + .np-decision__tile {
-  margin-right: 24px;
-  margin-right: var(--size-24);
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision .np-text-title-subsection {
-  margin-bottom: 0;
-}
 .np-decision__tile--small .np-text-title-subsection {
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;
   line-height: var(--line-height-title);
-  margin-bottom: 0;
-}
-.np-decision.np-decision--grid .np-decision__tile {
-  margin-left: 0;
-  margin-bottom: 24px !important;
-  margin-bottom: var(--size-24) !important;
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
-  margin-right: 24px;
-  margin-right: var(--size-24);
 }
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
-  margin-left: 24px;
-  margin-left: var(--size-24);
-  margin-right: 0;
-  margin-right: initial;
-}
-.np-decision.np-decision--grid .np-size-swapper {
-  margin-right: calc(0 - 24px);
-  margin-right: calc(0 - var(--size-24));
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
-  margin-left: calc(0 - 24px);
-  margin-left: calc(0 - var(--size-24));
-  margin-right: 0;
-  margin-right: initial;
-}
-.np-decision.np-decision--grid.np-decision--small .np-size-swapper {
-  margin-right: calc(0 - 16px);
-  margin-right: calc(0 - var(--size-16));
+.np-decision:not(.flex-column) {
+  gap: 24px;
+  gap: var(--size-24);
 }
-[dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
-  margin-left: calc(0 - 16px);
-  margin-left: calc(0 - var(--size-16));
-  margin-right: 0;
-  margin-right: initial;
+.np-decision:not(.flex-column).np-decision--small {
+  gap: 16px;
+  gap: var(--size-16);
 }
 .tw-definition-list__item dd {
   word-break: break-all;

package/src/modal/Modal.tsx

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import { ReactNode, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -59,6 +60,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
 
   const contentReference = useRef<HTMLDivElement>(null);
+  const titleId = useId();
 
   return !isMedium ? (
     <Drawer
@@ -99,11 +101,12 @@ const Modal = ({
           {...otherProps}
         >
           <div
+            role="dialog"
+            aria-modal
+            aria-labelledby={titleId}
             className={classNames('tw-modal-dialog', 'd-flex', {
               [`tw-modal-${size}`]: size,
             })}
-            aria-modal
-            role="dialog"
           >
             <div
               className={classNames(
@@ -129,7 +132,7 @@ const Modal = ({
                   },
                 )}
               >
-                <Title type={Typography.TITLE_BODY} className="tw-modal-title">
+                <Title id={titleId} type={Typography.TITLE_BODY} className="tw-modal-title">
                   {title}
                 </Title>
                 <CloseButton onClick={onClose} />

package/src/popover/Popover.js

@@ -8,13 +8,16 @@ import ResponsivePanel from '../common/responsivePanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
 
-const Popover = ({ children, className, content, preferredPlacement, title }) => {
+const Popover = ({ children, className, content, preferredPlacement, title, onClose }) => {
   logActionRequired({ preferredPlacement });
   const anchorReference = useRef(null);
   const [open, setOpen] = useState(false);
   const { isModern } = useTheme();
 
-  const onClose = () => setOpen(false);
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
 
   return (
     <span className={classnames('np-popover', className)}>
@@ -34,7 +37,7 @@ const Popover = ({ children, className, content, preferredPlacement, title }) =>
         position={deprecatedPlacements[preferredPlacement] || preferredPlacement}
         arrow
         className="np-popover__container"
-        onClose={onClose}
+        onClose={handleOnClose}
       >
         <div
           className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
@@ -84,6 +87,7 @@ Popover.propTypes = {
     'bottom-right',
     'bottom-left',
   ]),
+  onClose: PropTypes.func,
   title: PropTypes.node,
 };
 

package/src/popover/Popover.spec.js

@@ -10,14 +10,6 @@ jest.mock('react-transition-group', () => ({
   CSSTransition: (props) => (props.in ? props.children : null),
 }));
 
-jest.mock(
-  '../dimmer',
-  () =>
-    function ({ open, children }) {
-      return open ? <div className="dimmer">{children}</div> : null;
-    },
-);
-
 describe('Popover', () => {
   const props = {
     arrow: true,
@@ -114,7 +106,23 @@ describe('Popover', () => {
     });
   });
 
+  it('onClose fires when close Popover', async () => {
+    const handleOnClose = jest.fn();
+    render(
+      <Popover {...props} onClose={handleOnClose}>
+        <button type="button">Open</button>
+      </Popover>,
+    );
+
+    expect(handleOnClose).not.toHaveBeenCalled();
+    userEvent.click(screen.getByText('Open'));
+    await waitForPanel();
+    userEvent.click(getDimmer());
+    expect(handleOnClose).toHaveBeenCalledTimes(1);
+  });
+
   const waitForPanel = async () => screen.findByText('content');
+  const getDimmer = () => document.querySelector('.dimmer');
   const getPanel = () => document.querySelector('.np-panel');
   const getBottomSheet = () => document.querySelector('.np-bottom-sheet');
   const getTitle = () => screen.queryByText('title');