@transferwise/components 46.128.3 → 46.130.0

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/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/inputs/SelectInput.css

@@ -102,6 +102,14 @@
   border-radius: var(--size-10);
   text-align: start;
 }
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}
 .np-popover-v2-container {
   z-index: 1060;
   display: flex;

package/src/inputs/SelectInput.story.tsx

@@ -430,11 +430,11 @@ export const Advanced: Story<Month> = {
         { type: 'separator' },
       ])
       .slice(0, -1),
-    renderValue: (month, withinTrigger) => (
+    renderValue: (month) => (
       <SelectInputOptionContent
         title={month.name}
         note="Note"
-        description={withinTrigger ? undefined : `Month #${month.id}`}
+        description={`Month #${month.id}`}
         icon={<Calendar size={24} />}
       />
     ),

package/src/inputs/SelectInput.test.story.tsx

@@ -1,11 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fireEvent, fn, type Mock, screen, userEvent, within } from 'storybook/test';
+import { useState } from 'react';
 
 import { allModes } from '../../.storybook/modes';
 import Body from '../body';
 import { Field } from '../field/Field';
 import { lorem5, lorem500 } from '../test-utils';
-import { SelectInput, type SelectInputProps, sortByRelevance } from './SelectInput';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  type SelectInputProps,
+  sortByRelevance,
+} from './SelectInput';
 
 const meta = {
   title: 'Forms/SelectInput/Tests',
@@ -1364,3 +1370,53 @@ export const SmoothScrollReset: Story<string> = {
     },
   },
 };
+
+interface OptionWithDescription {
+  id: string;
+  title: string;
+  description?: string;
+}
+
+const optionsWithDescription: OptionWithDescription[] = [
+  { id: '1', title: 'Option One', description: 'This is the first option' },
+  { id: '2', title: 'Option Two (no description)' },
+  { id: '3', title: 'Option Three', description: 'This is the third option' },
+];
+
+/**
+ * Test story to verify that SelectInput correctly displays an item with a description
+ * when shown in the trigger button. The description should be visible in the trigger
+ * after selection.
+ */
+export const TriggerWithDescription: Story<OptionWithDescription> = {
+  args: {
+    items: optionsWithDescription.map((option) => ({
+      type: 'option',
+      value: option,
+    })),
+    defaultValue: optionsWithDescription[0],
+    placeholder: 'Select an option',
+    renderValue: (option, withinTrigger) => (
+      <SelectInputOptionContent
+        title={option.title}
+        description={withinTrigger ? option.description : undefined}
+      />
+    ),
+  },
+  render: function Render({ onChange, ...args }) {
+    const [selectedOption, setSelectedOption] = useState<OptionWithDescription>(
+      optionsWithDescription[0],
+    );
+
+    return (
+      <SelectInput
+        {...args}
+        value={selectedOption}
+        onChange={(option) => {
+          setSelectedOption(option);
+          onChange?.(option);
+        }}
+      />
+    );
+  },
+};

package/src/inputs/SelectInput.test.tsx

@@ -4,7 +4,12 @@ import { mockAnimationsApi } from 'jsdom-testing-mocks';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
-import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  type SelectInputOptionItem,
+  type SelectInputProps,
+} from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
@@ -511,6 +516,33 @@ describe('SelectInput', () => {
     expect(options[2]).toHaveTextContent('Zambia');
   });
 
+  it('adds class to description wrapper when description is present', () => {
+    interface Currency {
+      code: string;
+      name: string;
+      description: string;
+    }
+
+    const usd: Currency = { code: 'USD', name: 'US Dollar', description: 'United States Dollar' };
+    const eur: Currency = { code: 'EUR', name: 'Euro', description: 'European Currency' };
+
+    render(
+      <SelectInput<Currency>
+        items={[
+          { type: 'option', value: usd },
+          { type: 'option', value: eur },
+        ]}
+        renderValue={(currency) => (
+          <SelectInputOptionContent title={currency.name} description={currency.description} />
+        )}
+        value={usd}
+      />,
+    );
+
+    const descriptionElement = screen.getByText('United States Dollar');
+    expect(descriptionElement).toHaveClass('np-select-input-option-description-in-trigger');
+  });
+
   describe('listbox label', () => {
     const fieldLabel = 'Fruits';
     const triggerLabel = 'Select fruit';

package/src/inputs/SelectInput.tsx

@@ -1256,7 +1256,8 @@ export function SelectInputOptionContent({
           <div
             className={clsx(
               'np-select-input-option-content-text-secondary np-text-body-default',
-              withinTrigger && 'np-select-input-option-content-text-within-trigger',
+              withinTrigger &&
+                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
             )}
           >
             {description}

package/src/inputs/_ButtonInput.less

@@ -4,4 +4,12 @@
   align-content: center;
   border-radius: var(--size-10);
   text-align: start;
+
+  // Using !important to overwrite styles from .form-control and inputClassNameBase util, which also use !important
+  &:has(.np-select-input-option-description-in-trigger) {
+    height: auto !important;
+    align-content: start;
+    padding-top: var(--size-12) !important;
+    padding-bottom: var(--size-12) !important;
+  }
 }

package/src/inputs/_ButtonInput.tsx

@@ -18,7 +18,7 @@ export const ButtonInput = forwardRef(function ButtonInput(
     <button
       ref={ref}
       type="button"
-      className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
+      className={clsx(inputClassNameBase({ size }), 'np-button-input', className)}
       style={{ ...inputPaddings, ...style }}
       {...restProps}
     />

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/_stories/Breakpoints/ListItem.noMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/NoMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [240, 241];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const NoMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/SideMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [332, 333];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const SideMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/StackedMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [308, 309];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const StackedMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

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

@@ -428,8 +428,9 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
 
     return (
       <List>
-        <ListItem {...props} {...previewProps} spotlight="inactive" />
-        <ListItem {...props} {...previewProps} spotlight="active" />
+        <ListItem {...props} {...previewProps} title="Inactive Spotlight" spotlight="inactive" />
+        <ListItem {...props} {...previewProps} title="Active Spotlight" spotlight="active" />
+        <ListItem {...props} {...previewProps} title="No Spotlight" />
       </List>
     );
   },