@transferwise/components 46.164.0 → 46.165.1

package/src/Link/_stories/Link.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Link from '..';
 
 export default {
@@ -11,16 +11,30 @@ export default {
 type Story = StoryObj<typeof Link>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Link href="#" target="_blank">
-        External link with navigate-away icon
-      </Link>
-      <br />
-      <Link href="#" target="_blank" type="link-large">
-        Large external link with navigate-away icon
-      </Link>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Link href="#" target="_blank">
+          {i18n.externalLink}
+        </Link>
+        <br />
+        <Link href="#" target="_blank" type="link-large">
+          {i18n.largeExternalLink}
+        </Link>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      externalLink: {
+        en: 'External link with navigate-away icon',
+        ar: 'رابط خارجي مع أيقونة الانتقال',
+      },
+      largeExternalLink: {
+        en: 'Large external link with navigate-away icon',
+        ar: 'رابط خارجي كبير مع أيقونة الانتقال',
+      },
+    },
+  }),
 };

package/src/ListItem/ListItem.css

@@ -397,6 +397,11 @@
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-24 {
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 0;
+}
 .wds-list-item + .wds-list-item-spotlight,
 .wds-list-item-spotlight + .wds-list-item {
   margin-block-start: 16px;

package/src/ListItem/ListItem.less

@@ -11,6 +11,10 @@
   padding: var(--size-12) 0;
   container-type: inline-size;
 
+  &-paddingY-24 {
+    padding: var(--size-24) 0;
+  }
+
   & + .wds-list-item-spotlight,
   .wds-list-item-spotlight + & {
     margin-top: var(--size-16);

package/src/ListItem/ListItem.test.tsx

@@ -1513,6 +1513,23 @@ describe('ListItem', () => {
     });
   });
 
+  describe('paddingY', () => {
+    it('uses the default vertical padding when not set', () => {
+      render(<ListItem title="Test Title" />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the default vertical padding when set to 12', () => {
+      render(<ListItem title="Test Title" paddingY={12} />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+
+    it('uses the larger vertical padding when set to 24', () => {
+      render(<ListItem title="Test Title" paddingY={24} />);
+      expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-24');
+    });
+  });
+
   describe('disable states', () => {
     describe('short-lived', () => {
       it('should override existing prompt if disabled and disabledPromptMessage are set', () => {

package/src/ListItem/ListItem.tsx

@@ -59,6 +59,11 @@ export type ListItemProps = {
    * Highlights the list item as an action to be taken or already taken. <br />
    */
   spotlight?: 'active' | 'inactive';
+  /**
+   * Vertical padding of the list item, in pixels.
+   * @default 12
+   */
+  paddingY?: 12 | 24;
   title: ReactNode;
   subtitle?: ReactNode;
   /**
@@ -112,6 +117,7 @@ export const ListItem = ({
   inverted,
   media,
   spotlight,
+  paddingY = 12,
   valueTitle,
   valueSubtitle,
   control = null,
@@ -232,6 +238,7 @@ export const ListItem = ({
             'wds-list-item-partially-interactive': isPartiallyInteractive,
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
+            'wds-list-item-paddingY-24': paddingY === 24,
             disabled: disabled && !isPartiallyInteractive,
             'disabled--has-prompt-reason':
               !disabledPromptMessage && disabled && !isPartiallyInteractive,

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

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Plane } from '@transferwise/icons';
 import List from '../../List';
 import { ListItem, type ListItemProps } from '../ListItem';
 import { lorem10, lorem20, lorem5 } from '../../test-utils';
@@ -61,6 +62,28 @@ export const GapsBetweenItems: Story = {
   },
 };
 
+export const PaddingY: Story = {
+  render: () => {
+    const props = {
+      title: lorem5,
+      subtitle: lorem10,
+      media: <ListItem.AvatarLayout size={32} avatars={[{ asset: <Plane /> }, { asset: '7+' }]} />,
+      control: CONTROLS.navigation,
+    };
+    return (
+      <List>
+        {([12, 24] as const).map((paddingY) => (
+          <Fragment key={paddingY}>
+            <ListItem {...props} paddingY={paddingY} />
+            <ListItem {...props} paddingY={paddingY} spotlight="active" />
+            <ListItem {...props} paddingY={paddingY} spotlight="inactive" />
+          </Fragment>
+        ))}
+      </List>
+    );
+  },
+};
+
 type PreviewStoryArgs = ListItemProps & {
   previewImageSize: ListItemMediaSize;
   previewWithLineGuides: boolean;

package/src/ListItem/_stories/ListItem.rtl.test.story.tsx

@@ -1,24 +1,144 @@
+import { ReactNode } from 'react';
 import { Meta } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Link from '../../Link';
+import { lorem20 } from '../../test-utils';
 import { ListItem, type ListItemProps } from '../ListItem';
-import { VariantStory } from './variants/helpers';
+import {
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_ListItem_ControlType as ControlType,
+} from './subcomponents';
+import { VariantList, type VariantContent, type VariantStoryProps } from './variants/helpers';
+
+/** Arabic stand-in for `lorem20`, of comparable word count so wrapping behaviour stays comparable. */
+const arabicFiller =
+  'نص تجريبي يُستخدم لعرض شكل التصميم النهائي قبل إضافة المحتوى الفعلي، ويساعد في التحقق من سلوك التغليف والمحاذاة عند تجاوز السطر الواحد.';
+
+const i18nMap = {
+  title: { en: 'This is a title', ar: 'هذا عنوان' },
+  subtitle: { en: 'And it also has a subtitle', ar: 'وله أيضًا عنوان فرعي' },
+  longTitle: { en: `This is a long title. ${lorem20}`, ar: `هذا عنوان طويل. ${arabicFiller}` },
+  longSubtitle: {
+    en: `And it also has a long subtitle. ${lorem20}`,
+    ar: `وله أيضًا عنوان فرعي طويل. ${arabicFiller}`,
+  },
+  valueTitleLine1: { en: 'This value title', ar: 'عنوان القيمة هذا' },
+  valueTitleLine2: { en: 'is made to span', ar: 'مُصمم ليمتد' },
+  valueTitleLine3: { en: 'across few lines', ar: 'على عدة أسطر' },
+  additionalInfo: {
+    en: 'Which is augmented with additional info.',
+    ar: 'والذي تمت إضافة معلومات إضافية إليه.',
+  },
+  additionalInfoAction: { en: 'Details about the subject.', ar: 'تفاصيل حول الموضوع.' },
+  prompt: { en: 'Finally, there is a prompt.', ar: 'وأخيرًا، هناك تنبيه.' },
+  promptStart: { en: 'Finally, there is a prompt', ar: 'وأخيرًا، هناك تنبيه' },
+  promptLink: { en: 'referencing some details', ar: 'يشير إلى بعض التفاصيل' },
+  promptEnd: { en: 'for your convenience.', ar: 'لتسهيل الأمر عليك.' },
+  controlLabel: { en: 'Click me', ar: 'انقر هنا' },
+};
+
+type ListItemI18n = Record<keyof typeof i18nMap, string>;
+
+/**
+ * Amounts keep Latin digits and ISO currency codes in both columns — a bidi run inside RTL copy is
+ * exactly what these stories need to exercise.
+ */
+const getContent = (i18n: ListItemI18n): VariantContent => ({
+  text: {
+    title: i18n.title,
+    subtitle: i18n.subtitle,
+    valueTitle: '100 GBP',
+    valueSubtitle: '200 USD',
+    longTitle: i18n.longTitle,
+    longSubtitle: i18n.longSubtitle,
+    longValueTitle: (
+      <>
+        {i18n.valueTitleLine1}
+        <br />
+        {i18n.valueTitleLine2}
+        <br />
+        {i18n.valueTitleLine3}
+      </>
+    ),
+  },
+  media: MEDIA.avatarSingle,
+  additionalInfo: {
+    interactive: (
+      <ListItem.AdditionalInfo
+        action={{
+          label: i18n.additionalInfoAction,
+          href: 'https://wise.com',
+          target: '_blank',
+        }}
+      >
+        {i18n.additionalInfo}
+      </ListItem.AdditionalInfo>
+    ),
+    nonInteractive: <ListItem.AdditionalInfo>{i18n.additionalInfo}</ListItem.AdditionalInfo>,
+  },
+  prompt: {
+    interactive: (
+      <ListItem.Prompt sentiment="positive">
+        {i18n.promptStart}{' '}
+        <Link href="https://wise.com" target="_blank" rel="noreferrer">
+          {i18n.promptLink}
+        </Link>{' '}
+        {i18n.promptEnd}
+      </ListItem.Prompt>
+    ),
+    nonInteractive: <ListItem.Prompt sentiment="positive">{i18n.prompt}</ListItem.Prompt>,
+  },
+});
+
+/** Only the four controls with visible copy need overriding; the rest are icon- or input-only. */
+const getControls = (i18n: ListItemI18n): Record<ControlType, ReactNode> => ({
+  ...CONTROLS,
+  button: <ListItem.Button onClick={() => {}}>{i18n.controlLabel}</ListItem.Button>,
+  buttonAsLink: <ListItem.Button href="https://wise.com">{i18n.controlLabel}</ListItem.Button>,
+  partialButton: (
+    <ListItem.Button partiallyInteractive onClick={() => {}}>
+      {i18n.controlLabel}
+    </ListItem.Button>
+  ),
+  partialButtonAsLink: (
+    <ListItem.Button partiallyInteractive href="https://wise.com">
+      {i18n.controlLabel}
+    </ListItem.Button>
+  ),
+});
+
+const LocalisedVariantList = ({ controlType, variant }: VariantStoryProps) => {
+  const i18n = useRtlDiffI18n<ListItemI18n>();
+
+  return (
+    <VariantList
+      controlType={controlType}
+      variant={variant}
+      content={getContent(i18n)}
+      controls={getControls(i18n)}
+    />
+  );
+};
 
 export default {
   component: ListItem,
   title: 'Content/ListItem/Tests/RTL Diff',
   tags: ['!autodocs', '!manifest'],
-  ...withRTLDiff({ width: 'stretch' }),
+  ...withRTLDiff({ width: 'stretch', i18n: i18nMap }),
 } satisfies Meta<ListItemProps>;
 
 const Default = {
-  ...VariantStory,
+  render: ({ controlType, variant }: VariantStoryProps) => (
+    <LocalisedVariantList controlType={controlType} variant={variant} />
+  ),
   parameters: { variants: [] },
-  args: { variant: 'rtl' },
+  args: { variant: 'rtl' as const },
 };
 
 export const Button = {
   ...Default,
-  args: { ...Default.args, variant: 'button' },
+  args: { ...Default.args, controlType: 'button' },
 };
 export const ButtonAsLink = {
   ...Default,

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

@@ -60,6 +60,7 @@ export default {
     disabled: false,
     disabledPromptMessage: undefined,
     spotlight: undefined,
+    paddingY: undefined,
     inverted: false,
     valueColumnWidth: undefined,
   },
@@ -73,6 +74,13 @@ export default {
         inactive: 'inactive',
       },
     },
+    paddingY: {
+      control: 'radio',
+      options: ['unset (undefined)', 12, 24],
+      mapping: {
+        'unset (undefined)': undefined,
+      },
+    },
   },
 } satisfies Meta<ListItemProps>;
 

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
 import List from '../../../List';
 import { ListItem, type ListItemProps } from '../../ListItem';
@@ -13,140 +14,187 @@ import {
 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;
+const PARTIALLY_INTERACTIVE: ControlType[] = [
+  'partialButton',
+  'partialButtonAsLink',
+  'partialIconButton',
+  'partialIconButtonAsLink',
+];
 
-type VariantStoryProps = {
+export type VariantText = {
+  title: string;
+  subtitle: string;
+  valueTitle: string;
+  valueSubtitle: string;
+  longTitle: string;
+  longSubtitle: string;
+  longValueTitle: ReactNode;
+};
+
+/**
+ * Every piece of copy and every slot the instance matrix is built from. Extracted so a story can
+ * render the same matrix with different content — the RTL diff swaps in localised versions.
+ */
+export type VariantContent = {
+  text: VariantText;
+  media: ReactNode;
+  additionalInfo: { interactive: ReactNode; nonInteractive: ReactNode };
+  prompt: { interactive: ReactNode; nonInteractive: ReactNode };
+};
+
+export const DEFAULT_VARIANT_CONTENT: VariantContent = {
+  text: TEXT,
+  media: MEDIA.avatarSingle,
+  additionalInfo: INFO,
+  prompt: PROMPT,
+};
+
+export const getVariantInstances = (
+  controlType: ControlType,
+  { text, media, additionalInfo: info, prompt: prompts }: VariantContent,
+): VariantPartial[] => {
+  const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
+    text;
+  const isInteractive = PARTIALLY_INTERACTIVE.includes(controlType);
+  const additionalInfo = isInteractive ? info.interactive : info.nonInteractive;
+  const prompt = prompts.nonInteractive;
+
+  return [
+    { 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: prompts.interactive,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      inverted: true,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      spotlight: 'active',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      spotlight: 'inactive',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      spotlight: 'inactive',
+      disabled: true,
+    },
+  ].filter(Boolean) as VariantPartial[];
+};
+
+export type VariantStoryProps = {
   controlType: ControlType;
   variant?: Variant;
 };
 
+type VariantListProps = VariantStoryProps & {
+  content?: VariantContent;
+  controls?: Record<ControlType, ReactNode>;
+};
+
+export const VariantList = ({
+  controlType,
+  variant = 'default',
+  content = DEFAULT_VARIANT_CONTENT,
+  controls = CONTROLS,
+}: VariantListProps) => (
+  <List>
+    {getVariantInstances(controlType, content).map((instance, index) => (
+      <ListItem
+        key={`${variant}-${controlType}-${index}`}
+        control={controls[controlType]}
+        {...instance}
+      />
+    ))}
+  </List>
+);
+
 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 (
-      <List>
-        {instances.map((instance, index) => (
-          <ListItem key={`${variant}-${controlType}-${index}`} control={control} {...instance} />
-        ))}
-      </List>
-    );
-  },
+  render: ({ controlType, variant }) => <VariantList controlType={controlType} variant={variant} />,
   parameters: {
     variants: ['default'],
   },

package/src/Loader/_stories/Loader.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Loader from '..';
 
 export default {
@@ -11,13 +11,20 @@ export default {
 type Story = StoryObj<typeof Loader>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Loader size="sm" displayInstantly />
-      <Loader size="md" displayInstantly />
-      <Loader size="sm" displayInstantly label="Sending your money" />
-      <Loader size="md" displayInstantly label="Sending your money" />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Loader size="sm" displayInstantly />
+        <Loader size="md" displayInstantly />
+        <Loader size="sm" displayInstantly label={i18n.label} />
+        <Loader size="md" displayInstantly label={i18n.label} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      label: { en: 'Sending your money', ar: 'جارٍ إرسال أموالك' },
+    },
+  }),
 };