@transferwise/components 45.17.1 → 45.18.0

package/src/inputs/SelectInput.tsx

@@ -2,12 +2,14 @@ import { Listbox as ListboxBase } from '@headlessui/react';
 import { useId } from '@radix-ui/react-id';
 import { Check, ChevronDown, Cross } from '@transferwise/icons';
 import classNames from 'classnames';
-import { createContext, useState, useRef, forwardRef, useEffect, useMemo, useContext } from 'react';
+import mergeProps from 'merge-props';
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import mergeRefs from 'react-merge-refs';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
+import { PolymorphicWithOverrides } from '../common/polymorphicWithOverrides/PolymorphicWithOverrides';
 import { Breakpoint } from '../common/propsValues/breakpoint';
 import messages from '../dateLookup/dateTrigger/DateTrigger.messages';
 import { wrapInFragment } from '../utilities/wrapInFragment';
@@ -15,7 +17,7 @@ import { wrapInFragment } from '../utilities/wrapInFragment';
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import { BottomSheet } from './_BottomSheet';
-import { ButtonInput, type ButtonInputProps } from './_ButtonInput';
+import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
 
 function searchableString(value: string) {
@@ -37,23 +39,27 @@ function inferSearchableStrings(value: unknown) {
 }
 
 const SelectInputHasValueContext = createContext(false);
-
-const SelectInputOptionContentCompactContext = createContext(false);
-
-interface SelectInputOptionItem<T = string> {
+const SelectInputTriggerButtonPropsContext = createContext<{
+  ref?: React.ForwardedRef<HTMLButtonElement>;
+  onClick?: () => void;
+  [key: string]: unknown;
+}>({});
+const SelectInputOptionContentWithinTriggerContext = createContext(false);
+
+export interface SelectInputOptionItem<T = string> {
   type: 'option';
   value: T;
   filterMatchers?: readonly string[];
   disabled?: boolean;
 }
 
-interface SelectInputGroupItem<T = string> {
+export interface SelectInputGroupItem<T = string> {
   type: 'group';
   label: string;
   options: readonly SelectInputOptionItem<T>[];
 }
 
-interface SelectInputSeparatorItem {
+export interface SelectInputSeparatorItem {
   type: 'separator';
 }
 
@@ -106,10 +112,17 @@ export interface SelectInputProps<T = string> {
   items: readonly SelectInputItem<NonNullable<T>>[];
   defaultValue?: T;
   value?: T;
-  renderValue?: (value: NonNullable<T>, compact: boolean) => React.ReactNode;
   compareValues?:
     | (keyof NonNullable<T> & string)
     | ((a: T | undefined, b: T | undefined) => boolean);
+  renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
+  renderTrigger?: (args: {
+    content: React.ReactNode;
+    placeholderShown: boolean;
+    clear: (() => void) | undefined;
+    disabled: boolean;
+    className: string | undefined;
+  }) => React.ReactNode;
   filterable?: boolean;
   filterPlaceholder?: string;
   disabled?: boolean;
@@ -118,14 +131,66 @@ export interface SelectInputProps<T = string> {
   onClear?: () => void;
 }
 
-export function SelectInput<T>({
+const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, className }) => (
+  <InputGroup
+    addonEnd={{
+      content: (
+        <span className={classNames('np-select-input-addon-container', disabled && 'disabled')}>
+          {clear != null && !placeholderShown ? (
+            <>
+              <SelectInputClearButton
+                onClick={(event) => {
+                  event.preventDefault();
+                  clear();
+                }}
+              />
+              <span className="np-select-input-addon-separator" />
+            </>
+          ) : null}
+
+          <span className="np-select-input-addon">
+            <ChevronDown size={16} />
+          </span>
+        </span>
+      ),
+      padding: 'sm',
+    }}
+    disabled={disabled}
+    className={className}
+  >
+    <SelectInputTriggerButton as={ButtonInput}>
+      {placeholderShown ? <span className="np-select-input-placeholder"> {content}</span> : content}
+    </SelectInputTriggerButton>
+  </InputGroup>
+)) satisfies SelectInputProps['renderTrigger'];
+
+interface SelectInputClearButtonProps
+  extends Pick<React.ComponentPropsWithoutRef<'button'>, 'className' | 'onClick'> {}
+
+function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
+  const intl = useIntl();
+
+  return (
+    <button
+      type="button"
+      aria-label={intl.formatMessage(messages.ariaLabel)}
+      className={classNames(className, 'np-select-input-addon np-select-input-addon--interactive')}
+      onClick={onClick}
+    >
+      <Cross size={16} />
+    </button>
+  );
+}
+
+export function SelectInput<T = string>({
   name,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
-  renderValue = wrapInFragment,
   compareValues,
+  renderValue = wrapInFragment,
+  renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
   disabled,
@@ -133,8 +198,6 @@ export function SelectInput<T>({
   onChange,
   onClear,
 }: SelectInputProps<T>) {
-  const intl = useIntl();
-
   const [open, setOpen] = useState(false);
 
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -162,95 +225,85 @@ export function SelectInput<T>({
     >
       {({ disabled: uiDisabled, value }) => (
         <SelectInputHasValueContext.Provider value={value != null}>
-          <InputGroup
-            addonEnd={{
-              content: (
-                <span
-                  className={classNames(
-                    'np-select-input-addon-container',
-                    uiDisabled && 'disabled',
-                  )}
-                >
-                  {onClear != null && value != null ? (
-                    <>
-                      <button
-                        type="button"
-                        aria-label={intl.formatMessage(messages.ariaLabel)}
-                        disabled={uiDisabled}
-                        className="np-select-input-addon np-select-input-addon--interactive"
-                        onClick={(event) => {
-                          event.preventDefault();
+          <OptionsOverlay
+            open={open}
+            renderTrigger={({ ref, getInteractionProps }) => (
+              <SelectInputTriggerButtonPropsContext.Provider
+                // eslint-disable-next-line react/jsx-no-constructed-context-values
+                value={{
+                  ref: mergeRefs([ref, triggerRef]),
+                  ...mergeProps(
+                    {
+                      onClick: () => {
+                        setOpen((prev) => !prev);
+                      },
+                    },
+                    getInteractionProps(),
+                  ),
+                }}
+              >
+                {renderTrigger({
+                  content:
+                    value != null ? (
+                      <SelectInputOptionContentWithinTriggerContext.Provider value>
+                        {renderValue(value, true)}
+                      </SelectInputOptionContentWithinTriggerContext.Provider>
+                    ) : (
+                      placeholder
+                    ),
+                  placeholderShown: value == null,
+                  clear:
+                    onClear != null
+                      ? () => {
                           onClear();
                           triggerRef.current?.focus({ preventScroll: true });
-                        }}
-                      >
-                        <Cross size={16} />
-                      </button>
-                      <span className="np-select-input-addon-separator" />
-                    </>
-                  ) : null}
-
-                  <span className="np-select-input-addon">
-                    <ChevronDown size={16} />
-                  </span>
-                </span>
-              ),
-              padding: 'sm',
+                        }
+                      : undefined,
+                  disabled: uiDisabled,
+                  className: classNames(className, 'np-text-body-large'),
+                })}
+              </SelectInputTriggerButtonPropsContext.Provider>
+            )}
+            initialFocusRef={controllerRef}
+            padding="none"
+            onClose={() => {
+              setOpen(false);
             }}
-            className={className}
           >
-            <OptionsOverlay
-              open={open}
-              renderTrigger={({ ref, getInteractionProps }) => (
-                <ListboxBase.Button
-                  ref={mergeRefs([ref, triggerRef])}
-                  as={SelectInputButton}
-                  overrides={getInteractionProps()}
-                  onClick={() => {
-                    setOpen((prev) => !prev);
-                  }}
-                >
-                  {value != null ? (
-                    <SelectInputOptionContentCompactContext.Provider value>
-                      {renderValue(value, true)}
-                    </SelectInputOptionContentCompactContext.Provider>
-                  ) : (
-                    <span className="np-select-input-placeholder">{placeholder}</span>
-                  )}
-                </ListboxBase.Button>
-              )}
-              initialFocusRef={controllerRef}
-              padding="none"
-              onClose={() => {
-                setOpen(false);
-              }}
-            >
-              <SelectInputOptions
-                items={items}
-                renderValue={renderValue}
-                filterable={filterable}
-                filterPlaceholder={filterPlaceholder}
-                searchInputRef={searchInputRef}
-                listboxRef={listboxRef}
-              />
-            </OptionsOverlay>
-          </InputGroup>
+            <SelectInputOptions
+              items={items}
+              renderValue={renderValue}
+              filterable={filterable}
+              filterPlaceholder={filterPlaceholder}
+              searchInputRef={searchInputRef}
+              listboxRef={listboxRef}
+            />
+          </OptionsOverlay>
         </SelectInputHasValueContext.Provider>
       )}
     </ListboxBase>
   );
 }
 
-interface SelectInputButtonProps extends ButtonInputProps {
-  overrides?: { [key: string]: unknown };
-}
+export type SelectInputTriggerButtonProps<T extends React.ComponentType | 'button' = 'button'> = {
+  as?: T;
+} & React.ComponentPropsWithoutRef<T>;
 
-const SelectInputButton = forwardRef(function SelectInputButton(
-  { overrides, ...restProps }: SelectInputButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  return <ButtonInput ref={ref} {...restProps} {...overrides} />;
-});
+export function SelectInputTriggerButton<T extends React.ComponentType | 'button' = 'button'>({
+  as = 'button' as T,
+  ...restProps
+}: SelectInputTriggerButtonProps<T>) {
+  const { ref, onClick, ...interactionProps } = useContext(SelectInputTriggerButtonPropsContext);
+
+  return (
+    <ListboxBase.Button
+      ref={ref}
+      as={PolymorphicWithOverrides}
+      __overrides={{ as, ...interactionProps }}
+      {...mergeProps({ onClick }, restProps)}
+    />
+  );
+}
 
 interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
   onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
@@ -294,7 +347,7 @@ interface SelectInputOptionsProps<T = string>
   listboxRef: React.RefObject<HTMLDivElement>;
 }
 
-function SelectInputOptions<T>({
+function SelectInputOptions<T = string>({
   items,
   renderValue = wrapInFragment,
   filterable,
@@ -395,7 +448,11 @@ interface SelectInputItemViewProps<
   needle: string | null;
 }
 
-function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemViewProps<T>) {
+function SelectInputItemView<T = string>({
+  item,
+  renderValue,
+  needle,
+}: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
       if (
@@ -418,7 +475,7 @@ function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemVi
     }
     case 'separator': {
       if (needle == null) {
-        return <hr className="np-select-input-separator-item" aria-hidden />;
+        return <hr className="np-select-input-separator-item" />;
       }
       break;
     }
@@ -429,7 +486,7 @@ function SelectInputItemView<T>({ item, renderValue, needle }: SelectInputItemVi
 interface SelectInputGroupItemViewProps<T = string>
   extends SelectInputItemViewProps<T, SelectInputGroupItem<T | undefined>> {}
 
-function SelectInputGroupItemView<T>({
+function SelectInputGroupItemView<T = string>({
   item,
   renderValue,
   needle,
@@ -472,7 +529,7 @@ interface SelectInputOptionProps<T = string> {
   children?: React.ReactNode;
 }
 
-function SelectInputOption<T>({ value, disabled, children }: SelectInputOptionProps<T>) {
+function SelectInputOption<T = string>({ value, disabled, children }: SelectInputOptionProps<T>) {
   const parentHasValue = useContext(SelectInputHasValueContext);
 
   // Avoid flash during exit transition
@@ -483,23 +540,27 @@ function SelectInputOption<T>({ value, disabled, children }: SelectInputOptionPr
       as="div"
       value={value}
       disabled={disabled}
-      className={({ active, disabled: uiDisabled }) =>
+      className={({ active, selected, disabled: uiDisabled }) =>
         classNames(
           'np-select-input-option-container np-text-body-large',
           active && 'np-select-input-option-container--active',
+          selected && 'np-select-input-option-container--selected',
           uiDisabled && 'np-select-input-option-container--disabled',
         )
       }
     >
       {({ selected }) => (
         <>
+          <div className="np-select-input-option">{children}</div>
           {cachedParentHasValue ? (
             <Check
-              size={16}
-              className={classNames(!selected && 'np-select-input-option-check--not-selected')}
+              size={24}
+              className={classNames(
+                'np-select-input-option-check',
+                !selected && 'np-select-input-option-check--not-selected',
+              )}
             />
           ) : null}
-          <div className="np-select-input-option">{children}</div>
         </>
       )}
     </ListboxBase.Option>
@@ -519,7 +580,7 @@ export function SelectInputOptionContent({
   description,
   icon,
 }: SelectInputOptionContentProps) {
-  const compact = useContext(SelectInputOptionContentCompactContext);
+  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
 
   return (
     <div className="np-select-input-option-content-container np-text-body-large">
@@ -527,7 +588,7 @@ export function SelectInputOptionContent({
         <div
           className={classNames(
             'np-select-input-option-content-icon',
-            !compact && 'np-select-input-option-content-icon--not-compact',
+            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
           )}
         >
           {icon}
@@ -538,7 +599,7 @@ export function SelectInputOptionContent({
         <div
           className={classNames(
             'np-select-input-option-content-text-line-1',
-            compact && 'np-select-input-option-content-text-compact',
+            withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
         >
           <h4 className="d-inline np-text-body-large">{title}</h4>
@@ -553,7 +614,7 @@ export function SelectInputOptionContent({
           <div
             className={classNames(
               'np-select-input-option-content-text-secondary np-text-body-default',
-              compact && 'np-select-input-option-content-text-compact',
+              withinTrigger && 'np-select-input-option-content-text-within-trigger',
             )}
           >
             {description}

package/src/inputs/_Popover.less

@@ -3,7 +3,7 @@
   display: flex;
   max-height: var(--max-height);
   width: var(--width);
-  min-width: min-content;
+  min-width: 20rem;
   flex-direction: column;
   border-radius: var(--radius-small);
   background-color: var(--color-background-elevated);

package/src/instructionsList/InstructionList.story.tsx

@@ -0,0 +1,39 @@
+import Link from '../link';
+
+import InstructionsList from './InstructionsList';
+
+export default {
+  component: InstructionsList,
+  title: 'Typography/InstructionsList',
+};
+
+export const Basic = () => {
+  return (
+    <>
+      <InstructionsList
+        dos={[
+          'Do an initial money transfer',
+          'Invite at least 3 friends',
+          <span key="12">
+            Paying extra{' '}
+            <Link href="" type="link-large">
+              hidden fees
+            </Link>{' '}
+            for transfers
+          </span>,
+        ]}
+        donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
+      />
+      <InstructionsList
+        dos={[
+          { content: 'Multiple currencies', 'aria-label': 'Supports multiple currencies' },
+          { content: 'Existing recipients', 'aria-label': 'Supports existing recipients' },
+        ]}
+        donts={[
+          { content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
+          { content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
+        ]}
+      />
+    </>
+  );
+};

package/src/instructionsList/InstructionsList.css

@@ -1 +1 @@
-.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:16px;margin-right:var(--padding-small)}.np-theme-personal .tw-instructions .instruction .do,.np-theme-personal .tw-instructions .instruction .dont{margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:#008026;color:var(--color-content-positive)}.np-theme-personal .tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:#cf2929;color:var(--color-content-negative)}.np-theme-personal .tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}
+.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}

package/src/instructionsList/InstructionsList.less

@@ -9,28 +9,16 @@
     .do,
     .dont {
       flex-shrink: 0;
-      margin-right: var(--padding-small);
+      margin-right: var(--padding-x-small);
       margin-bottom: 0;
-
-      .np-theme-personal & {
-        margin-right: var(--padding-x-small);
-      }
     }
 
     .do {
-      color: var(--color-content-positive);
-
-      .np-theme-personal & {
-        color: var(--color-sentiment-positive);
-      }
+      color: var(--color-sentiment-positive);
     }
 
     .dont {
-      color: var(--color-content-negative);
-
-      .np-theme-personal & {
-        color: var(--color-sentiment-negative);
-      }
+      color: var(--color-sentiment-negative);
     }
   }
 }

package/src/instructionsList/InstructionsList.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '../test-utils';
+
+import InstructionsList from '.';
+
+describe('InstructionsList', () => {
+  it('should render dos list only', () => {
+    const dos = ['Test this component', 'With multiple dos'];
+    render(<InstructionsList dos={dos} />);
+
+    expect(screen.getByText(dos[0])).toBeInTheDocument();
+    expect(screen.getByText(dos[1])).toBeInTheDocument();
+  });
+
+  it('should render donts list only', () => {
+    const donts = ['Card validation', 'ID verification'];
+
+    render(<InstructionsList donts={donts} />);
+    expect(screen.getByText(donts[0])).toBeInTheDocument();
+    expect(screen.getByText(donts[1])).toBeInTheDocument();
+  });
+
+  it('should render do/dont lists with description for icons', () => {
+    const dos = [{ content: 'Card validation', 'aria-label': 'Provides card validation' }];
+    const donts = [{ content: 'ID verification', 'aria-label': 'No ID verification' }];
+
+    const { container } = render(<InstructionsList dos={dos} donts={donts} />);
+    expect(screen.getByText(dos[0].content)).toBeInTheDocument();
+    expect(screen.getByText(donts[0].content)).toBeInTheDocument();
+
+    const instructions = container.querySelectorAll('.instruction');
+    expect(instructions).toHaveLength(2);
+    expect(instructions[0]).toHaveAttribute('aria-label', dos[0]['aria-label']);
+    expect(instructions[1]).toHaveAttribute('aria-label', donts[0]['aria-label']);
+  });
+});

package/src/instructionsList/InstructionsList.tsx

@@ -1,46 +1,61 @@
-import { CrossCircle, CrossCircleFill, CheckCircle, CheckCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
-import { ReactNode } from 'react';
+import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
+import { ReactNode, isValidElement } from 'react';
 
 import Body from '../body/Body';
-import { CommonProps } from '../common';
-import { Typography } from '../common/propsValues/typography';
+import { Typography, CommonProps } from '../common';
 
-type Props = CommonProps & {
-  dos?: ReactNode[];
-  donts?: ReactNode[];
+type InstructionNode = {
+  content: ReactNode;
+  ['aria-label']: string;
 };
 
-const InstructionsList = (props: Props) => {
-  const { isModern } = useTheme();
-  const { dos, donts } = props;
-  const DontIcon = isModern ? CrossCircleFill : CrossCircle;
-  const DoIcon = isModern ? CheckCircleFill : CheckCircle;
+type Props = CommonProps &
+  (
+    | {
+        dos?: ReactNode[];
+        donts?: ReactNode[];
+      }
+    | {
+        dos?: InstructionNode[];
+        donts?: InstructionNode[];
+      }
+  );
 
+const InstructionsList = ({ dos, donts }: Props) => {
   return (
     <div className="tw-instructions">
       {dos &&
         dos.map((doThis, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <div key={index} className="instruction">
-            <DoIcon size={24} className="do" />
-            <Body className="text-primary" type={Typography.BODY_LARGE}>
-              {doThis}
-            </Body>
-          </div>
+          <Instruction key={index} item={doThis} type="do" />
         ))}
       {donts &&
         donts.map((dont, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <div key={index} className="instruction">
-            <DontIcon size={24} className="dont" />
-            <Body className="text-primary" type={Typography.BODY_LARGE}>
-              {dont}
-            </Body>
-          </div>
+          <Instruction key={index} item={dont} type="dont" />
         ))}
     </div>
   );
 };
 
+function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {
+  const isInstructionNode =
+    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
+  return (
+    <div
+      className="instruction"
+      aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}
+    >
+      {type === 'do' ? (
+        <DoIcon size={24} className={type} />
+      ) : (
+        <DontIcon size={24} className={type} />
+      )}
+      <Body className="text-primary" type={Typography.BODY_LARGE}>
+        {isInstructionNode ? item.content : item}
+      </Body>
+    </div>
+  );
+}
+
 export default InstructionsList;