@transferwise/components 46.119.5 → 46.120.1

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/provider/theme/ThemeProvider.story.tsx

@@ -23,6 +23,7 @@ function ThemeProvider(props: ThemeProviderProps) {
 export default {
   component: ThemeProvider,
   title: 'Foundations/ThemeProvider',
+  tags: ['!manifest'],
 } satisfies Meta<typeof ThemeProvider>;
 
 type Story = StoryObj<typeof ThemeProvider>;

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

package/src/radioGroup/RadioGroup.test.story.tsx

@@ -0,0 +1,62 @@
+import RadioGroup, { RadioGroupProps } from './RadioGroup';
+import { Field } from '../field/Field';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+const meta = {
+  component: RadioGroup,
+  title: 'Forms/RadioGroup/tests',
+  tags: ['!autodocs'],
+  args: {
+    selectedValue: 'radio-2',
+    name: 'radio-group',
+    radios: [
+      {
+        value: 'radio-1',
+        label: 'Radio1',
+      },
+      {
+        value: 'radio-2',
+        label: 'Radio2',
+      },
+    ],
+    onChange: fn(),
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
+
+export const FieldsWithPrompt = {
+  render: function Render(args) {
+    return (
+      <>
+        {['i1', 'i2'].map((id) => (
+          <Field
+            key={id}
+            label="Field label"
+            description="Field description"
+            message="Something went great"
+            sentiment="positive"
+          >
+            <RadioGroup {...args} selectedValue="radio-2" />
+          </Field>
+        ))}
+      </>
+    );
+  },
+} satisfies Story;
+
+export const FieldsWithoutPrompt = {
+  render: function Render(args) {
+    return (
+      <>
+        {['i1', 'i2'].map((id) => (
+          <Field key={id} label="Field label" sentiment="positive">
+            <RadioGroup {...args} selectedValue="radio-2" />
+          </Field>
+        ))}
+      </>
+    );
+  },
+} satisfies Story;

package/src/radioGroup/RadioGroup.tsx

@@ -29,7 +29,12 @@ export default function RadioGroup<T extends string | number = never>({
   const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
 
   return radios.length > 0 ? (
-    <div role="radiogroup" {...inputAttributes} {...UNSAFE_inputAttributes}>
+    <div
+      role="radiogroup"
+      {...inputAttributes}
+      {...UNSAFE_inputAttributes}
+      className="wds-radio-group"
+    >
       {radios.map(({ value = '' as T, ...restProps }, index) => (
         <Radio
           // eslint-disable-next-line react/no-array-index-key

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/react-webpack5';
+import { StoryFn, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 import Button from '../button';
@@ -10,83 +10,87 @@ export default {
   title: 'Forms/SegmentedControl',
 };
 
-const Template: StoryFn = (args) => {
-  const [segments, setSegments] = React.useState([
-    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
-    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
-    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
-  ]);
+type Story = StoryObj<typeof SegmentedControl>;
 
-  const [segmentsWithControls, setSegmentsWithControls] = React.useState([
-    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
-    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
-    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
-  ]);
+const Template: Story = {
+  render: (args) => {
+    const [segments, setSegments] = React.useState([
+      { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
+      { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
+      { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
+    ]);
 
-  const [value, setValue] = React.useState(segments[0].value);
+    const [segmentsWithControls, setSegmentsWithControls] = React.useState([
+      { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
+      { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
+      { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
+    ]);
 
-  console.log('render: segments.length', segments.length);
-  return (
-    <div className="p-a-2">
-      <SegmentedControl
-        name="aSegmentedControl"
-        value={value}
-        onChange={setValue}
-        {...(args.mode === 'view'
-          ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
-          : { segments, mode: 'input' })}
-      />
-      <div className="m-a-2" id="aControlId">
-        <p>Selected value: {value}</p>
-      </div>
-      <div className="m-a-2">
-        <p>
-          Force the <b>selectedValue</b> to be one of the following:
-          <ul>
-            {segments.map((segment) => (
-              <li key={segment.id}>
-                <a
-                  href="/"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setValue(segment.value);
-                  }}
-                >
-                  {segment.label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </p>
-      </div>
-      <div className="m-a-2">
-        <Button
-          priority="secondary"
-          type="danger"
-          size="sm"
-          disabled={segments.length < 2}
-          onClick={() => {
-            const index = segments.findIndex((s) => s.value !== value);
-            setSegments((prev) => prev.filter((_, i) => i !== index));
-            setSegmentsWithControls((prev) => prev.filter((_, i) => i !== index));
-          }}
-        >
-          Remove one segment
-        </Button>
+    const [value, setValue] = React.useState(segments[0].value);
+
+    console.log('render: segments.length', segments.length);
+    return (
+      <div className="p-a-2">
+        <SegmentedControl
+          name="aSegmentedControl"
+          value={value}
+          onChange={setValue}
+          {...(args.mode === 'view'
+            ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
+            : { segments, mode: 'input' })}
+        />
+        <div className="m-a-2" id="aControlId">
+          <p>Selected value: {value}</p>
+        </div>
+        <div className="m-a-2">
+          <p>
+            Force the <b>selectedValue</b> to be one of the following:
+            <ul>
+              {segments.map((segment) => (
+                <li key={segment.id}>
+                  <a
+                    href="/"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setValue(segment.value);
+                    }}
+                  >
+                    {segment.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </p>
+        </div>
+        <div className="m-a-2">
+          <Button
+            priority="secondary"
+            type="danger"
+            size="sm"
+            disabled={segments.length < 2}
+            onClick={() => {
+              const index = segments.findIndex((s) => s.value !== value);
+              setSegments((prev) => prev.filter((_, i) => i !== index));
+              setSegmentsWithControls((prev) => prev.filter((_, i) => i !== index));
+            }}
+          >
+            Remove one segment
+          </Button>
+        </div>
       </div>
-    </div>
-  );
+    );
+  },
 };
 
-export const SegmentedControlDefault = {
-  render: Template,
+export const SegmentedControlDefault: Story = {
+  ...Template,
   args: {
     mode: 'input',
   },
 };
 
-export const SegmentedControlView = {
-  render: Template,
+export const SegmentedControlView: Story = {
+  ...Template,
   args: {
     mode: 'view',
   },