@transferwise/components 46.124.0 → 46.125.0

package/src/inputs/SelectInput.tsx

@@ -1,4 +1,9 @@
-import { Listbox as ListboxBase } from '@headlessui/react';
+import {
+  Listbox as ListboxBase,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/react';
 import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import mergeProps from 'merge-props';
@@ -427,8 +432,8 @@ export function SelectInput<T = string, M extends boolean = false>({
     <ListboxBase
       name={name}
       multiple={multiple}
-      defaultValue={defaultValue}
-      value={controlledValue}
+      defaultValue={defaultValue as M extends true ? T[] : T}
+      value={controlledValue as M extends true ? T[] : T}
       by={compareValues}
       disabled={disabled}
       onChange={
@@ -576,7 +581,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
   );
 
   return (
-    <ListboxBase.Button
+    <ListboxButton
       ref={ref}
       as={PolymorphicWithOverrides}
       role="combobox"
@@ -617,8 +622,13 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
           return;
         }
 
-        // Prevent absorbing actions early
-        if (event.key === 'Escape' || event.key === 'Tab') {
+        // Required to make ListBox focusable
+        if (event.key === 'Tab') {
+          return;
+        }
+
+        // Prevent absorbing Escape early
+        if (event.key === 'Escape') {
           onKeyDown?.({
             ...event,
             preventDefault: () => {},
@@ -817,7 +827,8 @@ function SelectInputOptions<T = string>({
   };
 
   return (
-    <ListboxBase.Options
+    <ListboxOptions
+      modal
       as={SelectInputOptionsContainer}
       static
       className="np-select-input-options-container"
@@ -974,7 +985,7 @@ function SelectInputOptions<T = string>({
           </footer>
         ) : null}
       </section>
-    </ListboxBase.Options>
+    </ListboxOptions>
   );
 }
 
@@ -1083,7 +1094,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
   const itemsCount = useContext(SelectInputItemsCountContext);
   const itemPosition = useContext(SelectInputItemPositionContext);
   return (
-    <ListboxBase.Option
+    <ListboxOption
       as="div"
       value={value}
       aria-setsize={itemsCount}
@@ -1109,7 +1120,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
           />
         </>
       )}
-    </ListboxBase.Option>
+    </ListboxOption>
   );
 }
 

package/src/inputs/_BottomSheet.tsx

@@ -6,7 +6,7 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react';
-import { Transition } from '@headlessui/react';
+import { Transition, TransitionChild } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
@@ -73,6 +73,7 @@ export function BottomSheet({
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
           <Transition
+            as="div"
             show={open}
             className="np-bottom-sheet-v2-container"
             beforeEnter={() => {
@@ -80,7 +81,8 @@ export function BottomSheet({
             }}
             afterLeave={onCloseEnd}
           >
-            <Transition.Child
+            <TransitionChild
+              as="div"
               className="np-bottom-sheet-v2-backdrop"
               enterFrom="np-bottom-sheet-v2-backdrop--closed"
               leaveTo="np-bottom-sheet-v2-backdrop--closed"
@@ -92,8 +94,9 @@ export function BottomSheet({
                   <Fragment
                     key={floatingKey} // Force inner state invalidation on open
                   >
-                    <Transition.Child
+                    <TransitionChild
                       ref={refs.setFloating}
+                      as="div"
                       className="np-bottom-sheet-v2-content"
                       enterFrom="np-bottom-sheet-v2-content--closed"
                       leaveTo="np-bottom-sheet-v2-content--closed"
@@ -121,7 +124,7 @@ export function BottomSheet({
                           {children}
                         </div>
                       </div>
-                    </Transition.Child>
+                    </TransitionChild>
                   </Fragment>
                 </FloatingFocusManager>
               </FocusScope>

package/src/inputs/_Popover.tsx

@@ -51,6 +51,7 @@ export function Popover({
   onCloseEnd,
 }: PopoverProps) {
   const { refs, floatingStyles, context } = useFloating<Element>({
+    strategy: 'fixed',
     placement,
     middleware: [
       offset(8),
@@ -92,6 +93,7 @@ export function Popover({
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
           <Transition
+            as="div"
             show={open}
             leave="transition-opacity"
             leaveTo="opacity-0"

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);
@@ -7423,3 +7432,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

@@ -86,6 +86,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!

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.spec.tsx → MoneyInput.test.tsx}

@@ -1,20 +1,21 @@
+import { mockAnimationsApi } from 'jsdom-testing-mocks';
 import {
   mockMatchMedia,
-  mockRequestAnimationFrame,
   mockResizeObserver,
   render,
   screen,
   userEvent,
+  waitFor,
+  within,
 } from '../test-utils';
 
 import { MoneyInput, CurrencyItem, CurrencyOptionItem, Field } from '..';
 import { MoneyInputPropsWithInputAttributes } from './MoneyInput';
-import { within } from '@testing-library/react';
 import messages from './MoneyInput.messages';
 
 mockMatchMedia();
 mockResizeObserver();
-mockRequestAnimationFrame();
+mockAnimationsApi();
 
 describe('Money Input', () => {
   const popularCurrencies: CurrencyOptionItem[] = [
@@ -114,12 +115,30 @@ describe('Money Input', () => {
   it('calls onCurrencyChange when the user selects a different currency', async () => {
     customRender();
     await openDropdown();
-    await userEvent.keyboard('eur{Enter}');
-    expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(1);
+    await userEvent.keyboard('eur');
+    await waitFor(() => {
+      expect(screen.getAllByRole('option')).toHaveLength(1);
+    });
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(() => {
+      expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(1);
+    });
     expect(initialProps.onCurrencyChange).toHaveBeenCalledWith(popularCurrencies[0]);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    });
     await openDropdown();
-    await userEvent.keyboard('gbp{Enter}');
-    expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(2);
+    await userEvent.keyboard('gbp');
+    await waitFor(() => {
+      expect(screen.getAllByRole('option')).toHaveLength(1);
+    });
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(() => {
+      expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(2);
+    });
     expect(initialProps.onCurrencyChange).toHaveBeenCalledWith(popularCurrencies[2]);
   });
 

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -0,0 +1,21 @@
+.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/prompt/ActionPrompt/ActionPrompt.less

@@ -0,0 +1,23 @@
+.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);
+
+  &--media-image {
+    width: var(--size-48);
+    height: var(--size-48);
+    object-fit: contain;
+  }
+
+  &--with-two-actions {
+    @media (--screen-sm-max) {
+      .wds-prompt__actions-wrapper {
+        .wds-Button {
+          flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+          min-width: fit-content;
+        }
+      }
+    }
+  }
+}

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -0,0 +1,184 @@
+import { ReactElement, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { Bank } from '@transferwise/icons';
+import { ActionPrompt } from './ActionPrompt';
+import { lorem10 } from '../../test-utils';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+const meta: Meta<typeof ActionPrompt> = {
+  title: 'Prompts/ActionPrompt',
+  component: ActionPrompt,
+  tags: ['new'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionPrompt>;
+
+const withComponentGrid =
+  ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
+  (Story: () => ReactElement) => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        gap,
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+export const AllSentiments: Story = {
+  render: () => {
+    return (
+      <>
+        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
+          (sentiment) => (
+            <ActionPrompt
+              key={sentiment}
+              sentiment={sentiment}
+              title="Title"
+              description={lorem10}
+              action={{ label: 'Primary', onClick: fn() }}
+              actionSecondary={{ label: 'Secondary', onClick: fn() }}
+              className="m-b-2"
+              onDismiss={fn()}
+            />
+          ),
+        )}
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const Mobile: Story = {
+  ...AllSentiments,
+  ...withVariantConfig(['mobile'], AllSentiments),
+};
+
+export const PrimaryActionOnly: Story = {
+  args: {
+    sentiment: 'proposition',
+    title: 'Payment successful',
+    description: 'Your money is on its way',
+    action: { label: 'View details', onClick: fn() },
+    onDismiss: fn(),
+  },
+};
+
+export const WithoutDescription: Story = {
+  render: () => {
+    return (
+      <>
+        <ActionPrompt
+          sentiment="warning"
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+          actionSecondary={{ label: 'Log out', onClick: fn() }}
+          onDismiss={fn()}
+        />
+        <ActionPrompt
+          sentiment="success"
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+        />
+        <ActionPrompt
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+        />
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const Media: Story = {
+  render: () => {
+    return (
+      <>
+        <ActionPrompt
+          sentiment="neutral"
+          title="Custom image"
+          description={lorem10}
+          media={{ imgSrc: '../../wise-card.svg' }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="neutral"
+          title="Profile Image"
+          description={lorem10}
+          media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="proposition"
+          title="Business Profile"
+          description={lorem10}
+          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="negative"
+          title="Personal Profile"
+          description={lorem10}
+          media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="warning"
+          title="Custom Icon"
+          description={lorem10}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="success"
+          title="Initials"
+          description={lorem10}
+          media={{ avatar: { profileName: 'John Doe' } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+          actionSecondary={{ label: 'Maybe later', onClick: fn() }}
+        />
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const OnDismiss: Story = {
+  render: () => {
+    const [showNeutralPrompt, setShowNeutralPrompt] = useState(true);
+    const [showSuccessPrompt, setShowSuccessPrompt] = useState(true);
+
+    return (
+      <>
+        {showNeutralPrompt && (
+          <ActionPrompt
+            sentiment="proposition"
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            className="m-b-2"
+            onDismiss={() => setShowNeutralPrompt(false)}
+          />
+        )}
+        {showSuccessPrompt && (
+          <ActionPrompt
+            sentiment="success"
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            onDismiss={() => setShowSuccessPrompt(false)}
+          />
+        )}
+      </>
+    );
+  },
+};