@transferwise/components 46.63.0 → 46.65.0

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -1,53 +1,90 @@
-import { render, screen } from '../../test-utils';
+import { render, screen, mockMatchMedia, userEvent, waitFor } from '../../test-utils';
 
 import AnimatedLabel from '.';
 
+mockMatchMedia();
+
 const props = {
   activeLabel: 0,
-  labels: ['label1', 'label2', 'label3'],
+  steps: [{ label: 'label1' }, { label: 'label2' }, { label: 'label3' }],
 };
 jest.useFakeTimers();
 describe('AnimatedLabel', () => {
-  it('renders all labels', () => {
-    const { container } = render(<AnimatedLabel {...props} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
-  });
-
-  it('renders only one label with class out', () => {
-    const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(container.querySelectorAll('.np-animated-label--active')).toHaveLength(1);
   });
 
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
 
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
 
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
+  });
+
+  it('shows all steps in menu when click on the label', async () => {
+    render(<AnimatedLabel {...props} activeLabel={1} />);
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: /label2/i }));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    expect(screen.getAllByRole('menuitem')).toHaveLength(props.steps.length);
+  });
+
+  it('switches label when click on one of steps as menu itme', async () => {
+    const handleClick = jest.fn();
+    const handleStepClick = (stepNumber) => {
+      return () => handleClick(stepNumber);
+    };
+    render(
+      <AnimatedLabel
+        {...{
+          activeLabel: 1,
+          steps: [
+            { label: 'label1', onClick: handleStepClick(0) },
+            { label: 'label2', onClick: handleStepClick(1) },
+            { label: 'label3', onClick: handleStepClick(2) },
+          ],
+        }}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /label2/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /label1/i })).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByRole('button', { name: /label2/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByRole('menuitem', { name: /label1/i }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleClick).toHaveBeenCalledWith(0);
   });
 });

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -1,32 +1,114 @@
 import { clsx } from 'clsx';
-import React from 'react';
+import { useId, useState } from 'react';
 
-import Body from '../../body';
-import { Typography } from '../../common';
+import type { Step } from '../../stepper/Stepper';
+import BottomSheet from '../../common/bottomSheet';
+import Option from '../../common/Option';
+import { Check, ChevronDown } from '@transferwise/icons';
+import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
+import { List } from '../../listItem';
 
 export interface AnimatedLabelProps {
   activeLabel: number;
   className?: string;
-  labels: readonly React.ReactNode[];
+  steps: readonly Step[];
 }
 
-const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
+const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {
+  const labelId = useId();
+  const [showSteps, setShowSteps] = useState(false);
+
+  function handleStepAction(onClick: Step['onClick']) {
+    return () => {
+      setShowSteps(false);
+      onClick?.();
+    };
+  }
+
   return (
-    <Body type={Typography.BODY_LARGE_BOLD} className={clsx('np-animated-label', className)}>
-      {labels.map((label, index) => {
-        const nextLabel = index - 1;
-        return (
-          <div
-            key={nextLabel}
-            className={clsx('text-xs-center', {
-              'np-animated-label--in text-ellipsis': index === activeLabel,
-            })}
-          >
-            {label}
-          </div>
-        );
-      })}
-    </Body>
+    <OverlayIdProvider open={showSteps}>
+      <OverlayIdContext.Consumer>
+        {(overlayId) => {
+          return (
+            <>
+              <button
+                type="button"
+                id={labelId}
+                aria-haspopup="menu"
+                aria-controls={overlayId}
+                aria-expanded={showSteps}
+                className={clsx(
+                  'np-animated-label',
+                  'btn-unstyled',
+                  'np-text-body-large-bold',
+                  className,
+                )}
+                onClick={() => setShowSteps(true)}
+              >
+                {steps.map(({ label }, index) => {
+                  const isCurrentStep = activeLabel === index;
+                  const previousIndex = index - 1;
+                  return (
+                    <div
+                      key={previousIndex}
+                      aria-hidden={!isCurrentStep}
+                      className={clsx('text-xs-center', 'd-inline-flex', {
+                        'np-animated-label--active text-ellipsis': isCurrentStep,
+                      })}
+                    >
+                      {label} <ChevronDown className="m-l-1" size={24} />
+                    </div>
+                  );
+                })}
+              </button>
+              <BottomSheet
+                role="menu"
+                aria-labelledby={labelId}
+                open={showSteps}
+                onClose={() => setShowSteps(false)}
+              >
+                <List className="m-b-0 p-a-1">
+                  {steps.map((step, index) => {
+                    const isCurrentStep = activeLabel === index;
+                    const isDisabled = activeLabel < index;
+                    const itemId = `step-${index}`;
+                    return (
+                      <Option
+                        key={itemId}
+                        id={itemId}
+                        as="li"
+                        role="menuitem"
+                        decision={false}
+                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {
+                          clickable: !isDisabled,
+                        })}
+                        title={step.label}
+                        content={step.hoverLabel}
+                        button={isCurrentStep ? <Check size={24} /> : null}
+                        aria-current={isCurrentStep ? 'step' : false}
+                        aria-disabled={isDisabled}
+                        disabled={isDisabled}
+                        isContainerAligned
+                        {...(!isDisabled && {
+                          tabIndex: 0,
+                          onClick: handleStepAction(step.onClick),
+                          onKeyDown: (event) => {
+                            event.preventDefault();
+                            if (event.code === 'Enter' || event.code === 'Space') {
+                              handleStepAction(step.onClick)();
+                            }
+                          },
+                        })}
+                      />
+                    );
+                  })}
+                </List>
+              </BottomSheet>
+            </>
+          );
+        }}
+      </OverlayIdContext.Consumer>
+    </OverlayIdProvider>
   );
 };
 

package/src/instructionsList/InstructionsList.tsx

@@ -57,10 +57,7 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
   const isInstructionNode =
     typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
   return (
-    <li
-      className="instruction"
-      aria-label={isInstructionNode ? (item['aria-label']) : undefined}
-    >
+    <li className="instruction" aria-label={isInstructionNode ? item['aria-label'] : undefined}>
       {type === 'do' ? (
         <DoIcon size={24} className={type} />
       ) : (

package/src/main.css

@@ -2098,7 +2098,7 @@ button.np-option {
   transform: translateX(-8px);
   transition: all 0.15s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -2106,6 +2106,15 @@ button.np-option {
   transform: translateX(0);
   transition: all 0.15s ease-in 0.15s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-back-button {
   color: #00a2dd;
   color: var(--color-interactive-accent);

package/src/switch/Switch.story.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const Basic = () => {
   const [checked1, setCheck1] = useState(false);
-  const [checked2, setCheck2] = useState(false);
+  const [checked2, setCheck2] = useState(true);
 
   return (
     <div className="d-flex flex-column">
@@ -22,11 +22,10 @@ export const Basic = () => {
           onClick={() => setCheck1(!checked1)}
         />
       </Field>
-
       <Switch
-        checked={checked2}
-        className="a-class-name m-t-4"
         aria-label="I'm a switch without label"
+        checked={checked2}
+        className="a-class-name"
         onClick={() => setCheck2(!checked2)}
       />
     </div>
@@ -43,17 +42,15 @@ export const Disabled = () => {
           checked={checked}
           disabled
           className="a-class-name"
-          aria-labelledby="labelID"
           id="switchId"
           onClick={() => setCheck(!checked)}
         />
       </Field>
-
       <Switch
+        aria-label="I'm a switch without label"
         checked={!checked}
         disabled
         className="a-class-name"
-        aria-labelledby="labelID"
         id="switchId1"
         onClick={() => setCheck(!checked)}
       />

package/src/switch/Switch.tsx

@@ -1,5 +1,3 @@
-import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import type { KeyboardEventHandler, MouseEvent } from 'react';
 
@@ -26,7 +24,6 @@ export type SwitchProps = CommonProps & {
 const Switch = (props: SwitchProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
 
-  const { isModern } = useTheme();
   const {
     checked,
     className,
@@ -44,25 +41,6 @@ const Switch = (props: SwitchProps) => {
     }
   };
 
-  const returnIcon = () => {
-    if (isModern) {
-      return <span className="np-switch--thumb" />;
-    }
-
-    if (checked) {
-      return (
-        <span className="np-switch--thumb">
-          <CheckCircleFill size={24} />
-        </span>
-      );
-    }
-    return (
-      <span className="np-switch--thumb">
-        <CrossCircleFill size={24} />
-      </span>
-    );
-  };
-
   const ariaLabelledby =
     (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
 
@@ -70,7 +48,6 @@ const Switch = (props: SwitchProps) => {
     <span
       className={clsx(
         'np-switch',
-
         {
           'np-switch--unchecked': !checked,
           'np-switch--checked': checked,
@@ -89,7 +66,7 @@ const Switch = (props: SwitchProps) => {
       onClick={!disabled ? onClick : undefined}
       onKeyDown={!disabled ? handleKeyDown : undefined}
     >
-      {returnIcon()}
+      <span className="np-switch--thumb" />
       <input type="checkbox" checked={checked} readOnly />
     </span>
   );

package/src/switch/__snapshots__/Switch.spec.tsx.snap

@@ -12,28 +12,7 @@ exports[`Switch renders component when checked 1`] = `
   >
     <span
       class="np-switch--thumb"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-check-circle-fill "
-        data-testid="check-circle-fill-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M12 22.286c5.68 0 10.286-4.605 10.286-10.286C22.286 6.32 17.68 1.714 12 1.714 6.32 1.714 1.714 6.32 1.714 12c0 5.68 4.605 10.286 10.286 10.286Zm-1.32-5.397 7.712-7.711-1.212-1.213-7.109 7.109-3.465-3.466-1.212 1.212 4.068 4.069a.861.861 0 0 0 1.219 0Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </span>
+    />
     <input
       checked=""
       readonly=""
@@ -55,28 +34,7 @@ exports[`Switch renders component when unchecked 1`] = `
   >
     <span
       class="np-switch--thumb"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-cross-circle-fill "
-        data-testid="cross-circle-fill-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M1.714 12C1.714 6.344 6.343 1.716 12 1.716S22.286 6.343 22.286 12c0 5.657-4.629 10.285-10.286 10.285S1.714 17.658 1.714 12.001ZM12 10.8l4.243-4.244 1.2 1.2L13.2 12l4.243 4.243-1.2 1.2L12 13.2l-4.243 4.243-1.2-1.2L10.8 12 6.557 7.756l1.2-1.2L12 10.8Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </span>
+    />
     <input
       readonly=""
       type="checkbox"

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -23,21 +23,25 @@ const files = [
   {
     id: 2,
     filename: 'purchase-receipt-1.pdf',
+  },
+  {
+    id: 6,
+    filename: 'purchase-receipt-1.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 2,
+    id: 3,
     filename: 'receipt failed.png',
     status: Status.FAILED,
   },
   {
-    id: 3,
+    id: 4,
     filename: 'receipt failed With error string.png',
     status: Status.FAILED,
     error: 'Something went wrong',
   },
   {
-    id: 4,
+    id: 5,
     filename: 'receipt failed With error object.png',
     status: Status.FAILED,
     error: { message: 'Something went wrong' },

package/src/uploadInput/UploadInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';
@@ -101,6 +101,10 @@ export type UploadInputProps = {
   Pick<UploadItemProps, 'onDownload'> &
   CommonProps;
 
+interface UploadItemRef {
+  focus: () => void;
+}
+
 function generateFileId(file: File) {
   const { name, size } = file;
   const uploadTimeStamp = new Date().getTime();
@@ -131,8 +135,11 @@ const UploadInput = ({
   const inputAttributes = useInputAttributes({ nonLabelable: true });
 
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
+  const [fileToRemoveIndex, setFileToRemoveIndex] = useState<number | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
+  const itemRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
 
@@ -174,21 +181,28 @@ const UploadInput = ({
     uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
   };
 
+  const [fileToRemove, setFileToRemove] = useState<UploadedFile | null>(null);
+
   const removeFile = (file: UploadedFile) => {
     const { id, status } = file;
+    const index = uploadedFiles.findIndex((f) => f.id === file.id);
+    setFileToRemoveIndex(index);
 
     if (status === Status.FAILED) {
-      // If removing a failed upload, we're just updating the view
       removeFileFromList(file);
+      setFileToRemove(file);
     } else if (onDeleteFile && id) {
-      // Set status to PROCESSING
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
 
-      // Notify host app about deletion
       onDeleteFile(id)
-        .then(() => removeFileFromList(file))
+        .then(() => {
+          removeFileFromList(file);
+        })
         .catch((error) => {
           modifyFileInList(file, { error: error as UploadError });
+        })
+        .finally(() => {
+          setFileToRemove(file);
         });
     }
   };
@@ -263,10 +277,18 @@ const UploadInput = ({
           continue;
         }
 
+        // Check if the file is already in the list
+        const existingFile = uploadedFiles.find((f) => f.filename === file.name);
+        if (existingFile) {
+          // Remove the file from the list before adding it again
+          removeFileFromList(existingFile);
+        }
+
+        // Add the file to the list
         formData.append(fileInputName, file);
         const pendingFile = {
-          id,
-          filename: name,
+          id: generateFileId(file),
+          filename: file.name,
           status: Status.PENDING,
         };
 
@@ -290,6 +312,22 @@ const UploadInput = ({
     }
   };
 
+  useLayoutEffect(() => {
+    if (fileToRemove && fileToRemoveIndex !== null) {
+      requestAnimationFrame(() => {
+        const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);
+        if (itemRefs.current[nextFocusIndex]) {
+          itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem
+        } else {
+          // If there's only one item left, focus the UploadButton
+          uploadInputRef.current?.focus();
+        }
+      });
+      setFileToRemove(null); // Reset the state
+      setFileToRemoveIndex(null); // Reset the index
+    }
+  }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
+
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -307,9 +345,12 @@ const UploadInput = ({
         className={clsx('np-upload-input', className, { disabled })}
         {...inputAttributes}
       >
-        {uploadedFiles.map((file) => (
+        {uploadedFiles.map((file, index) => (
           <UploadItem
             key={file.id}
+            ref={(el: UploadItemRef | null) => {
+              itemRefs.current[index] = el;
+            }}
             file={file}
             singleFileUpload={!multiple}
             canDelete={
@@ -326,6 +367,7 @@ const UploadInput = ({
         ))}
         {(multiple || (!multiple && !uploadedFiles.length)) && (
           <UploadButton
+            ref={uploadInputRef}
             id={id}
             uploadButtonTitle={uploadButtonTitle}
             disabled={areMaximumFilesUploadedAlready() || disabled}