@transferwise/components 46.126.0 → 46.128.0

package/src/inputs/SelectInput.tsx

@@ -197,6 +197,52 @@ function sortSelectInputItems<T>(
   return flattenedOption.sort((a, b) => compareFn(a, b, searchQuery));
 }
 
+/**
+ * A prebuilt sort function for `sortFilteredOptions` that sorts options by relevance to the search query.
+ * Prioritizes: exact matches > starts with > contains > alphabetical.
+ *
+ * @param getLabel - Function to extract the label string from the option value. Defaults to using `title` property.
+ *
+ * @example
+ * ```tsx
+ * <SelectInput
+ *   filterable
+ *   sortFilteredOptions={sortByRelevance((value) => value.name)}
+ *   // ...
+ * />
+ * ```
+ */
+export function sortByRelevance<T>(
+  getLabel: (value: T) => string = (value) => (value as { title: string }).title,
+): (a: SelectInputOptionItem<T>, b: SelectInputOptionItem<T>, searchQuery: string) => number {
+  return (a, b, searchQuery) => {
+    const normalizedQuery = searchQuery.toLowerCase();
+    const labelA = getLabel(a.value).toLowerCase();
+    const labelB = getLabel(b.value).toLowerCase();
+
+    // Prioritize exact matches
+    const aExactMatch = labelA === normalizedQuery;
+    const bExactMatch = labelB === normalizedQuery;
+    if (aExactMatch && !bExactMatch) return -1;
+    if (!aExactMatch && bExactMatch) return 1;
+
+    // Then prioritize options where label starts with the search query
+    const aStartsWith = labelA.startsWith(normalizedQuery);
+    const bStartsWith = labelB.startsWith(normalizedQuery);
+    if (aStartsWith && !bStartsWith) return -1;
+    if (!aStartsWith && bStartsWith) return 1;
+
+    // Then prioritize options where label contains the search query
+    const aContains = labelA.includes(normalizedQuery);
+    const bContains = labelB.includes(normalizedQuery);
+    if (aContains && !bContains) return -1;
+    if (!aContains && bContains) return 1;
+
+    // Finally sort alphabetically
+    return labelA.localeCompare(labelB);
+  };
+}
+
 export interface SelectInputProps<T = string, M extends boolean = false> {
   id?: string;
   /**
@@ -558,6 +604,8 @@ export function SelectInput<T = string, M extends boolean = false>({
   );
 }
 
+SelectInput.sortByRelevance = sortByRelevance;
+
 const SelectInputTriggerButtonPropsContext = createContext<{
   ref?: React.ForwardedRef<HTMLButtonElement | null>;
   id?: string;
@@ -741,15 +789,35 @@ function SelectInputOptions<T = string>({
       return items;
     }
 
-    const filtered = filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
-      selectInputOptionItemIncludesNeedle(item, needle),
-    );
+    const dedupedItems = dedupeSelectInputItems(items, compareValues);
 
     if (sortFilteredOptions) {
+      // When sorting, filter out non-matching items completely to avoid ghost items
+      const filtered = dedupedItems.map((item) => {
+        if (item.type === 'option') {
+          return selectInputOptionItemIncludesNeedle(item, needle)
+            ? item
+            : { ...item, value: undefined };
+        }
+        if (item.type === 'group') {
+          return {
+            ...item,
+            options: item.options.map((option) =>
+              selectInputOptionItemIncludesNeedle(option, needle)
+                ? option
+                : { ...option, value: undefined },
+            ),
+          };
+        }
+        return item;
+      });
+
       return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
     }
 
-    return filtered;
+    return filterSelectInputItems(dedupedItems, (item) =>
+      selectInputOptionItemIncludesNeedle(item, needle),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [needle, items, compareValues]);
   const resultsEmpty = needle != null && filteredItems.length === 0;
@@ -760,17 +828,28 @@ function SelectInputOptions<T = string>({
   // the scroll position may jump around inadvertently. Pattern adopted from:
   // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
   const [mountedIndexes, setMountedIndexes] = useState<number[]>([]);
+  const prevNeedleRef = useRef(needle);
+
   useEffect(() => {
-    // Ensure the 'End' key works as intended by keeping the last item mounted
-    setMountedIndexes((prevMountedIndexes) => {
-      const indexes = new Set(prevMountedIndexes);
-      indexes.add(filteredItems.length - 1);
-      return [...indexes]; // Sorting is redundant by nature here
-    });
-  }, [
-    needle, // Needed as `filteredItems.length` may be equal between two updates
-    filteredItems.length,
-  ]);
+    const needleChanged = prevNeedleRef.current !== needle;
+    prevNeedleRef.current = needle;
+
+    if (needleChanged) {
+      // Reset mounted indexes when search changes to avoid stale scroll positions
+      setMountedIndexes([]);
+      return;
+    }
+
+    // Ensure the 'End' key works as intended by keeping the last item mounted.
+    // Skipped on needle change to prevent auto-scrolling on search.
+    if (filteredItems.length > 0) {
+      setMountedIndexes((prevMountedIndexes) => {
+        const indexes = new Set(prevMountedIndexes);
+        indexes.add(filteredItems.length - 1);
+        return [...indexes]; // Sorting is redundant by nature here
+      });
+    }
+  }, [needle, filteredItems.length]);
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -927,7 +1006,6 @@ function SelectInputOptions<T = string>({
           ) : (
             <Virtualizer
               ref={virtualiserHandlerRef}
-              key={needle}
               data={filteredItems}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -11,6 +11,7 @@ import {
 } from '../_stories/subcomponents';
 import { ListItem } from '../ListItem';
 import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
+import { Clock } from '@transferwise/icons';
 
 const meta: Meta<ListItemPromptProps> = {
   component: Prompt,
@@ -66,7 +67,7 @@ export const Playground: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt {...args} />}
+        prompt={<ListItem.Prompt {...args} />}
       />
     </List>
   ),
@@ -86,28 +87,89 @@ export const Sentiment: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.NEUTRAL}>
+            This is a neutral prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.POSITIVE}>
+            This is a positive prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING}>
+            This is a warning prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.NEGATIVE}>
+            This is a negative prompt.
+          </ListItem.Prompt>
+        }
+      />
+    </List>
+  ),
+};
+
+/**
+ * While all main sentiments (`warning`, `negative`, `positive` and `neutral`) are associated with a
+ * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
+ * closer to the prompt's content. <br /><br />
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * <br /><br />
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
+ * Icon's `title` prop instead.
+ */
+export const IconOverrides: Story = {
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING} mediaLabel="Processing: ">
+            This prompt uses default Icon, but with a custom label for screen readers.
+          </ListItem.Prompt>
+        }
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING} media={<Clock title="Processing: " />}>
+            This prompt uses custom Icon with a custom label for screen readers.
+          </ListItem.Prompt>
+        }
       />
     </List>
   ),
@@ -135,13 +197,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <Prompt sentiment={args.sentiment}>
+          <ListItem.Prompt sentiment={args.sentiment}>
             This prompt includes a{' '}
             <Link href="https://wise.com" target="_blank" rel="noreferrer">
               link to some resource
             </Link>{' '}
             to help the user in their journey.
-          </Prompt>
+          </ListItem.Prompt>
         }
       />
 
@@ -151,13 +213,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <Prompt sentiment={args.sentiment}>
+          <ListItem.Prompt sentiment={args.sentiment}>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
             This prompt includes an <Link onClick={action('inline button')}>
               inline button
             </Link>{' '}
             than can e.g. trigger a modal.
-          </Prompt>
+          </ListItem.Prompt>
         }
       />
     </List>

package/src/listItem/Prompt/ListItemPrompt.test.tsx

@@ -1,3 +1,4 @@
+import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { Sentiment } from '../../common';
 import { ListItem } from '../ListItem';
@@ -18,6 +19,8 @@ describe('ListItem.Prompt', () => {
   });
 
   describe('render icon', () => {
+    const customLabel = 'Custom icon label';
+
     it.each([
       [Sentiment.NEUTRAL, 'info-icon'],
       [Sentiment.POSITIVE, 'check-icon'],
@@ -32,6 +35,34 @@ describe('ListItem.Prompt', () => {
       );
       expect(screen.getByTestId(iconId)).toBeInTheDocument();
     });
+
+    it('should accept accessible name override for a status icon', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={
+            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} mediaLabel={customLabel}>
+              Message
+            </ListItem.Prompt>
+          }
+        />,
+      );
+      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+    });
+
+    it('should accept icon accessible name override', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={
+            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} media={<Clock title={customLabel} />}>
+              Message
+            </ListItem.Prompt>
+          }
+        />,
+      );
+      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+    });
   });
 
   describe('muted state', () => {

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -3,7 +3,10 @@ import { Sentiment } from '../../common';
 import { ListItemContext, type ListItemContextData } from '../ListItemContext';
 import { InlinePrompt, type InlinePromptProps } from '../../prompt';
 
-export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
+export type ListItemPromptProps = Pick<
+  InlinePromptProps,
+  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'
+>;
 
 /**
  * This component allows for rendering an Inline Prompt. <br />
@@ -15,6 +18,8 @@ export const Prompt = ({
   sentiment = Sentiment.NEUTRAL,
   mediaLabel,
   children,
+  media,
+  loading,
 }: ListItemPromptProps) => {
   const { ids, props } = useContext<ListItemContextData>(ListItemContext);
   const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
@@ -23,6 +28,8 @@ export const Prompt = ({
     <InlinePrompt
       id={ids.prompt}
       sentiment={sentiment}
+      media={media}
+      loading={loading}
       mediaLabel={mediaLabel}
       muted={isLongLivedMuted}
       className="wds-list-item-prompt"
@@ -33,4 +40,3 @@ export const Prompt = ({
 };
 
 Prompt.displayName = 'ListItem.Prompt';
-export default Prompt;

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

@@ -252,7 +252,6 @@ const getPropsForPreview = (args: PreviewStoryArgs): [ListItemProps, Partial<Lis
 };
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
 

package/src/logo/Logo.story.tsx

@@ -1,15 +1,29 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Logo from '.';
+import Logo, { LogoType } from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Logo,
   title: 'Content/Logo',
-  render: ({ inverse, type }) => {
+  render: () => {
     return (
-      <div className={`${inverse ? 'bg--dark' : ''} p-a-3`}>
-        <Logo type={type} inverse={inverse} />
-      </div>
+      <>
+        <div>
+          {Object.values(LogoType).map((type) => (
+            <div key={type} className="m-a-2">
+              <Logo type={type} />
+            </div>
+          ))}
+        </div>
+        <div className="bg--dark">
+          {Object.values(LogoType).map((type) => (
+            <div key={type} className="m-a-2">
+              <Logo type={type} inverse />
+            </div>
+          ))}
+        </div>
+      </>
     );
   },
 } satisfies Meta<typeof Logo>;
@@ -22,3 +36,8 @@ export const Basic: Story = {
     inverse: false,
   },
 };
+
+export const Mobile: Story = {
+  ...Basic,
+  ...withVariantConfig(['mobile']),
+};

package/src/main.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5346,6 +5346,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
+  width: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;
@@ -5405,8 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
-.wds-inline-prompt--full-width {
-  width: 100%;
+.wds-inline-prompt--auto-width {
+  width: auto;
+  width: initial;
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
@@ -5442,13 +5444,16 @@ html:not([dir="rtl"]) .np-navigation-option {
   stroke: currentColor;
 }
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
   justify-content: flex-start;
@@ -5457,17 +5462,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;
@@ -7484,3 +7488,7 @@ html:not([dir="rtl"]) .np-navigation-option {
     min-width: fit-content;
   }
 }
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}

package/src/overlayHeader/OverlayHeader.test.tsx

@@ -11,9 +11,6 @@ describe('OverlayHeader', () => {
     logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
     onClose: jest.fn(),
   };
-  it('renders as expected', () => {
-    expect(render(<OverlayHeader {...props} />).container).toMatchSnapshot();
-  });
 
   it('renders separator only if avatar and onClose are provided', () => {
     const { container } = render(<OverlayHeader {...props} />);

package/src/popover/Popover.test.tsx

@@ -22,19 +22,6 @@ describe('Popover', () => {
   let rerender;
 
   describe('on desktop', () => {
-    it('renders when is open', async () => {
-      render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      );
-
-      await userEvent.click(screen.getByText('Open'));
-
-      await waitForPanel();
-      expect(getPanel()).toMatchSnapshot();
-    });
-
     describe('title', () => {
       it('renders title', async () => {
         ({ container, rerender } = render(
@@ -122,18 +109,6 @@ describe('Popover', () => {
       global.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders when is open', async () => {
-      ({ container } = render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      ));
-
-      await userEvent.click(screen.getByText('Open'));
-
-      expect(container).toMatchSnapshot();
-    });
-
     it('renders BottomSheet onClick', async () => {
       render(
         <Popover {...props}>

package/src/promoCard/PromoCard.test.tsx

@@ -26,12 +26,6 @@ describe('PromoCard', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCard {...defaultProps} id="test-promo-card" />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/promoCard/PromoCardGroup.test.tsx

@@ -41,11 +41,6 @@ describe('PromoCardGroup', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCardGroup {...defaultProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Prompts/ActionPrompt/Accessibility" />
+<Meta title="Prompts/ActionPrompt/Accessibility" tags={['new']} />
 
 # Accessibility
 
@@ -31,23 +31,7 @@ If you want to provide a custom label for screen readers, you can use the `aria-
 
 ## Media
 
-You can use the `aria-hidden` attribute on media assets to hide them from screen readers if they're not providing any additional information. This is useful when the media is purely decorative or when its content is already conveyed through other means (e.g., text).
-
-<Source
-  dark
-  code={`
-<ActionPrompt
-  media={{
-    'aria-hidden': true,
-    avatar: { asset: <People /> },
-  }}
-  title="Sync contacts for a faster experience"
-  ...
-/>
-`}
-/>
-
-You can also use `aria-label` on media assets to provide a custom label for screen readers.
+You can use `aria-label` on media assets to provide a custom label for screen readers.
 
 <Source
   dark

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -19,3 +19,7 @@
     min-width: fit-content;
   }
 }
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}