@transferwise/components 46.100.1 → 46.100.2

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
 import { Flag } from '@wise/art';

package/src/avatarLayout/AvatarLayout.tsx

@@ -84,7 +84,7 @@ export default function AvatarLayout({
 const DIAGONAL_LAYOUT_STYLE_CONFIG = {
   // Diagonal layout doesn't support 16 size
   16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },
-  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },
+  24: { avatarSize: 16, offset: 2.5, fontSize: 8, iconSize: 11.25 },
   32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },
   40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },
   48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },

package/src/avatarView/AvatarView.story.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   Camera,
   Convert,

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { ProfileType, Sentiment, Status } from '../common';
 
@@ -9,7 +9,8 @@ import AvatarWrapper from './AvatarWrapper';
  */
 export default {
   component: AvatarWrapper,
-  title: 'Content/AvatarWrapper (Deprecated)',
+  title: 'Content/AvatarWrapper',
+  tags: ['deprecated'],
 } satisfies Meta<typeof AvatarWrapper>;
 
 type Story = StoryObj<typeof AvatarWrapper>;

package/src/badge/Badge.story.tsx

@@ -1,20 +1,42 @@
-import { text, select } from '@storybook/addon-knobs';
-
+import { Meta } from '@storybook/react-webpack5';
 import { default as AvatarComponent, AvatarType } from '../avatar';
 import { Size, Theme } from '../common';
-
-import Badge from './Badge';
+import Badge, { type BadgeProps } from './Badge';
 
 /**
  * @deprecated use **`<AvatarView badge={..} />`** components instead
  */
-export default {
+const meta: Meta<typeof Badge> = {
   component: Badge,
-  title: 'Content/Badge (Deprecated)',
-  excludeStories: ['ExampleBadgeCss'],
+  title: 'Content/Badge',
+  tags: ['deprecated'],
 };
 
-export const ExampleBadgeCss = {
+export default meta;
+
+/**
+ * Used for showing multiple components within a Canvas.
+ * @decorator
+ */
+const withComponentGrid =
+  (maxWidth = 'auto') =>
+  (Story: any) => (
+    <div
+      style={{
+        width: '100%',
+        placeItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '2rem',
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+const ExampleBadgeStyle = {
   background: 'var(--color-content-positive)',
   width: '100%',
   height: '100%',
@@ -25,47 +47,46 @@ export const ExampleBadgeCss = {
   alignItems: 'center',
 };
 
-export const Avatar = () => {
-  const BadgeText = text('BadgeText', 'B');
-  const border = select('Border', [undefined, Theme.LIGHT, Theme.DARK], Theme.LIGHT);
-
-  return (
-    <div>
-      <div style={{ display: 'inline', margin: 8 }}>
+export const LegacyAvatarWithBadge = {
+  decorators: [withComponentGrid()],
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+    },
+  },
+  render: () => {
+    return (
+      <>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.LARGE}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.LARGE}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
 
-      <div style={{ display: 'inline', margin: 8 }}>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.MEDIUM}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
 
-      <div style={{ display: 'inline', margin: 8 }}>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.SMALL}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
-    </div>
-  );
+      </>
+    );
+  },
 };

package/src/button/Button.accessibility.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 import { NavigationOption } from '..';
 import { Bulb } from '@transferwise/icons';
 import * as stories from './Button.story';

package/src/button/Button.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 { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';

package/src/button/Button.tests.story.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import Button from './Button.resolver';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { storyConfig } from '../test-utils';
 
 const meta: Meta<typeof Button> = {

package/src/button/LegacyButton.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn, expect } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, fn, expect } from 'storybook/test';
 import { useState } from 'react';
 
 import Button from '.';
@@ -25,6 +25,7 @@ const withContainer = (Story: any) => (
 const meta: Meta<typeof LegacyButton> = {
   component: LegacyButton,
   title: 'Actions/Button/Legacy Button',
+  tags: ['deprecated'],
   args: {
     size: undefined,
     priority: undefined,

package/src/card/Card.story.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 import Card from '.';
 

package/src/carousel/Carousel.story.tsx

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-webpack5';
 import { Illustration } from '@wise/art';
 import React from 'react';
 

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 });