@transferwise/components 46.125.0 → 46.127.1

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/avatarWrapper/AvatarWrapper.test.tsx

@@ -36,49 +36,10 @@ describe('FlowNavigationAvatar', () => {
 
             expect(screen.getByText('M')).toBeInTheDocument();
           });
-
-          describe('AND profileType', () => {
-            it('renders as BUSINESS profile type with an icon', () => {
-              const { container } = render(
-                <AvatarWrapper name={name} profileType={ProfileType.BUSINESS} />,
-              );
-
-              expect(container.firstChild).toMatchSnapshot();
-            });
-
-            it('renders as PERSONAL profile type with an icon', () => {
-              const { container } = render(
-                <AvatarWrapper name={name} profileType={ProfileType.PERSONAL} />,
-              );
-
-              expect(container.firstChild).toMatchSnapshot();
-            });
-
-            describe('AND avatar url', () => {
-              it('renders the image', () => {
-                const { container } = render(
-                  <AvatarWrapper
-                    url="https://wise.com"
-                    name={name}
-                    profileType={ProfileType.BUSINESS}
-                    avatarProps={{ theme: 'dark' }}
-                  />,
-                );
-
-                expect(container.firstChild).toMatchSnapshot();
-              });
-            });
-          });
         });
       });
 
       describe('with nothing passed', () => {
-        it('renders a personal icon', () => {
-          const { container } = render(<AvatarWrapper />);
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-
         it('renders aria-label', () => {
           render(<AvatarWrapper aria-label="test" />);
 
@@ -86,20 +47,6 @@ describe('FlowNavigationAvatar', () => {
         });
       });
 
-      describe('with a badge url passed', () => {
-        it('renders the badge', () => {
-          const { container } = render(
-            <AvatarWrapper
-              badgeUrl="https://badge.com"
-              badgeAltText="badge alt text"
-              badgeProps={{ size: Size.LARGE } as BadgeProps}
-            />,
-          );
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-      });
-
       describe('with a badge status icon passed', () => {
         it('renders the badge', () => {
           render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);

package/src/checkbox/Checkbox.test.tsx

@@ -19,11 +19,6 @@ describe('Checkbox', () => {
     jest.clearAllMocks();
   });
 
-  it('renders the given label', () => {
-    const { container } = render(<Checkbox {...props} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('is enabled by default', () => {
     const { container } = render(<Checkbox {...props} />);
     expect(getCheckboxContainer(container)).not.toHaveClass('disabled');

package/src/chevron/Chevron.test.tsx

@@ -43,11 +43,4 @@ describe('Chevron', () => {
       expect(container.querySelector('.tw-icon-chevron-up')).not.toHaveClass('chevron-color');
     });
   });
-
-  describe('custom xs icon', () => {
-    it('renders', () => {
-      const { container } = render(<Chevron size={Size.EXTRA_SMALL} />);
-      expect(container).toMatchSnapshot();
-    });
-  });
 });

package/src/chips/Chips.test.tsx

@@ -53,10 +53,6 @@ const filterProps = {
 
 describe('Chips', () => {
   describe('Choice Chips', () => {
-    it(`renders as expected`, () => {
-      expect(render(<Chips {...choiceProps} />).container).toMatchSnapshot();
-    });
-
     it(`will pass previous state, updated state, and selected value on select`, () => {
       render(<Chips {...choiceProps} />);
       const accounting = screen.getByText('Accounting');
@@ -69,10 +65,6 @@ describe('Chips', () => {
   });
 
   describe('Filter Chips', () => {
-    it(`renders as expected`, () => {
-      expect(render(<Chips {...filterProps} />).container).toMatchSnapshot();
-    });
-
     it(`will pass previous state, updated state, and selected value on select`, () => {
       render(<Chips {...filterProps} />);
       const accounting = screen.getByText('Accounting');

package/src/common/RadioButton/RadioButton.test.tsx

@@ -3,24 +3,6 @@ import { screen, render, userEvent } from '../../test-utils';
 import RadioButton from '.';
 
 describe('Radio button', () => {
-  it('renders correctly', () => {
-    const { container } = render(<RadioButton id="an-id" name="a-name" value="a-value" />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders checked state correctly', () => {
-    const { container } = render(<RadioButton name="radio-name" checked />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders disabled state correctly', () => {
-    const { container } = render(<RadioButton name="radio-name" disabled />);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('responds to user input', async () => {
     const onChange = jest.fn();
     render(

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/bottomSheet/BottomSheet.test.tsx

@@ -5,15 +5,6 @@ import BottomSheet from './BottomSheet';
 mockMatchMedia();
 
 describe('BottomSheet', () => {
-  it('renders content when open', () => {
-    const { baseElement } = render(
-      <BottomSheet open onClose={jest.fn()}>
-        <b>Test Content</b>
-      </BottomSheet>,
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
   it('does not renders when closed', () => {
     const { container } = render(
       <BottomSheet open={false} onClose={jest.fn()}>

package/src/common/card/Card.test.tsx

@@ -10,12 +10,6 @@ describe('Card', () => {
     testId: 'test-card',
   };
 
-  it('matches snapshot', () => {
-    const { container } = render(<Card {...defaultProps} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/common/closeButton/CloseButton.test.tsx

@@ -8,10 +8,6 @@ const props = {
 };
 
 describe('CloseButton', () => {
-  it(`renders as expected`, () => {
-    expect(render(<CloseButton {...props} />).container).toMatchSnapshot();
-  });
-
   describe('tabIndex', () => {
     it('should not have tabIndex by default', () => {
       render(<CloseButton {...props} />);

package/src/common/locale/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/common/panel/Panel.test.tsx

@@ -20,12 +20,6 @@ describe('Panel', () => {
     onClose: jest.fn(),
   } satisfies PanelProps;
 
-  it('renders', () => {
-    const { container } = render(<Panel {...props} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('renders arrow', () => {
     const { rerender } = render(<Panel {...props} arrow={false} />);
 

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/flowNavigation/FlowNavigation.test.js

@@ -35,10 +35,6 @@ describe('FlowNavigation', () => {
     activeStep: 0,
   };
 
-  it(`renders as expected`, () => {
-    expect(render(<FlowNavigation {...props} />).container).toMatchSnapshot();
-  });
-
   it(`renders full Logo`, () => {
     render(<FlowNavigation {...props} />);
     expect(logoFull()).toBeInTheDocument();
@@ -126,12 +122,6 @@ describe('FlowNavigation', () => {
       window.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders as expected', () => {
-      expect(
-        render(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />).container,
-      ).toMatchSnapshot();
-    });
-
     it('renders Logo', () => {
       render(<FlowNavigation {...props} />);
       expect(screen.getByAltText('logo')).toBeInTheDocument();

package/src/index.ts

@@ -36,6 +36,7 @@ export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
 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, ActionPrompt } 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,

package/src/inputs/Input.tsx

@@ -7,15 +7,14 @@ import { inputClassNameBase } from './_common';
 import { useInputAttributes } from './contexts';
 import { useInputPaddings } from './InputGroup';
 
-export interface InputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface InputProps extends Merge<
+  React.ComponentPropsWithRef<'input'>,
+  {
+    size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
+    shape?: 'rectangle' | 'pill';
+    'aria-invalid'?: boolean;
+  }
+> {}
 
 export const Input = forwardRef(function Input(
   { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,

package/src/inputs/SearchInput.tsx

@@ -7,15 +7,14 @@ import { Merge } from '../utils';
 import { Input } from './Input';
 import { InputGroup } from './InputGroup';
 
-export interface SearchInputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: Size.SMALL | Size.MEDIUM;
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface SearchInputProps extends Merge<
+  React.ComponentPropsWithRef<'input'>,
+  {
+    size?: Size.SMALL | Size.MEDIUM;
+    shape?: 'rectangle' | 'pill';
+    'aria-invalid'?: boolean;
+  }
+> {}
 
 export const SearchInput = forwardRef(function SearchInput(
   { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,