@transferwise/components 0.0.0-experimental-09066ec → 0.0.0-experimental-148ffef

package/src/actionButton/ActionButton.test.story.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Settings } from '@transferwise/icons';
+import ActionButton from './ActionButton';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof ActionButton> = {
+  component: ActionButton,
+  tags: ['!autodocs', '!manifest', 'deprecated'],
+  title: 'Actions/ActionButton/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof ActionButton>;
+
+export const DisabledVariants: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+      <div>
+        <ActionButton priority="primary" {...args}>
+          Primary label
+        </ActionButton>
+        <ActionButton priority="secondary" {...args}>
+          Secondary label
+        </ActionButton>
+        <ActionButton priority="tertiary" {...args}>
+          Tertiary label
+        </ActionButton>
+      </div>
+      <div>
+        <ActionButton priority="primary" {...args}>
+          <Settings />
+          Primary label
+        </ActionButton>
+        <ActionButton priority="secondary" {...args}>
+          <Settings />
+          Secondary label
+        </ActionButton>
+        <ActionButton priority="tertiary" {...args}>
+          <Settings />
+          Tertiary label
+        </ActionButton>
+      </div>
+    </div>
+  ),
+  args: {
+    disabled: true,
+  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
+};

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-key */
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
-import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
+import { Freeze } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
@@ -181,110 +181,6 @@ export const Horizontal: Story = {
   ),
 };
 
-export const EdgeInstances: Story = {
-  render: () => (
-    <div
-      style={{
-        gap: '1em',
-        display: 'grid',
-        justifyContent: 'space-between',
-        gridTemplate: `auto auto / repeat(2, min-content)`,
-      }}
-    >
-      <AvatarLayout orientation="diagonal" avatars={[]} />
-
-      <AvatarLayout orientation="diagonal" avatars={[{}]} />
-
-      <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
-      <AvatarLayout orientation="diagonal" size={16} avatars={[{ profileName: 'Jay Jay' }]} />
-
-      <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
-      <AvatarLayout orientation="diagonal" size={24} avatars={[{ asset: <Flag code="gb" /> }]} />
-
-      <AvatarLayout
-        orientation="diagonal"
-        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          { imgSrc: '../avatar-squere-dude.webp' },
-          { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          { imgSrc: '../avatar-square-dude.webp' },
-          {
-            asset: <Plane />,
-            style: { backgroundColor: 'var(--color-bright-pink)' },
-          },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          {
-            asset: <Graph />,
-            style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
-          },
-          {
-            asset: <Rewards />,
-            style: { color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' },
-          },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        interactive
-        avatars={[
-          { asset: <Flag code="gb" /> },
-          { asset: '3+', style: { border: '1px dashed var(--color-border-neutral)' } },
-        ]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        avatars={[{ imgSrc: '../avatar-rectangle-fox.webp' }, { profileName: 'Jay Jay' }]}
-      />
-
-      <AvatarLayout
-        interactive
-        orientation="horizontal"
-        avatars={[
-          { imgSrc: '../avatar-rectangle-fox.webp' },
-          { imgSrc: '../avatar-square-dude.webp' },
-          { asset: '7+' },
-        ]}
-      />
-
-      <AvatarLayout
-        interactive
-        orientation="horizontal"
-        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        avatars={[
-          { asset: <Flag code="gb" /> },
-          { asset: <Flag code="br" /> },
-          { asset: <Flag code="jp" /> },
-          { asset: '3+' },
-        ]}
-      />
-    </div>
-  ),
-};
-
 /**
  * Like [AvatarView](?path=/docs/content-avatarview--docs#sentiment-awareness), `AvatarLayout` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
  * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.

package/src/avatarLayout/AvatarLayout.test.story.tsx

@@ -0,0 +1,117 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import AvatarLayout from '.';
+import { Freeze, Plane } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+
+const meta: Meta<typeof AvatarLayout> = {
+  component: AvatarLayout,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Content/AvatarLayout/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof AvatarLayout>;
+
+export const EdgeInstances: Story = {
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(2, min-content)`,
+      }}
+    >
+      <AvatarLayout orientation="diagonal" avatars={[]} />
+
+      <AvatarLayout orientation="diagonal" avatars={[{}]} />
+
+      <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
+      <AvatarLayout orientation="diagonal" size={16} avatars={[{ profileName: 'Jay Jay' }]} />
+
+      <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
+      <AvatarLayout orientation="diagonal" size={24} avatars={[{ asset: <Flag code="gb" /> }]} />
+
+      <AvatarLayout
+        orientation="diagonal"
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { imgSrc: '../avatar-squere-dude.webp' },
+          { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { imgSrc: '../avatar-square-dude.webp' },
+          {
+            asset: <Plane />,
+            style: { backgroundColor: 'var(--color-bright-pink)' },
+          },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          {
+            asset: <Freeze />,
+            style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
+          },
+          {
+            asset: <Freeze />,
+            style: { color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' },
+          },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { asset: <Flag code="gb" /> },
+          { asset: '3+', style: { border: '1px dashed var(--color-border-neutral)' } },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        avatars={[{ imgSrc: '../avatar-rectangle-fox.webp' }, { profileName: 'Jay Jay' }]}
+      />
+
+      <AvatarLayout
+        interactive
+        orientation="horizontal"
+        avatars={[
+          { imgSrc: '../avatar-rectangle-fox.webp' },
+          { imgSrc: '../avatar-square-dude.webp' },
+          { asset: '7+' },
+        ]}
+      />
+
+      <AvatarLayout
+        interactive
+        orientation="horizontal"
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        avatars={[
+          { asset: <Flag code="gb" /> },
+          { asset: <Flag code="br" /> },
+          { asset: <Flag code="jp" /> },
+          { asset: '3+' },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/avatarView/AvatarView.story.tsx

@@ -5,25 +5,19 @@ import {
   Convert,
   FastFlag,
   Freeze,
-  Graph,
-  Money,
   Leaf,
   Plane,
-  PlusCircle,
   QrCode,
-  Rewards,
   Target,
   Team,
   Transport,
   Wallet,
   Water,
   Bank,
-  GiftBox,
 } from '@transferwise/icons';
 import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
-import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
-import Display from '../display';
+import { ProfileType } from '../common';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
 
@@ -490,100 +484,3 @@ export const SentimentAwareness: Story = {
   },
   decorators: [withComponentGrid],
 };
-
-export const ProfileBrokenImageFallback: Story = {
-  parameters: {
-    chromatic: {
-      delay: 5000,
-    },
-  },
-  render: () => {
-    const assetUrl = 'https://test.com/img-wrong-url.test';
-    return (
-      <>
-        <AvatarView />
-        <AvatarView imgSrc={assetUrl} />
-        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} />
-        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} profileName="Test Name" />
-      </>
-    );
-  },
-};
-
-export const EdgeInstaces: Story = {
-  render: () => {
-    const css = `.custom-variant {
-      border: 1px dashed var(--color-border-neutral);
-    }`;
-    return (
-      <div
-        style={{
-          gap: '1em',
-          display: 'grid',
-          justifyContent: 'space-between',
-          gridTemplate: 'auto auto / repeat(2, min-content)',
-        }}
-      >
-        <style>{css}</style>
-        <AvatarView
-          interactive
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: 'var(--color-bright-orange)' }}
-        >
-          <Money />
-        </AvatarView>
-        <AvatarView
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
-        >
-          <Money />
-        </AvatarView>
-        <AvatarView interactive className="custom-variant">
-          <PlusCircle />
-        </AvatarView>
-        <AvatarView interactive className="custom-variant">
-          {null}
-        </AvatarView>
-        <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
-          <Graph />
-        </AvatarView>
-        <AvatarView
-          interactive
-          style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}
-        >
-          <Graph />
-        </AvatarView>
-        <AvatarView style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}>
-          <Rewards />
-        </AvatarView>
-        <AvatarView
-          interactive
-          style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}
-        >
-          <Rewards />
-        </AvatarView>
-        <AvatarView
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView
-          interactive
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView>9+</AvatarView>
-        <AvatarView interactive>5+</AvatarView>
-      </div>
-    );
-  },
-};

package/src/avatarView/AvatarView.test.story.tsx

@@ -0,0 +1,114 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Graph, Money, PlusCircle, Rewards } from '@transferwise/icons';
+import AvatarView from '.';
+import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
+import Display from '../display';
+
+const meta: Meta<typeof AvatarView> = {
+  component: AvatarView,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Content/AvatarView/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof AvatarView>;
+
+const profileName1 = 'Wolter White';
+const profileName2 = 'Tyler Durden';
+
+export const EdgeInstances: Story = {
+  render: () => {
+    const css = `.custom-variant {
+      border: 1px dashed var(--color-border-neutral);
+    }`;
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: 'auto auto / repeat(2, min-content)',
+        }}
+      >
+        <style>{css}</style>
+        <AvatarView
+          interactive
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: 'var(--color-bright-orange)' }}
+        >
+          <Money />
+        </AvatarView>
+        <AvatarView
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
+        >
+          <Money />
+        </AvatarView>
+        <AvatarView interactive className="custom-variant">
+          <PlusCircle />
+        </AvatarView>
+        <AvatarView interactive className="custom-variant">
+          {null}
+        </AvatarView>
+        <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
+          <Graph />
+        </AvatarView>
+        <AvatarView
+          interactive
+          style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}
+        >
+          <Graph />
+        </AvatarView>
+        <AvatarView style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}>
+          <Rewards />
+        </AvatarView>
+        <AvatarView
+          interactive
+          style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}
+        >
+          <Rewards />
+        </AvatarView>
+        <AvatarView
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView
+          interactive
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView>9+</AvatarView>
+        <AvatarView interactive>5+</AvatarView>
+      </div>
+    );
+  },
+};
+
+export const ProfileBrokenImageFallback: Story = {
+  parameters: {
+    chromatic: {
+      delay: 5000,
+    },
+  },
+  render: () => {
+    const assetUrl = 'https://test.com/img-wrong-url.test';
+    return (
+      <>
+        <AvatarView />
+        <AvatarView imgSrc={assetUrl} />
+        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} />
+        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} profileName="Test Name" />
+      </>
+    );
+  },
+};

package/src/button/LegacyButton.story.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within, fn, expect } from 'storybook/test';
-import { useState } from 'react';
+import { fn } from 'storybook/test';
 
 import Button from '.';
 import LegacyButton from './LegacyButton';
@@ -170,30 +169,6 @@ export const Variants: Story = {
   },
 };
 
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-export const Focused: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await expect(button).toHaveTextContent('Focused!');
-  },
-  render: function Render(args: React.ComponentProps<typeof Button>) {
-    const [focused, setFocused] = useState(false);
-
-    return (
-      <Button {...args} onFocus={() => setFocused(true)}>
-        {focused ? 'Focused!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
 export const SocialMedia: Story = {
   render: () => {
     return (

package/src/button/LegacyButton.test.story.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, expect } from 'storybook/test';
+import { useState } from 'react';
+
+import Button from '.';
+import LegacyButton from './LegacyButton';
+
+LegacyButton.displayName = 'Button';
+
+const meta: Meta<typeof LegacyButton> = {
+  component: LegacyButton,
+  title: 'Actions/Button/Legacy Button/Tests',
+  tags: ['!autodocs', '!manifest', 'deprecated'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Focused: Story = {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await expect(button).toHaveTextContent('Focused!');
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [focused, setFocused] = useState(false);
+
+    return (
+      <Button {...args} onFocus={() => setFocused(true)}>
+        {focused ? 'Focused!' : 'Button text'}
+      </Button>
+    );
+  },
+};

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

@@ -455,46 +455,36 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
   },
 };
 
-export const Disabled: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <Button {...props} {...previewProps}>
-        Disabled button
-      </Button>
-    );
-  },
-  argTypes: {
-    ...hideControls(['block']),
-    ...previewArgTypes,
-  },
-  args: {
-    disabled: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-};
-
-export const Loading: StoryObj<PreviewStoryArgs> = {
+/**
+ * Buttons can be in `disabled` or `loading` states to indicate they're not currently actionable.
+ */
+export const States: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <Button {...props} {...previewProps}>
-        Button as anchor
-      </Button>
+      <>
+        <Button {...props} {...previewProps} v2>
+          Default
+        </Button>
+        <Button {...props} {...previewProps} v2 disabled>
+          Disabled
+        </Button>
+        <Button {...props} {...previewProps} v2 loading>
+          Loading
+        </Button>
+      </>
     );
   },
   argTypes: {
-    ...hideControls(['block']),
+    ...hideControls(['disabled', 'loading', 'block']),
     ...previewArgTypes,
   },
   args: {
-    loading: true,
     previewAddonStart: false,
     previewAddonEnd: false,
   },
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -786,20 +776,6 @@ export const DealingWithLongText: StoryObj<PreviewStoryArgs> = {
   },
 };
 
-export const AccessibilityAddons: Story = {
-  args: {
-    v2: true,
-    addonStart: {
-      type: 'avatar',
-      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
-    },
-    'aria-label': 'Convert Real to Yen',
-    children: 'Convert',
-    size: 'md',
-  },
-  tags: ['!autodocs', '!dev'],
-};
-
 /**
  * `Button` is sentiment-aware and will automatically adjust its colours if wrapped inside
  * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component