@transferwise/components 46.124.1 → 46.126.0

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -288,7 +288,7 @@ export const EdgeInstances: Story = {
 /**
  * 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.
- * 
+ *
  * Features like: `interactive` are not supported.
  * Also `AvatarLayout` isn't supported on `"elevated"` state of `SentimentSurface`.
  */
@@ -302,7 +302,7 @@ export const SentimentAwareness: Story = {
   },
   render: (args) => (
     <>
-      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) =>
+      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
         <SentimentSurface
           key={`${sentiment}-base`}
           sentiment={sentiment}
@@ -316,7 +316,7 @@ export const SentimentAwareness: Story = {
             avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
           />
         </SentimentSurface>
-      )}
+      ))}
     </>
   ),
   decorators: [

package/src/avatarView/AvatarView.story.tsx

@@ -440,7 +440,7 @@ export const Profiles: Story = {
 /**
  * `AvatarView` 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.
- * 
+ *
  * Features like `online`, `notification`, `selected`, and `interactive` are not supported.
  * For badge (`<AvatarView badge={}>`) only `flagCode` is supported.
  * Also `AvatarView` isn't supported on `"elevated"` state of `SentimentSurface`.
@@ -457,29 +457,34 @@ export const SentimentAwareness: Story = {
   render: () => {
     return (
       <>
-        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
-          <SentimentSurface
-            key={`${sentiment}-base`}
-            sentiment={sentiment}
-            emphasis="base"
-            className="p-a-1 d-flex"
-            style={{ gap: 'var(--size-16)' }}
-          >
-            <AvatarView size={32}>
-              <Bank />
-            </AvatarView>
-            <AvatarView size={32} profileName="John Doe" />
-            <AvatarView size={32}>
-              <Flag code="JPY" intrinsicSize={32} />
-            </AvatarView>
-            <AvatarView size={32} badge={sentiment === 'proposition' ? undefined : { status: sentiment }}>
-              <Bank />
-            </AvatarView>
-            <AvatarView size={32} badge={{ flagCode: 'eu' }}>
-              <Bank />
-            </AvatarView>
-          </SentimentSurface>
-        ))}
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
+          (sentiment) => (
+            <SentimentSurface
+              key={`${sentiment}-base`}
+              sentiment={sentiment}
+              emphasis="base"
+              className="p-a-1 d-flex"
+              style={{ gap: 'var(--size-16)' }}
+            >
+              <AvatarView size={32}>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} profileName="John Doe" />
+              <AvatarView size={32}>
+                <Flag code="JPY" intrinsicSize={32} />
+              </AvatarView>
+              <AvatarView
+                size={32}
+                badge={sentiment === 'proposition' ? undefined : { status: sentiment }}
+              >
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} badge={{ flagCode: 'eu' }}>
+                <Bank />
+              </AvatarView>
+            </SentimentSurface>
+          ),
+        )}
       </>
     );
   },

package/src/avatarView/AvatarView.tsx

@@ -32,7 +32,7 @@ export type Props = {
   style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
 } & Pick<
   HTMLAttributes<HTMLDivElement>,
-  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
+  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
 >;
 
 function AvatarView({

package/src/button/_stories/{Button.tests.story.tsx → Button.test.story.tsx}

@@ -3,7 +3,7 @@ import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
 import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -32,16 +32,11 @@ const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary
 const buttonSizes = ['sm', 'md', 'lg'] as const;
 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,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
+    parameters: {
+      padding: '0',
     },
-  },
+  }),
   render: () => (
     <div
       className="button-variants"

package/src/checkbox/Checkbox.story.tsx

@@ -5,7 +5,7 @@ import { Field } from '../field/Field';
 import { lorem10 } from '../test-utils';
 
 import Checkbox from './Checkbox';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -33,25 +33,12 @@ export const Multiple: Story = {
       </>
     );
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const MultipleMobile: Story = {
   ...Multiple,
-  parameters: {
-    variants: ['default', 'dark', 'rtl', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile'], Multiple),
 };
 
 export const WithinField = {

package/src/circularButton/CircularButton.story.tsx

@@ -6,7 +6,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CircularButton,
@@ -89,10 +89,5 @@ export const All: Story = {
 
 export const All400Zoom: Story = {
   ...All,
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      '400%': allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%'], All),
 };

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -11,7 +11,7 @@ import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 
 import BottomSheet from './BottomSheet';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 export default {
   component: BottomSheet,
@@ -67,12 +67,7 @@ export const Basic: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const WithOverflowContent: Story = {
@@ -106,41 +101,20 @@ export const WithOverflowContent: Story = {
 
 export const WithOverflowContentMobile: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithOverflowContent),
 };
 
 export const WithOverflowContentDark: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], WithOverflowContent),
 };
 
 export const WithOverflowContentDarkMobile: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['dark', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
 };
 
 export const WithOverflowContentZoom400: Story = {
   ...WithOverflowContent,
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      '400%': allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%'], WithOverflowContent),
 };

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fireEvent, within } from 'storybook/test';
+import { lorem100, lorem500 } from '../../test-utils';
+import { Typography } from '../propsValues/typography';
+import Alert from '../../alert';
+import Body from '../../body';
+import Button from '../../button';
+import Title from '../../title';
+import BottomSheet from './BottomSheet';
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+export default {
+  component: BottomSheet,
+  title: 'Dialogs/BottomSheet/tests',
+  tags: ['!autodocs'],
+  args: {
+    open: false,
+  },
+} satisfies Meta<typeof BottomSheet>;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+/**
+ * This test ensures that when the SelectInput is used within a scrollable page,
+ * opening the dropdown does not cause any unwanted scrolling or layout shifts.
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport. The issue is particularly prominent on iOS Safari.
+ *
+ * NB: This test is disabled in Chromatic as there's no obvious way to control
+ * <html/> element of a snapshot. It's to be primarily used in manual testing
+ * on an actual device or a simulator as it cannot be reproduced with mobile
+ * emulation modes on desktop browsers.
+ */
+export const SmoothScrollReset: Story = {
+  args: {
+    children: (
+      <>
+        <Title type={Typography.TITLE_SECTION}>Observe the document</Title>
+        <Alert className="m-t-2" type="warning">
+          Once the <code>BottomSheet</code> opens, the document underneath should be static and
+          should not scroll.
+        </Alert>
+        <Body as="p">{lorem100}</Body>
+        <Body as="p">{lorem100}</Body>
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>{'html { scroll-behavior: smooth; }'}</style>
+        <div style={{ maxWidth: 500 }}>
+          <Body>
+            <p>{lorem100}</p>
+            <p>{lorem100}</p>
+          </Body>
+          <Story />
+          <Body as="p" className="m-t-5 disabled">
+            {lorem500}
+          </Body>
+        </div>
+      </>
+    ),
+  ],
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    document.documentElement.scrollTop = 400;
+    await wait(500);
+    const canvas = within(canvasElement);
+    // cannot use userEvent.click as it crashes on iOS Safari in the simulator
+    await fireEvent.click(canvas.getByRole('button'));
+  },
+  render: ({ open, ...args }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div>
+        <Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
+        <BottomSheet
+          {...args}
+          open={isOpen}
+          onClose={() => {
+            setIsOpen(false);
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/common/circle/Circle.story.tsx

@@ -3,7 +3,7 @@ import Circle from './Circle';
 import { Profile } from '@transferwise/icons';
 import { CircleProps } from '.';
 import Body from '../../body';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 export default {
   title: 'Internal/Circle',
@@ -46,13 +46,7 @@ export const Sizes: Story = {
       </div>
     );
   },
-  parameters: {
-    variants: ['light', 'dark'],
-    chromatic: {
-      light: allModes.light,
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['light', 'dark']),
 };
 
 export const FixedSize: Story = {
@@ -83,10 +77,5 @@ export const FixedSize: Story = {
       </div>
     );
   },
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      zoom400: allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%']),
 };

package/src/common/locale/{index.spec.ts → index.test.ts}

@@ -1,4 +1,11 @@
-import { getLangFromLocale, adjustLocale, getCountryFromLocale, getDirectionFromLocale } from '.';
+import { IntlShape } from 'react-intl';
+import {
+  getLangFromLocale,
+  adjustLocale,
+  getCountryFromLocale,
+  getDirectionFromLocale,
+  getLocaleCurrencyName,
+} from '.';
 
 describe('locale utils', () => {
   beforeAll(() => {
@@ -103,4 +110,32 @@ describe('locale utils', () => {
       },
     );
   });
+
+  describe('getLocaleCurrencyName', () => {
+    it('should return the localized currency name if Intl.DisplayNames is supported', () => {
+      const intl = {
+        formatDisplayName: jest.fn().mockReturnValue('US Dollar'),
+      } as unknown as IntlShape;
+
+      const result = getLocaleCurrencyName(intl, 'USD');
+      expect(intl.formatDisplayName).toHaveBeenCalledWith('USD', {
+        type: 'currency',
+        fallback: 'code',
+      });
+      expect(result).toBe('US Dollar');
+    });
+
+    it('should return the original currency code if Intl.DisplayNames is not supported', () => {
+      const intl = {
+        formatDisplayName: jest.fn().mockReturnValue('US Dollar'),
+      } as unknown as IntlShape;
+
+      // Mock Intl.DisplayNames to be undefined
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      (Intl as any).DisplayNames = undefined;
+
+      const result = getLocaleCurrencyName(intl, 'USD');
+      expect(result).toBe('USD');
+    });
+  });
 });

package/src/common/locale/index.ts

@@ -1,3 +1,4 @@
+import { IntlShape } from 'react-intl/src/types';
 import { Direction } from '../direction';
 
 export const DEFAULT_LANG = 'en';
@@ -96,3 +97,15 @@ export function getDirectionFromLocale(locale: string) {
     ? Direction.RTL
     : Direction.LTR;
 }
+
+/**
+ * Provides the localized currency name for a given currency code.
+ * @param intl The `intl` object from `react-intl` used for localization.
+ * @param currencyCode The ISO 4217 currency code (e.g., `USD`, `EUR`, `JPY`).
+ * @returns The localized currency name if Intl.DisplayNames is supported supported, otherwise returns the original currency code.
+ */
+export function getLocaleCurrencyName(intl: IntlShape, currencyCode: string) {
+  return typeof Intl.DisplayNames === 'function'
+    ? intl.formatDisplayName(currencyCode, { type: 'currency', fallback: 'code' })
+    : currencyCode;
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '.';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CriticalCommsBanner,
@@ -24,13 +24,7 @@ export const Variants: Story = {
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const Mobile: Story = {
@@ -40,12 +34,5 @@ export const Mobile: Story = {
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };

package/src/dateInput/{DateInput.tests.story.tsx → DateInput.test.story.tsx}

@@ -6,7 +6,7 @@ import { lorem10 } from '../test-utils';
 
 import Provider from '../provider/Provider';
 import translations from '../i18n';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
@@ -223,20 +223,10 @@ export const NoNonDigitsAllowed: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const InputErrorMobile: Story = {
   ...InputError,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], InputError),
 };

package/src/dateLookup/DateLookup.story.tsx

@@ -4,7 +4,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: DateLookup,
@@ -61,13 +61,15 @@ export const Basic: Story = {
 };
 export const Basic400Zoom: Story = {
   ...Basic,
-  parameters: {
-    chromatic: {
-      delay: 2000,
-      zoom400: allModes.zoom400,
+
+  ...withVariantConfig(['400%'], {
+    ...Basic,
+    parameters: {
+      chromatic: {
+        delay: 2000,
+      },
     },
-    variants: ['400%'],
-  },
+  }),
 };
 
 export const WithField: Story = {

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx

@@ -18,6 +18,7 @@ import {
 import { useIntl } from 'react-intl';
 
 import messages from '../ExpressiveMoneyInput.messages';
+import { getLocaleCurrencyName } from '../../common';
 
 export interface CurrencyOption {
   label?: string;
@@ -126,7 +127,10 @@ export const CurrencySelector = ({
           addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}
           onClick={(event) => handleTriggerClick(event)}
         >
-          {currency}
+          <>
+            <span aria-hidden>{currency}</span>
+            <span className="sr-only">{getLocaleCurrencyName(intl, currency)}</span>
+          </>
         </SelectInputTriggerButton>
       )}
       onChange={(newValue) => {

package/src/header/{Header.tests.story.tsx → Header.test.story.tsx}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { type HeaderProps } from './Header';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Header> = {
   component: Header,
@@ -85,16 +85,11 @@ export const SectionTrailingSpaceWithAction: Story = {
 };
 
 export const AllVariants: Story = {
-  parameters: {
-    padding: '0',
-    variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-      rtl: allModes.rtl,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
+    parameters: {
+      padding: '0',
     },
-  },
+  }),
   render: () => (
     <div
       className="header-variants"

package/src/index.ts

@@ -35,7 +35,8 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps } from './prompt';
+export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -171,7 +172,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InlinePrompt } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
@@ -284,6 +285,7 @@ export {
   adjustLocale,
   getCountryFromLocale,
   getDirectionFromLocale,
+  getLocaleCurrencyName,
   getLangFromLocale,
   isBrowser,
   isServerSide,