@transferwise/components 46.119.5 → 46.120.1

package/src/avatar/Avatar.story.tsx

@@ -3,9 +3,9 @@ import * as wiseIcons from '@transferwise/icons';
 import { Flag } from '@wise/art';
 
 import { Size } from '../common';
-import { storyConfig } from '../test-utils';
 
 import Avatar, { AvatarType } from '.';
+import { allModes } from '../../.storybook/modes';
 
 /**
  * @deprecated use **`AvatarView`** components instead
@@ -40,193 +40,197 @@ export const FlagStory: Story = {
   },
 };
 
-export const Table: Story = storyConfig(
-  {
-    render: () => {
-      const flagJPY = <Flag code="JPY" />;
-      const flagGBP = <Flag code="GBP" />;
-      const backgroundColor = '#d6f5e3';
-      const emoji = '✈️';
-      const initials = 'GN';
-      const Icon = wiseIcons.Check;
+export const Table: Story = {
+  render: () => {
+    const flagJPY = <Flag code="JPY" />;
+    const flagGBP = <Flag code="GBP" />;
+    const backgroundColor = '#d6f5e3';
+    const emoji = '✈️';
+    const initials = 'GN';
+    const Icon = wiseIcons.Check;
 
-      return (
-        <div>
-          <table>
-            Outlined
-            <tr>
-              <td>
-                <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL} outlined>
-                  {flagJPY}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={56} type={AvatarType.THUMBNAIL} outlined>
-                  {flagJPY}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL} outlined>
-                  {flagJPY}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={40} type={AvatarType.THUMBNAIL} outlined>
-                  {flagJPY}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL} outlined>
-                  {flagJPY}
-                </Avatar>
-              </td>
-            </tr>
-            Image URL
-            <tr>
-              <td>
-                <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL}>
-                  {flagGBP}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={56} type={AvatarType.THUMBNAIL}>
-                  {flagGBP}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL}>
-                  {flagGBP}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={40} type={AvatarType.THUMBNAIL}>
-                  {flagGBP}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL}>
-                  {flagGBP}
-                </Avatar>
-              </td>
-            </tr>
-            Emoji
-            <tr>
-              <td>
-                <Avatar size={Size.LARGE} type={AvatarType.EMOJI}>
-                  {emoji}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={56} type={AvatarType.EMOJI}>
-                  {emoji}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.MEDIUM} type={AvatarType.EMOJI}>
-                  {emoji}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={40} type={AvatarType.EMOJI}>
-                  {emoji}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.SMALL} type={AvatarType.EMOJI}>
-                  {emoji}
-                </Avatar>
-              </td>
-            </tr>
-            <div style={{ paddingBottom: '20px' }}>
-              <span style={{ position: 'absolute' }}>Custom background and icon</span>
-            </div>
-            <tr>
-              <td>
-                <Avatar size={Size.LARGE} type={AvatarType.ICON} backgroundColor={backgroundColor}>
-                  <Icon size={24} />
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={56} type={AvatarType.ICON} backgroundColor={backgroundColor}>
-                  <Icon size={24} />
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.MEDIUM} type={AvatarType.ICON} backgroundColor={backgroundColor}>
-                  <Icon size={24} />
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={40} type={AvatarType.ICON} backgroundColor={backgroundColor}>
-                  <Icon size={24} />
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={Size.SMALL} type={AvatarType.ICON} backgroundColor={backgroundColor}>
-                  <Icon size={16} />
-                </Avatar>
-              </td>
-            </tr>
-            Initials
-            <tr>
-              <td>
-                <Avatar size={72} type={AvatarType.INITIALS}>
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={56} type={AvatarType.INITIALS}>
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={48} type={AvatarType.INITIALS}>
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={40} type={AvatarType.INITIALS}>
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={24} type={AvatarType.INITIALS}>
-                  {initials}
-                </Avatar>
-              </td>
-            </tr>
-            Branded
-            <tr>
-              <td>
-                <Avatar size={72} type={AvatarType.INITIALS} backgroundColorSeed="1">
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={56} type={AvatarType.INITIALS} backgroundColorSeed="2">
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={48} type={AvatarType.INITIALS} backgroundColorSeed="3">
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={40} type={AvatarType.INITIALS} backgroundColorSeed="4">
-                  {initials}
-                </Avatar>
-              </td>
-              <td>
-                <Avatar size={24} type={AvatarType.INITIALS} backgroundColorSeed="5">
-                  {initials}
-                </Avatar>
-              </td>
-            </tr>
-          </table>
-        </div>
-      );
+    return (
+      <div>
+        <table>
+          Outlined
+          <tr>
+            <td>
+              <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL} outlined>
+                {flagJPY}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={56} type={AvatarType.THUMBNAIL} outlined>
+                {flagJPY}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL} outlined>
+                {flagJPY}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={40} type={AvatarType.THUMBNAIL} outlined>
+                {flagJPY}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL} outlined>
+                {flagJPY}
+              </Avatar>
+            </td>
+          </tr>
+          Image URL
+          <tr>
+            <td>
+              <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL}>
+                {flagGBP}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={56} type={AvatarType.THUMBNAIL}>
+                {flagGBP}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL}>
+                {flagGBP}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={40} type={AvatarType.THUMBNAIL}>
+                {flagGBP}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL}>
+                {flagGBP}
+              </Avatar>
+            </td>
+          </tr>
+          Emoji
+          <tr>
+            <td>
+              <Avatar size={Size.LARGE} type={AvatarType.EMOJI}>
+                {emoji}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={56} type={AvatarType.EMOJI}>
+                {emoji}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.MEDIUM} type={AvatarType.EMOJI}>
+                {emoji}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={40} type={AvatarType.EMOJI}>
+                {emoji}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.SMALL} type={AvatarType.EMOJI}>
+                {emoji}
+              </Avatar>
+            </td>
+          </tr>
+          <div style={{ paddingBottom: '20px' }}>
+            <span style={{ position: 'absolute' }}>Custom background and icon</span>
+          </div>
+          <tr>
+            <td>
+              <Avatar size={Size.LARGE} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                <Icon size={24} />
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={56} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                <Icon size={24} />
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.MEDIUM} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                <Icon size={24} />
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={40} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                <Icon size={24} />
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={Size.SMALL} type={AvatarType.ICON} backgroundColor={backgroundColor}>
+                <Icon size={16} />
+              </Avatar>
+            </td>
+          </tr>
+          Initials
+          <tr>
+            <td>
+              <Avatar size={72} type={AvatarType.INITIALS}>
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={56} type={AvatarType.INITIALS}>
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={48} type={AvatarType.INITIALS}>
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={40} type={AvatarType.INITIALS}>
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={24} type={AvatarType.INITIALS}>
+                {initials}
+              </Avatar>
+            </td>
+          </tr>
+          Branded
+          <tr>
+            <td>
+              <Avatar size={72} type={AvatarType.INITIALS} backgroundColorSeed="1">
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={56} type={AvatarType.INITIALS} backgroundColorSeed="2">
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={48} type={AvatarType.INITIALS} backgroundColorSeed="3">
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={40} type={AvatarType.INITIALS} backgroundColorSeed="4">
+                {initials}
+              </Avatar>
+            </td>
+            <td>
+              <Avatar size={24} type={AvatarType.INITIALS} backgroundColorSeed="5">
+                {initials}
+              </Avatar>
+            </td>
+          </tr>
+        </table>
+      </div>
+    );
+  },
+  parameters: {
+    variants: ['default', 'dark', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
     },
   },
-  { variants: ['default', 'dark', 'rtl'] },
-);
+};

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

@@ -1,9 +1,9 @@
-import { Meta } from '@storybook/react-webpack5';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
 import { expect, userEvent, within } from 'storybook/test';
-import { storyConfig } from '../../test-utils';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
+import { allModes } from '../../../.storybook/modes';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -12,128 +12,131 @@ const meta: Meta<typeof Button> = {
 };
 export default meta;
 
-export const FocusTertiary = storyConfig(
-  {
-    render: () => (
-      <Button v2 priority="tertiary">
-        Focus has underline
-      </Button>
-    ),
+type Story = StoryObj<typeof Button>;
+
+export const FocusTertiary: Story = {
+  render: () => (
+    <Button v2 priority="tertiary">
+      Focus has underline
+    </Button>
+  ),
+  play: async ({ canvasElement }) => {
+    await userEvent.tab();
+    const canvas = within(canvasElement);
+    const buttonElement: HTMLButtonElement = canvas.getByRole('button');
+    await expect(buttonElement).toHaveFocus();
   },
-  {},
-);
-FocusTertiary.play = async ({ canvasElement }) => {
-  await userEvent.tab();
-  const canvas = within(canvasElement);
-  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
-  await expect(buttonElement).toHaveFocus();
 };
 
 const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
 const buttonSizes = ['sm', 'md', 'lg'] as const;
-export const AllVariants = storyConfig(
-  {
-    tags: ['!autodocs'],
-    parameters: {
-      padding: '0',
+export const AllVariants: Story = {
+  tags: ['!autodocs'],
+  parameters: {
+    padding: '0',
+    variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+      rtl: allModes.rtl,
     },
-    render: () => (
-      <div
-        className="button-variants"
-        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
-      >
-        {buttonPriorities.map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-default-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+  },
+  render: () => (
+    <div
+      className="button-variants"
+      style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
+    >
+      {buttonPriorities.map((priority) =>
+        buttonSizes.map((size) => (
+          <div
+            key={`${priority}-default-${size}`}
+            style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+          >
+            <Button
+              v2
+              priority={priority as ButtonPriority}
+              size={size}
+              addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              block
             >
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-              >
-                {`${priority} default ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{
-                  type: 'avatar',
-                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-                }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                disabled
-              >
-                {`${priority} default ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                loading
-              >
-                {`${priority} default ${size} Loading`}
-              </Button>
-            </div>
-          )),
-        )}
-        {['primary', 'secondary'].map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-negative-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+              {`${priority} default ${size}`}
+            </Button>
+            <Button
+              className="m-t-1 m-b-1"
+              v2
+              priority={priority as ButtonPriority}
+              size={size}
+              addonStart={{
+                type: 'avatar',
+                value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
+              }}
+              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              block
+              disabled
             >
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-              >
-                {`${priority} negative ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                disabled
-              >
-                {`${priority} negative ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                loading
-              >
-                {`${priority} negative ${size} Loading`}
-              </Button>
-            </div>
-          )),
-        )}
-      </div>
-    ),
-  },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-);
+              {`${priority} default ${size} Disabled`}
+            </Button>
+            <Button
+              v2
+              priority={priority as ButtonPriority}
+              size={size}
+              addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              block
+              loading
+            >
+              {`${priority} default ${size} Loading`}
+            </Button>
+          </div>
+        )),
+      )}
+      {['primary', 'secondary'].map((priority) =>
+        buttonSizes.map((size) => (
+          <div
+            key={`${priority}-negative-${size}`}
+            style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+          >
+            <Button
+              v2
+              sentiment="negative"
+              priority={priority as ButtonPriority}
+              size={size}
+              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              block
+            >
+              {`${priority} negative ${size}`}
+            </Button>
+            <Button
+              className="m-t-1 m-b-1"
+              v2
+              sentiment="negative"
+              priority={priority as ButtonPriority}
+              size={size}
+              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              block
+              disabled
+            >
+              {`${priority} negative ${size} Disabled`}
+            </Button>
+            <Button
+              v2
+              sentiment="negative"
+              priority={priority as ButtonPriority}
+              size={size}
+              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              block
+              loading
+            >
+              {`${priority} negative ${size} Loading`}
+            </Button>
+          </div>
+        )),
+      )}
+    </div>
+  ),
+};