@transferwise/components 46.159.0 → 46.159.2

package/build/types/ListItem/_stories/variants/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/ListItem/_stories/variants/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAML,uBAAuB,IAAI,WAAW,EACvC,MAAM,kBAAkB,CAAC;AAG1B,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAOhG,KAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,YAiI1B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/ListItem/_stories/variants/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAML,uBAAuB,IAAI,WAAW,EACvC,MAAM,kBAAkB,CAAC;AAG1B,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAOhG,KAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,YA6H1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.159.0",
+  "version": "46.159.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -44,17 +44,17 @@
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
-    "@formatjs/cli": "^6.16.11",
+    "@formatjs/cli": "^6.16.14",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-a11y": "^10.5.4",
+    "@storybook/addon-docs": "^10.5.4",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.4.6",
+    "@storybook/react-webpack5": "^10.5.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -75,22 +75,22 @@
     "monaco-editor-webpack-plugin": "^7.1.1",
     "@wise/art": "^2.31.1",
     "@wise/eslint-config": "^14.2.1",
-    "babel-plugin-formatjs": "^11.3.14",
+    "babel-plugin-formatjs": "^11.3.16",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.4.6",
+    "eslint-plugin-storybook": "^10.5.4",
     "gulp": "^5.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-fetch-mock": "^3.0.3",
+    "jest-fetch-mock": "^3.2.0",
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
     "react-live": "^4.1.8",
     "rollup": "^4.62.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.4",
     "storybook-addon-tag-badges": "^3.1.0",
-    "storybook-addon-test-codegen": "^3.0.1",
+    "storybook-addon-test-codegen": "^3.0.4",
     "@transferwise/less-config": "3.1.2",
     "@wise/components-theming": "1.10.3",
     "@wise/wds-configs": "0.0.0"

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { FastFlag as FastFlagIcon } from '@transferwise/icons';
+
+import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Accordion from '../Accordion';
+
+const items = [
+  {
+    title: 'Item with icon',
+    subtitle: 'Subtitle text',
+    content: 'Content for item with icon.',
+    id: 'icon',
+    icon: <FastFlagIcon size={24} />,
+  },
+  {
+    title: 'Plain item without icon',
+    content: 'Content for item without icon.',
+    id: 'no-icon',
+  },
+  {
+    title: 'Media with circle',
+    subtitle: 'Shows media in a circle',
+    content: 'Expanded content with media circle.',
+    id: 'media-circle',
+    media: (
+      <img
+        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+        alt=""
+      />
+    ),
+    showMediaCircle: true,
+    showMediaAtAllSizes: true,
+    isContainerAligned: true,
+  },
+  {
+    title: 'Media without circle',
+    subtitle: 'Not container aligned',
+    content: 'Expanded content with plain media.',
+    id: 'media-no-circle',
+    media: (
+      <img
+        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+        alt=""
+      />
+    ),
+    showMediaCircle: false,
+    showMediaAtAllSizes: false,
+    isContainerAligned: false,
+  },
+];
+
+export default {
+  component: Accordion,
+  title: 'Content/Accordion/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Accordion>;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const RTLDiff: Story = {
+  render: () => <Accordion items={items} indexOpen={0} />,
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const scope = within(column);
+      const buttons = scope.getAllByRole('button');
+      await userEvent.click(buttons[1]);
+    });
+  },
+  ...withRTLDiff(),
+};

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

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout from '..';
 import { Freeze, Plane } from '@transferwise/icons';
 import { Flag } from '@wise/art';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof AvatarLayout> = {
   component: AvatarLayout,
@@ -115,3 +116,66 @@ export const EdgeInstances: Story = {
     </div>
   ),
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        interactive
+        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        interactive
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={32}
+        avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="gb" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={72}
+        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }, { asset: <Freeze /> }]}
+      />
+
+      <AvatarLayout
+        orientation="diagonal"
+        size={48}
+        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="diagonal"
+        size={48}
+        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+      />
+
+      <AvatarLayout
+        orientation="diagonal"
+        size={72}
+        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -3,6 +3,7 @@ import {
   Camera,
   Convert,
   FastFlag,
+  Freeze,
   Graph,
   Leaf,
   Money,
@@ -13,6 +14,7 @@ import {
 import AvatarView from '..';
 import { getBrandColorFromSeed, getInitials, ProfileType } from '../../common';
 import Display from '../../Display';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof AvatarView> = {
@@ -220,3 +222,152 @@ export const BadgeVariants: Story = {
   },
   ...withVariantConfig(['default', 'dark']),
 };
+
+const sizes = [24, 32, 40, 48, 56, 72] as const;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* Badge positioning: bottom-right dot (notification/online) — key RTL indicator */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`notif-${size}`} size={size} badge={{ type: 'notification' }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Online dot */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`online-${size}`} size={size} badge={{ type: 'online' }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Badge with flag (bottom-right corner badge) */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`flag-${size}`} size={size} badge={{ flagCode: 'GBP' }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Badge with icon */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`icon-badge-${size}`} size={size} badge={{ icon: <FastFlag /> }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Badge type action with icon (camera) */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView
+            key={`action-${size}`}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'action', icon: <Camera /> }}
+          />
+        ))}
+      </div>
+
+      {/* Badge type reference with icon */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView
+            key={`ref-${size}`}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'reference', icon: <Convert /> }}
+          />
+        ))}
+      </div>
+
+      {/* Selected state (border highlight) */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`selected-${size}`} size={size} selected interactive>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Selected + badge combined */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView
+            key={`selected-badge-${size}`}
+            size={size}
+            selected
+            interactive
+            badge={{ flagCode: 'USD' }}
+          >
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Button/LegacyButton/_stories/LegacyButton.test.story.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import Button from '../..';
 import LegacyButton from '../LegacyButton';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 LegacyButton.displayName = 'Button';
 
@@ -35,3 +36,24 @@ export const Focused: Story = {
     );
   },
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* default (inline) layout */}
+      <LegacyButton>Default button</LegacyButton>
+
+      {/* block layout — full width */}
+      <LegacyButton block>Block button</LegacyButton>
+
+      {/* loading state — appends ProcessIndicator inside button */}
+      <LegacyButton loading>Loading button</LegacyButton>
+
+      {/* loading + block combined */}
+      <LegacyButton loading block>
+        Loading block button
+      </LegacyButton>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -5,6 +5,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
 import { withVariantConfig } from '../../../.storybook/helpers';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -165,3 +166,67 @@ export const AccessibilityAddons: Story = {
     size: 'md',
   },
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
+        Start icon
+      </Button>
+
+      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+        End icon
+      </Button>
+
+      <Button
+        v2
+        size="md"
+        addonStart={{ type: 'icon', value: <Freeze /> }}
+        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+      >
+        Both icons
+      </Button>
+
+      <Button v2 size="md" addonStart={{ type: 'avatar', value: [{ asset: <Flag code="pl" /> }] }}>
+        Avatar start
+      </Button>
+
+      <Button
+        v2
+        size="md"
+        addonStart={{
+          type: 'avatar',
+          value: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }],
+        }}
+      >
+        Double avatar
+      </Button>
+
+      <Button v2 size="sm" addonStart={{ type: 'icon', value: <Freeze /> }}>
+        Sm start icon
+      </Button>
+
+      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+        Sm end icon
+      </Button>
+
+      <Button
+        v2
+        size="sm"
+        addonStart={{ type: 'icon', value: <Freeze /> }}
+        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+      >
+        Sm both icons
+      </Button>
+
+      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+        Loading
+      </Button>
+
+      <Button v2 size="md" block addonStart={{ type: 'icon', value: <Freeze /> }}>
+        Block with start icon
+      </Button>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -3,6 +3,7 @@ import { expect, waitFor, within, userEvent } from 'storybook/test';
 
 import Calendar from '../Calendar';
 import type { DisabledRules } from '../Calendar.types';
+import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   component: Calendar,
@@ -28,17 +29,19 @@ export const YearViewBoundaries: Story = {
     await userEvent.click(canvas.getByRole('button', { name: /year view/iu }));
 
     // Selected year (within range) is enabled
-    await expect(
-      canvas.getByRole('button', { name: /2024.*selected year/iu }),
-    ).not.toHaveAttribute('aria-disabled');
+    await expect(canvas.getByRole('button', { name: /2024.*selected year/iu })).not.toHaveAttribute(
+      'aria-disabled',
+    );
 
     // Adjacent years outside range are disabled
-    await expect(
-      canvas.getByRole('button', { name: /^2023.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    await expect(
-      canvas.getByRole('button', { name: /^2025.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
+    await expect(canvas.getByRole('button', { name: /^2023.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    await expect(canvas.getByRole('button', { name: /^2025.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     // Both nav arrows disabled — min and max are both in the 2020–2039 block
     await expect(canvas.getByRole('button', { name: /previous 20 years/iu })).toBeDisabled();
@@ -73,12 +76,14 @@ export const MonthViewBoundaries: Story = {
     ).not.toHaveAttribute('aria-disabled');
 
     // Months outside range are disabled
-    await expect(
-      canvas.getByRole('button', { name: /^Feb.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    await expect(
-      canvas.getByRole('button', { name: /^Nov.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
+    await expect(canvas.getByRole('button', { name: /^Feb.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    await expect(canvas.getByRole('button', { name: /^Nov.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     // Both nav arrows disabled — min and max are both in 2024
     await expect(canvas.getByRole('button', { name: /previous year/iu })).toBeDisabled();
@@ -92,23 +97,67 @@ const disabledRules: DisabledRules = {
 };
 
 /**
- * When a disabled cell receives direct DOM focus (e.g. screen reader virtual cursor),
+ * When a disabled cell receives focus via keyboard navigation,
  * the inline prompt updates to negative sentiment showing the disabled reason.
  */
 export const DisabledDateFocusUpdatesPrompt: Story = {
   render: () => <Calendar value={new Date(2024, 6, 5)} disabledRules={disabledRules} />,
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Initially prompt is neutral (focused date is enabled)
+    // Initially prompt is neutral (focused date is enabled — July 5 is a Friday)
     const prompt = canvasElement.querySelector('.wds-inline-prompt')!;
     await expect(prompt).toHaveClass('wds-prompt--neutral');
 
-    // Simulate screen reader focus on a disabled Saturday (matches both "6 July 2024" and "July 6, 2024")
-    const saturday = canvas.getByLabelText(/(?:6 July|July 6).*2024/u);
-    saturday.focus();
+    // Tab into the calendar grid (past month nav buttons), then arrow right to Saturday (disabled)
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowRight}');
 
-    // Prompt should switch to negative after React re-render
-    await waitFor(() => expect(prompt).toHaveClass('wds-prompt--negative'));
+    // Prompt should switch to negative after navigating to the disabled date
+    await waitFor(async () => expect(prompt).toHaveClass('wds-prompt--negative'));
+  },
+};
+
+const selectedDate = new Date(2024, 5, 15);
+const minDate = new Date(2024, 2, 1);
+const maxDate = new Date(2024, 9, 31);
+
+const disabledRulesRtl = {
+  weekdays: ['sat', 'sun'] as ('sat' | 'sun')[],
+  dates: [new Date(2024, 5, 10)],
+  reason: 'Weekends and specific dates are unavailable.',
+};
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <div data-testid="day-view">
+        <Calendar
+          value={selectedDate}
+          min={minDate}
+          max={maxDate}
+          disabledRules={disabledRulesRtl}
+        />
+      </div>
+      <div data-testid="month-view">
+        <Calendar value={selectedDate} min={minDate} max={maxDate} />
+      </div>
+      <div data-testid="year-view">
+        <Calendar value={selectedDate} min={minDate} max={maxDate} />
+      </div>
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const monthContainer = column.querySelector('[data-testid="month-view"]')!;
+      const monthScope = within(monthContainer as HTMLElement);
+      await userEvent.click(monthScope.getByRole('button', { name: /year view/iu }));
+      await userEvent.click(monthScope.getByRole('button', { name: /2024.*selected year/iu }));
+
+      const yearContainer = column.querySelector('[data-testid="year-view"]')!;
+      const yearScope = within(yearContainer as HTMLElement);
+      await userEvent.click(yearScope.getByRole('button', { name: /year view/iu }));
+    });
   },
+  ...withRTLDiff(),
 };

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Display from '../../Display';
+import Carousel, { type CarouselCard } from '..';
+
+export default {
+  component: Carousel,
+  title: 'Navigation/Carousel/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Carousel>;
+
+type Story = StoryObj<typeof Carousel>;
+
+const sampleCards: CarouselCard[] = [
+  {
+    id: 'card-1',
+    type: 'button',
+    content: (
+      <div className="d-flex p-a-1 flex-column align-items-center">
+        <Display type="display-small">Card one</Display>
+      </div>
+    ),
+  },
+  {
+    id: 'card-2',
+    type: 'promo',
+    href: '#',
+    title: 'Promo card',
+    description: 'Description for promo card',
+  },
+  {
+    id: 'card-3',
+    type: 'anchor',
+    href: '#',
+    hrefTarget: '_blank',
+    content: <Display type="display-small">Anchor card</Display>,
+  },
+  {
+    id: 'card-4',
+    type: 'button',
+    content: (
+      <div className="d-flex p-a-1 flex-column align-items-center">
+        <Display type="display-small">Card four</Display>
+      </div>
+    ),
+  },
+  {
+    id: 'card-5',
+    type: 'anchor',
+    href: '#',
+    content: <Display type="display-small">Card five</Display>,
+  },
+];
+
+export const RTLDiff: Story = {
+  render: () => <Carousel header="Carousel with navigation arrows" cards={sampleCards} />,
+  ...withRTLDiff(),
+};