@transferwise/components 46.100.1 → 46.101.0

package/src/navigationOption/NavigationOption.story.tsx

@@ -1,275 +1,314 @@
-import { ReactNode } from 'react';
-import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { Illustration, Assets, Flag } from '@wise/art';
 import {
   FastFlag as FastFlagIcon,
   Bank as BankIcon,
-  PlusCircle,
   Profile,
   UpwardGraph as UpwardGraphIcon,
   FastFlag,
 } from '@transferwise/icons';
-import { Illustration, Assets, Flag } from '@wise/art';
-
-import { Nudge, Header, Title, Typography, AvatarView } from '..';
-
+import type { AvatarViewBadgeProps } from '../avatarView/AvatarView';
+import { Nudge, Header, Title, Typography, AvatarView, type NavigationOptionProps } from '..';
 import NavigationOption from './NavigationOption';
+import { fn } from 'storybook/test';
+
+type StoryArgs = NavigationOptionProps & { hasTitleOnly?: boolean };
 
-export default {
+const meta: Meta<StoryArgs> = {
   component: NavigationOption,
   title: 'Option/NavigationOption',
+  tags: ['autodocs'],
+  argTypes: {
+    href: { control: 'text' },
+    title: { control: 'text' },
+    content: { control: 'text' },
+    complex: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    showMediaAtAllSizes: { control: 'boolean' },
+    showMediaCircle: { control: 'boolean' },
+    isContainerAligned: { control: 'boolean' },
+    className: { control: 'text' },
+    hasTitleOnly: { control: 'boolean' },
+    media: { control: false },
+  },
 };
+export default meta;
 
-type TemplateTypes = {
-  href?: string;
-  title?: string;
-  content?: string;
-  complex?: boolean;
-  disabled?: boolean;
-  showMediaAtAllSizes?: boolean;
-  showMediaCircle?: boolean;
-  isContainerAligned?: boolean;
-  className?: string;
-  hasTitleOnly?: boolean;
-  media?: ReactNode;
+const defaultArgs = {
+  title: 'Navigation option',
+  content: 'Button and icon are vertically centered.',
+  complex: false,
+  disabled: false,
+  showMediaAtAllSizes: false,
+  showMediaCircle: true,
+  isContainerAligned: false,
+  hasTitleOnly: false,
 };
 
-const Template = (props: TemplateTypes) => {
-  const href = text('href', props.href ?? '');
-  const title = text('title', props.title ?? 'Navigation option');
-  const content = text('content', props.content ?? 'Button and icon are vertically centered.');
-  const complex = boolean('complex', props.complex ?? false);
-  const disabled = boolean('disabled', props.disabled ?? false);
-  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', props.showMediaAtAllSizes ?? false);
-  const showMediaCircle = props.showMediaCircle ?? boolean('showMediaCircle', true);
-  const isContainerAligned = boolean('isContainerAligned', false);
-  const className = text('className', props.className ?? '');
+const badgeProps: AvatarViewBadgeProps = {
+  icon: <FastFlag />,
+  type: 'action',
+};
 
-  return (
+export const Basic: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
     <NavigationOption
-      complex={complex}
-      disabled={disabled}
+      {...args}
       id="navigation-option"
       name="navigation-option"
-      href={href}
-      title={title}
-      content={props.hasTitleOnly ? null : content}
-      media={props.media || <FastFlagIcon />}
-      showMediaAtAllSizes={showMediaAtAllSizes}
-      isContainerAligned={isContainerAligned}
-      showMediaCircle={showMediaCircle}
-      className={className}
-      onClick={action('clicked')}
+      content={hasTitleOnly ? null : args.content}
+      media={args.media || <FastFlagIcon />}
+      onClick={fn()}
     />
-  );
+  ),
+  args: { ...defaultArgs },
 };
 
-export const Basic = () => <Template />;
-
-export const Variants = () => (
-  <>
-    <div className="m-b-2">
-      <div className="title-4 m-b-1">Has Title Only</div>
-      <Template hasTitleOnly />
-    </div>
-    <div className="m-b-2">
-      <div className="title-4 m-b-1">Full Content</div>
-      <Template />
-    </div>
-    <div className="m-b-2">
-      <div className="title-4 m-b-1">With Icon</div>
-      <Template media={<BankIcon size={24} />} />
+export const Variants: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">Has Title Only</div>
+        <NavigationOption
+          {...args}
+          content={null}
+          media={args.media || <FastFlagIcon />}
+          onClick={fn()}
+        />
+      </div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">Full Content</div>
+        <NavigationOption
+          {...args}
+          content={hasTitleOnly ? null : args.content}
+          media={args.media || <FastFlagIcon />}
+          onClick={fn()}
+        />
+      </div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">With Icon</div>
+        <NavigationOption
+          {...args}
+          media={<BankIcon size={24} />}
+          content={hasTitleOnly ? null : args.content}
+          onClick={fn()}
+        />
+      </div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">With Icon Avatar</div>
+        <NavigationOption
+          {...args}
+          showMediaCircle={false}
+          media={
+            <AvatarView badge={{ type: 'reference' }}>
+              <Profile />
+            </AvatarView>
+          }
+          content={hasTitleOnly ? null : args.content}
+          onClick={fn()}
+        />
+      </div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">With Contact Avatar</div>
+        <NavigationOption
+          {...args}
+          showMediaCircle={false}
+          media={<AvatarView badge={badgeProps} profileName="Spencer Penn" />}
+          content={hasTitleOnly ? null : args.content}
+          onClick={fn()}
+        />
+      </div>
+      <div className="m-t-4 m-b-2">
+        <div className="title-4 m-b-1">Not recommended usage</div>
+        <p>
+          Rendering an Avatar on top of showMediaCircle causes the Avatar background-colour and the
+          circle background-colour to overlap which also causes clipping issues with the Badge
+          component.
+        </p>
+        <NavigationOption
+          {...args}
+          showMediaCircle
+          media={<AvatarView badge={badgeProps} profileName="Spencer Penn" />}
+          content={hasTitleOnly ? null : args.content}
+          onClick={fn()}
+        />
+      </div>
     </div>
-    <div className="m-b-2">
-      <div className="title-4 m-b-1">With Icon Avatar</div>
-      <Template
-        showMediaCircle={false}
-        media={
-          <AvatarView badge={{ type: 'reference' }}>
-            <Profile />
-          </AvatarView>
-        }
+  ),
+  args: { ...defaultArgs },
+};
+
+export const Multiple: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <div>
+      <NavigationOption
+        {...args}
+        content={hasTitleOnly ? null : args.content}
+        media={args.media || <FastFlagIcon />}
+        onClick={fn()}
       />
-    </div>
-    <div className="m-b-2">
-      <div className="title-4 m-b-1">With Contact Avatar</div>
-      <Template
-        showMediaCircle={false}
-        media={
-          <AvatarView
-            badge={{
-              icon: <FastFlag />,
-              type: 'action',
-            }}
-            profileName="Spencer Penn"
-          />
-        }
+      <NavigationOption
+        {...args}
+        content={hasTitleOnly ? null : args.content}
+        media={args.media || <FastFlagIcon />}
+        onClick={fn()}
       />
-    </div>
-    <div className="m-t-4 m-b-2">
-      <div className="title-4 m-b-1">Not recommended usage</div>
-      <p>
-        Rendering an Avatar on top of showMediaCircle causes the Avatar background-colour and the
-        circle background-colour to overlap which also causes clipping issues with the Badge
-        component.
-      </p>
-      <Template
-        showMediaCircle
-        media={
-          <AvatarView
-            badge={{
-              icon: <FastFlag />,
-              type: 'action',
-            }}
-            profileName="Spencer Penn"
-          />
-        }
+      <NavigationOption
+        {...args}
+        content={hasTitleOnly ? null : args.content}
+        media={args.media || <FastFlagIcon />}
+        onClick={fn()}
       />
     </div>
-  </>
-);
-
-export const Multiple = () => (
-  <>
-    <Template />
-    <Template />
-    <Template />
-  </>
-);
+  ),
+  args: { ...defaultArgs },
+};
 
-export const WithIllustration = () => {
-  return (
-    <Template
+export const WithIllustration: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <NavigationOption
+      {...args}
       media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
       showMediaCircle={false}
+      content={hasTitleOnly ? null : args.content}
+      onClick={fn()}
     />
-  );
+  ),
+  args: { ...defaultArgs },
 };
 
-export const WithContainerContent = () => (
-  <>
-    <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
-      Choose how to pay
-    </Title>
-    <Template />
-    <Template />
-    <Template />
+export const WithContainerContent: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
     <div>
-      <Nudge
-        className="m-t-2"
-        mediaName="globe"
-        title="Text that is no longer than two lines."
-        link="Link"
-        href="#"
-        onClick={action('action clicked')}
-        onDismiss={action('dismissed')}
+      <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
+        Choose how to pay
+      </Title>
+      <NavigationOption
+        {...args}
+        content={hasTitleOnly ? null : args.content}
+        media={args.media || <FastFlagIcon />}
+        onClick={fn()}
       />
+      <NavigationOption
+        {...args}
+        content={hasTitleOnly ? null : args.content}
+        media={args.media || <FastFlagIcon />}
+        onClick={fn()}
+      />
+      <NavigationOption
+        {...args}
+        content={hasTitleOnly ? null : args.content}
+        media={args.media || <FastFlagIcon />}
+        onClick={fn()}
+      />
+      <div>
+        <Nudge
+          className="m-t-2"
+          mediaName="globe"
+          title="Text that is no longer than two lines."
+          link="Link"
+          href="#"
+          onClick={action('action clicked')}
+          onDismiss={action('dismissed')}
+        />
+      </div>
     </div>
-  </>
-);
-
-const NavigationOptionTemplate = (props: TemplateTypes) => {
-  const {
-    href,
-    title,
-    content,
-    complex,
-    disabled,
-    showMediaAtAllSizes,
-    showMediaCircle,
-    isContainerAligned,
-    className,
-  } = props;
-
-  return (
-    <NavigationOption
-      complex={complex}
-      disabled={disabled}
-      id="navigation-option"
-      name="navigation-option"
-      href={href}
-      title={title}
-      content={props.hasTitleOnly ? null : content}
-      media={props.media || <FastFlagIcon />}
-      showMediaAtAllSizes={showMediaAtAllSizes}
-      isContainerAligned={isContainerAligned}
-      showMediaCircle={showMediaCircle}
-      className={className}
-      onClick={action('clicked')}
-    />
-  );
+  ),
+  args: { ...defaultArgs },
 };
 
-export const BalanceContent = () => (
-  <NavigationOptionTemplate
-    title="100 GBP available"
-    content="British pound"
-    showMediaCircle={false}
-    media={
-      <AvatarView>
-        <Flag code="GBP" />
-      </AvatarView>
-    }
-  />
-);
-
-export const NewContactContent = () => (
-  <NavigationOptionTemplate
-    title="New Contact"
-    showMediaCircle={false}
-    media={
-      <AvatarView badge={{ type: 'reference' }}>
-        <Profile size="24" />
-      </AvatarView>
-    }
-  />
-);
-
-export const ExistingContactContent = () => (
-  <NavigationOptionTemplate
-    title="Wise Customer"
-    content="EUR account ending in 1111"
-    showMediaCircle={false}
-    media={<AvatarView profileName="Walter Smith" badge={{ flagCode: 'EUR' }} />}
-  />
-);
-
-export const CardContent = () => (
-  <NavigationOptionTemplate
-    title="Digital card •••• 2123"
-    content="Test card"
-    showMediaCircle={false}
-    media={
-      <img
-        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
-        alt=""
-      />
-    }
-  />
-);
-
-export const ManageAccountContent = () => (
-  <>
-    <Header title="Balances" />
-    <NavigationOptionTemplate
-      title="Account details"
-      content="View and share your account details to get paid."
+export const BalanceContent: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <NavigationOption
+      {...args}
+      title="100 GBP available"
+      content="British pound"
       showMediaCircle={false}
       media={
         <AvatarView>
-          <BankIcon />
+          <Flag code="GBP" />
         </AvatarView>
       }
+      onClick={fn()}
     />
-    <NavigationOptionTemplate
-      title="Auto Conversions"
-      content="Convert money between your balances at your desired exchange rate."
+  ),
+  args: { ...defaultArgs },
+};
+
+export const NewContactContent: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <NavigationOption
+      {...args}
+      title="New Contact"
       showMediaCircle={false}
       media={
-        <AvatarView>
-          <UpwardGraphIcon size={24} />
+        <AvatarView badge={{ type: 'reference' }}>
+          <Profile size="24" />
         </AvatarView>
       }
+      onClick={fn()}
     />
-  </>
-);
+  ),
+  args: { ...defaultArgs },
+};
+
+export const ExistingContactContent: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <NavigationOption
+      {...args}
+      title="Wise Customer"
+      content="EUR account ending in 1111"
+      showMediaCircle={false}
+      media={<AvatarView profileName="Walter Smith" badge={{ flagCode: 'EUR' }} />}
+      onClick={fn()}
+    />
+  ),
+  args: { ...defaultArgs },
+};
+
+export const CardContent: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <NavigationOption
+      {...args}
+      title="Digital card •••• 2123"
+      content="Expires 12/27"
+      showMediaCircle={false}
+      media={<UpwardGraphIcon size={24} />}
+      onClick={fn()}
+    />
+  ),
+  args: { ...defaultArgs },
+};
+
+export const ManageAccountContent: StoryObj<StoryArgs> = {
+  render: ({ hasTitleOnly, ...args }: StoryArgs) => (
+    <div>
+      <Header title="Balances" />
+      <NavigationOption
+        {...args}
+        title="Account details"
+        content="View and share your account details to get paid."
+        showMediaCircle={false}
+        media={
+          <AvatarView>
+            <BankIcon />
+          </AvatarView>
+        }
+        onClick={fn()}
+      />
+      <NavigationOption
+        {...args}
+        title="Auto Conversions"
+        content="Convert money between your balances at your desired exchange rate."
+        showMediaCircle={false}
+        media={
+          <AvatarView>
+            <UpwardGraphIcon size={24} />
+          </AvatarView>
+        }
+        onClick={fn()}
+      />
+    </div>
+  ),
+};

package/src/nudge/Nudge.story.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Assets } from '@wise/art';
 
 import { Nudge } from '..';

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -1,17 +1,29 @@
-import { action } from '@storybook/addon-actions';
-import { select, text } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
 import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
-
 import AvatarView from '../avatarView';
 import { ProfileType } from '../common';
 import Logo from '../logo';
 
-import OverlayHeader from './OverlayHeader';
+import OverlayHeader, { OverlayHeaderProps } from './OverlayHeader';
+
+interface CustomControls {
+  avatarType?: keyof typeof avatarProfiles;
+  avatarURL?: string;
+  profileType?: ProfileType;
+}
+export type StoryArgs = OverlayHeaderProps & CustomControls;
 
-export default {
+const meta: Meta<StoryArgs> = {
   component: OverlayHeader,
   title: 'Navigation/OverlayHeader',
+  argTypes: {
+    avatarType: { control: 'select', options: ['', 'Business', 'Profile'] },
+    avatarURL: { control: 'text' },
+    profileType: { control: 'select', options: [ProfileType.PERSONAL, ProfileType.BUSINESS] },
+  },
 };
+export default meta;
 
 const avatarProfiles = {
   '': null,
@@ -19,33 +31,29 @@ const avatarProfiles = {
   Profile: <ProfileIcon size="24" />,
 };
 
-export const Basic = () => {
-  const showAvatar = select(
-    'avatar',
-    Object.keys(avatarProfiles) as (keyof typeof avatarProfiles)[],
-    'Profile',
-  );
-  return (
+export const Basic: StoryObj<StoryArgs> = {
+  render: (args) => (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarView>{avatarProfiles[showAvatar]}</AvatarView>}
+      avatar={<AvatarView>{avatarProfiles[args.avatarType ?? '']}</AvatarView>}
       onClose={action('Close clicked')}
     />
-  );
+  ),
+  args: {
+    avatarType: 'Profile',
+  },
 };
 
-export const WithAvatarWrapper = () => {
-  const avatarURL = text('avatarURL', '../tapestry-01.png');
-  const profileType = select(
-    'profileType',
-    [ProfileType.PERSONAL, ProfileType.BUSINESS],
-    undefined,
-  );
-  return (
+export const WithAvatarWrapper: StoryObj<StoryArgs> = {
+  render: (args) => (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
+      avatar={<AvatarView imgSrc={args.avatarURL} profileType={args.profileType} />}
       onClose={action('Close clicked')}
     />
-  );
+  ),
+  args: {
+    avatarURL: '../tapestry-01.png',
+    profileType: ProfileType.PERSONAL,
+  },
 };

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { Field } from '../field/Field';
 import PhoneNumberInput from './PhoneNumberInput';

package/src/phoneNumberInput/utils/setDefaultPrefix/setDefaultPrefix.spec.ts

@@ -12,9 +12,12 @@ describe('setDefaultPrefix', () => {
     ['ar', '+54'],
     ['it-IT', '+39'],
     ['it', '+39'],
-  ])('should return right prefix when locale is passed ("%s" -> "%s")', (locale, expectedValue) => {
-    expect(setDefaultPrefix(locale)).toBe(expectedValue);
-  });
+  ])(
+    'should return right prefix when locale is passed ("%s" -> "%s")',
+    (locale: string, expectedValue: string) => {
+      expect(setDefaultPrefix(locale)).toBe(expectedValue);
+    },
+  );
 
   it('should return right prefix when valid locale is passed', () => {
     expect(setDefaultPrefix('it-IT')).toBe('+39');