@transferwise/components 46.135.2 → 46.135.3

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Clock, Taxi, Travel } from '@transferwise/icons';
+import { Clock, Taxi, Suitcase } from '@transferwise/icons';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
@@ -233,7 +233,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
         <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
           The account verification is taking longer than usual.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
+        <InlinePrompt {...args} media={<Suitcase title="Activated: " />} sentiment="positive">
           Your travel account is set up and ready to use.
         </InlinePrompt>
         <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
@@ -256,13 +256,13 @@ export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive" width="full">
+        <InlinePrompt {...args} media={<Suitcase />} sentiment="positive" width="full">
           This prompt will take the full width of its container.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+        <InlinePrompt {...args} media={<Suitcase />} sentiment="positive">
           This prompt will hug its content.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+        <InlinePrompt {...args} media={<Suitcase />} sentiment="positive">
           This prompt is configured to hug its content, but since the content is long enough to span
           across multiple lines, it will expand to the full width of its container. And no, you
           should not put pages of text here in the first place, but we recognise that some

package/src/prompt/InlinePrompt/InlinePrompt.test.story.tsx

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react-webpack5';
-import { Travel } from '@transferwise/icons';
+import { Suitcase } from '@transferwise/icons';
 import { InlinePrompt } from './InlinePrompt';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof InlinePrompt>;
 
 export const TinyScreen: Story = {
   render: () => (
-    <InlinePrompt sentiment="positive" media={<Travel />}>
+    <InlinePrompt sentiment="positive" media={<Suitcase />}>
       Your travel money account is now active and ready to use for international transactions.
     </InlinePrompt>
   ),

package/src/select/Select.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Person as ProfileIcon, Globe as GlobeIcon } from '@transferwise/icons';
+import { Person, Globe as GlobeIcon } from '@transferwise/icons';
 import { useState } from 'react';
 import Select, { SelectItem, SelectOptionItem } from './Select';
 
@@ -75,7 +75,7 @@ export const Basic: Story = {
       { value: 2, label: 'A disabled thing', disabled: true },
       { separator: true },
       { header: 'Icons' },
-      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
+      { value: 3, label: 'Profile', icon: <Person /> },
       {
         value: 4,
         label: 'USD',
@@ -312,7 +312,7 @@ export const AdvancedSearch: Story = {
       { value: 2, label: 'A disabled thing', disabled: true },
       { separator: true },
       { header: 'Icons' },
-      { value: 3, label: 'Profile', icon: <ProfileIcon /> },
+      { value: 3, label: 'Profile', icon: <Person /> },
       { value: 4, label: 'Globe', icon: <GlobeIcon /> },
       { header: 'Currencies' },
       { value: 5, label: 'British pound', currency: 'gbp' },

package/src/select/option/Option.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Person as ProfileIcon } from '@transferwise/icons';
+import { Person } from '@transferwise/icons';
 
 import Option, { Props as OptionProps } from './Option';
 
@@ -31,7 +31,7 @@ describe('Option', () => {
   });
 
   it('should render the given icon', () => {
-    renderOption({ icon: <ProfileIcon /> });
+    renderOption({ icon: <Person /> });
     const optionElement = screen.getByTestId('test-option');
     expect(optionElement.querySelector('svg')).toBeInTheDocument();
   });
@@ -43,7 +43,7 @@ describe('Option', () => {
   });
 
   it('should override the currency flag with the given icon', () => {
-    renderOption({ currency: 'USD', icon: <ProfileIcon /> });
+    renderOption({ currency: 'USD', icon: <Person /> });
     const optionElement = screen.getByTestId('test-option');
     expect(optionElement.querySelector('svg')).toBeInTheDocument();
     expect(optionElement.querySelectorAll('svg')).toHaveLength(1);

package/src/summary/Summary.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from 'storybook/actions';
-import { Home as HomeIcon } from '@transferwise/icons';
+import { House } from '@transferwise/icons';
 import { Status } from '../common';
 import { InfoPresentation } from '../info';
 import Summary, { type Props as SummaryProps } from './Summary';
@@ -32,7 +32,7 @@ export const Basic = (args: SummaryProps) => {
         }}
         as="li"
         description={description}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="Verify your address"
         status={Status.NOT_DONE}
       />
@@ -51,7 +51,7 @@ export const Basic = (args: SummaryProps) => {
           'aria-label': 'Please click here to know more about your address update status',
           onClick: action('Summary Info clicked'),
         }}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="You verified your address"
         status={Status.DONE}
       />
@@ -72,7 +72,7 @@ export const Basic = (args: SummaryProps) => {
           'aria-label': 'Please click here to know more about your address update status',
           onClick: action('Summary Info clicked'),
         }}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="We’re verifying your address"
         status={Status.PENDING}
       />
@@ -85,7 +85,7 @@ export const Basic = (args: SummaryProps) => {
         }}
         as="li"
         description={description}
-        icon={<HomeIcon size={24} />}
+        icon={<House size={24} />}
         title="We’re verifying your address"
         status={Status.PENDING}
       />

package/src/summary/Summary.test.story.tsx

@@ -1,4 +1,4 @@
-import { Home as HomeIcon } from '@transferwise/icons';
+import { House } from '@transferwise/icons';
 import { Status } from '../common';
 import Summary, { type SummaryProps } from '.';
 
@@ -16,7 +16,7 @@ export const LongText = () => {
       'aria-label': ' Click here to change address',
     },
     as: 'li',
-    icon: <HomeIcon size={24} />,
+    icon: <House size={24} />,
     status: Status.NOT_DONE,
     info: {
       title: 'Title',