@transferwise/components 46.100.1 → 46.101.0

package/src/checkbox/Checkbox.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 
 import { Field } from '../field/Field';
 import { lorem10, storyConfig } from '../test-utils';

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import CheckboxButton from './CheckboxButton';

package/src/checkboxOption/CheckboxOption.story.tsx

@@ -1,66 +1,72 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
-import { Meta } from '@storybook/react';
-import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-
+import { action } from 'storybook/actions';
+import { Meta } from '@storybook/react-webpack5';
+import { FastFlag } from '@transferwise/icons';
 import { Nudge, Title, Typography } from '..';
-
-import CheckboxOption from './CheckboxOption';
+import CheckboxOption, { type CheckboxOptionProps } from './CheckboxOption';
 
 const meta: Meta<typeof CheckboxOption> = {
   component: CheckboxOption,
   title: 'Option/CheckboxOption',
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+    },
+  },
 };
 
 export default meta;
 
-const Template = () => {
+const commonArgs = {
+  disabled: false,
+  title: 'Checkbox option',
+  content: 'Normally, the button and icon are vertically centered.',
+  showMediaAtAllSizes: false,
+  isContainerAligned: false,
+};
+
+const renderTemplate = (args: Partial<CheckboxOptionProps> = commonArgs) => {
+  const mergedArgs = { ...commonArgs, ...args };
   const [checked, setChecked] = useState(true);
-  const content = text('content', 'Normally, the button and icon are vertically centered.');
-  const title = text('title', 'Checkbox option');
-  const disabled = boolean('disabled', false);
-  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
-  const isContainerAligned = boolean('isContainerAligned', false);
 
   return (
     <CheckboxOption
       id="checkbox-option"
       name="checkbox-option"
       checked={checked}
-      disabled={disabled}
-      title={title}
-      content={content}
-      media={<FastFlagIcon />}
-      showMediaAtAllSizes={showMediaAtAllSizes}
-      isContainerAligned={isContainerAligned}
+      disabled={mergedArgs.disabled}
+      title={mergedArgs.title}
+      content={mergedArgs.content}
+      media={<FastFlag />}
+      showMediaAtAllSizes={mergedArgs.showMediaAtAllSizes}
+      isContainerAligned={mergedArgs.isContainerAligned}
       onChange={(newValue) => setChecked(newValue)}
     />
   );
 };
 
-export const Basic = () => {
-  return <Template />;
+export const Basic = (args: CheckboxOptionProps) => {
+  return renderTemplate(args);
 };
 
-export const Multiple = () => {
+export const Multiple = (args: CheckboxOptionProps) => {
   return (
     <>
-      <Template />
-      <Template />
-      <Template />
+      {renderTemplate(args)}
+      {renderTemplate(args)}
+      {renderTemplate(args)}
     </>
   );
 };
 
-export const WithContainerContent = () => (
+export const WithContainerContent = (args: CheckboxOptionProps) => (
   <>
     <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
       Choose how to pay
     </Title>
-    <Template />
-    <Template />
-    <Template />
+    {renderTemplate(args)}
+    {renderTemplate(args)}
+    {renderTemplate(args)}
     <div>
       <Nudge
         className="m-t-2"

package/src/chevron/Chevron.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Chevron from './Chevron';
 

package/src/chips/Chips.story.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import Chips, { ChipsProps, ChipValue } from './Chips';

package/src/circularButton/CircularButton.story.tsx

@@ -2,7 +2,7 @@ import * as Icons from '@transferwise/icons';
 
 import { ControlType, Priority } from '../common';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import { storyConfig } from '../test-utils';
 import Title from '../title';

package/src/circularButton/CircularButton.tests.story.tsx

@@ -1,6 +1,6 @@
 import { Freeze } from '@transferwise/icons';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 
 export default {

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag } from '@transferwise/icons';
 import { useState } from 'react';
 

package/src/common/card/Card.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { lorem10 } from '../../test-utils';
 import Title from '../../title';

package/src/common/circle/Circle.story.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { storyConfig } from '../../test-utils';
 import Circle from './Circle';
 import { Profile } from '@transferwise/icons';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { CircleProps } from '.';
 import Body from '../../body';
 

package/src/common/locale/index.spec.ts

@@ -24,17 +24,20 @@ describe('locale utils', () => {
       ['zh_HK', 'zh'],
       ['ja-JP', 'ja'],
       ['zhHK', null],
-      [null as any, null],
-      [undefined as any, null],
+      [null, null],
+      [undefined, null],
       ['', null],
       ['  ', null],
       ['ar-dz', null],
       ['ar-iq', null],
       ['zh-tw', 'zh'],
       ['nl-nl', 'nl'],
-    ])('locale "%s" -> language "%s"', (locale, expectedValue) => {
-      expect(getLangFromLocale(locale)).toBe(expectedValue);
-    });
+    ])(
+      'locale "%s" -> language "%s"',
+      (locale: string | null | undefined, expectedValue: string | null) => {
+        expect(getLangFromLocale(locale!)).toBe(expectedValue);
+      },
+    );
   });
 
   describe('adjustLocale', () => {
@@ -51,17 +54,20 @@ describe('locale utils', () => {
       ['zh_HK', 'zh-HK'],
       ['ja-JP', 'ja-JP'],
       ['zhHK', null],
-      [null as any, null],
-      [undefined as any, null],
+      [null, null],
+      [undefined, null],
       ['', null],
       ['  ', null],
       ['ar-dz', 'ar-DZ'],
       ['ar-iq', 'ar-IQ'],
       ['zh-tw', 'zh-TW'],
       ['nl-nl', 'nl-NL'],
-    ])('locale "%s" -> language "%s"', (locale, expectedValue) => {
-      expect(adjustLocale(locale)).toBe(expectedValue);
-    });
+    ])(
+      'locale "%s" -> language "%s"',
+      (locale: string | null | undefined, expectedValue: string | null) => {
+        expect(adjustLocale(locale!)).toBe(expectedValue);
+      },
+    );
   });
 
   describe('getCountryFromLocale', () => {
@@ -75,9 +81,12 @@ describe('locale utils', () => {
       ['es_ES', 'ES'],
       ['es_E', null],
       ['es-E', null],
-    ])('given an "%s" as a locale value it should return "%s"', (locale, expectedValue) => {
-      expect(getCountryFromLocale(locale)).toBe(expectedValue);
-    });
+    ])(
+      'given an "%s" as a locale value it should return "%s"',
+      (locale: string, expectedValue: string | null) => {
+        expect(getCountryFromLocale(locale)).toBe(expectedValue);
+      },
+    );
   });
 
   describe('getDirectionFromLocale', () => {
@@ -87,8 +96,11 @@ describe('locale utils', () => {
       ['ar-AE', 'rtl'],
       ['ar_AE', 'rtl'],
       ['he', 'rtl'],
-    ])('given an "%s" as a locale value it should return "%s"', (locale, expectedValue) => {
-      expect(getDirectionFromLocale(locale)).toBe(expectedValue);
-    });
+    ])(
+      'given an "%s" as a locale value it should return "%s"',
+      (locale: string, expectedValue: string) => {
+        expect(getDirectionFromLocale(locale)).toBe(expectedValue);
+      },
+    );
   });
 });

package/src/common/responsivePanel/ResponsivePanel.spec.js

@@ -1,32 +1,11 @@
 import { Breakpoint, Position } from '..';
-import { mockMatchMedia, render } from '../../test-utils';
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import React, { forwardRef } from 'react';
 
 import ResponsivePanel from './ResponsivePanel';
 
 mockMatchMedia();
 
-jest.mock('../bottomSheet', () => {
-  const { forwardRef } = require('react');
-  return forwardRef(({ open, children }, reference) =>
-    open ? (
-      <div ref={reference} className="np-bottom-sheet">
-        {children}
-      </div>
-    ) : null,
-  );
-});
-
-jest.mock('../panel', () => {
-  const { forwardRef } = require('react');
-  return forwardRef(({ open, children }, reference) =>
-    open ? (
-      <div ref={reference} className="np-panel np-panel--open">
-        {children}
-      </div>
-    ) : null,
-  );
-});
-
 describe('ResponsivePanel', () => {
   const props = {
     arrow: true,
@@ -45,13 +24,13 @@ describe('ResponsivePanel', () => {
 
   describe('on desktop', () => {
     it('renders Panel', async () => {
-      ({ container } = render(
+      render(
         <ResponsivePanel {...props} intialOpen>
           children
         </ResponsivePanel>,
-      ));
+      );
 
-      expect(container).toMatchSnapshot();
+      expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-modal');
     });
   });
 
@@ -61,13 +40,13 @@ describe('ResponsivePanel', () => {
     });
 
     it('renders bottomSheet', async () => {
-      ({ container } = render(
+      render(
         <ResponsivePanel {...props} open>
           children
         </ResponsivePanel>,
-      ));
+      );
 
-      expect(container).toMatchSnapshot();
+      expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal');
     });
   });
 });

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '.';
 import { storyConfig } from '../test-utils';

package/src/dateInput/DateInput.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 
 import { DateInput } from '..';
 

package/src/dateInput/DateInput.tests.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, fn } from 'storybook/test';
 
 import { DateInput, Field } from '..';
 import { lorem10, storyConfig } from '../test-utils';

package/src/dateLookup/DateLookup.spec.tsx

@@ -42,9 +42,9 @@ describe('DateLookup', () => {
     expect(button).toHaveAttribute('aria-haspopup');
   });
 
-  it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'])(
+  it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'] as const)(
     "opens with '%s' and closes with '{Escape}'",
-    async (text) => {
+    async (text: string) => {
       render(<DateLookup value={initialValue} onChange={() => {}} />);
 
       await user.tab();
@@ -94,7 +94,7 @@ describe('DateLookup', () => {
       ['{ArrowRight}', +1],
       ['{ArrowUp}', -7],
       ['{ArrowDown}', +7],
-    ])("handles '%s' to step %d day(s)", async (text, step) => {
+    ])("handles '%s' to step %d day(s)", async (text: string, step: number) => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
@@ -121,7 +121,7 @@ describe('DateLookup', () => {
       ['{ArrowRight}', +1],
       ['{ArrowUp}', -4],
       ['{ArrowDown}', +4],
-    ])("handles '%s' to step %d year(s)", async (text, step) => {
+    ])("handles '%s' to step %d year(s)", async (text: string, step: number) => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
@@ -153,7 +153,7 @@ describe('DateLookup', () => {
       ['{ArrowRight}', +1],
       ['{ArrowUp}', -4],
       ['{ArrowDown}', +4],
-    ])("handles '%s' to step %d month(s)", async (text, step) => {
+    ])("handles '%s' to step %d month(s)", async (text: string, step: number) => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 

package/src/dateLookup/DateLookup.story.tsx

@@ -1,16 +1,24 @@
-import { boolean, select, text, date } from '@storybook/addon-knobs';
-import { userEvent } from '@storybook/test';
 import { useState } from 'react';
-
+import { userEvent } from 'storybook/test';
 import { Field } from '..';
 import { Size } from '../common';
 import { storyConfig } from '../test-utils';
-
-import DateLookup from './DateLookup';
+import DateLookup, { type DateLookupProps } from './DateLookup';
 
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup',
+  argTypes: {
+    size: { control: 'select', options: [Size.SMALL, Size.MEDIUM, Size.LARGE] },
+    disabled: { control: 'boolean' },
+    label: { control: 'text' },
+    monthFormat: { control: 'select', options: ['long', 'short'] },
+    placeholder: { control: 'text' },
+    id: { control: 'text' },
+    clearable: { control: 'boolean' },
+    min: { control: 'date' },
+    max: { control: 'date' },
+  },
 };
 
 const epoch = new Date('2011-01-01');
@@ -18,92 +26,61 @@ const theFuture = new Date(epoch);
 theFuture.setUTCDate(epoch.getUTCDate() + 10);
 const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
-const size = select('size', Object.values([Size.SMALL, Size.MEDIUM, Size.LARGE]), Size.MEDIUM);
 
-export const Basic = () => {
+export const Basic = (args: DateLookupProps) => {
   const [value, setValue] = useState<Date | null>(epoch);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
-  const placeholder = text('placeholder', 'placeholder');
-  const id = text('id', 'date-lookup');
-
-  const clearable = boolean('clearable', true);
-
   return (
     <DateLookup
-      disabled={disabled}
-      id={id}
-      label={label}
-      min={thePast}
-      max={theFuture}
-      monthFormat={monthFormat}
-      placeholder={placeholder}
-      size={size}
+      {...args}
+      min={args.min ? new Date(args.min) : thePast}
+      max={args.max ? new Date(args.max) : theFuture}
       value={value}
-      clearable={clearable}
-      onChange={(v) => {
-        console.log(v);
-        setValue(v);
-      }}
+      onChange={(v) => setValue(v)}
     />
   );
 };
-
+Basic.args = {
+  size: Size.MEDIUM,
+  disabled: false,
+  label: 'label',
+  monthFormat: 'long',
+  placeholder: 'placeholder',
+  id: 'date-lookup',
+  clearable: true,
+  min: thePast,
+  max: theFuture,
+};
 Basic.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-  // testing focus state on keyboard nav
   await userEvent.tab();
   await userEvent.keyboard(' ');
 };
 
 export const Basic400Zoom = storyConfig(
-  { render: Basic, play: Basic.play, parameters: { chromatic: { delay: 2000 } } },
+  {
+    render: Basic,
+    play: Basic.play,
+    parameters: { chromatic: { delay: 2000 } },
+  },
   { variants: ['400%'] },
 );
 
-export const WithField = () => {
+export const WithField = (args: DateLookupProps) => {
   const [value, setValue] = useState<Date | null>(epoch);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
-  const placeholder = text('placeholder', 'Select date');
-  const id = text('id', 'date-lookup');
-
-  const clearable = boolean('clearable', true);
-
   return (
     <Field label="Date lookup">
       <DateLookup
-        disabled={disabled}
-        id={id}
-        label={label}
-        min={thePast}
-        max={theFuture}
-        monthFormat={monthFormat}
-        placeholder={placeholder}
-        size={size}
+        {...args}
+        min={args.min ? new Date(args.min) : thePast}
+        max={args.max ? new Date(args.max) : theFuture}
         value={value}
-        clearable={clearable}
-        onChange={(v) => {
-          console.log(v);
-          setValue(v);
-        }}
+        onChange={(v) => setValue(v)}
       />
     </Field>
   );
 };
 
-export const RightAligned = () => {
+export const RightAligned = (args: DateLookupProps) => {
   const [value, setValue] = useState<Date | null>(epoch);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
-  const placeholder = text('placeholder', 'placeholder');
-
-  const minvalue = date('minvalue', thePast);
-  const maxvalue = date('maxvalue', theFuture);
-  const clearable = boolean('clearable', false);
-
   return (
     <div className="row">
       <div className="col-xs-6">
@@ -115,16 +92,11 @@ export const RightAligned = () => {
       </div>
       <div className="col-xs-6">
         <DateLookup
+          {...args}
           id="right-aligned"
-          disabled={disabled}
-          label={label}
-          min={new Date(minvalue)}
-          max={new Date(maxvalue)}
-          monthFormat={monthFormat}
-          placeholder={placeholder}
-          size={size}
+          min={args.min ? new Date(args.min) : thePast}
+          max={args.max ? new Date(args.max) : theFuture}
           value={value}
-          clearable={clearable}
           onChange={(v) => setValue(v)}
         />
       </div>

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -1,6 +1,6 @@
-import { StoryFn } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
-import { action } from '@storybook/addon-actions';
+import { StoryFn } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+import { action } from 'storybook/actions';
 import { useState } from 'react';
 
 import DateLookup, { type DateLookupProps } from './DateLookup';

package/src/dateLookup/DateLookup.tsx

@@ -353,7 +353,10 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
 
 export const DateLookupWithoutInputAttributes = DateLookup;
 
-export default withInputAttributes(
+const WrappedDateLookup = withInputAttributes(
   DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,
   { nonLabelable: true },
 );
+WrappedDateLookup.displayName = 'DateLookup';
+
+export default WrappedDateLookup;