@transferwise/components 46.124.1 → 46.126.0

package/src/info/Info.story.tsx

@@ -4,7 +4,7 @@ import { userEvent, within } from 'storybook/test';
 import { lorem10 } from '../test-utils';
 
 import Info, { InfoPresentation } from '.';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta = {
   component: Info,
@@ -27,13 +27,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const OpenedPopover = {
@@ -50,12 +44,7 @@ export const OpenedPopover = {
 
 export const OpenedPopoverMobile: Story = {
   ...OpenedPopover,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], OpenedPopover),
 };
 
 export const OpenedModal = {
@@ -67,10 +56,5 @@ export const OpenedModal = {
 
 export const OpenedModalMobile: Story = {
   ...OpenedModal,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], OpenedModal),
 };

package/src/inputs/Input.tsx

@@ -7,15 +7,14 @@ import { inputClassNameBase } from './_common';
 import { useInputAttributes } from './contexts';
 import { useInputPaddings } from './InputGroup';
 
-export interface InputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface InputProps extends Merge<
+  React.ComponentPropsWithRef<'input'>,
+  {
+    size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
+    shape?: 'rectangle' | 'pill';
+    'aria-invalid'?: boolean;
+  }
+> {}
 
 export const Input = forwardRef(function Input(
   { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,

package/src/inputs/SearchInput.tsx

@@ -7,15 +7,14 @@ import { Merge } from '../utils';
 import { Input } from './Input';
 import { InputGroup } from './InputGroup';
 
-export interface SearchInputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: Size.SMALL | Size.MEDIUM;
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface SearchInputProps extends Merge<
+  React.ComponentPropsWithRef<'input'>,
+  {
+    size?: Size.SMALL | Size.MEDIUM;
+    shape?: 'rectangle' | 'pill';
+    'aria-invalid'?: boolean;
+  }
+> {}
 
 export const SearchInput = forwardRef(function SearchInput(
   { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,

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

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

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

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

@@ -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/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['bright-green'],
-    chromatic: {
-      'bright-green': allModes.brightGreen,
-    },
-  },
+  ...withVariantConfig(['bright-green'], VariantStory),
   args: { variant: 'bright-green' },
 };
 

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], VariantStory),
   args: { variant: 'dark' },
 };
 

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['forest-green'],
-    chromatic: {
-      forestGreen: allModes.forestGreen,
-    },
-  },
+  ...withVariantConfig(['forest-green'], VariantStory),
   args: { variant: 'forest-green' },
 };
 

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['rtl'],
-    chromatic: {
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['rtl'], VariantStory),
   args: { variant: 'rtl' },
 };
 

package/src/main.css

@@ -5337,8 +5337,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .wds-prompt {
   border-radius: 10px;
-  border-radius: var(--radius-small);
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
   padding: 8px;
   padding: var(--Prompt-padding, var(--padding-x-small));
@@ -5354,6 +5356,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   grid-template-columns: auto 1fr;
   width: 100%;
 }
+.wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto 1fr auto;
+}
 .wds-prompt__media-wrapper {
   align-self: flex-start;
   padding-top: calc(4px - 1px);
@@ -5369,12 +5374,16 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
+  grid-column-end: 3;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
   }
+  .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
 }
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
@@ -5432,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;
 }
@@ -7423,3 +7463,24 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/src/main.less

@@ -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";
@@ -86,6 +87,7 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
+@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/modal/Modal.story.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { Button, Modal, ModalProps } from '..';
 import { CommonProps, Scroll } from '../common';
 import { lorem10, lorem100, lorem1000 } from '../test-utils';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Modal,
@@ -78,12 +78,7 @@ export const Basic: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const ContentScroll: Story = {
@@ -97,12 +92,7 @@ export const ContentScroll: Story = {
 
 export const ContentScrollMobile: Story = {
   ...ContentScroll,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], ContentScroll),
 };
 
 export const ViewportScroll: Story = {
@@ -116,12 +106,7 @@ export const ViewportScroll: Story = {
 
 export const ViewportScrollMobile: Story = {
   ...ViewportScroll,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], ViewportScroll),
 };
 
 export const WithoutTitle: Story = {
@@ -134,12 +119,7 @@ export const WithoutTitle: Story = {
 
 export const WithoutTitleMobile: Story = {
   ...WithoutTitle,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithoutTitle),
 };
 
 export const WithThemeProviderInContent: Story = {
@@ -161,10 +141,5 @@ export const WithThemeProviderInContent: Story = {
 
 export const WithThemeProviderInContentMobile: Story = {
   ...WithThemeProviderInContent,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithThemeProviderInContent),
 };

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

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

@@ -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} />}
                   />

package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts

@@ -11,9 +11,7 @@ export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
  * Properties for the anchor component.
  */
 export interface PrimitiveAnchorProps
-  extends BasePrimitiveProps,
-    StyleProp,
-    Omit<PrimitiveAnchorAttributes, 'role' | 'type'> {
+  extends BasePrimitiveProps, StyleProp, Omit<PrimitiveAnchorAttributes, 'role' | 'type'> {
   /** Content of the anchor */
   children?: ReactNode;