@transferwise/components 46.132.1 → 46.133.1

package/src/listItem/ListItem.grid.less

@@ -14,7 +14,7 @@
       }
     }
 
-    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+    @container (width > @wds-list-item-cq-max) {
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
@@ -169,7 +169,9 @@
       }
     }
 
-    @container (min-width: unit(@wds-list-item-cq-min + 1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
+    // LESS struggles with ranged container queries so
+    // we need to escape the interpolated expression.
+    @container (~"@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}") {
       .wds-list-item-media-image{
         object-position: bottom left;
       }
@@ -404,7 +406,7 @@
       }
     }
 
-    @container (max-width: unit(@wds-list-item-cq-min, px)) {
+    @container (width <= @wds-list-item-cq-min) {
       .wds-list-item-control-wrapper {
         align-content: start;
       }

package/src/listItem/ListItem.less

@@ -189,7 +189,7 @@
     flex-direction: column;
     justify-content: center;
 
-    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+    @container (width > @wds-list-item-cq-max) {
       min-height: var(--wds-list-item-value-min-height, 100%);
     }
   }

package/src/listItem/ListItem.vars.less

@@ -7,5 +7,5 @@
 // `packages/components/src/listItem/constants.ts`
 //
 // @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
-@wds-list-item-cq-min: 240;
-@wds-list-item-cq-max: 308;
+@wds-list-item-cq-min: 240px;
+@wds-list-item-cq-max: 308px;

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -37,7 +37,6 @@ export default meta;
 type Story = StoryObj<ListItemNavigationProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemNavigationProps) => {
     return (
       <List>

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -50,7 +50,6 @@ export default meta;
 type Story = StoryObj<ListItemPromptProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   parameters: {
     docs: {
       source: 'dynamic',

package/src/listItem/Radio/ListItemRadio.story.tsx

@@ -33,7 +33,6 @@ export default meta;
 type Story = StoryObj<ListItemRadioProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemRadioProps) => {
     return (
       <List>

package/src/listItem/Switch/ListItemSwitch.story.tsx

@@ -33,7 +33,6 @@ export default meta;
 type Story = StoryObj<ListItemSwitchProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemSwitchProps) => {
     return (
       <List>

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -225,3 +225,58 @@ export const ImageAlignment: StoryObj<PreviewStoryArgs> = {
     );
   },
 };
+
+// Our container queries left 1px gap between breakpoint definitions.
+// This test makes sure that LI placed in a parent of {width} still
+// works fine, where: {breakpoint} < {width} < {breakpoint} + 1px
+export const SubPixelWidths: StoryObj<PreviewStoryArgs> = {
+  parameters: {
+    controls: { disable: false },
+  },
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    previewImageSize: 48,
+    previewWithLineGuides: true,
+    previewPrompt: false,
+  },
+  argTypes: previewArgTypes,
+  render: (args: PreviewStoryArgs) => {
+    const [props] = getPropsForPreview(args);
+
+    return (
+      <>
+        <List
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            width: `${2 * LISTITEM_CQ.MIN + 1}px`,
+          }}
+        >
+          <ListItem
+            {...props}
+            title={`This list item is ${LISTITEM_CQ.MIN + 0.5}px wide`}
+            subtitle="this translates to '@wds-list-item-cq-min + 0.5px'"
+            media={<ListItem.Image src={portraitImage} alt="portrait image" />}
+          />
+          <li />
+        </List>
+        <List
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            width: `${2 * LISTITEM_CQ.MAX + 1}px`,
+          }}
+        >
+          <ListItem
+            {...props}
+            title={`This list item is ${LISTITEM_CQ.MAX + 0.5}px wide`}
+            subtitle="this translates to '@wds-list-item-cq-max + 0.5px'"
+            media={<ListItem.Image src={portraitImage} alt="portrait image" />}
+          />
+          <li />
+        </List>
+      </>
+    );
+  },
+};

package/src/listItem/_stories/ListItem.story.tsx

@@ -33,6 +33,7 @@ const hideControls = disableControls([
  */
 export default {
   component: ListItem,
+  tags: ['new'],
   subcomponents: {
     'ListItem.AdditionalInfo': ListItem.AdditionalInfo,
     'ListItem.Prompt': ListItem.Prompt,

package/src/logo/Logo.story.tsx

@@ -2,36 +2,196 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
 
-export default {
+/**
+ * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
+ */
+const meta: Meta<typeof Logo> = {
   component: Logo,
   title: 'Content/Logo',
-  render: () => {
-    return (
-      <>
-        <div>
+  args: {
+    type: 'WISE',
+    inverse: false,
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: Object.values(LogoType),
+    },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Logo>;
+
+/** Explore all props via the controls panel. */
+export const Playground: Story = {
+  render: (args) => (
+    <div
+      style={{
+        padding: '2rem',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      <Logo {...args} />
+    </div>
+  ),
+};
+
+/**
+ * The three logo types: standard Wise, Wise Business, and Wise Platform. <br />
+ * `WISE_BUSINESS` renders the same SVG as `WISE` but with the accessible label "Wise Business".
+ */
+export const Types: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        gap: '3rem',
+        alignItems: 'center',
+        padding: '2rem',
+        borderRadius: '8px',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo {...args} type={type} />
+          <span
+            style={{
+              fontSize: '12px',
+              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
+            }}
+          >
+            {type}
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" />
+<Logo type="WISE_BUSINESS" />
+<Logo type="WISE_PLATFORM" />`,
+      },
+    },
+  },
+};
+
+/**
+ * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
+ */
+export const Responsive: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <div>
+        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
+          {'< 576px (flag only)'}
+        </span>
+        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} />
-            </div>
+            <span key={type} className="np-logo" style={{ display: 'inline-block' }}>
+              <style>{`.responsive-sm .np-logo-svg--size-md { display: none !important; } .responsive-sm .np-logo-svg--size-sm { display: block !important; }`}</style>
+              <span className="responsive-sm">
+                <Logo type={type} />
+              </span>
+            </span>
           ))}
         </div>
-        <div className="bg--dark">
+      </div>
+      <div>
+        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
+          {'\u2265 576px (full wordmark)'}
+        </span>
+        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} inverse />
-            </div>
+            <Logo key={type} type={type} />
           ))}
         </div>
-      </>
-    );
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: { code: null },
+    },
   },
-} satisfies Meta<typeof Logo>;
-
-type Story = StoryObj<typeof Logo>;
+};
 
-export const Basic: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
+/**
+ * All logo types on a dark background using the `inverse` prop, which renders a
+ * light-coloured version suited for dark surfaces.
+ */
+export const Inverse: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          gap: '3rem',
+          alignItems: 'center',
+          backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)',
+          padding: '2rem',
+          borderRadius: '8px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => (
+    <>
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo type={type} inverse />
+          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
+        </div>
+      ))}
+    </>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" inverse />
+<Logo type="WISE_BUSINESS" inverse />
+<Logo type="WISE_PLATFORM" inverse />`,
+      },
+    },
   },
 };

package/src/logo/Logo.test.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Logo from '.';
+
+import Logo, { LogoType } from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Logo> = {
@@ -7,14 +8,46 @@ const meta: Meta<typeof Logo> = {
   tags: ['!autodocs', '!manifest'],
   title: 'Content/Logo/Tests',
 };
+
 export default meta;
 
 type Story = StoryObj<typeof Logo>;
 
-export const Mobile: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
-  },
-  ...withVariantConfig(['mobile']),
+const AllVariants = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
+      {Object.values(LogoType).map((type) => (
+        <Logo key={type} type={type} />
+      ))}
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        gap: '2rem',
+        alignItems: 'center',
+        backgroundColor: 'var(--color-content-primary)',
+        padding: '1rem',
+        borderRadius: '8px',
+      }}
+    >
+      {Object.values(LogoType).map((type) => (
+        <Logo key={type} type={type} inverse />
+      ))}
+    </div>
+  </div>
+);
+
+export const Variants: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+export const RTL: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['rtl']),
+};
+
+export const Zoom400: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['400%']),
 };

package/src/logo/Logo.tsx

@@ -33,7 +33,10 @@ export enum LogoType {
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
-  /** If true, will use dark colours for dark on light theme */
+  /**
+   * Renders a light-coloured version suited for dark backgrounds.
+   * @default false
+   */
   inverse?: boolean;
   /**
    * What type of logo to display
@@ -48,6 +51,12 @@ const labelByType = {
   WISE_PLATFORM: 'Wise Platform',
 } satisfies Record<`${LogoType}`, string>;
 
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoSm =
     svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];

package/src/main.css

@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 241px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   justify-content: center;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;
@@ -30167,6 +30167,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   grid-row-start: 1;
 }
 
+.np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
+  padding-left: 48px;
+  padding-left: var(--size-48);
+}
+
 .np-input-addon {
   pointer-events: none;
   z-index: 10;
@@ -30179,16 +30184,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-duration: 150ms;
 }
 
+.np-input-addon.np-input-addon--avatar > .np-avatar-view {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+
 .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
   opacity: 0.45;
   mix-blend-mode: luminosity;
 }
 
-.np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
   color: var(--color-interactive-primary);
 }
 
-.np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
   color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }
@@ -31687,6 +31697,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 100%;
 }
 
+.tw-telephone__country-select--with-input-group-addon-start .np-button-input {
+  padding-inline-start: 48px;
+  padding-inline-start: var(--size-48);
+  padding-inline-end: 26px !important;
+}
+
 .tw-telephone__number-input {
   flex: auto 1 1;
 }

package/src/phoneNumberInput/PhoneNumberInput.css

@@ -18,6 +18,11 @@
 .tw-telephone__country-select .np-input-group {
   width: 100%;
 }
+.tw-telephone__country-select--with-input-group-addon-start .np-button-input {
+  padding-inline-start: 48px;
+  padding-inline-start: var(--size-48);
+  padding-inline-end: 26px !important;
+}
 .tw-telephone__number-input {
   flex: auto 1 1;
 }

package/src/phoneNumberInput/PhoneNumberInput.less

@@ -19,6 +19,13 @@
   }
 }
 
+.tw-telephone__country-select--with-input-group-addon-start {
+  .np-button-input {
+    padding-inline-start: var(--size-48);
+    padding-inline-end: 26px !important;
+  }
+}
+
 .tw-telephone__number-input {
   flex: auto 1 1;
 }

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
+import { useInputPaddings } from '../inputs/InputGroup';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
@@ -67,6 +68,8 @@ const PhoneNumberInput = ({
   const countryCodeSelectRef = useRef<HTMLButtonElement>(null);
   const phoneNumberInputRef = useRef<HTMLInputElement>(null);
   const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const { paddingInlineStart } = useInputPaddings();
+  const hasInputGroupAddonStart = paddingInlineStart != null;
   const fieldLabelRef = useFieldLabelRef();
   const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
 
@@ -197,7 +200,13 @@ const PhoneNumberInput = ({
       <label className="sr-only" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>
         {formatMessage(messages.countryCodeLabel)}
       </label>
-      <div className="tw-telephone__country-select">
+      <div
+        className={`tw-telephone__country-select${
+          hasInputGroupAddonStart
+            ? ' tw-telephone__country-select--with-input-group-addon-start'
+            : ''
+        }`}
+      >
         <SelectInput
           triggerRef={countryCodeSelectRef}
           placeholder={formatMessage(messages.selectInputPlaceholder)}

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

@@ -96,7 +96,6 @@ const getPropsForPreview = (
 };
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   argTypes: previewArgTypes,
   args: {
     previewMedia: false,

package/src/section/Section.story.tsx

@@ -1,11 +1,10 @@
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-
+import { action } from 'storybook/actions';
 import Accordion from '../accordion';
 import Card from '../card';
 import Header from '../header';
-import NavigationOption from '../navigationOption';
-
+import ListItem from '../listItem';
 import Section from './Section';
 
 export default {
@@ -105,12 +104,18 @@ export const WithCards = () => {
   );
 };
 
-export const WithNavigationOptions = () => {
+export const WithListItems = () => {
   return (
     <Section>
-      <Header title="Section with options" />
-      <NavigationOption title="Option 1" onClick={() => alert('Option 1')} />
-      <NavigationOption title="Option 2" onClick={() => alert('Option 2')} />
+      <Header title="Section with list items" />
+      <ListItem
+        title="Item 1"
+        control={<ListItem.Navigation onClick={() => action('Item 1')} />}
+      />
+      <ListItem
+        title="Item 2"
+        control={<ListItem.Navigation onClick={() => action('Item 2')} />}
+      />
     </Section>
   );
 };

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -32,6 +32,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
   title: 'Foundations/SentimentSurface',
+  tags: ['early-access'],
   argTypes: {
     sentiment: {
       control: 'select',
@@ -124,7 +125,6 @@ export const Playground: Story = {
       </div>
     ),
   },
-  tags: ['!autodocs'],
 };
 
 const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];