@transferwise/components 46.119.5 → 46.120.0

package/src/listItem/_stories/variants/helpers.tsx

@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react-webpack5';
-import { StoryConfig, storyConfig } from '../../../test-utils';
 import List from '../../../list';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import {
@@ -11,144 +10,148 @@ import {
   SB_ListItem_ControlType as ControlType,
 } from '../subcomponents';
 
-type Story = StoryObj<ListItemProps>;
 type VariantPartial = { title: string } & Partial<ListItemProps>;
+type Variant = 'default' | 'dark' | 'rtl' | 'forest-green' | 'bright-green' | 'mobile' | '400%';
 
 const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
   TEXT;
 const prompt = PROMPT.nonInteractive;
 const media = MEDIA.avatarSingle;
 
-export const generateVariantsForControl = (
-  controlType: ControlType,
-  variant: NonNullable<StoryConfig['variants']>[number] = 'default',
-): Story => {
-  const control = CONTROLS[controlType];
-  const isInteractive = [
-    'partialButton',
-    'partialButtonAsLink',
-    'partialIconButton',
-    'partialIconButtonAsLink',
-  ].includes(controlType);
-  const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
-  const instances = [
-    { title },
-    { title: longTitle },
-    { title, valueTitle },
-    { title, valueTitle: longValueTitle },
-    { title: longTitle, valueTitle },
-    { title, subtitle },
-    { title, subtitle: longSubtitle },
-    { title, additionalInfo },
-    { title, valueTitle, valueSubtitle },
-    { title, valueTitle: longValueTitle, valueSubtitle },
-    { title, subtitle, inverted: true },
-    { title, subtitle, valueTitle },
-    { title, subtitle, valueTitle, inverted: true },
-    { title, subtitle, valueTitle, valueSubtitle },
-    {
-      title: longTitle,
-      subtitle: longSubtitle,
-      valueTitle,
-      valueSubtitle,
-      additionalInfo: INFO.nonInteractive,
-    },
-    { title, subtitle, valueTitle, valueSubtitle, inverted: true },
-    { media, title },
-    { media, title: longTitle },
-    { media, title, valueTitle },
-    { media, title: longTitle, valueTitle },
-    { media, title: longTitle, valueSubtitle },
-    { media, title, valueTitle: longValueTitle },
-    { media, title, valueTitle: longValueTitle, valueSubtitle },
-    { media, title, subtitle },
-    { media, title: longTitle, subtitle },
-    { media, title, valueTitle, valueSubtitle },
-    { media, title, valueTitle },
-    { media, title, valueSubtitle },
-    { media, title, subtitle },
-    { media, title, additionalInfo },
-    { media, title, subtitle, valueTitle },
-    { media, title, subtitle, valueTitle, valueSubtitle },
-    { media, title, subtitle, additionalInfo: INFO.nonInteractive },
-    isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
-    { media, title, subtitle, additionalInfo, valueTitle },
-    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
-    {
-      media,
-      title: longTitle,
-      subtitle: longSubtitle,
-      valueTitle,
-      valueSubtitle,
-      additionalInfo: INFO.nonInteractive,
-    },
-    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      inverted: true,
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      spotlight: 'active',
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      spotlight: 'inactive',
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      spotlight: 'inactive',
-      disabled: true,
-    },
-  ].filter(Boolean) as VariantPartial[];
+type VariantStoryProps = {
+  controlType: ControlType;
+  variant?: Variant;
+};
+
+type VariantStory = StoryObj<VariantStoryProps>;
+
+export const VariantStory: VariantStory = {
+  render: ({ controlType, variant = 'default' }) => {
+    const control = CONTROLS[controlType];
+    const isInteractive = [
+      'partialButton',
+      'partialButtonAsLink',
+      'partialIconButton',
+      'partialIconButtonAsLink',
+    ].includes(controlType);
+    const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
+    const instances = [
+      { title },
+      { title: longTitle },
+      { title, valueTitle },
+      { title, valueTitle: longValueTitle },
+      { title: longTitle, valueTitle },
+      { title, subtitle },
+      { title, subtitle: longSubtitle },
+      { title, additionalInfo },
+      { title, valueTitle, valueSubtitle },
+      { title, valueTitle: longValueTitle, valueSubtitle },
+      { title, subtitle, inverted: true },
+      { title, subtitle, valueTitle },
+      { title, subtitle, valueTitle, inverted: true },
+      { title, subtitle, valueTitle, valueSubtitle },
+      {
+        title: longTitle,
+        subtitle: longSubtitle,
+        valueTitle,
+        valueSubtitle,
+        additionalInfo: INFO.nonInteractive,
+      },
+      { title, subtitle, valueTitle, valueSubtitle, inverted: true },
+      { media, title },
+      { media, title: longTitle },
+      { media, title, valueTitle },
+      { media, title: longTitle, valueTitle },
+      { media, title: longTitle, valueSubtitle },
+      { media, title, valueTitle: longValueTitle },
+      { media, title, valueTitle: longValueTitle, valueSubtitle },
+      { media, title, subtitle },
+      { media, title: longTitle, subtitle },
+      { media, title, valueTitle, valueSubtitle },
+      { media, title, valueTitle },
+      { media, title, valueSubtitle },
+      { media, title, subtitle },
+      { media, title, additionalInfo },
+      { media, title, subtitle, valueTitle },
+      { media, title, subtitle, valueTitle, valueSubtitle },
+      { media, title, subtitle, additionalInfo: INFO.nonInteractive },
+      isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
+      { media, title, subtitle, additionalInfo, valueTitle },
+      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
+      {
+        media,
+        title: longTitle,
+        subtitle: longSubtitle,
+        valueTitle,
+        valueSubtitle,
+        additionalInfo: INFO.nonInteractive,
+      },
+      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        inverted: true,
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        spotlight: 'active',
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        spotlight: 'inactive',
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        spotlight: 'inactive',
+        disabled: true,
+      },
+    ].filter(Boolean) as VariantPartial[];
 
-  return storyConfig(
-    {
-      render: () => (
-        <List>
-          {instances.map((instance, instanceIndex) => (
-            <ListItem
-              key={`${variant}-${controlType}-${instanceIndex}`}
-              control={control}
-              {...instance}
-            />
-          ))}
-        </List>
-      ),
-    },
-    { variants: [variant] },
-  );
+    return (
+      <List>
+        {instances.map((instance) => (
+          <ListItem
+            key={`${variant}-${controlType}-${JSON.stringify(instance)}`}
+            control={control}
+            {...instance}
+          />
+        ))}
+      </List>
+    );
+  },
+  parameters: {
+    variants: ['default'],
+  },
 };

package/src/main.css

@@ -949,6 +949,9 @@
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);
@@ -3822,10 +3825,19 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field .form-group--typeahead[class],
+.np-field .np-checkbox-label[class] {
+  margin-bottom: 0;
+}
+.np-field:has(.wds-radio-group) .np-field__prompt {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;
@@ -5394,6 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}
 .np-section {
   margin-top: 32px;
   margin-top: var(--size-32);
@@ -6920,6 +6935,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
   margin: 0;
 }
+.typeahead--prompt {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/src/main.less

@@ -61,6 +61,7 @@
 @import "./phoneNumberInput/PhoneNumberInput.less";
 @import "./popover/Popover.less";
 @import "./promoCard/PromoCard.less";
+@import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
 @import "./snackbar/Snackbar.less";

package/src/modal/Modal.story.tsx

@@ -5,7 +5,8 @@ import { useState } from 'react';
 
 import { Button, Modal, ModalProps } from '..';
 import { CommonProps, Scroll } from '../common';
-import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
+import { lorem10, lorem100, lorem1000 } from '../test-utils';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: Modal,
@@ -75,7 +76,15 @@ export const Basic: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
+export const BasicMobile: Story = {
+  ...Basic,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
 export const ContentScroll: Story = {
   args: {
@@ -86,7 +95,15 @@ export const ContentScroll: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const ContentScrollMobile: Story = storyConfig(ContentScroll, { variants: ['mobile'] });
+export const ContentScrollMobile: Story = {
+  ...ContentScroll,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
 export const ViewportScroll: Story = {
   args: {
@@ -97,7 +114,15 @@ export const ViewportScroll: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const ViewportScrollMobile: Story = storyConfig(ViewportScroll, { variants: ['mobile'] });
+export const ViewportScrollMobile: Story = {
+  ...ViewportScroll,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
 export const WithoutTitle: Story = {
   args: {
@@ -107,7 +132,15 @@ export const WithoutTitle: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
+export const WithoutTitleMobile: Story = {
+  ...WithoutTitle,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
 export const WithThemeProviderInContent: Story = {
   args: {
@@ -126,6 +159,12 @@ export const WithThemeProviderInContent: Story = {
   ),
 };
 
-export const WithThemeProviderInContentMobile: Story = storyConfig(WithThemeProviderInContent, {
-  variants: ['mobile'],
-});
+export const WithThemeProviderInContentMobile: Story = {
+  ...WithThemeProviderInContent,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};

package/src/moneyInput/MoneyInput.story.tsx

@@ -191,14 +191,14 @@ export const SmallInput: Story = {
 };
 
 export const MediumInput: Story = {
-  render: SmallInput.render,
+  ...SmallInput,
   args: {
     size: 'md',
   },
 };
 
 export const LargeInput: Story = {
-  render: SmallInput.render,
+  ...SmallInput,
   args: {
     size: 'lg',
   },

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -5,6 +5,7 @@ import PrimitiveAnchor from '..';
 const meta: Meta<typeof PrimitiveAnchor> = {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
+  tags: ['!manifest'],
   args: {
     children: 'Click me',
     href: 'https://example.com',

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx

@@ -6,6 +6,7 @@ import PrimitiveAnchor from '..';
 const meta = {
   title: 'Primitives/Anchor/Tests',
   component: PrimitiveAnchor,
+  tags: ['!manifest'],
   args: {
     children: 'Click me',
     href: 'https://example.com',

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -5,6 +5,7 @@ import PrimitiveButton from '..';
 const meta: Meta<typeof PrimitiveButton> = {
   component: PrimitiveButton,
   title: 'Primitives/Button',
+  tags: ['!manifest'],
   args: {
     children: 'Button text',
     onClick: fn(),

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -6,6 +6,7 @@ import PrimitiveButton from '..';
 const meta = {
   title: 'Primitives/Button/Tests',
   component: PrimitiveButton,
+  tags: ['!manifest'],
   args: {
     children: 'Button text',
   },

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -27,6 +27,9 @@
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -23,6 +23,10 @@
     }
   }
 
+  &--full-width {
+    width: 100%;
+  }
+
   &--muted {
     opacity: 0.93;
     filter: grayscale(1);
@@ -69,6 +73,6 @@
     // styles in the CSS package, so keeping it colocated for now.
     .process-circle {
       stroke: currentColor;
-    };
+    }
   }
 }

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -155,4 +155,21 @@ describe('InlinePrompt', () => {
       expect(el).toHaveClass('wds-sentiment-surface');
     });
   });
+
+  describe('width', () => {
+    it('defaults to auto width (no full-width class)', () => {
+      render(<InlinePrompt {...defaultProps} data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--full-width');
+    });
+
+    it('applies auto width (no full-width class) when explicitly set', () => {
+      render(<InlinePrompt {...defaultProps} width="auto" data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--full-width');
+    });
+
+    it('applies full width class when set to full', () => {
+      render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--full-width');
+    });
+  });
 });

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

@@ -14,6 +14,9 @@ const withComponentGrid =
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
         gap,
         maxWidth,
       }}
@@ -26,6 +29,7 @@ export default {
   title: 'Prompts/InlinePrompt',
   component: InlinePrompt,
   tags: ['new'],
+  decorators: [withComponentGrid()],
   args: {
     loading: false,
     muted: false,
@@ -243,6 +247,37 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   decorators: [withComponentGrid()],
 };
 
+/**
+ * `InlinePrompt` can either hug its content or take the full width of its container,
+ * depending on the `width` prop.
+ * Components like `ListItem`, `ExpressiveMoneyInput` or similar will often set it to
+ * `auto`, while plain inputs will prefer `full` to visually match their boundaries.
+ *
+ * **NB**: `InlinePrompt` in its default – `auto` – width will expand to the full width of its container when the content spans across multiple lines.
+ */
+export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
+  render: (args: PreviewStoryArgs) => {
+    return (
+      <>
+        <InlinePrompt {...args} media={<Travel />} sentiment="positive" width="full">
+          This prompt will take the full width of its container.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+          This prompt will hug its content.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Travel />} 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
+          translations are longer than others, and people also use accessibility features that
+          increase font size.
+        </InlinePrompt>
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
 /**
  * When configured with any of the supported sentiments, the colour scheme of the component will propagate to all of its supported descendants, such as instances of a `Link`, `Icon`, and `StatusIcon`.
  */

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -33,6 +33,11 @@ export type InlinePromptProps = {
    * To be used primarily for `proposition` sentiment.
    */
   mediaLabel?: string;
+  /**
+   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.
+   * @default auto
+   */
+  width?: 'auto' | 'full';
   id?: string;
   className?: string;
   'data-testid'?: string;
@@ -53,6 +58,7 @@ export const InlinePrompt = ({
   children,
   media = null,
   mediaLabel,
+  width = 'auto',
   'data-testid': dataTestId,
   ...rest
 }: InlinePromptProps) => {
@@ -91,6 +97,7 @@ export const InlinePrompt = ({
         'wds-inline-prompt',
         `wds-inline-prompt--${sentiment}`,
         {
+          'wds-inline-prompt--full-width': width === 'full',
           'wds-inline-prompt--muted': muted,
           'wds-inline-prompt--loading': loading,
         },

package/src/radioGroup/RadioGroup.css

@@ -0,0 +1,3 @@
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}

package/src/radioGroup/RadioGroup.less

@@ -0,0 +1,3 @@
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}

package/src/radioGroup/RadioGroup.story.tsx

@@ -66,6 +66,8 @@ export const WithinField = {
     const hasError = selectedValue === 'radio-2';
     return (
       <Field
+        label="Field label"
+        description="Field description"
         {...(hasError
           ? {
               message: 'Something went wrong',