@transferwise/components 46.154.0 → 46.155.1

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

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect } from 'storybook/test';
+
+import { Layout } from '../../common';
+
+import DefinitionList, { type DefinitionListDefinition } from '..';
+
+const longValues = {
+  amount: '1,234,567.89 GBP from your Wise Business account ending in 4821',
+  arrival: 'Tuesday, 14 July 2026 at 18:30 Eastern European Summer Time',
+  method: 'Business account ending in 4821 · Manual bank transfer',
+  recipients: 'Thirty-two recipients across twelve destination currencies',
+};
+
+const longTitles = {
+  amount: "Total amount we'll convert before sending this batch payment",
+  arrival: 'Estimated arrival time for all recipients in this batch',
+  method: 'Payment method used to fund this batch transfer',
+  recipients: 'Number of recipients included in this batch payment',
+};
+
+const longTitlesLongValues: DefinitionListDefinition[] = [
+  { key: 'amount', title: longTitles.amount, value: longValues.amount },
+  { key: 'arrival', title: longTitles.arrival, value: longValues.arrival },
+  { key: 'method', title: longTitles.method, value: longValues.method },
+  { key: 'recipients', title: longTitles.recipients, value: longValues.recipients },
+];
+
+const longTitlesShortValues: DefinitionListDefinition[] = [
+  { key: 'amount', title: longTitles.amount, value: '1,234.56 GBP' },
+  { key: 'arrival', title: longTitles.arrival, value: 'Today' },
+  { key: 'method', title: longTitles.method, value: 'Bank transfer' },
+  { key: 'recipients', title: longTitles.recipients, value: '32' },
+];
+
+const shortTitlesLongValues: DefinitionListDefinition[] = [
+  { key: 'amount', title: 'Amount', value: longValues.amount },
+  { key: 'arrival', title: 'Arrival', value: longValues.arrival },
+  { key: 'method', title: 'Method', value: longValues.method },
+  { key: 'recipients', title: 'Recipients', value: longValues.recipients },
+];
+
+const mixedContentLengths: DefinitionListDefinition[] = [
+  { key: 'ticket-regression', title: "Total amount we'll convert", value: '1,234.56 GBP' },
+  { key: 'short-short', title: 'Fees', value: '12.34 GBP' },
+  { key: 'long-short', title: longTitles.arrival, value: 'Today' },
+  { key: 'short-long', title: 'Method', value: longValues.method },
+  { key: 'long-long', title: longTitles.recipients, value: longValues.recipients },
+  {
+    key: 'styled-content',
+    title: <strong>Current available balance before this payment</strong>,
+    value: <strong>98,765.43 GBP</strong>,
+  },
+];
+
+type TestCaseProps = {
+  definitions: DefinitionListDefinition[];
+  label: string;
+  width?: number;
+};
+
+const TestCase = ({ definitions, label, width = 640 }: TestCaseProps) => (
+  <section style={{ maxWidth: '100%', width }}>
+    <h2 style={{ fontSize: 16, margin: '0 0 var(--size-16)' }}>{label}</h2>
+    <DefinitionList definitions={definitions} layout={Layout.HORIZONTAL_RIGHT_ALIGNED} />
+  </section>
+);
+
+const meta = {
+  component: DefinitionList,
+  parameters: { controls: { disable: true } },
+  tags: ['!autodocs', '!manifest'],
+  title: 'Typography/DefinitionList/Tests',
+} satisfies Meta<typeof DefinitionList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const assertSharedColumnBoundary = async (canvasElement: HTMLElement) => {
+  const lists = [
+    ...canvasElement.querySelectorAll<HTMLElement>('.tw-definition-list--horizontal-right-aligned'),
+  ];
+
+  await expect(lists.length).toBeGreaterThan(0);
+
+  for (const list of lists) {
+    const rows = [...list.querySelectorAll<HTMLElement>('.tw-definition-list__item')];
+    const columns = rows.map((row) => ({
+      row,
+      title: row.querySelector<HTMLElement>('dt'),
+      value: row.querySelector<HTMLElement>('dd'),
+    }));
+
+    await expect(columns.every(({ title, value }) => title && value)).toBe(true);
+
+    const horizontalColumns = columns.filter(({ row }) =>
+      ['flex', 'grid'].includes(getComputedStyle(row).display),
+    );
+
+    if (horizontalColumns.length > 0) {
+      const titleRects = horizontalColumns.map(({ title }) => title?.getBoundingClientRect());
+      const valueRects = horizontalColumns.map(({ value }) => value?.getBoundingClientRect());
+      const isRtl = getComputedStyle(list).direction === 'rtl';
+
+      if (isRtl) {
+        const valueColumnEnd = Math.max(...valueRects.map((rect) => rect?.right ?? 0));
+        const titleColumnStart = Math.min(
+          ...titleRects.map((rect) => rect?.left ?? Number.POSITIVE_INFINITY),
+        );
+
+        await expect(valueColumnEnd).toBeLessThanOrEqual(titleColumnStart + 1);
+        await expect(titleColumnStart - valueColumnEnd).toBeGreaterThanOrEqual(51);
+      } else {
+        const titleColumnEnd = Math.max(...titleRects.map((rect) => rect?.right ?? 0));
+        const valueColumnStart = Math.min(
+          ...valueRects.map((rect) => rect?.left ?? Number.POSITIVE_INFINITY),
+        );
+
+        await expect(titleColumnEnd).toBeLessThanOrEqual(valueColumnStart + 1);
+        await expect(valueColumnStart - titleColumnEnd).toBeGreaterThanOrEqual(51);
+      }
+    } else {
+      for (const { title, value } of columns) {
+        if (title && value) {
+          const titleEnd = title.getBoundingClientRect().bottom;
+          const valueStart = value.getBoundingClientRect().top;
+
+          await expect(titleEnd).toBeLessThanOrEqual(valueStart + 1);
+        }
+      }
+    }
+
+    for (const { title, value } of columns) {
+      if (title && value) {
+        await expect(title.scrollWidth).toBeLessThanOrEqual(title.clientWidth);
+        await expect(value.scrollWidth).toBeLessThanOrEqual(value.clientWidth);
+      }
+    }
+  }
+};
+
+const verifySharedColumnBoundary: NonNullable<Story['play']> = async ({ canvasElement, step }) => {
+  await step('titles and values stay inside separate shared columns', async () => {
+    await assertSharedColumnBoundary(canvasElement);
+  });
+};
+
+export const HORIZONTAL_RIGHT_ALIGNED: Story = {
+  name: 'HORIZONTAL_RIGHT_ALIGNED',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
+      <TestCase
+        definitions={longTitlesLongValues}
+        label="Long titles with long values"
+        width={720}
+      />
+      <TestCase definitions={shortTitlesLongValues} label="All short titles with long values" />
+      <TestCase definitions={longTitlesShortValues} label="All long titles with short values" />
+      <TestCase
+        definitions={mixedContentLengths}
+        label="Mixed title and value lengths"
+        width={520}
+      />
+    </div>
+  ),
+  play: verifySharedColumnBoundary,
+};

package/src/Display/Display.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 
 import { DisplayTypes, Typography } from '../common';
 
-type Props = PropsWithChildren<{
+export type DisplayProps = PropsWithChildren<{
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   id?: string;
   type?: DisplayTypes;
@@ -16,7 +16,7 @@ function Display({
   children,
   className,
   id,
-}: Props) {
+}: DisplayProps) {
   return (
     <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
       {children}

package/src/Display/index.ts

@@ -1 +1,2 @@
 export { default } from './Display';
+export type { DisplayProps } from './Display';

package/src/Drawer/Drawer.test.tsx

@@ -1,14 +1,13 @@
 import { render, screen, userEvent, mockMatchMedia } from '../test-utils';
 import { Position } from '../common';
 
-import Drawer from './Drawer';
+import Drawer, { type DrawerProps } from './Drawer';
 
 jest.mock('../common/DOMOperations');
 mockMatchMedia();
 
 describe('Drawer', () => {
-  const renderedComponent = (props: React.ComponentProps<typeof Drawer>) =>
-    render(<Drawer {...props} />);
+  const renderedComponent = (props: DrawerProps) => render(<Drawer {...props} />);
 
   const props = {
     open: true,

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx

@@ -1,10 +1,10 @@
 import { formatAmount } from '@transferwise/formatting';
 import { clsx } from 'clsx';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 import { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';
 import { useFocus } from '../hooks/useFocus';
 import { useInputStyle } from '../hooks/useInputStyle';
@@ -19,7 +19,7 @@ import {
   isInputPossiblyOverflowing,
 } from './utils';
 
-type Props = {
+type AmountInputProps = {
   id: string;
   describedById?: string;
   amount?: number | null;
@@ -38,7 +38,7 @@ export const AmountInput = ({
   onChange,
   onFocusChange,
   loading,
-}: Props) => {
+}: AmountInputProps) => {
   const intl = useIntl();
   const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();
 

package/src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx

@@ -1,4 +1,4 @@
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion, useReducedMotion } from 'motion/react';
 import type { ReactNode } from 'react';
 
 interface Props {

package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeft } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 interface Props {
   shouldShow: boolean;

package/src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx

@@ -5,7 +5,7 @@ import {
   SelectInputOptionContent,
   SelectInputTriggerButton,
 } from '../../Inputs/SelectInput';
-import { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { CurrencyType, ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 import { ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import {
@@ -34,7 +34,7 @@ export interface CurrencySection {
 
 export type CurrencyOptions = CurrencySection[];
 
-export type Props = {
+export type CurrencySelectorProps = {
   id: string;
   labelId: string;
   options?: CurrencyOptions;
@@ -53,7 +53,7 @@ export const CurrencySelector = ({
   addons,
   onOpen,
   onSearchChange,
-}: Props) => {
+}: CurrencySelectorProps) => {
   const intl = useIntl();
 
   const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.test.tsx

@@ -2,7 +2,7 @@ import { screen, render, mockMatchMedia, mockResizeObserver, waitFor } from '../
 import { Sentiment } from '../common';
 
 import ExpressiveMoneyInput from './ExpressiveMoneyInput';
-import type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
 import { Confetti } from '@transferwise/icons';
 
 const defaultProps: ExpressiveMoneyInputProps = {

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx

@@ -1,12 +1,9 @@
 import Body from '../Body';
 import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { useId, type ReactNode } from 'react';
 
-import {
-  type Props as CurrencySelectorProps,
-  CurrencySelector,
-} from './CurrencySelector/CurrencySelector';
+import { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';
 import { CommonProps } from '../common';
 import { AmountInput } from './AmountInput/AmountInput';
 import { Chevron } from './Chevron/Chevron';
@@ -26,7 +23,7 @@ type CustomCurrencySelectorInstanceType = {
 type CurrencySelectorType = DefaultCurrencySelectorInstanceType &
   CustomCurrencySelectorInstanceType;
 
-export type Props = {
+export type ExpressiveMoneyInputProps = {
   label?: ReactNode;
   currencySelector?: CurrencySelectorType;
   amount?: AmountType;
@@ -65,7 +62,7 @@ export type Props = {
  * direct contributions by consuming product teams are highly encouraged.
  *
  * > ⚠️ **Prerequisite:** <br />The component depends on the
- * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * [motion](https://www.npmjs.com/package/motion) package, which has been
  * deliberately excluded from the Design System bundle and kept as an opt-in only.
  * **Make sure to add it to your project dependencies.**
  */
@@ -81,7 +78,7 @@ export default function ExpressiveMoneyInput({
   autoFocus,
   loading,
   onFocusChange,
-}: Props) {
+}: ExpressiveMoneyInputProps) {
   const inputId = useId();
   const labelId = useId();
   const customAlertId = useId();

package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.story.tsx

@@ -19,7 +19,7 @@ import Modal from '../../Modal';
 import ListItem from '../../ListItem';
 import List from '../../List';
 import ExpressiveMoneyInput, { type ExpressiveMoneyInputProps } from '..';
-import type { Props as CurrencySelectorProps } from '../CurrencySelector/CurrencySelector';
+import type { CurrencySelectorProps } from '../CurrencySelector/CurrencySelector';
 
 const getCurrencySelectorProps = ({
   logEvents = false,

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import ExpressiveMoneyInput, { type ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 const meta: Meta<typeof ExpressiveMoneyInput> = {
   component: ExpressiveMoneyInput,

package/src/ExpressiveMoneyInput/hooks/useInputStyle.ts

@@ -6,7 +6,7 @@ import {
   useLayoutEffect,
   useState,
 } from 'react';
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 type InputStyleObject = {
   value: string;

package/src/ExpressiveMoneyInput/index.ts

@@ -1,2 +1,2 @@
-export type { Props as ExpressiveMoneyInputProps, CurrencyType } from './ExpressiveMoneyInput';
+export type { ExpressiveMoneyInputProps, CurrencyType } from './ExpressiveMoneyInput';
 export { default } from './ExpressiveMoneyInput';

package/src/IconButton/IconButton.tsx

@@ -3,7 +3,7 @@ import { PrimitiveAnchor, PrimitiveButton } from '../Primitives';
 import Circle from '../common/Circle';
 import { clsx } from 'clsx';
 
-export type Props = {
+export type IconButtonProps = {
   /** @default 48 */
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /** @default 'primary' */
@@ -27,7 +27,7 @@ const IconButton = forwardRef(function IconButton(
     priority = 'primary',
     type = 'default',
     ...props
-  }: Props,
+  }: IconButtonProps,
   ref,
 ) {
   const isLink = href !== '#';

package/src/IconButton/_stories/IconButton.story.tsx

@@ -18,7 +18,7 @@ import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-import IconButton, { Props } from '../IconButton';
+import IconButton, { type IconButtonProps } from '../IconButton';
 import SentimentSurface from '../../SentimentSurface';
 
 /**
@@ -46,7 +46,7 @@ export default {
 
 type Story = StoryObj<typeof IconButton>;
 
-const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];
+const sizes: IconButtonProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
 /**
  * Explore size, priority, type, and disabled state via the controls panel.
@@ -107,7 +107,7 @@ export const Priority: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       <IconButton priority="primary" type={args.type} aria-label="Primary" onClick={fn()}>
         <Plus />
@@ -152,7 +152,7 @@ export const Type: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       <IconButton priority={args.priority} type="default" aria-label="Default" onClick={fn()}>
         <Plus />
@@ -195,7 +195,7 @@ export const Size: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       {sizes.map((size) => (
         <div
@@ -254,7 +254,7 @@ export const Disabled: Story = {
     target: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <IconButton disabled priority={args.priority} type={args.type} aria-label="Disabled">
       <Plus />
     </IconButton>
@@ -284,7 +284,7 @@ export const AsAnchor: Story = {
     disabled: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <IconButton {...args} aria-label="External link">
       <ArrowLeft />
     </IconButton>
@@ -305,7 +305,7 @@ export const SentimentAwareness: Story = {
       options: [16, 24, 32, 40, 48, 56, 72],
     },
   },
-  render: (args: Props) => {
+  render: (args: IconButtonProps) => {
     const priorities = [
       { key: 'primary', label: 'primary' },
       { key: 'secondary', label: 'secondary' },

package/src/IconButton/index.ts

@@ -1,2 +1,2 @@
-export type { Props as IconButtonProps } from './IconButton';
+export type { IconButtonProps } from './IconButton';
 export { default } from './IconButton';

package/src/Link/Link.tsx

@@ -8,7 +8,7 @@ import { LinkLarge, LinkDefault, Typography } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps &
+export type LinkProps = PrimitiveAnchorProps &
   Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };
 
 /**
@@ -26,7 +26,7 @@ const Link = ({
   onClick,
   disabled,
   ...props
-}: Props) => {
+}: LinkProps) => {
   const { formatMessage } = useIntl();
   const isButton = Boolean(onClick) && href === undefined;
   const isBlank = target === '_blank';

package/src/Link/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Link';
-export type { Props as LinkProps } from './Link';
+export type { LinkProps } from './Link';

package/src/ListItem/Navigation/ListItemNavigation.test.tsx

@@ -30,6 +30,29 @@ describe('ListItem.Navigation', () => {
     });
   });
 
+  describe('hideIndicator', () => {
+    it('renders the chevron by default for a button', () => {
+      renderWith({ control: <ListItem.Navigation onClick={() => {}} /> });
+      expect(screen.getByTestId('NavigationIndicator')).toBeInTheDocument();
+    });
+
+    it('renders the chevron by default for a link', () => {
+      renderWith({ control: <ListItem.Navigation href="/test-path" /> });
+      expect(screen.getByTestId('NavigationIndicator')).toBeInTheDocument();
+    });
+
+    it('hides the chevron when hideIndicator is true on a button', () => {
+      renderWith({ control: <ListItem.Navigation hideIndicator onClick={() => {}} /> });
+      expect(screen.queryByTestId('NavigationIndicator')).not.toBeInTheDocument();
+    });
+
+    it('hides the chevron when hideIndicator is true on a link', () => {
+      renderWith({ control: <ListItem.Navigation hideIndicator href="/test-path" /> });
+      expect(screen.getByRole('link')).toBeInTheDocument();
+      expect(screen.queryByTestId('NavigationIndicator')).not.toBeInTheDocument();
+    });
+  });
+
   describe('as link', () => {
     it('renders a link if href is set', () => {
       renderWith({ control: <ListItem.Navigation href="/test-path" /> });

package/src/ListItem/Navigation/ListItemNavigation.tsx

@@ -5,7 +5,17 @@ import { PrimitiveButton } from '../../Primitives';
 import { useContext } from 'react';
 import { ListItemContext } from '../ListItemContext';
 
-export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+  /**
+   * When `true`, the chevron indicator is hidden. Use when surrounding context makes the
+   * interactive affordance clear without a directional cue (e.g. a widget row with trailing
+   * value content).<br />
+   * **NB:** This feature should be used with great care as it can result in the item looking
+   * as non-interactive, significantly degrading accessibility, UX, and conversion,
+   * especially if used on busy screens with multiple Lists.
+   */
+  hideIndicator?: boolean;
+};
 
 /**
  * This component allows for rendering a control functionally synonymous with HTML `anchor` or a
@@ -15,10 +25,14 @@ export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'ta
  * <br />
  * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.
  */
-export const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {
+export const Navigation = function Navigation({
+  href,
+  hideIndicator,
+  ...props
+}: ListItemNavigationProps) {
   const { baseItemProps } = useListItemControl('navigation', { href, ...props });
   const { ids, describedByIds } = useContext(ListItemContext);
-  const icon = <ChevronRight size={16} />;
+  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid="NavigationIndicator" />;
 
   return href ? (
     <>{icon}</>

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

@@ -50,6 +50,39 @@ export const Playground: Story = {
   },
 };
 
+/**
+ * Use `hideIndicator` when surrounding context (e.g. trailing value content) makes the
+ * interactive affordance clear without a chevron. <br />
+ * **NB:** This feature should be used with great care as it can result in the item looking
+ * as non-interactive, significantly degrading accessibility, UX, and conversion,
+ * especially if used on busy screens with multiple Lists.
+ */
+export const WithoutIndicator: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (args) => {
+    return (
+      <List>
+        <ListItem
+          control={<ListItem.Navigation href="#target" hideIndicator onClick={args.onClick} />}
+          title="Navigation without chevron"
+          subtitle="Interactive row — no directional indicator"
+          valueTitle="£1,234.56"
+          media={MEDIA.avatarSingle}
+        />
+
+        <ListItem
+          control={<ListItem.Navigation hideIndicator onClick={args.onClick} />}
+          title="Navigation without chevron (button)"
+          subtitle="Triggers a click handler"
+          media={MEDIA.avatarSingle}
+        />
+      </List>
+    );
+  },
+};
+
 /**
  * Navigation control can be rendered as HTML anchor or a button
  */

package/src/Nudge/Nudge.css

@@ -171,7 +171,7 @@
 }
 .wds-nudge-media-documents {
   margin-left: -8px;
-  margin-top: 22px;
+  margin-top: 8px;
   position: absolute;
   width: 120px;
 }

package/src/Nudge/Nudge.less

@@ -82,7 +82,7 @@
     }
 
     &-documents {
-      .media-position(120px, -8px, 22px);
+      .media-position(120px, -8px, 8px);
     }
   }
 

package/src/Nudge/Nudge.test.tsx

@@ -42,6 +42,49 @@ describe('Nudge', () => {
     expect(defaultProps.onDismiss).toHaveBeenCalledTimes(1);
   });
 
+  it('renders action only when both action and link/href are supplied', () => {
+    const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <Nudge
+        {...defaultProps}
+        action={{
+          text: 'Learn more',
+          href: '#action-link',
+          'aria-label': 'Learn more about rewards',
+        }}
+      />,
+    );
+
+    expect(screen.queryByText('CTA')).not.toBeInTheDocument();
+
+    const actionLink = screen.getByText('Learn more');
+    expect(actionLink).toBeInTheDocument();
+    expect(actionLink).toHaveAttribute('href', '#action-link');
+
+    consoleWarn.mockRestore();
+  });
+  it('shows a warning in development when both action and link/href are supplied', () => {
+    const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <Nudge
+        {...defaultProps}
+        action={{
+          text: 'Learn more',
+          href: '#action-link',
+          'aria-label': 'Learn more about rewards',
+        }}
+      />,
+    );
+
+    expect(consoleWarn).toHaveBeenCalledWith(
+      'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',
+    );
+
+    consoleWarn.mockRestore();
+  });
+
   describe('Nudge persistance', () => {
     beforeEach(() => {
       jest.resetAllMocks();