@transferwise/components 0.0.0-experimental-b26a3c1 → 0.0.0-experimental-f2eec9e

package/src/button/Button.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
+import { Freeze, ArrowRight, ArrowLeft, ChevronRight, ChevronLeft } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';
 import type { ButtonProps, ButtonPriority } from './Button.types';
@@ -39,8 +39,9 @@ const withComponentGrid =
  */
 const hideControls = (args: string[]) => {
   const hidden = [
-    'addonStart',
-    'addonEnd',
+    'avatars',
+    'iconStart',
+    'iconEnd',
     'onClick',
     'onBlur',
     'onFocus',
@@ -53,88 +54,84 @@ const hideControls = (args: string[]) => {
   return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
 };
 
+/**
+ * SB code generation is often not ideal, rendering confusing source.
+ * This helper makes icon values more understandable for the stories below.
+ */
+const augmentIconProps = ({ start = 'Freeze', end = 'ArrowRight' } = {}) => ({
+  docs: {
+    source: {
+      transform(value: string): string {
+        return value
+          .replace(/iconStart=.*?\}+/g, `iconStart={${start}}`)
+          .replace(/iconEnd=.*?\}+/g, `iconEnd={${end}}`);
+      },
+    },
+  },
+});
+
 /**
  * Convenience controls for previewing rich markup,
  * not otherwise possible via Storybook
  */
 type PreviewStoryArgs = Parameters<typeof Button>[0] & {
-  previewAddonStart: boolean | ButtonProps['addonStart'];
-  previewAddonEnd: boolean | ButtonProps['addonEnd'];
+  previewAvatars: boolean | ButtonProps['avatars'];
+  previewIconStart: boolean | ButtonProps['iconStart'];
+  previewIconEnd: boolean | ButtonProps['iconEnd'];
 };
 const previewArgTypes = {
-  previewAddonStart: {
-    control: 'select',
-    options: [
-      'undefined',
-      'icon',
-      'avatar: flag',
-      'avatar: initials',
-      'avatar: icon',
-      'avatar: image',
-      'avatar: double',
-    ],
-    name: 'Preview with `addonStart`',
+  previewIconStart: {
+    control: 'boolean',
+    name: 'Show with `iconStart`',
     mapping: {
-      undefined,
-      icon: {
-        type: 'icon',
-        value: <Freeze />,
-      },
-      'avatar: flag': {
-        type: 'avatar',
-        value: [{ asset: <Flag code="pl" /> }],
-      },
-      'avatar: initials': {
-        type: 'avatar',
-        value: [{ profileName: 'Jay Jay' }],
-      },
-      'avatar: icon': {
-        type: 'avatar',
-        value: [{ asset: <Freeze /> }],
-      },
-      'avatar: image': {
-        type: 'avatar',
-        value: [{ imgSrc: '../avatar-square-dude.webp' }],
-      },
-      'avatar: double': {
-        type: 'avatar',
-        value: [{ asset: <Flag code="gb" /> }, { imgSrc: '../avatar-square-dude.webp' }],
-      },
+      true: Freeze,
     },
     table: {
       category: 'Preview options',
-      type: {
-        summary: undefined,
-      },
     },
   },
-  previewAddonEnd: {
+  previewIconEnd: {
     control: 'boolean',
-    name: 'Preview with `addonEnd`',
+    name: 'Show with `iconEnd`',
     mapping: {
-      true: { type: 'icon', value: <ArrowRight /> },
+      true: ArrowRight,
+    },
+    table: {
+      category: 'Preview options',
+    },
+  },
+  previewAvatars: {
+    control: 'select',
+    options: ['undefined', 'flag', 'initials', 'icon', 'image', 'double'],
+    name: 'Show with Avatar',
+    mapping: {
+      undefined,
+      flag: [{ asset: <Flag code="pl" /> }],
+      initials: [{ profileName: 'Jay Jay' }],
+      icon: [{ asset: <Freeze /> }],
+      image: [{ imgSrc: '../avatar-square-dude.webp' }],
+      double: [{ asset: <Flag code="gb" /> }, { imgSrc: '../avatar-square-dude.webp' }],
     },
     table: {
       category: 'Preview options',
-      type: {
-        summary: undefined,
-      },
     },
   },
 } as const;
 
 const getPropsForPreview = (args: PreviewStoryArgs) => {
-  const { previewAddonStart, previewAddonEnd, ...props } = args as {
-    previewAddonStart: ButtonProps['addonStart'];
-    previewAddonEnd: ButtonProps['addonEnd'];
+  const { previewAvatars, previewIconStart, previewIconEnd, ...props } = args as {
+    previewAvatars: ButtonProps['avatars'];
+    previewIconStart: ButtonProps['iconStart'];
+    previewIconEnd: ButtonProps['iconEnd'];
     props: typeof Button;
   };
 
   return [
     props,
     {
-      addonStart: previewAddonStart,
-      addonEnd: previewAddonEnd,
+      avatars: previewAvatars,
+      iconStart: previewIconStart,
+      iconEnd: previewIconEnd,
     },
   ];
 };
@@ -209,10 +206,13 @@ const meta: Meta<typeof Button> = {
       },
       description: 'If set, the component will render as an HTML anchor.',
     },
-    addonStart: {
+    iconStart: {
+      control: 'object',
+    },
+    iconEnd: {
       control: 'object',
     },
-    addonEnd: {
+    avatars: {
       control: 'object',
     },
     type: {
@@ -237,8 +237,9 @@ const meta: Meta<typeof Button> = {
     href: undefined,
     as: undefined,
     type: undefined,
-    addonStart: undefined,
-    addonEnd: undefined,
+    iconStart: undefined,
+    iconEnd: undefined,
+    avatars: undefined,
     className: undefined,
     onClick: fn(),
     children: 'Button text',
@@ -263,8 +264,9 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     onKeyDown: fn(),
     onMouseEnter: fn(),
     onMouseLeave: fn(),
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
   argTypes: {
     onClick: { table: { disable: true } },
@@ -309,10 +311,12 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
     ...previewArgTypes,
   },
   args: {
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
   decorators: [withComponentGrid('30rem')],
+  parameters: augmentIconProps(),
 };
 
 /**
@@ -346,8 +350,9 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
     ...previewArgTypes,
   },
   args: {
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
   decorators: [withComponentGrid()],
 };
@@ -379,8 +384,9 @@ export const Size: StoryObj<PreviewStoryArgs> = {
     ...previewArgTypes,
   },
   args: {
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
   decorators: [withComponentGrid()],
 };
@@ -405,8 +411,9 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
   args: {
     as: 'a',
     href: 'https://wise.com',
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
     onClick: undefined,
   },
 };
@@ -427,8 +434,9 @@ export const Disabled: StoryObj<PreviewStoryArgs> = {
   },
   args: {
     disabled: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
 };
 
@@ -448,8 +456,9 @@ export const Loading: StoryObj<PreviewStoryArgs> = {
   },
   args: {
     loading: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
 };
 
@@ -472,8 +481,9 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
   },
   args: {
     block: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
 };
 
@@ -487,20 +497,15 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
 
     return (
       <>
-        <Button {...props} v2 addonStart={{ type: 'icon', value: <Freeze /> }}>
+        <Button {...props} iconStart={Freeze}>
           With start icon
         </Button>
 
-        <Button {...props} v2 addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+        <Button {...props} iconEnd={ArrowRight}>
           With end icon
         </Button>
 
-        <Button
-          {...props}
-          v2
-          addonStart={{ type: 'icon', value: <Freeze /> }}
-          addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-        >
+        <Button {...props} iconStart={Freeze} iconEnd={ArrowRight}>
           With both icons
         </Button>
       </>
@@ -512,27 +517,7 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
   args: {
     size: 'md',
   },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<>
-  <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
-    With start icon
-  </Button>
-  
-  <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
-    With end icon
-  </Button>
-  
-  <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }} addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
-    With both icons
-  </Button>
-</>
-        `,
-      },
-    },
-  },
+  parameters: augmentIconProps(),
   decorators: [withComponentGrid()],
 };
 
@@ -546,30 +531,19 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
 
     return (
       <>
-        <Button {...props} v2 addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}>
+        <Button {...props} avatars={[{ asset: <Freeze /> }]}>
           With single avatar
         </Button>
 
-        <Button
-          {...props}
-          v2
-          addonStart={{
-            type: 'avatar',
-            value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
-          }}
-        >
+        <Button {...props} avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}>
           With double avatar
         </Button>
 
-        <Button {...props} v2 addonStart={{ type: 'avatar', value: [{ profileName: 'John Doe' }] }}>
+        <Button {...props} avatars={[{ profileName: 'John Doe' }]}>
           With initials
         </Button>
 
-        <Button
-          {...props}
-          v2
-          addonStart={{ type: 'avatar', value: [{ imgSrc: '../avatar-square-dude.webp' }] }}
-        >
+        <Button {...props} avatars={[{ imgSrc: '../avatar-square-dude.webp' }]}>
           With an image
         </Button>
       </>
@@ -578,53 +552,26 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   argTypes: hideControls(['href', 'target', 'priority', 'sentiment', 'as', 'disabled', 'children']),
   args: {
     size: 'md',
+    avatars: [],
   },
   parameters: {
     docs: {
       source: {
         code: `
 <>
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ asset: <Freeze /> }]
-    }}
-  >
+  <Button v2 size="md" avatars={[{ asset: <Freeze /> }]}>
     With single avatar
   </Button>
-
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]
-    }}
-  >
+  
+  <Button v2 size="md" avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}>
     With double avatar
   </Button>
-
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ profileName: 'John Doe' }]
-    }}
-  >
+  
+  <Button v2 size="md" avatars={[{ profileName: 'John Doe' }]}>
     With initials
   </Button>
-
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ imgSrc: '../avatar-square-dude.webp' }]
-    }}
-  >
+  
+  <Button v2 size="md" avatars={[{ imgSrc: '../avatar-square-dude.webp' }]}>
     With image Avatar
   </Button>
 </>
@@ -635,6 +582,20 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   decorators: [withComponentGrid()],
 };
 
+/**
+ * Avatar will always take precedence over `iconStart`
+ */
+export const WithAvatarAndIcon: Story = {
+  args: {
+    size: 'md',
+    iconStart: Freeze,
+    avatars: [{ profileName: 'John Doe' }],
+    iconEnd: ArrowRight,
+  },
+  argTypes: hideControls(['href', 'target', 'as', 'children']),
+  parameters: augmentIconProps(),
+};
+
 const buttonPriorities = ['primary', 'secondary', 'tertiary', 'minimal'] as const;
 const buttonSizes = ['sm', 'md', 'lg'] as const;
 
@@ -659,8 +620,9 @@ export const AllVariants = storyConfig(
                 v2
                 priority={priority as ButtonPriority}
                 size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }]}
                 block
                 href="https://wise.com"
                 target="_blank"
@@ -672,11 +634,9 @@ export const AllVariants = storyConfig(
                 v2
                 priority={priority as ButtonPriority}
                 size={size}
-                addonStart={{
-                  type: 'avatar',
-                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-                }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
                 block
                 disabled
               >
@@ -686,8 +646,9 @@ export const AllVariants = storyConfig(
                 v2
                 priority={priority as ButtonPriority}
                 size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                iconStart={ArrowLeft}
+                iconEnd={ArrowRight}
+                avatars={[{ asset: <Freeze /> }]}
                 block
                 loading
               >
@@ -707,8 +668,9 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                iconStart={ChevronLeft}
+                iconEnd={ChevronRight}
+                avatars={[{ asset: <Freeze /> }]}
                 block
                 href="https://wise.com"
                 target="_blank"
@@ -721,8 +683,9 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                iconStart={ChevronLeft}
+                iconEnd={ChevronRight}
+                avatars={[{ asset: <Freeze /> }]}
                 block
                 disabled
               >
@@ -733,8 +696,9 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                iconStart={ChevronLeft}
+                iconEnd={ChevronRight}
+                avatars={[{ asset: <Freeze /> }]}
                 block
                 loading
               >
@@ -748,3 +712,14 @@ export const AllVariants = storyConfig(
   },
   { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
 );
+
+export const AccessibilityAddons: Story = {
+  args: {
+    v2: true,
+    avatars: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
+    'aria-label': 'Convert Real to Yen',
+    children: 'Convert',
+    size: 'md',
+  },
+  tags: ['docs-only'],
+};

package/src/button/Button.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { ComponentType, forwardRef, isValidElement, ReactElement, ReactNode } from 'react';
+import { forwardRef } from 'react';
 import {
   AnchorElementProps,
   ButtonReferenceType,
@@ -24,11 +24,9 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
       disabled = false,
       priority = 'primary',
       sentiment = 'default',
-      // iconStart: IconStart,
-      // iconEnd: IconEnd,
-      // avatars,
-      addonStart,
-      addonEnd,
+      iconStart: IconStart,
+      iconEnd: IconEnd,
+      avatars,
       // @ts-expect-error NewButtonProps has `type` prop
       type = 'button',
       loading = false,
@@ -73,21 +71,16 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
             children
           ) : (
             <>
-              {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (
+              {size === 'md' && avatars && (
                 <span className="wds-Button-avatars">
-                  <AvatarLayout orientation="horizontal" avatars={addonStart?.value} size={24} />
+                  <AvatarLayout orientation="horizontal" avatars={avatars} size={24} />
                 </span>
               )}
-
-              {addonStart?.type === 'icon' && addonStart.value && (
-                <span className="wds-Button-icon wds-Button-icon--start">{addonStart.value}</span>
+              {!avatars && IconStart && (
+                <IconStart className="wds-Button-icon wds-Button-icon--start" />
               )}
-
               {children}
-
-              {addonEnd?.value && (
-                <span className="wds-Button-icon wds-Button-icon--end">{addonEnd.value}</span>
-              )}
+              {IconEnd && <IconEnd className="wds-Button-icon wds-Button-icon--end" />}
             </>
           )}
         </span>

package/src/button/Button.types.ts

@@ -1,20 +1,11 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode, ReactElement } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import type { PrimitiveButtonProps, PrimitiveAnchorProps } from '../primitives';
 import type { AvatarLayoutProps } from '../avatarLayout';
 
 export type ButtonSentiment = 'default' | 'negative';
 export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-type ButtonAddonIcon = {
-  type: 'icon';
-  value: ReactNode;
-};
-type ButtonAddonAvatar = {
-  type: 'avatar';
-  value: AvatarLayoutProps['avatars'];
-};
-type ButtonAddonStart = ButtonAddonIcon | ButtonAddonAvatar;
-type ButtonAddonEnd = ButtonAddonIcon;
 
 /**
  * Common properties for the Button component.
@@ -64,11 +55,14 @@ export interface CommonProps {
    */
   sentiment?: ButtonSentiment;
 
-  /** Accessory to be displayed before the label */
-  addonStart?: ButtonAddonStart;
+  /** Icon to be displayed on the left side of the button */
+  iconStart?: React.ElementType;
 
-  /** Accessory to be displayed after the label */
-  addonEnd?: ButtonAddonEnd;
+  /** Icon to be displayed on the right side of the button */
+  iconEnd?: React.ElementType;
+
+  /** Media to be displayed on the left side of the button */
+  avatars?: AvatarLayoutProps['avatars'];
 
   /** Content to be displayed inside the button */
   children?: ReactNode;

package/src/button/LegacyButton.story.tsx

@@ -61,12 +61,17 @@ const meta: Meta<typeof Button> = {
         disable: true,
       },
     },
-    addonStart: {
+    iconStart: {
       table: {
         disable: true,
       },
     },
-    addonEnd: {
+    iconEnd: {
+      table: {
+        disable: true,
+      },
+    },
+    avatars: {
       table: {
         disable: true,
       },