@transferwise/components 46.91.0 → 46.93.0

package/src/common/Option/Option.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import { clsx } from 'clsx';
 import { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';
 
@@ -24,6 +25,7 @@ export interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
   showMediaAtAllSizes?: boolean;
   showMediaCircle?: boolean;
   isContainerAligned?: boolean;
+  additionalContent?: ReactNode;
 }
 
 interface AnchorOptionProps extends BaseOptionProps, LinkProps {
@@ -50,6 +52,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
       showMediaAtAllSizes,
       showMediaCircle = true,
       isContainerAligned = false,
+      additionalContent,
       ...rest
     },
     reference,
@@ -69,7 +72,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
         })}
         disabled={disabled && Element === 'button'}
       >
-        <div className="media">
+        <div className={clsx('media')}>
           {media && (
             <div className="media-left">
               {showMediaCircle ? (
@@ -101,6 +104,9 @@ const Option = forwardRef<ReferenceType, OptionProps>(
           </div>
           <div className="media-right">{button}</div>
         </div>
+        {additionalContent ? (
+          <div className="np-option-additional-content"> {additionalContent} </div>
+        ) : null}
       </Element>
     );
   },

package/src/dateLookup/DateLookup.spec.tsx

@@ -0,0 +1,445 @@
+import { Field } from '../field/Field';
+import {
+  mockMatchMedia,
+  mockResizeObserver,
+  render,
+  RenderResult,
+  screen,
+  userEvent,
+} from '../test-utils';
+import DateLookup, { DateLookupProps } from './DateLookup';
+
+import { act } from 'react';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+mockMatchMedia();
+mockResizeObserver();
+
+const initialValue = new Date(2000, 0, 1);
+const labelProp = 'label';
+
+describe('DateLookup', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Date of birth">
+        <DateLookup value={initialValue} onChange={() => {}} />
+      </Field>,
+    );
+    const button = screen.getByRole('button', { name: /^Date of birth/ });
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-haspopup');
+  });
+
+  it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'])(
+    "opens with '%s' and closes with '{Escape}'",
+    async (text) => {
+      render(<DateLookup value={initialValue} onChange={() => {}} />);
+
+      await user.tab();
+      await user.keyboard(text);
+
+      expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
+
+      await user.keyboard('{Escape}');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(screen.queryByRole('button', { name: /next/iu })).not.toBeInTheDocument();
+    },
+  );
+
+  const setupAndOpenWithMouse = async (props: Partial<DateLookupProps> = {}) => {
+    const view = render(<DateLookup value={initialValue} onChange={() => {}} {...props} />);
+
+    await user.click(screen.getByRole('button'));
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
+
+    return view;
+  };
+
+  it('opens and closes with mouse', async () => {
+    await setupAndOpenWithMouse();
+
+    expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
+
+    const dimmerElement = screen.getByRole('dialog').parentElement?.parentElement;
+    if (dimmerElement != null) {
+      await user.click(dimmerElement);
+    }
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
+
+    expect(screen.queryByRole('button', { name: /next/iu })).not.toBeInTheDocument();
+  });
+
+  describe('in day view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -7],
+      ['{ArrowDown}', +7],
+    ])("handles '%s' to step %d day(s)", async (text, step) => {
+      const handleChange = jest.fn();
+      await setupAndOpenWithMouse({ onChange: handleChange });
+
+      expect(handleChange).not.toHaveBeenCalled();
+
+      await user.keyboard(text);
+
+      const value = new Date(initialValue);
+      value.setDate(initialValue.getDate() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      await user.keyboard('{Escape}');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).toHaveBeenCalledWith(initialValue);
+    });
+  });
+
+  describe('in year view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -4],
+      ['{ArrowDown}', +4],
+    ])("handles '%s' to step %d year(s)", async (text, step) => {
+      const handleChange = jest.fn();
+      await setupAndOpenWithMouse({ onChange: handleChange });
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).not.toHaveBeenCalled();
+
+      await user.keyboard(text);
+
+      const value = new Date(initialValue);
+      value.setFullYear(initialValue.getFullYear() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      await user.keyboard('{Escape}');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).toHaveBeenCalledWith(initialValue);
+    });
+  });
+
+  describe('in month view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -4],
+      ['{ArrowDown}', +4],
+    ])("handles '%s' to step %d month(s)", async (text, step) => {
+      const handleChange = jest.fn();
+      await setupAndOpenWithMouse({ onChange: handleChange });
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+      await user.keyboard(' ');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).not.toHaveBeenCalled();
+
+      await user.keyboard(text);
+
+      const value = new Date(initialValue);
+      value.setMonth(initialValue.getMonth() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      await user.keyboard('{Escape}');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).toHaveBeenCalledWith(initialValue);
+    });
+  });
+
+  it('limits min value', async () => {
+    const min = new Date(initialValue);
+    min.setDate(min.getDate() - 1);
+    const handleChange = jest.fn();
+    await setupAndOpenWithMouse({ min, onChange: handleChange });
+
+    await user.keyboard('{ArrowLeft}{ArrowLeft}');
+
+    expect(handleChange).toHaveBeenCalledWith(min);
+  });
+
+  it('limits max value', async () => {
+    const max = new Date(initialValue);
+    max.setDate(max.getDate() + 1);
+    const handleChange = jest.fn();
+    await setupAndOpenWithMouse({ max, onChange: handleChange });
+
+    await user.keyboard('{ArrowRight}{ArrowRight}');
+
+    expect(handleChange).toHaveBeenCalledWith(max);
+  });
+});
+
+describe('DateLookup propTypes', () => {
+  describe('when the value prop is set to null', () => {
+    it('renders without prop type warnings in the console', () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      render(<DateLookup value={null} onChange={jest.fn()} />);
+
+      // eslint-disable-next-line no-console
+      expect(console.error).not.toHaveBeenCalledWith(
+        expect.stringContaining('Warning: Failed %s type'),
+        'prop',
+        'The prop `value` is marked as required in `DateLookup`, but its value is `null`.',
+        expect.anything(),
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+});
+
+describe('DateLookup (events)', () => {
+  const date = new Date(2018, 11, 27);
+  const min = new Date(2018, 11, 26);
+  const max = new Date(2018, 11, 28);
+
+  describe('when not clearable', () => {
+    let handleChange: jest.Mock;
+
+    const setup = async (overrides = {}) => {
+      handleChange = jest.fn();
+
+      return render(
+        <>
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+          <label id="prioritized-label">Prioritized label</label>
+          <DateLookup
+            value={date}
+            min={min}
+            max={max}
+            size="lg"
+            placeholder="Select date"
+            label={labelProp}
+            aria-labelledby="prioritized-label"
+            disabled={false}
+            clearable={false}
+            onChange={handleChange}
+            {...overrides}
+          />
+        </>,
+      );
+    };
+
+    it('switches to years', async () => {
+      const view = await setup();
+      await openDateLookup();
+      await clickDateButton();
+
+      expect(getActiveYearButton(view)).toHaveFocus();
+
+      await closeDateLookup(view);
+    });
+
+    it('has aria-label for 20 years', async () => {
+      const view = await setup();
+      await openDateLookup();
+      await clickDateButton();
+
+      expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
+      expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
+
+      await closeDateLookup(view);
+    });
+
+    it('switches to months', async () => {
+      const view = await setup();
+      await openDateLookup();
+      await clickDateButton();
+      await userEvent.click(getActiveYearButton(view));
+
+      expect(getActiveMonthButton(view)).toHaveFocus();
+
+      await closeDateLookup(view);
+    });
+
+    it('has aria label for year', async () => {
+      const view = await setup();
+      await openDateLookup();
+      await clickDateButton();
+      await userEvent.click(getActiveYearButton(view));
+
+      expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
+      expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
+
+      await closeDateLookup(view);
+    });
+
+    it('switches to days', async () => {
+      const view = await setup();
+      await openDateLookup();
+      await clickDateButton();
+      await userEvent.click(getActiveYearButton(view));
+      await userEvent.click(getActiveMonthButton(view));
+
+      expect(getActiveDayButton(view)).toHaveFocus();
+
+      await closeDateLookup(view);
+    });
+
+    it('has aria label for month', async () => {
+      const view = await setup();
+      await openDateLookup();
+      await clickDateButton();
+      await userEvent.click(getActiveYearButton(view));
+      await userEvent.click(getActiveMonthButton(view));
+
+      expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
+      expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
+
+      await closeDateLookup(view);
+    });
+
+    it('has aria label on selected date', async () => {
+      const view = await setup();
+      await openDateLookup();
+      const d = new Date(2018, 11, 28);
+      const newDay = screen.getByText(d.getDate().toString());
+      await userEvent.click(newDay);
+      await openDateLookup();
+      expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
+
+      await closeDateLookup(view);
+    });
+
+    it('supports custom `aria-labelledby` attribute', async () => {
+      const view = await setup();
+      expect(screen.getByRole('button', { name: /^Prioritized label/ })).toBeInTheDocument();
+      await closeDateLookup(view);
+    });
+
+    it('reads our the HTML label as well as the input prefix and the value', async () => {
+      const view = await setup();
+      expect(
+        screen.getByRole('button', { name: 'Prioritized label label 27 December 2018' }),
+      ).toBeInTheDocument();
+      await closeDateLookup(view);
+    });
+
+    it('reads our the HTML label as well as the input prefix and the placeholder', async () => {
+      const view = await setup({ value: undefined });
+      expect(
+        screen.getByRole('button', { name: 'Prioritized label label Select date' }),
+      ).toBeInTheDocument();
+      await closeDateLookup(view);
+    });
+  });
+
+  describe('when is clearable', () => {
+    const props: DateLookupProps = {
+      value: date,
+      onChange: jest.fn(),
+      clearable: true,
+      label: labelProp,
+    };
+
+    it(`doesn't show clear button if disable is true`, async () => {
+      const view = render(<DateLookup {...props} />);
+      expect(getClearButton(view)).toBeInTheDocument();
+
+      view.rerender(<DateLookup {...props} disabled />);
+
+      expect(getClearButton(view)).not.toBeInTheDocument();
+    });
+
+    it('when user clicks on clear the focus returns to btn', async () => {
+      const view = render(<DateLookup {...props} />);
+      await clickClearButton(view);
+      expect(getOpenButton(labelProp)).toHaveFocus();
+    });
+
+    it('onChange gets called with null when reset button is clicked', async () => {
+      const view = render(<DateLookup {...props} />);
+      await clickClearButton(view);
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+  });
+
+  const getClearButton = (view: RenderResult) => {
+    return view.container.querySelector('.clear-btn');
+  };
+  const getOpenButton = (label: DateLookupProps['label']) => {
+    return screen.getByRole('button', {
+      name: new RegExp(String(label), 'i'),
+      expanded: false,
+    });
+  };
+
+  const getDateButton = () => {
+    return screen.getByRole('button', {
+      name: /Go to 20 year view/i,
+    });
+  };
+
+  const openDateLookup = async () => userEvent.click(getOpenButton(labelProp));
+
+  const clickDateButton = async () => userEvent.click(getDateButton());
+
+  // Close dateLookup and removes events attached to documents.
+  const closeDateLookup = async (view: RenderResult) => userEvent.click(view.container);
+
+  // @ts-expect-error getClearButton returns node
+  const clickClearButton = async (view: RenderResult) => userEvent.click(getClearButton(view));
+
+  const getActiveYearButton = (view: RenderResult) => {
+    return screen.getByRole('button', {
+      name: /selected year/i,
+      pressed: true,
+    });
+  };
+
+  const getActiveMonthButton = (view: RenderResult) => {
+    return screen.getByRole('button', {
+      name: /selected month/i,
+      pressed: true,
+    });
+  };
+
+  const getActiveDayButton = (view: RenderResult) => {
+    return screen.getByRole('button', {
+      name: /selected day/i,
+      pressed: true,
+    });
+  };
+
+  const getButtonByAriaLabel = (ariaLabel: string) => {
+    return screen.getByRole('button', { name: ariaLabel });
+  };
+});

package/src/dateLookup/dateTrigger/DateTrigger.css

@@ -9,52 +9,21 @@
   padding-left: var(--size-16);
 }
 .clear-btn {
-  transition: color 0.15s ease-in-out;
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
   position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  right: 16px;
-  right: var(--size-16);
-}
-[dir="rtl"] .clear-btn {
-  left: 16px;
-  left: var(--size-16);
-  right: auto;
-  right: initial;
-}
-.np-theme-personal .clear-btn {
   top: 8px;
   top: var(--size-8);
   right: 8px;
   right: var(--size-8);
 }
-[dir="rtl"] .np-theme-personal .clear-btn {
+[dir="rtl"] .clear-btn {
   left: 8px;
   left: var(--size-8);
   right: auto;
   right: initial;
 }
 .clear-btn--sm {
-  top: 8px;
-  top: var(--size-8);
-}
-.np-theme-personal .clear-btn--sm {
   top: 0;
 }
 .clear-btn--lg {
-  top: 28px;
-}
-.np-theme-personal .clear-btn--lg {
   top: 20px;
 }
-.clear-btn:not(.disabled):not(:disabled):hover,
-.clear-btn:not(.disabled):not(:disabled):focus {
-  color: #d03238;
-  color: var(--color-interactive-negative-hover);
-}
-.clear-btn:not(.disabled):not(:disabled):active {
-  color: #bf1e2c;
-  color: var(--color-interactive-negative-active);
-}

package/src/dateLookup/dateTrigger/DateTrigger.less

@@ -13,39 +13,15 @@
 }
 
 .clear-btn {
-  transition: color 0.15s ease-in-out;
-  color: var(--color-interactive-secondary);
   position: absolute;
-  top: var(--size-16);
-  .right(var(--size-16));
-
-  .np-theme-personal & {
-    top: var(--size-8);
-    .right(var(--size-8));
-  }
+  top: var(--size-8);
+  .right(var(--size-8));
 
   &--sm {
-    top: var(--size-8);
-
-    .np-theme-personal & {
-      top: 0;
-    }
+    top: 0;
   }
 
   &--lg {
-    top: 28px;
-
-    .np-theme-personal & {
-      top: 20px;
-    }
-  }
-
-  &:not(.disabled, :disabled):hover,
-  &:not(.disabled, :disabled):focus {
-    color: var(--color-interactive-negative-hover);
-  }
-
-  &:not(.disabled, :disabled):active {
-    color: var(--color-interactive-negative-active);
+    top: 20px;
   }
 }

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -3,12 +3,13 @@ import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
 import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';
-import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 import { useContext, useId } from 'react';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 import Body from '../../body';
+import IconButton from '../../iconButton';
+import { Cross } from '@transferwise/icons';
 
 interface DateTriggerProps {
   ariaLabelledBy?: string;
@@ -78,16 +79,19 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         <>
           <div className="clearfix" />
           <span className="input-group-addon">
-            <CloseButton
+            <IconButton
+              size={32}
+              priority="minimal"
               className={`clear-btn clear-btn--${size}`}
               aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}
-              size={Size.SMALL}
-              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+              onClick={(event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 onClear();
               }}
-            />
+            >
+              <Cross />
+            </IconButton>
           </span>
         </>
       ) : null}

package/src/definitionList/DefinitionList.tsx

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 
-import ActionButton from '../actionButton';
 import { Layout } from '../common';
+import Button from '../button';
 
 export interface DefinitionListDefinition {
   action?: {
@@ -85,9 +85,9 @@ export default function DefinitionList({
                     'tw-definition-list__action',
                   )}
                 >
-                  <ActionButton className="tw-definition-list__button" onClick={action.onClick}>
+                  <Button as="button" size="sm" v2 onClick={action.onClick}>
                     {action.label}
-                  </ActionButton>
+                  </Button>
                 </div>
               ) : null}
             </dd>

package/src/inputs/InputGroup.story.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
 
-import ActionButton from '../actionButton';
+import { Button } from '..';
 import { Field } from '../field/Field';
 
 import { Input } from './Input';
@@ -59,7 +59,9 @@ function InputGroupWithSuffix(args: NonNullable<Story['args']>) {
       {...args}
       addonEnd={{
         content: (
-          <ActionButton
+          <Button
+            size="sm"
+            v2
             onClick={async () => {
               await navigator.clipboard.writeText(value);
               if (ref.current != null) {
@@ -69,7 +71,7 @@ function InputGroupWithSuffix(args: NonNullable<Story['args']>) {
             }}
           >
             Copy
-          </ActionButton>
+          </Button>
         ),
         interactive: true,
         padding: 'sm',

package/src/listItem/ListItem.spec.tsx

@@ -1,4 +1,4 @@
-import ActionButton from '../actionButton/ActionButton';
+import { Button } from '..';
 import { render, screen, within } from '../test-utils';
 
 import ListItem from '.';
@@ -17,7 +17,15 @@ describe('ListItem', () => {
 
   it('shows an action', async () => {
     render(
-      <ListItem title="Account number" value="123" action={<ActionButton>Copy</ActionButton>} />,
+      <ListItem
+        title="Account number"
+        value="123"
+        action={
+          <Button v2 size="sm">
+            Copy
+          </Button>
+        }
+      />,
     );
 
     const listItem = await findListItem();