@transferwise/components 46.9.0 → 46.10.1

package/src/inputs/SelectInput.story.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, type Mock, screen, userEvent, within } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import classNames from 'classnames';
@@ -7,186 +8,85 @@ import { useState } from 'react';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import Modal from '../modal';
-import { within, userEvent } from '../test-utils';
 
 import {
   SelectInput,
   type SelectInputItem,
   SelectInputOptionContent,
+  type SelectInputProps,
   SelectInputTriggerButton,
 } from './SelectInput';
 
-export default {
+const meta = {
+  title: 'components/SelectInput',
   component: SelectInput,
+  tags: ['autodocs'],
+  parameters: { actions: { argTypesRegex: '' } },
 } satisfies Meta<typeof SelectInput>;
+export default meta;
 
-interface TestMonth {
+type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
+
+interface Month {
   id: number;
   name: string;
-  unavailable: boolean;
 }
 
-const testMonths: TestMonth[] = getMonthNames('en-US').map((name, index) => ({
+const months: Month[] = getMonthNames('en-US').map((name, index) => ({
   id: index + 1,
   name,
-  unavailable: index % 6 === 2,
 }));
 
-const testQuarters = [
-  testMonths.slice(0, 3),
-  testMonths.slice(3, 6),
-  testMonths.slice(6, 9),
-  testMonths.slice(9, 12),
-] as const;
-
-export const Basic: StoryObj<{
-  filterable: boolean;
-  filterPlaceholder: string;
-  clearable: boolean;
-  invalid: boolean;
-  disabled: boolean;
-  size: 'md' | 'lg';
-  onChange: (value: TestMonth | null) => void;
-  onClear: () => void;
-}> = {
-  render: function Story({
-    filterable,
-    filterPlaceholder,
-    clearable,
-    disabled,
-    size,
-    onChange,
-    onClear,
-  }) {
-    const [selectedMonth, setSelectedMonth] = useState<TestMonth | null>(null);
+export const Months: Story<Month | null> = {
+  args: {
+    placeholder: 'Month',
+    items: months.map((month) => ({
+      type: 'option',
+      value: month,
+    })),
+    renderValue: (month) => <SelectInputOptionContent title={month.name} />,
+    onChange: fn() satisfies Mock,
+    onClear: fn() satisfies Mock,
+  },
+  render: function Render({ onChange, onClear, ...args }) {
+    const [selectedMonth, setSelectedMonth] = useState<Month | null>(null);
 
     return (
-      <div className="d-flex flex-column">
-        {/* TODO:
-        <Field
-          label="Label"
-          hint="Information message."
-          error={invalid ? "Error message." : undefined}
-        >
-        */}
-        <SelectInput
-          placeholder="Month"
-          items={testQuarters
-            .flatMap<SelectInputItem<TestMonth>>((quarterMonths, index) => [
-              {
-                type: 'group',
-                label: `Quarter #${index + 1}`,
-                options: quarterMonths.map((month) => ({
-                  type: 'option',
-                  value: month,
-                  filterMatchers: [month.name],
-                  disabled: month.unavailable,
-                })),
-              },
-              { type: 'separator' },
-            ])
-            .slice(0, -1)}
-          value={selectedMonth}
-          renderValue={(month, withinTrigger) => (
-            <SelectInputOptionContent
-              title={month.name}
-              note="Note"
-              description={withinTrigger ? undefined : `Month #${month.id}`}
-              icon={<Calendar size={24} />}
-            />
-          )}
-          filterable={filterable}
-          filterPlaceholder={filterPlaceholder}
-          size={size}
-          disabled={disabled}
-          onChange={(month) => {
-            setSelectedMonth(month);
-            onChange(month);
-          }}
-          onClear={
-            clearable
-              ? () => {
-                  setSelectedMonth(null);
-                  onClear();
-                }
-              : undefined
-          }
-        />
-      </div>
+      <SelectInput
+        {...args}
+        value={selectedMonth}
+        onChange={(month) => {
+          setSelectedMonth(month);
+          onChange?.(month);
+        }}
+        onClear={() => {
+          setSelectedMonth(null);
+          onClear?.();
+        }}
+      />
     );
   },
-  args: {
-    filterable: true,
-    filterPlaceholder: 'Type a month’s name',
-    clearable: true,
-    invalid: false,
-    disabled: false,
-    size: 'md',
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-    onClear: {
-      action: 'cleared',
-    },
-  },
-  play: ({ canvasElement }) => {
-    const triggerButton = within(canvasElement).getByRole('button');
-    userEvent.click(triggerButton);
-  },
-};
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
 
-interface Month {
-  id: number;
-  name: string;
-}
+    await step('renders placeholder', async () => {
+      const triggerButton = canvas.getByRole('button');
+      await expect(triggerButton).toHaveTextContent('Month');
+    });
 
-const months: Month[] = getMonthNames('en-US').map((name, index) => ({
-  id: index + 1,
-  name,
-}));
+    await step('selects option via mouse', async () => {
+      const triggerButton = canvas.getByRole('button');
 
-export const Months: StoryObj<{
-  onChange: (value: Month | null) => void;
-  onClear: () => void;
-}> = {
-  render: function Story({ onChange, onClear }) {
-    const [selectedMonth, setSelectedMonth] = useState<Month | null>(months[0]);
+      await userEvent.click(triggerButton);
+      await userEvent.unhover(triggerButton);
 
-    return (
-      <div className="d-flex flex-column">
-        <SelectInput
-          placeholder="Month"
-          items={months.map((month) => ({
-            type: 'option',
-            value: month,
-          }))}
-          value={selectedMonth}
-          renderValue={(month) => <SelectInputOptionContent title={month.name} />}
-          onChange={(month) => {
-            setSelectedMonth(month);
-            onChange(month);
-          }}
-          onClear={() => {
-            setSelectedMonth(null);
-            onClear();
-          }}
-        />
-      </div>
-    );
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-    onClear: {
-      action: 'cleared',
-    },
-  },
-  play: ({ canvasElement }) => {
-    const triggerButton = within(canvasElement).getByText('January');
-    userEvent.click(triggerButton);
+      const option = within(screen.getByRole('listbox')).getByRole('option', {
+        name: 'May',
+      });
+      await userEvent.click(option);
+
+      await expect(triggerButton).toHaveTextContent('May');
+    });
   },
 };
 
@@ -238,180 +138,188 @@ function currencyOption(currency: Currency) {
   } satisfies SelectInputItem<Currency>;
 }
 
-export const Currencies: StoryObj<{
-  onChange: (value: Currency) => void;
-}> = {
-  render: function Story({ onChange }) {
-    const [selectedCurrency, setSelectedCurrency] = useState(popularCurrencies[0]);
-
-    return (
-      <SelectInput
-        items={[
-          {
-            type: 'group',
-            label: 'Popular currencies',
-            options: popularCurrencies.map((currency) => currencyOption(currency)),
-          },
-          {
-            type: 'group',
-            label: 'All currencies',
-            options: allCurrencies.map((currency) => currencyOption(currency)),
-          },
-        ]}
-        value={selectedCurrency}
-        renderValue={(currency, withinTrigger) => (
-          <SelectInputOptionContent
-            title={currency.code}
-            note={withinTrigger ? undefined : currency.name}
-            icon={<Flag code={currency.code} intrinsicSize={24} />}
-          />
-        )}
-        renderFooter={({ resultsEmpty, queryNormalized: normalizedQuery }) =>
-          resultsEmpty && normalizedQuery != null && /^[a-z]{3}$/u.test(normalizedQuery) ? (
-            <>
-              It’s not possible use {normalizedQuery.toUpperCase()} yet.{' '}
-              <a href="#_" className="np-text-link-default">
-                Email me when it’s available.
-              </a>
-            </>
-          ) : (
-            <>
-              Can’t find it?{' '}
-              <a href="#_" className="np-text-link-default">
-                Request the currency you need,
-              </a>{' '}
-              and we’ll notify you once it’s available.
-            </>
-          )
-        }
-        filterable
-        filterPlaceholder="Type a currency / country"
-        size="lg"
-        onChange={(currency) => {
-          setSelectedCurrency(currency);
-          onChange(currency);
-        }}
-      />
-    );
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
+const CurrenciesArgs = {
+  items: [
+    {
+      type: 'group',
+      label: 'Popular currencies',
+      options: popularCurrencies.map((currency) => currencyOption(currency)),
+    },
+    {
+      type: 'group',
+      label: 'All currencies',
+      options: allCurrencies.map((currency) => currencyOption(currency)),
     },
+  ],
+  defaultValue: popularCurrencies[0],
+  renderValue: (currency, withinTrigger) => (
+    <SelectInputOptionContent
+      title={currency.code}
+      note={withinTrigger ? undefined : currency.name}
+      icon={<Flag code={currency.code} intrinsicSize={24} />}
+    />
+  ),
+  renderFooter: ({ resultsEmpty, queryNormalized }) =>
+    resultsEmpty && queryNormalized != null && /^[a-z]{3}$/u.test(queryNormalized) ? (
+      <>
+        It’s not possible use {queryNormalized.toUpperCase()} yet.{' '}
+        <a href="#_" className="np-text-link-default" onClick={(event) => event.preventDefault()}>
+          Email me when it’s available.
+        </a>
+      </>
+    ) : (
+      <>
+        Can’t find it?{' '}
+        <a href="#_" className="np-text-link-default" onClick={(event) => event.preventDefault()}>
+          Request the currency you need,
+        </a>{' '}
+        and we’ll notify you once it’s available.
+      </>
+    ),
+  filterable: true,
+  filterPlaceholder: 'Type a currency / country',
+  size: 'lg',
+  onChange: fn() satisfies Mock,
+} satisfies Story<Currency>['args'];
+
+export const Currencies: Story<Currency> = {
+  args: CurrenciesArgs,
+  play: async ({ step }) => {
+    await step('filters options via keyboard', async () => {
+      await userEvent.tab();
+      await userEvent.keyboard(' ');
+
+      await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(8);
+      await expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument();
+
+      const input = screen.getByRole('searchbox');
+
+      await userEvent.type(input, 'huf');
+      await expect(
+        within(screen.getByRole('listbox')).queryByRole('option'),
+      ).not.toBeInTheDocument();
+      await expect(screen.getByText(/^It’s not possible use HUF yet./u)).toBeInTheDocument();
+
+      await userEvent.type(input, '{Backspace}{Backspace}');
+      await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(2);
+
+      await userEvent.type(input, '{Backspace}eu');
+      await expect(input).toHaveAttribute('aria-activedescendant');
+    });
   },
 };
 
-export const MultipleCurrencies: StoryObj<{
-  onChange: (value: Currency[]) => void;
-}> = {
-  render: function Story({ onChange }) {
-    const [selectedCurrencies, setSelectedCurrencies] = useState<readonly Currency[]>([
-      popularCurrencies[0],
-    ]);
+export const MultipleCurrencies: Story<Currency, true> = {
+  args: {
+    ...CurrenciesArgs,
+    multiple: true,
+    placeholder: 'Choose currencies…',
+    defaultValue: [popularCurrencies[0]],
+    renderValue: (currency, withinTrigger) =>
+      withinTrigger ? (
+        currency.code
+      ) : (
+        <SelectInputOptionContent
+          title={currency.code}
+          note={currency.name}
+          icon={<Flag code={currency.code} intrinsicSize={24} />}
+        />
+      ),
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
 
-    return (
-      <SelectInput
-        multiple
-        placeholder="Choose currencies…"
-        items={[
-          {
-            type: 'group',
-            label: 'Popular currencies',
-            options: popularCurrencies.map((currency) => currencyOption(currency)),
-          },
-          {
-            type: 'group',
-            label: 'All currencies',
-            options: allCurrencies.map((currency) => currencyOption(currency)),
-          },
-        ]}
-        value={selectedCurrencies}
-        renderValue={(currency, withinTrigger) =>
-          withinTrigger ? (
-            currency.code
-          ) : (
-            <SelectInputOptionContent
-              title={currency.code}
-              note={currency.name}
-              icon={<Flag code={currency.code} intrinsicSize={24} />}
-            />
-          )
-        }
-        // eslint-disable-next-line sonarjs/no-identical-functions
-        renderFooter={({ resultsEmpty, queryNormalized: normalizedQuery }) =>
-          resultsEmpty && normalizedQuery != null && /^[a-z]{3}$/u.test(normalizedQuery) ? (
-            <>
-              It’s not possible use {normalizedQuery.toUpperCase()} yet.{' '}
-              <a href="#_" className="np-text-link-default">
-                Email me when it’s available.
-              </a>
-            </>
-          ) : (
-            <>
-              Can’t find it?{' '}
-              <a href="#_" className="np-text-link-default">
-                Request the currency you need,
-              </a>{' '}
-              and we’ll notify you once it’s available.
-            </>
-          )
-        }
-        filterable
-        filterPlaceholder="Type a currency / country"
-        size="lg"
-        onChange={(currency) => {
-          setSelectedCurrencies(currency);
-          onChange(currency);
-        }}
-      />
-    );
+    await step('selects multiple options via mouse', async () => {
+      const triggerButton = canvas.getByRole('button');
+
+      await userEvent.click(triggerButton);
+      await userEvent.unhover(triggerButton);
+
+      const option = within(screen.getByRole('listbox')).getAllByRole('option', {
+        name: /^EUR/u,
+      })[0];
+      await userEvent.click(option);
+
+      await expect(triggerButton).toHaveTextContent('USD, EUR');
+    });
   },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
+};
+
+export const CustomTrigger: Story<Month> = {
+  args: {
+    placeholder: 'Month',
+    items: months.map((month) => ({
+      type: 'option',
+      value: month,
+    })),
+    renderValue: (month, withinTrigger) =>
+      withinTrigger ? month.name : <SelectInputOptionContent title={month.name} />,
+    renderTrigger: ({ content, className }) => (
+      <SelectInputTriggerButton
+        className={classNames(className, 'btn-unstyled np-text-link-large align-items-center')}
+        style={{ display: 'inline-flex', columnGap: '0.25rem' }}
+      >
+        {content}
+        <ChevronDown size={16} />
+      </SelectInputTriggerButton>
+    ),
+    onChange: fn() satisfies Mock,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const triggerButton = canvas.getByRole('button');
+    await userEvent.click(triggerButton);
   },
 };
 
-export const CustomTrigger: StoryObj = {
-  render: function Story() {
-    return (
-      <div>
-        <SelectInput
-          placeholder="Month"
-          items={months.map((month) => ({
+const quarters = [
+  months.slice(0, 3),
+  months.slice(3, 6),
+  months.slice(6, 9),
+  months.slice(9, 12),
+] as const;
+
+export const Advanced: Story<Month> = {
+  args: {
+    placeholder: 'Month',
+    items: quarters
+      .flatMap<SelectInputItem<Month>>((quarterMonths, quarterIndex) => [
+        {
+          type: 'group',
+          label: `Quarter #${quarterIndex + 1}`,
+          options: quarterMonths.map((month, monthIndex) => ({
             type: 'option',
             value: month,
-          }))}
-          renderValue={(month, withinTrigger) =>
-            withinTrigger ? month.name : <SelectInputOptionContent title={month.name} />
-          }
-          renderTrigger={({ content, className }) => (
-            <SelectInputTriggerButton
-              className={classNames(
-                className,
-                'btn-unstyled np-text-link-large align-items-center',
-              )}
-              style={{ display: 'inline-flex', columnGap: '0.25rem' }}
-            >
-              {content}
-              <ChevronDown size={16} />
-            </SelectInputTriggerButton>
-          )}
-        />
-      </div>
-    );
+            filterMatchers: [month.name],
+            disabled: monthIndex % 6 === 2,
+          })),
+        },
+        { type: 'separator' },
+      ])
+      .slice(0, -1),
+    renderValue: (month, withinTrigger) => (
+      <SelectInputOptionContent
+        title={month.name}
+        note="Note"
+        description={withinTrigger ? undefined : `Month #${month.id}`}
+        icon={<Calendar size={24} />}
+      />
+    ),
+    filterable: true,
+    filterPlaceholder: 'Type a month’s name',
+    onChange: fn() satisfies Mock,
   },
-  play: ({ canvasElement }) => {
-    const triggerButton = within(canvasElement).getByRole('button');
-    userEvent.click(triggerButton);
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const triggerButton = canvas.getByRole('button');
+    await userEvent.click(triggerButton);
   },
 };
 
-export const WithinDrawer: StoryObj<{
-  onChange: (value: Currency) => void;
-}> = {
-  ...Currencies,
+export const WithinDrawer: Story<Currency> = {
+  args: CurrenciesArgs,
   decorators: [
     (Story) => (
       <Drawer open headerTitle="This is the title of the drawer">
@@ -421,9 +329,7 @@ export const WithinDrawer: StoryObj<{
   ],
 };
 
-export const WithinModal: StoryObj<{
-  onChange: (value: Currency) => void;
-}> = {
-  ...Currencies,
+export const WithinModal: Story<Currency> = {
+  args: CurrenciesArgs,
   decorators: [(Story) => <Modal open body={<Story />} onClose={() => {}} />],
 };

package/src/inputs/SelectInput.tsx

@@ -41,6 +41,7 @@ function inferSearchableStrings(value: unknown) {
 
 const SelectInputTriggerButtonPropsContext = createContext<{
   ref?: React.ForwardedRef<HTMLButtonElement>;
+  id?: string;
   onClick?: (event: React.MouseEvent) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   [key: string]: unknown;
@@ -125,6 +126,7 @@ function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle:
 }
 
 export interface SelectInputProps<T = string, M extends boolean = false> {
+  id?: string;
   name?: string;
   multiple?: M;
   placeholder?: string;
@@ -218,6 +220,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
 const noop = () => {};
 
 export function SelectInput<T = string, M extends boolean = false>({
+  id,
   name,
   multiple,
   placeholder,
@@ -288,6 +291,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                 // eslint-disable-next-line react/jsx-no-constructed-context-values
                 value={{
                   ref: mergeRefs([ref, triggerRef]),
+                  id,
                   ...mergeProps(
                     {
                       onClick: () => {

package/src/logo/Logo.js

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 import { LogoType } from './logoTypes';
-import { LogoFlagInverse } from './svg/flag-inverse.svg';
-import { LogoFlag } from './svg/flag.svg';
-import { LogoWiseInverse } from './svg/logo-inverse.svg';
-import { LogoWise } from './svg/logo.svg';
+import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
+import { ReactComponent as LogoFlag } from './svg/flag.svg';
+import { ReactComponent as LogoWiseInverse } from './svg/logo-inverse.svg';
+import { ReactComponent as LogoWise } from './svg/logo.svg';
 
 const svgPaths = {
   WISE: LogoWise,

package/src/main.css

@@ -1884,6 +1884,9 @@ button.np-option {
   overflow-y: auto;
   flex: 1;
 }
+.np-drawer .np-drawer-content .np-theme-personal {
+  background-color: transparent;
+}
 .np-drawer .np-drawer-footer,
 .np-drawer .np-drawer-content {
   padding: 16px;
@@ -3197,6 +3200,9 @@ a {
   min-height: var(--size-32);
   padding-bottom: 4px !important;
 }
+.tw-modal .tw-modal-content .np-theme-personal {
+  background-color: transparent;
+}
 .tw-modal table,
 .tw-modal .table {
   background-color: transparent;

package/src/modal/Modal.css

@@ -82,6 +82,9 @@
   min-height: var(--size-32);
   padding-bottom: 4px !important;
 }
+.tw-modal .tw-modal-content .np-theme-personal {
+  background-color: transparent;
+}
 .tw-modal table,
 .tw-modal .table {
   background-color: transparent;