npm - @transferwise/components - Versions diffs - 46.125.0 → 46.127.1 - Mend

@transferwise/components 46.125.0 → 46.127.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (197) hide show

package/build/avatarView/AvatarView.js.map +1 -1
package/build/avatarView/AvatarView.mjs.map +1 -1
package/build/common/locale/index.js +13 -0
package/build/common/locale/index.js.map +1 -1
package/build/common/locale/index.mjs +13 -1
package/build/common/locale/index.mjs.map +1 -1
package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +31 -1
package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +32 -2
package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
package/build/field/Field.js +1 -0
package/build/field/Field.js.map +1 -1
package/build/field/Field.mjs +1 -0
package/build/field/Field.mjs.map +1 -1
package/build/index.js +3 -0
package/build/index.js.map +1 -1
package/build/index.mjs +2 -1
package/build/index.mjs.map +1 -1
package/build/inputs/Input.js.map +1 -1
package/build/inputs/Input.mjs.map +1 -1
package/build/inputs/SearchInput.js.map +1 -1
package/build/inputs/SearchInput.mjs.map +1 -1
package/build/inputs/SelectInput.js.map +1 -1
package/build/inputs/SelectInput.mjs.map +1 -1
package/build/inputs/TextArea.js.map +1 -1
package/build/inputs/TextArea.mjs.map +1 -1
package/build/listItem/ListItem.js +2 -2
package/build/listItem/ListItem.js.map +1 -1
package/build/listItem/ListItem.mjs +2 -2
package/build/listItem/ListItem.mjs.map +1 -1
package/build/listItem/Prompt/ListItemPrompt.js +6 -4
package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
package/build/listItem/Prompt/ListItemPrompt.mjs +7 -2
package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
package/build/main.css +52 -21
package/build/moneyInput/MoneyInput.js +6 -1
package/build/moneyInput/MoneyInput.js.map +1 -1
package/build/moneyInput/MoneyInput.mjs +6 -1
package/build/moneyInput/MoneyInput.mjs.map +1 -1
package/build/prompt/ActionPrompt/ActionPrompt.js +27 -4
package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
package/build/prompt/ActionPrompt/ActionPrompt.mjs +27 -4
package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
package/build/prompt/InfoPrompt/InfoPrompt.js +113 -0
package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -0
package/build/prompt/InfoPrompt/InfoPrompt.mjs +111 -0
package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -0
package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
package/build/radioOption/RadioOption.js.map +1 -1
package/build/radioOption/RadioOption.mjs.map +1 -1
package/build/slidingPanel/SlidingPanel.js.map +1 -1
package/build/slidingPanel/SlidingPanel.mjs.map +1 -1
package/build/statusIcon/StatusIcon.js +2 -0
package/build/statusIcon/StatusIcon.js.map +1 -1
package/build/statusIcon/StatusIcon.mjs +2 -0
package/build/statusIcon/StatusIcon.mjs.map +1 -1
package/build/styles/main.css +52 -21
package/build/styles/prompt/InfoPrompt/InfoPrompt.css +31 -0
package/build/styles/sentimentSurface/SentimentSurface.css +21 -21
package/build/table/TableCell.js.map +1 -1
package/build/table/TableCell.mjs.map +1 -1
package/build/typeahead/Typeahead.js +1 -0
package/build/typeahead/Typeahead.js.map +1 -1
package/build/typeahead/Typeahead.mjs +1 -0
package/build/typeahead/Typeahead.mjs.map +1 -1
package/build/types/avatarView/AvatarView.d.ts +1 -1
package/build/types/avatarView/AvatarView.d.ts.map +1 -1
package/build/types/common/locale/index.d.ts +8 -0
package/build/types/common/locale/index.d.ts.map +1 -1
package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map +1 -1
package/build/types/index.d.ts +3 -2
package/build/types/index.d.ts.map +1 -1
package/build/types/inputs/Input.d.ts.map +1 -1
package/build/types/inputs/SearchInput.d.ts.map +1 -1
package/build/types/inputs/SelectInput.d.ts +1 -1
package/build/types/inputs/SelectInput.d.ts.map +1 -1
package/build/types/inputs/TextArea.d.ts.map +1 -1
package/build/types/listItem/ListItem.d.ts +1 -1
package/build/types/listItem/Prompt/ListItemPrompt.d.ts +2 -3
package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +1 -1
package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +1 -1
package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +4 -2
package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +56 -0
package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -0
package/build/types/prompt/InfoPrompt/index.d.ts +3 -0
package/build/types/prompt/InfoPrompt/index.d.ts.map +1 -0
package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +5 -5
package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
package/build/types/prompt/index.d.ts +2 -0
package/build/types/prompt/index.d.ts.map +1 -1
package/build/types/radioOption/RadioOption.d.ts.map +1 -1
package/build/types/slidingPanel/SlidingPanel.d.ts.map +1 -1
package/build/types/statusIcon/StatusIcon.d.ts +2 -1
package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
package/build/types/table/TableCell.d.ts.map +1 -1
package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
package/package.json +3 -3
package/src/accordion/Accordion.test.js +0 -6
package/src/accordion/AccordionItem/AccordionItem.test.js +0 -10
package/src/actionButton/ActionButton.test.tsx +0 -4
package/src/avatarLayout/AvatarLayout.story.tsx +3 -3
package/src/avatarView/AvatarView.story.tsx +29 -24
package/src/avatarView/AvatarView.tsx +1 -1
package/src/avatarWrapper/AvatarWrapper.test.tsx +0 -53
package/src/checkbox/Checkbox.test.tsx +0 -5
package/src/chevron/Chevron.test.tsx +0 -7
package/src/chips/Chips.test.tsx +0 -8
package/src/common/RadioButton/RadioButton.test.tsx +0 -18
package/src/common/bottomSheet/BottomSheet.test.story.tsx +98 -0
package/src/common/bottomSheet/BottomSheet.test.tsx +0 -9
package/src/common/card/Card.test.tsx +0 -6
package/src/common/closeButton/CloseButton.test.tsx +0 -4
package/src/common/locale/index.test.ts +36 -1
package/src/common/locale/index.ts +13 -0
package/src/common/panel/Panel.test.tsx +0 -6
package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +5 -1
package/src/flowNavigation/FlowNavigation.test.js +0 -10
package/src/index.ts +3 -1
package/src/inputs/Input.tsx +8 -9
package/src/inputs/SearchInput.tsx +8 -9
package/src/inputs/SelectInput.test.story.tsx +86 -0
package/src/inputs/SelectInput.tsx +1 -1
package/src/inputs/TextArea.tsx +6 -7
package/src/listItem/ListItem.tsx +2 -2
package/src/listItem/Prompt/ListItemPrompt.story.tsx +71 -9
package/src/listItem/Prompt/ListItemPrompt.test.tsx +31 -0
package/src/listItem/Prompt/ListItemPrompt.tsx +8 -2
package/src/logo/Logo.story.tsx +24 -5
package/src/main.css +52 -21
package/src/main.less +2 -1
package/src/moneyInput/MoneyInput.test.story.tsx +104 -0
package/src/moneyInput/MoneyInput.tsx +20 -2
package/src/overlayHeader/OverlayHeader.test.tsx +0 -3
package/src/popover/Popover.test.tsx +0 -25
package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts +1 -3
package/src/primitives/PrimitiveButton/PrimitiveButton.types.ts +1 -3
package/src/promoCard/PromoCard.test.tsx +0 -6
package/src/promoCard/PromoCardGroup.test.tsx +0 -5
package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx +65 -0
package/src/prompt/ActionPrompt/ActionPrompt.less +1 -1
package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +4 -1
package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx +147 -0
package/src/prompt/ActionPrompt/ActionPrompt.test.tsx +2 -7
package/src/prompt/ActionPrompt/ActionPrompt.tsx +48 -7
package/src/prompt/InfoPrompt/InfoPrompt.css +31 -0
package/src/prompt/InfoPrompt/InfoPrompt.less +37 -0
package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +312 -0
package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx +246 -0
package/src/prompt/InfoPrompt/InfoPrompt.test.tsx +224 -0
package/src/prompt/InfoPrompt/InfoPrompt.tsx +148 -0
package/src/prompt/InfoPrompt/index.ts +2 -0
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +13 -10
package/src/prompt/InlinePrompt/InlinePrompt.test.tsx +13 -1
package/src/prompt/PrimitivePrompt/PrimitivePrompt.less +1 -1
package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +5 -5
package/src/prompt/index.ts +5 -0
package/src/radioOption/RadioOption.tsx +2 -1
package/src/sentimentSurface/SentimentSurface.css +21 -21
package/src/sentimentSurface/SentimentSurface.less +13 -13
package/src/sentimentSurface/SentimentSurface.story.tsx +1 -1
package/src/sentimentSurface/SentimentSurface.test.story.tsx +48 -1
package/src/slidingPanel/SlidingPanel.tsx +4 -2
package/src/ssr.test.tsx +2 -0
package/src/statusIcon/StatusIcon.tsx +8 -1
package/src/table/TableCell.tsx +1 -3
package/src/tile/Tile.test.tsx +0 -10
package/src/tooltip/Tooltip.test.tsx +0 -10
package/src/withDisplayFormat/WithDisplayFormat.tsx +13 -14
package/src/accordion/AccordionItem/__snapshots__/AccordionItem.test.js.snap +0 -124
package/src/accordion/__snapshots__/Accordion.test.js.snap +0 -3
package/src/actionButton/__snapshots__/ActionButton.test.tsx.snap +0 -12
package/src/avatarWrapper/__snapshots__/AvatarWrapper.test.tsx.snap +0 -156
package/src/checkbox/__snapshots__/Checkbox.test.tsx.snap +0 -40
package/src/chevron/__snapshots__/Chevron.test.tsx.snap +0 -24
package/src/chips/__snapshots__/Chips.test.tsx.snap +0 -153
package/src/common/RadioButton/__snapshots__/RadioButton.test.tsx.snap +0 -58
package/src/common/bottomSheet/__snapshots__/BottomSheet.test.tsx.snap +0 -80
package/src/common/card/__snapshots__/Card.test.tsx.snap +0 -10
package/src/common/closeButton/__snapshots__/CloseButton.test.tsx.snap +0 -30
package/src/common/flowHeader/FlowHeader.test.tsx +0 -22
package/src/common/flowHeader/__snapshots__/FlowHeader.test.tsx.snap +0 -33
package/src/common/panel/__snapshots__/Panel.test.tsx.snap +0 -3
package/src/flowNavigation/__snapshots__/FlowNavigation.test.js.snap +0 -262
package/src/logo/Logo.test.tsx +0 -55
package/src/logo/__snapshots__/Logo.test.tsx.snap +0 -281
package/src/overlayHeader/__snapshots__/OverlayHeader.test.tsx.snap +0 -65
package/src/popover/__snapshots__/Popover.test.tsx.snap +0 -51
package/src/promoCard/__snapshots__/PromoCard.test.tsx.snap +0 -40
package/src/promoCard/__snapshots__/PromoCardGroup.test.tsx.snap +0 -80
package/src/tile/__snapshots__/Tile.test.tsx.snap +0 -55
package/src/tooltip/__snapshots__/Tooltip.test.tsx.snap +0 -32

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

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fireEvent, fn, type Mock, within } from 'storybook/test';
+import { allModes } from '../../.storybook/modes';
+import { lorem5, lorem500 } from '../test-utils';
+import { Field } from '../field/Field';
+import Body from '../body';
+import { SelectInput, type SelectInputProps } from './SelectInput';
+const meta = {
+  title: 'Forms/SelectInput/tests',
+  component: SelectInput,
+  args: {
+    onFilterChange: fn() satisfies Mock,
+    onChange: fn() satisfies Mock,
+    onClose: fn() satisfies Mock,
+    onOpen: fn() satisfies Mock,
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof SelectInput>;
+export default meta;
+type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+/**
+ * This test ensures that when the SelectInput is used within a scrollable page,
+ * opening the dropdown does not cause any unwanted scrolling or layout shifts.
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport. The issue is particularly prominent on iOS Safari.
+ *
+ * NB: This test is disabled in Chromatic as there's no obvious way to control
+ * <html/> element of a snapshot. It's to be primarily used in manual testing
+ * on an actual device or a simulator as it cannot be reproduced with mobile
+ * emulation modes on desktop browsers.
+ */
+export const SmoothScrollReset: Story<string> = {
+  args: {
+    items: Array.from({ length: 15 }).map((_, id) => ({
+      type: 'option',
+      value: `option ${id + 1}`,
+    })),
+    placeholder: 'Select option',
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>{`html { scroll-behavior: smooth; }`}</style>
+        <div>
+          <div
+            className="d-flex align-items-center justify-content-center"
+            style={{
+              backgroundColor: 'var(--color-bright-yellow)',
+              height: 400,
+            }}
+          >
+            This block should not be in the viewport.
+          </div>
+          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
+          <Field id="el1" label={lorem5}>
+            <Story />
+          </Field>
+          <Body as="p">{lorem500}</Body>
+        </div>
+      </>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    document.documentElement.scrollTop = 400;
+    await wait();
+    const canvas = within(canvasElement);
+    // cannot use userEvent.click as it crashes on iOS Safari in the simulator
+    await fireEvent.click(canvas.getByRole('combobox'));
+  },
+  globals: {
+    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

package/src/inputs/SelectInput.tsx CHANGED Viewed

@@ -1127,7 +1127,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
 const SelectInputOptionContentWithinTriggerContext = createContext(false);
 export interface SelectInputOptionContentProps {
-  title: string;
+  title: React.ReactNode;
   note?: string;
   description?: string;
   icon?: React.ReactNode;

package/src/inputs/TextArea.tsx CHANGED Viewed

@@ -5,13 +5,12 @@ import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
 import { useInputAttributes } from './contexts';
-export interface TextAreaProps
-  extends Merge<
-    React.ComponentPropsWithRef<'textarea'>,
-    {
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface TextAreaProps extends Merge<
+  React.ComponentPropsWithRef<'textarea'>,
+  {
+    'aria-invalid'?: boolean;
+  }
+> {}
 export const TextArea = forwardRef(function TextArea(
   { className, ...restProps }: TextAreaProps,

package/src/listItem/ListItem.tsx CHANGED Viewed

@@ -406,7 +406,7 @@ function View({
           aria-describedby={describedByIds}
           href={(controlProps as ListItemNavigationProps)?.href}
           target={(controlProps as ListItemNavigationProps)?.target}
-          className={clsx('wds-list-item-view d-flex flex-row', {
+          className={clsx('wds-list-item-view', {
             'wds-list-item-control': controlType === 'navigation',
             fullyInteractive: !isPartiallyInteractive,
           })}
@@ -424,7 +424,7 @@ function View({
   if (isPartiallyInteractive || controlType === 'non-interactive') {
     return (
       <div className={clsx('wds-list-item-gridWrapper', className)}>
-        <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>
+        <div className="wds-list-item-view">{children}</div>
         {renderExtras()}
       </div>

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/logo/Logo.story.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,
@@ -5441,6 +5441,37 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
   stroke: currentColor;
 }
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+}
+.wds-info-prompt__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.wds-info-prompt__content:has(.wds-info-prompt__title) {
+  justify-content: flex-start;
+  /* Top align when title exists */
+}
+.wds-info-prompt__title,
+.wds-info-prompt__description {
+  display: block;
+  color: var(--color-sentiment-primary);
+}
+.wds-info-prompt__action {
+  margin-top: var(--Prompt-gap);
+}
+.wds-info-prompt__media {
+  display: flex;
+}
+.wds-info-prompt__media svg {
+  width: 24px;
+  height: 24px;
+}
+.wds-info-prompt .wds-prompt__media-wrapper {
+  padding: 0;
+}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/src/main.less CHANGED Viewed

@@ -62,6 +62,7 @@
 @import "./promoCard/PromoCard.less";
 @import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
 @import "./prompt/InlinePrompt/InlinePrompt.less";
+@import "./prompt/InfoPrompt/InfoPrompt.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
@@ -89,4 +90,4 @@
 @import "./prompt/ActionPrompt/ActionPrompt.less";
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
-// Make sure you are not referencing main.less itself in this file!
+// Make sure you are not referencing main.less itself in this file!

package/src/moneyInput/MoneyInput.test.story.tsx ADDED Viewed

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { within, fireEvent } from 'storybook/test';
+import { allModes } from '../../.storybook/modes';
+import { lorem500 } from '../test-utils';
+import { Field } from '../field/Field';
+import Body from '../body';
+import MoneyInput from './MoneyInput';
+const meta = {
+  title: 'Forms/MoneyInput/tests',
+  component: MoneyInput,
+  args: {
+    amount: 1000,
+    id: 'moneyInput',
+    currencies: [
+      {
+        value: 'EUR',
+        label: 'EUR',
+        note: 'Euro',
+        currency: 'eur',
+        searchable: 'Spain, Germany, France, Austria',
+      },
+      {
+        value: 'GBP',
+        label: 'GBP',
+        note: 'British pound',
+        currency: 'gbp',
+        searchable: 'England, Scotland, Wales',
+      },
+    ],
+    selectedCurrency: {
+      value: 'EUR',
+      label: 'EUR',
+      note: 'Euro',
+      currency: 'eur',
+      searchable: 'Spain, Germany, France, Austria',
+    },
+    searchPlaceholder: '',
+    onAmountChange: () => {},
+    onCurrencyChange: () => {},
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof MoneyInput>;
+export default meta;
+type Story = StoryObj<typeof MoneyInput>;
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+/**
+ * This test ensures that when the SelectInput is used within a scrollable page,
+ * opening the dropdown does not cause any unwanted scrolling or layout shifts.
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport. The issue is particularly prominent on iOS Safari.
+ *
+ * NB: This test is disabled in Chromatic as there's no obvious way to control
+ * <html/> element of a snapshot. It's to be primarily used in manual testing
+ * on an actual device or a simulator as it cannot be reproduced with mobile
+ * emulation modes on desktop browsers.
+ */
+export const SmoothScrollReset: Story = {
+  decorators: [
+    (Story) => (
+      <>
+        <style>{`html { scroll-behavior: smooth; }`}</style>
+        <div>
+          <div
+            className="d-flex align-items-center justify-content-center"
+            style={{
+              backgroundColor: 'var(--color-bright-yellow)',
+              height: 400,
+            }}
+          >
+            This block should not be in the viewport.
+          </div>
+          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
+          <Field id="el1" label="Select currency">
+            <Story />
+          </Field>
+          <Body as="p">{lorem500}</Body>
+        </div>
+      </>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    await wait();
+    document.documentElement.scrollTop = 400;
+    await wait();
+    const canvas = within(canvasElement);
+    // cannot use userEvent.click as it crashes on iOS Safari in the simulator
+    await fireEvent.click(canvas.getByRole('combobox'));
+  },
+  globals: {
+    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

package/src/moneyInput/MoneyInput.tsx CHANGED Viewed

@@ -4,7 +4,14 @@ import { clsx } from 'clsx';
 import { Component } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
-import { Typography, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import {
+  Typography,
+  Size,
+  SizeLarge,
+  SizeMedium,
+  SizeSmall,
+  getLocaleCurrencyName,
+} from '../common';
 import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 import { Input } from '../inputs/Input';
 import {
@@ -372,6 +379,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
               as="span"
               type={Typography.TITLE_SUBSECTION}
               className={size === 'lg' ? this.style('m-r-1') : ''}
+              aria-label={getLocaleCurrencyName(this.props.intl, selectedCurrency.currency)}
             >
               {selectedCurrency.currency.toUpperCase()}
             </Title>
@@ -399,7 +407,17 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
               renderValue={(currency, withinTrigger) => {
                 return (
                   <SelectInputOptionContent
-                    title={withinTrigger ? currency.currency.toUpperCase() : currency.label}
+                    title={
+                      withinTrigger ? (
+                        <span
+                          aria-label={getLocaleCurrencyName(this.props.intl, currency.currency)}
+                        >
+                          {currency.currency.toUpperCase()}
+                        </span>
+                      ) : (
+                        currency.label
+                      )
+                    }
                     note={withinTrigger ? undefined : currency.note}
                     icon={<Flag code={currency.currency} intrinsicSize={24} />}
                   />