@transferwise/components 46.100.0 → 46.100.2

package/src/badge/Badge.story.tsx

@@ -1,21 +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 {
-  tags: ['autodocs'],
+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%',
@@ -26,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/body/Body.story.tsx

@@ -6,7 +6,6 @@ import Body from './Body';
 export default {
   title: 'Typography/Body',
   component: Body,
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {

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';
@@ -272,7 +272,7 @@ const meta: Meta<typeof Button> = {
     children: 'Button text',
     onClick: fn(),
   },
-  tags: ['autodocs'],
+
   decorators: [withContainer],
   parameters: {
     docs: {

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,
@@ -85,7 +86,7 @@ const meta: Meta<typeof LegacyButton> = {
       },
     },
   },
-  tags: ['autodocs'],
+
   decorators: [withContainer],
 };
 

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 '.';
 
@@ -22,7 +22,6 @@ const meta: Meta<typeof Card> = {
     onClick: fn(),
     as: 'div',
   },
-  tags: ['autodocs'],
 };
 
 export default meta;

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';
@@ -13,7 +13,6 @@ const meta: Meta<typeof Checkbox> = {
     label: 'This is the label',
     onChange: fn(),
   },
-  tags: ['autodocs'],
 };
 export default meta;
 

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';
@@ -7,7 +7,7 @@ import CheckboxButton from './CheckboxButton';
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
-  tags: ['autodocs'],
+
   args: {
     disabled: false,
     onBlur: action('blur'),

package/src/checkboxOption/CheckboxOption.story.tsx

@@ -1,67 +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',
-  tags: ['autodocs'],
+  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,11 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Chevron from './Chevron';
 
 export default {
   component: Chevron,
   title: 'Other/Chevron',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Chevron>;
 
 type Story = StoryObj<typeof 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';
@@ -6,7 +6,6 @@ import Chips, { ChipsProps, ChipValue } from './Chips';
 const meta: Meta<typeof Chips> = {
   title: 'Actions/Chips',
   component: Chips,
-  tags: ['autodocs'],
 };
 export default meta;
 

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';
@@ -11,7 +11,7 @@ import Body from '../body';
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
-  tags: ['autodocs'],
+
   args: {
     children: 'Button text',
     icon: <Icons.Freeze />,

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';
 
@@ -16,13 +16,14 @@ export default {
   component: BottomSheet,
   title: 'Dialogs/BottomSheet',
   args: {
-    open: true,
+    open: false,
   },
-  render: (args) => {
-    const [open, setOpen] = useState(args.open);
+
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
 
     return (
-      <div style={{ height: '2000px' }}>
+      <div>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
         <BottomSheet
           {...args}

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';
@@ -9,7 +9,6 @@ import Card from '.';
 const meta: Meta<typeof Card> = {
   component: Card,
   title: 'Internal/Card',
-  tags: ['autodocs'],
 };
 
 export default meta;

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';
 
@@ -14,7 +14,6 @@ export default {
 type Story = StoryObj<typeof Circle>;
 
 export const Basic: Story = {
-  tags: ['autodocs'],
   args: {
     children: 'NP',
     size: 40,

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', null],
-    ])('locale "%s" -> language "%s"', (locale, expectedValue) => {
-      expect(getLangFromLocale(locale)).toBe(expectedValue);
-    });
+      ['nl-nl', 'nl'],
+    ])(
+      '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/locale/index.ts

@@ -13,6 +13,7 @@ export const RTL_LANGUAGES = ['ar', 'he'];
  */
 export const SUPPORTED_LANGUAGES = [
   DEFAULT_LANG,
+  'cs',
   'de',
   'es',
   'fr',
@@ -20,6 +21,7 @@ export const SUPPORTED_LANGUAGES = [
   'id',
   'it',
   'ja',
+  'nl',
   'pl',
   'pt',
   'ro',

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';
@@ -6,7 +6,6 @@ import { storyConfig } from '../test-utils';
 export default {
   component: CriticalCommsBanner,
   title: 'Feedback/CriticalCommsBanner',
-  tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 export const Basic = {

package/src/dateInput/DateInput.story.tsx

@@ -1,12 +1,11 @@
-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 '..';
 
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
   title: 'Forms/DateInput',
-  tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
 export default meta;