@transferwise/components 46.129.0 → 46.130.1

package/src/criticalBanner/CriticalCommsBanner.less

@@ -1,51 +1,61 @@
-.np-theme-personal {
-  .critical-comms {
-    .alert-warning {
-      color: var(--color-contrast-overlay);
-      background-color: var(--color-sentiment-negative);
-
-      .np-text-title-body {
-        color: var(--color-contrast-overlay);
-      }
-    }
+.critical-comms {
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 
-    .status-circle.warning {
-      background-color: var(--color-background-screen);
+  .alert {
+    background-color: var(--color-sentiment-background-surface);
+    color: var(--color-sentiment-content-primary);
+    margin-bottom: 0;
 
-      .status-icon {
-        color: var(--color-contrast-theme);
-      }
+    .np-text-title-body {
+      color: var(--color-sentiment-content-primary);
     }
+  }
 
-    .alert__message {
-      .alert__action {
-        margin-top: var(--size-16);
-      }
+  .status-circle.negative {
+    background-color: var(--color-background-screen);
+
+    .status-icon {
+      color: var(--color-content-primary);
     }
+  }
 
-    .wds-Button {
-      --Button-background: var(--color-contrast-overlay);
-      --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-      --Button-background-active: var(--color-sentiment-negative-secondary-active);
+  .alert__message {
+    .alert__action {
+      margin-top: var(--size-16);
     }
   }
 
+  .wds-Button {
+    --Button-color: var(--color-content-primary);
+    --Button-color-hover: var(--color-content-primary);
+    --Button-color-active: var(--color-content-primary);
+
+    --Button-background: var(--color-background-screen);
+    --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+    --Button-background-active: var(--color-sentiment-interactive-primary-active);
+  }
+
+  .alert-warning .wds-Button {
+    --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+    --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
+  }
 
   @media (--screen-md) {
-    .critical-comms {
-      .alert-warning {
-        .alert__message {
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-          width: 100%;
-
-          .alert__action {
-            margin-top: 0;
-            margin-left: var(--padding-small);
-          }
+    .alert-warning,
+    .alert-negative,
+    .alert-neutral {
+      .alert__message {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        .alert__action {
+          margin-top: 0;
+          margin-left: var(--padding-small);
         }
       }
     }
   }
-}
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-
 import CriticalCommsBanner from '.';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CriticalCommsBanner,
@@ -18,21 +16,17 @@ export const Basic = {
   },
 };
 
-export const Variants: Story = {
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" title="Your account is overdrawn" />
+      <CriticalCommsBanner {...args} sentiment="warning" title="Your account needs attention" />
+      <CriticalCommsBanner {...args} sentiment="neutral" title="Your transfer is being processed" />
+    </>
+  ),
   args: {
-    title: 'Your account is overdrawn',
-    subtitle: 'Add money within the next 30 days',
-    action: { label: 'Take action', href: 'https://wise.com' },
-  },
-  ...withVariantConfig(['default', 'dark', 'rtl']),
-};
-
-export const Mobile: Story = {
-  tags: ['!autodocs'],
-  args: {
-    title: 'Your account is overdrawn',
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
   },
-  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx

@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import CriticalCommsBanner from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+export default {
+  component: CriticalCommsBanner,
+  title: 'Prompts/CriticalCommsBanner/tests',
+  tags: ['!autodocs'],
+} satisfies Meta<typeof CriticalCommsBanner>;
+
+type Story = StoryObj<typeof CriticalCommsBanner>;
+
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig([
+    'default',
+    'dark',
+    'bright-green',
+    'forest-green',
+    'business',
+    'business--forest-green',
+    'business--bright-green',
+  ]),
+};
+
+export const RTL: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+export const Mobile: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['mobile']),
+};
+
+export const Zoom: Story = {
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['400%']),
+};

package/src/criticalBanner/CriticalCommsBanner.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+
+import CriticalCommsBanner from './CriticalCommsBanner';
+
+mockMatchMedia();
+
+describe('CriticalCommsBanner', () => {
+  const defaultProps = {
+    title: 'Test title',
+    subtitle: 'Test subtitle',
+    action: { label: 'Take action', href: 'https://wise.com' },
+  };
+
+  it('renders with default negative sentiment', () => {
+    render(<CriticalCommsBanner {...defaultProps} />);
+
+    expect(screen.getByText('Test title')).toBeInTheDocument();
+    expect(screen.getByText('Test subtitle')).toBeInTheDocument();
+    expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
+  });
+
+  it('renders the action', () => {
+    render(<CriticalCommsBanner {...defaultProps} />);
+
+    expect(screen.getByText('Take action')).toBeInTheDocument();
+  });
+
+  describe('sentiment variants', () => {
+    it('renders negative sentiment with correct alert type and icon', () => {
+      render(<CriticalCommsBanner {...defaultProps} sentiment="negative" />);
+
+      expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
+      // Custom icon replaces the default StatusIcon
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
+    });
+
+    it('renders warning sentiment with correct alert type and icon', () => {
+      render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);
+
+      expect(screen.getByTestId('alert')).toHaveClass('alert-warning');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
+    });
+
+    it('renders neutral sentiment with correct alert type and icon', () => {
+      render(<CriticalCommsBanner {...defaultProps} sentiment="neutral" />);
+
+      expect(screen.getByTestId('alert')).toHaveClass('alert-neutral');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
+    });
+  });
+
+  it('wraps content in SentimentSurface with elevated emphasis', () => {
+    render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);
+
+    const surface = screen.getByTestId('alert').closest('.critical-comms');
+    expect(surface).toHaveClass('wds-sentiment-surface');
+    expect(surface).toHaveClass('wds-sentiment-surface-warning-elevated');
+  });
+
+  it('applies className to the wrapper', () => {
+    render(<CriticalCommsBanner {...defaultProps} className="custom-class" />);
+
+    const surface = screen.getByTestId('alert').closest('.critical-comms');
+    expect(surface).toHaveClass('custom-class');
+  });
+});

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,5 +1,16 @@
-import Alert from '../alert';
+import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { PropsWithChildren } from 'react';
+
+import Alert from '../alert';
+import { Sentiment } from '../common';
+import Circle, { CircleProps } from '../common/circle';
+import SentimentSurface from '../sentimentSurface';
+
+export type CriticalCommsBannerSentiment =
+  | `${Sentiment.WARNING}`
+  | `${Sentiment.NEGATIVE}`
+  | `${Sentiment.NEUTRAL}`;
 
 export type CriticalCommsBannerProps = {
   title: string;
@@ -9,20 +20,58 @@ export type CriticalCommsBannerProps = {
     href?: string;
     onClick?: () => void;
   };
+  sentiment?: CriticalCommsBannerSentiment;
   className?: string;
 };
 
-function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
+const makeSurface = (sentiment: CriticalCommsBannerSentiment) => {
+  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
+    <SentimentSurface as="span" emphasis="elevated" sentiment={sentiment} {...props} />
+  );
+  Surface.displayName = `CriticalCommsSurface(${sentiment})`;
+  return Surface;
+};
+
+const iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {
+  [Sentiment.NEGATIVE]: (
+    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className="status-circle negative">
+      <AlertIcon className="status-icon light" />
+    </Circle>
+  ),
+  [Sentiment.WARNING]: (
+    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className="status-circle warning">
+      <AlertIcon className="status-icon dark" />
+    </Circle>
+  ),
+  [Sentiment.NEUTRAL]: (
+    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className="status-circle neutral">
+      <ClockIcon className="status-icon dark" />
+    </Circle>
+  ),
+};
+
+function CriticalCommsBanner({
+  title,
+  subtitle,
+  action,
+  sentiment = Sentiment.NEGATIVE,
+  className,
+}: CriticalCommsBannerProps) {
   return (
-    <div className={clsx('critical-comms', className)}>
+    <SentimentSurface
+      sentiment={sentiment}
+      emphasis="elevated"
+      className={clsx('critical-comms', className)}
+    >
       <Alert
         title={title}
         message={subtitle}
         action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
         className={className}
-        type="warning"
+        type={sentiment}
+        icon={iconBySentiment[sentiment]}
       />
-    </div>
+    </SentimentSurface>
   );
 }
 

package/src/criticalBanner/index.ts

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

package/src/dateInput/DateInput.tsx

@@ -27,7 +27,9 @@ export interface DateInputProps {
   /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */
   'aria-label'?: string;
   'aria-labelledby'?: string;
+  /** @default false */
   disabled?: boolean;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
@@ -38,7 +40,9 @@ export interface DateInputProps {
   monthLabel?: string;
   yearLabel?: string;
   yearAutoComplete?: string;
+  /** @default 'long' */
   monthFormat?: `${MonthFormat}`;
+  /** @default 'day-month-year' */
   mode?: `${DateMode}`;
   placeholders?: {
     day?: string;
@@ -46,6 +50,7 @@ export interface DateInputProps {
     year?: string;
   };
   id?: string;
+  /** @default {} */
   selectProps?: Partial<SelectInputProps<number | null>>;
 }
 

package/src/dimmer/Dimmer.tsx

@@ -23,12 +23,18 @@ const dimmerManager = new DimmerManager();
 
 export type DimmerProps = CommonProps & {
   children?: ReactNode;
+  /** @default false */
   disableClickToClose?: boolean;
   contentPosition?: PositionTop | PositionCenter | PositionBottom;
+  /** @default false */
   fadeContentOnEnter?: boolean;
+  /** @default false */
   fadeContentOnExit?: boolean;
+  /** @default false */
   open?: boolean;
+  /** @default false */
   scrollable?: boolean;
+  /** @default false */
   transparent?: boolean;
   onClose?: (event: KeyboardEvent | MouseEvent) => void;
   onExited?: () => void;

package/src/drawer/Drawer.tsx

@@ -21,9 +21,15 @@ export type DrawerProps = {
   footerContent?: React.ReactNode;
   /** The content to appear in the drawer header. */
   headerTitle?: React.ReactNode;
-  /** The status of Drawer either open or not. */
+  /**
+   * The status of Drawer either open or not.
+   * @default false
+   */
   open?: boolean;
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  /**
+   * The placement of Drawer on the screen either left or right. On mobile it will default to bottom.
+   * @default 'right'
+   */
   position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
   /** The action to perform on close click. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;

package/src/field/Field.tsx

@@ -16,8 +16,9 @@ export type FieldProps = {
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
+  /** @default true */
   required?: boolean;
-  /** @deprecated use `description` prop instead */
+  /** @deprecated Use `description` prop instead. */
   hint?: React.ReactNode;
   message?: React.ReactNode;
   /**
@@ -27,11 +28,13 @@ export type FieldProps = {
   messageIconLabel?: string;
   /**
    * If true, shows a loading spinner in place of the message icon of the InlinePrompt
+   * @default false
    */
   messageLoading?: boolean;
   description?: React.ReactNode;
-  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
+  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */
   error?: React.ReactNode;
+  /** @default Sentiment.NEUTRAL */
   sentiment?: InlinePromptProps['sentiment'];
   className?: string;
   children?: React.ReactNode;

package/src/flowNavigation/FlowNavigation.tsx

@@ -14,9 +14,12 @@ import IconButton from '../iconButton';
 import { ArrowLeft } from '@transferwise/icons';
 
 export interface FlowNavigationProps {
+  /** @default 0 */
   activeStep?: number;
   avatar?: React.ReactNode;
+  /** @default <Logo /> */
   logo?: React.ReactNode;
+  /** @default false */
   done?: boolean;
   /** Called when the close button is clicked. If not provided the close button won't show */
   onClose?: () => void;

package/src/header/Header.tsx

@@ -29,13 +29,17 @@ export interface HeaderProps extends CommonProps {
    *   If this condition is not met, a warning will be logged to the console.
    *
    * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
+   * @default 'h5'
    */
   as?: Heading | 'legend' | 'header';
 
   /** Required prop to set the title of the Header. */
   title: ReactNode;
 
-  /** Optional prop to specify the level of the Header */
+  /**
+   * Optional prop to specify the level of the Header
+   * @default 'group'
+   */
   level?: 'section' | 'group';
 
   className?: string;

package/src/iconButton/IconButton.tsx

@@ -4,8 +4,11 @@ import Circle from '../common/circle';
 import { clsx } from 'clsx';
 
 export type Props = {
+  /** @default 48 */
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  /** @default 'primary' */
   priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
+  /** @default 'default' */
   type?: 'default' | 'negative';
   'data-testid'?: string;
 } & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &

package/src/index.ts

@@ -154,8 +154,9 @@ export { Chip, default as Chips } from './chips';
 export { default as CircularButton } from './circularButton';
 export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/bottomSheet';
-export { default as BaseCard } from './common/card';
+export { default as BaseCard } from './common/baseCard';
 export { default as CriticalCommsBanner } from './criticalBanner';
+export type { CriticalCommsBannerProps } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
 export { default as Decision } from './decision';

package/src/legacylistItem/LegacyListItem.tsx

@@ -14,7 +14,7 @@ export type LegacyListItemProps = {
 };
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/list/List.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 
 export interface ListProps {
+  /** @default 'ul' */
   as?: 'ul' | 'ol' | 'div';
   className?: string;
   children?: React.ReactNode;

package/src/listItem/Button/ListItemButton.tsx

@@ -13,6 +13,8 @@ export type ListItemButtonProps = Omit<
    */
   partiallyInteractive?: boolean;
   addonStart?: ButtonAddonIcon;
+  /** @default 'secondary-neutral' */
+  priority?: NewButtonProps['priority'];
 };
 
 /**

package/src/listItem/IconButton/ListItemIconButton.tsx

@@ -6,10 +6,12 @@ import { ListItemContext } from '../ListItemContext';
 
 export type ListItemIconButtonProps = Pick<
   IconButtonProps,
-  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'
+  'type' | 'onClick' | 'href' | 'target' | 'aria-label'
 > & {
   children: ReactNode;
   partiallyInteractive?: boolean;
+  /** @default 'minimal' */
+  priority?: IconButtonProps['priority'];
 };
 
 /**

package/src/listItem/Image/ListItemImage.tsx

@@ -6,10 +6,12 @@ import { ListItemMediaSize } from '../ListItemContext';
 export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
   /**
    * The size of square container for the image, matching available avatar sizes.
+   * @default 48
    */
   size?: ListItemMediaSize;
   /**
    * When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
+   * @default ''
    */
   alt?: string;
 };

package/src/listItem/ListItem.css

@@ -599,7 +599,7 @@
 .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
   opacity: 0.93;
 }
-.wds-list-item-spotlight {
+.wds-list-item-spotlight .wds-list-item-gridWrapper {
   padding-left: 12px;
   padding-left: var(--size-12);
   padding-right: 12px;

package/src/listItem/ListItem.less

@@ -266,8 +266,10 @@
   }
 
   &-spotlight {
-    padding-left: var(--size-12);
-    padding-right: var(--size-12);
+    .wds-list-item-gridWrapper {
+      padding-left: var(--size-12);
+      padding-right: var(--size-12);
+    }
 
     &-active {
       background-color: var(--color-background-neutral);

package/src/listItem/ListItem.tsx

@@ -45,6 +45,7 @@ export type ListItemControlProps =
   | ListItemSwitchProps;
 
 export type ListItemProps = {
+  /** @default 'li' */
   as?: 'li' | 'div';
   /**
    * Swaps vertical hierarchy of title and subtitle and their corresponding right values.
@@ -88,6 +89,7 @@ export type ListItemProps = {
    * `<ListItem.Navigation />`, <br/>
    * `<ListItem.Radio />`, or
    * `<ListItem.Switch />`
+   * @default null
    */
   control?: ReactNode;
   /**