@transferwise/components 46.135.2 → 46.136.0

package/src/main.css

@@ -26290,6 +26290,52 @@ a[data-toggle="tooltip"] {
   --color-sentiment-background-surface-active: #B6ECEC;
 }
 
+.wds-container {
+  --wds-container-padding-inline: 16px;
+  --wds-container-width-fluid: 100%;
+  --wds-container-width-standard: 1160px;
+  --wds-container-width-narrow: 840px;
+  --wds-container-width-compact: 600px;
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: 16px;
+  padding-inline: var(--wds-container-padding-inline);
+}
+
+@media (min-width: 576px) {
+  .wds-container {
+    --wds-container-padding-inline: var(--size-16);
+  }
+}
+
+@media (min-width: 768px) {
+  .wds-container {
+    --wds-container-padding-inline: var(--size-32);
+  }
+}
+
+@media (min-width: 992px) {
+  .wds-container {
+    --wds-container-padding-inline: var(--size-40);
+  }
+}
+
+.wds-container--standard {
+  max-width: var(--wds-container-width-standard);
+}
+
+.wds-container--narrow {
+  max-width: var(--wds-container-width-narrow);
+}
+
+.wds-container--compact {
+  max-width: var(--wds-container-width-compact);
+}
+
+.wds-container--fluid {
+  max-width: var(--wds-container-width-fluid);
+}
+
 .critical-comms {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/src/main.less

@@ -2,6 +2,7 @@
 
 @import "./sentimentSurface/SentimentSurface.less";
 
+@import "./container/Container.less";
 @import "./criticalBanner/CriticalCommsBanner.less";
 @import "./accordion/Accordion.less";
 @import "./actionButton/ActionButton.less";

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { within, userEvent, expect } from 'storybook/test';
-import { Lock } from '@transferwise/icons';
+import { Padlock } from '@transferwise/icons';
 import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
@@ -117,7 +117,7 @@ export const SingleCurrency: Story = {
 
 export const MultipleCurrencies: Story = {
   args: {
-    addon: <Lock />,
+    addon: <Padlock />,
     currencies: [
       {
         header: 'Popular currencies',

package/src/navigationOption/NavigationOption.story.tsx

@@ -4,7 +4,7 @@ import { Illustration, Assets, Flag } from '@wise/art';
 import {
   FastFlag as FastFlagIcon,
   Bank as BankIcon,
-  Profile,
+  Person,
   UpwardGraph as UpwardGraphIcon,
   FastFlag,
 } from '@transferwise/icons';
@@ -106,7 +106,7 @@ export const Variants: StoryObj<StoryArgs> = {
           showMediaCircle={false}
           media={
             <AvatarView badge={{ type: 'reference' }}>
-              <Profile />
+              <Person />
             </AvatarView>
           }
           content={hasTitleOnly ? null : args.content}
@@ -248,7 +248,7 @@ export const NewContactContent: StoryObj<StoryArgs> = {
       showMediaCircle={false}
       media={
         <AvatarView badge={{ type: 'reference' }}>
-          <Profile size="24" />
+          <Person size="24" />
         </AvatarView>
       }
       onClick={fn()}

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
+import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 import AvatarView from '../avatarView';
 import { ProfileType } from '../common';
 import Logo from '../logo';
@@ -28,7 +28,7 @@ export default meta;
 const avatarProfiles = {
   '': null,
   Business: <BriefcaseIcon size="24" />,
-  Profile: <ProfileIcon size="24" />,
+  Profile: <Person size="24" />,
 };
 
 export const Basic: StoryObj<StoryArgs> = {

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import { Bank, Star, Travel, Briefcase } from '@transferwise/icons';
+import { Bank, Star, Suitcase, Briefcase } from '@transferwise/icons';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -116,7 +116,7 @@ const MEDIA_OPTIONS: Record<string, ActionPromptProps['media']> = {
   },
   'Avatar: Icon (Bank)': { avatar: { asset: <Bank /> } },
   'Avatar: Icon (Star)': { avatar: { asset: <Star /> } },
-  'Avatar: Icon (Travel)': { avatar: { asset: <Travel /> } },
+  'Avatar: Icon (Suitcase)': { avatar: { asset: <Suitcase /> } },
   'Avatar: Icon (Briefcase)': { avatar: { asset: <Briefcase /> } },
   'Avatar: Initials': { avatar: { profileName: 'John Doe' } },
 };
@@ -133,7 +133,7 @@ const previewArgTypes = {
       'Avatar: Personal (EU badge)',
       'Avatar: Icon (Bank)',
       'Avatar: Icon (Star)',
-      'Avatar: Icon (Travel)',
+      'Avatar: Icon (Suitcase)',
       'Avatar: Icon (Briefcase)',
       'Avatar: Initials',
     ],

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Freeze, People, Travel } from '@transferwise/icons';
+import { Freeze, People, Suitcase } from '@transferwise/icons';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import ActionPrompt from './ActionPrompt';
@@ -248,7 +248,7 @@ export const Responsiveness: Story = {
         sentiment="proposition"
         title="Stacked (320px)"
         description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
+        media={{ avatar: { asset: <Suitcase /> } }}
         action={{ label: 'Primary action', onClick: fn() }}
         actionSecondary={{ label: 'Secondary', onClick: fn() }}
         onDismiss={fn()}
@@ -257,7 +257,7 @@ export const Responsiveness: Story = {
         sentiment="proposition"
         title="Side-by-side (480px)"
         description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
+        media={{ avatar: { asset: <Suitcase /> } }}
         action={{ label: 'Primary action', onClick: fn() }}
         actionSecondary={{ label: 'Secondary', onClick: fn() }}
         onDismiss={fn()}

package/src/prompt/InfoPrompt/InfoPrompt.accessibility.docs.mdx

@@ -64,7 +64,7 @@ Custom media icons should include their own accessibility attributes. Use the `t
 <InfoPrompt
   sentiment="success"
   description="Your travel account is ready!"
-  media={{ asset: <Travel title="Travel feature" /> }}
+  media={{ asset: <Suitcase title="Travel feature" /> }}
 />
 
 <InfoPrompt

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Confetti, GiftBox, Star, Travel, Briefcase, Plane } from '@transferwise/icons';
+import { Confetti, GiftBox, Star, Suitcase, Briefcase, Plane } from '@transferwise/icons';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -90,7 +90,7 @@ const MEDIA_OPTIONS: Record<string, { asset: ReactElement } | undefined> = {
   star: { asset: <Star title="Starred" /> },
   confetti: { asset: <Confetti size={24} title="Celebration" /> },
   giftbox: { asset: <GiftBox title="Gift" /> },
-  travel: { asset: <Travel title="Travel" /> },
+  travel: { asset: <Suitcase title="Travel" /> },
   briefcase: { asset: <Briefcase title="Business" /> },
   plane: { asset: <Plane title="Travel" /> },
 };
@@ -297,7 +297,7 @@ export const MediaTypes: StoryObj<InfoPromptProps> = {
       <InfoPrompt
         sentiment="success"
         description="Your travel account is ready!"
-        media={{ asset: <Travel title="Travel" /> }}
+        media={{ asset: <Suitcase title="Travel" /> }}
       />
       <InfoPrompt
         sentiment="warning"

package/src/prompt/InlinePrompt/InlinePrompt.accessibility.docs.mdx

@@ -30,7 +30,7 @@ By default, sentiment icons have these labels:
   dark
   code={`
 <InlinePrompt 
-  media={<Travel />} 
+  media={<Suitcase />} 
   sentiment="positive" 
   mediaLabel="Travel feature enabled: "
 >

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',