@transferwise/components 0.0.0-experimental-e7eccea → 0.0.0-experimental-696128b

package/src/button/Button.resolver.tsx

@@ -1,48 +1,12 @@
 import { forwardRef } from 'react';
-import LegacyButton, {
-  AnchorProps as LegacyAnchorProps,
-  ButtonProps as LegacyButtonProps,
-} from './LegacyButton';
-import { ButtonProps as NewButtonProps } from './Button.types';
+import LegacyButton, { LegacyButtonProps } from './LegacyButton';
+import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';
 import NewButton from './Button';
 
-type LegacyButtonType =
-  | 'accent'
-  | 'negative'
-  | 'positive'
-  | 'primary'
-  | 'pay'
-  | 'secondary'
-  | 'danger'
-  | 'link'
-  | null
-  | undefined;
-
-type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
-
-type CommonButtonProps = {
-  href?: string;
-  target?: string;
-  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
-};
-
-export type ButtonProps =
-  | (Omit<LegacyButtonProps, 'ref'> &
-      CommonButtonProps & {
-        priority?: LegacyButtonProps['priority'];
-        type?: LegacyButtonType;
-        htmlType?: string;
-        v2?: false;
-      })
-  | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &
-      CommonButtonProps & {
-        priority?: NewButtonProps['priority'];
-        type?: NewButtonType;
-        v2: true;
-      });
+export type ButtonProps = LegacyButtonProps | NewButtonProps;
 
 const mapProps = (props: LegacyButtonProps): NewButtonProps => {
-  const { priority, size, type, as, ...newProps } = props;
+  const { priority, size, type, ...newProps } = props;
 
   const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
     accent: {
@@ -66,7 +30,7 @@ const mapProps = (props: LegacyButtonProps): NewButtonProps => {
     type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;
   const mappedSentiment = type === 'negative' ? 'negative' : undefined;
 
-  const legacyButtonTypes: LegacyButtonType[] = [
+  const legacyButtonTypes: LegacyButtonProps['type'][] = [
     'accent',
     'negative',
     'positive',
@@ -90,43 +54,18 @@ const mapProps = (props: LegacyButtonProps): NewButtonProps => {
     size: resolveSize(),
     priority: mappedPriority,
     sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
-    type:
-      type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,
-    v2: undefined,
+    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
+    v2: true,
   } as NewButtonProps;
 };
 
-const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
-  const { v2 = false, as, ...rest } = props;
-
+const Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {
   if (v2) {
     const mappedProps = mapProps(props as LegacyButtonProps);
-    return (
-      <NewButton
-        {...mappedProps}
-        ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
-        as={as}
-      />
-    );
-  }
-
-  if (as === 'a') {
-    return (
-      <LegacyButton
-        {...(rest as LegacyAnchorProps)}
-        ref={ref as React.Ref<HTMLAnchorElement>}
-        as="a"
-      />
-    );
+    return <NewButton {...mappedProps} ref={ref} />;
   }
 
-  return (
-    <LegacyButton
-      {...(rest as LegacyButtonProps)}
-      ref={ref as React.Ref<HTMLButtonElement>}
-      as="button"
-    />
-  );
+  return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;
 });
 
 Button.displayName = 'Button';

package/src/button/Button.spec.tsx

@@ -14,7 +14,6 @@ describe('Button', () => {
     v2: true,
     priority: 'primary',
     size: 'md',
-    type: 'accent',
     testId: 'new-button',
   };
 
@@ -73,6 +72,7 @@ describe('Button', () => {
   it('does not set type when type is in LegacyButtonType', () => {
     const legacyTypeProps: ButtonProps = {
       ...newProps,
+      // @ts-expect-error here we intentionally set wrong value to test `type` attr in DOM
       type: 'accent',
     };
     render(<Button {...legacyTypeProps}>Button Type</Button>);

package/src/button/Button.story.tsx

@@ -240,7 +240,6 @@ const meta: Meta<typeof Button> = {
     loading: false,
     block: false,
     href: undefined,
-    target: undefined,
     as: undefined,
     type: undefined,
     iconStart: undefined,
@@ -753,5 +752,5 @@ export const AllVariants = storyConfig(
       </div>
     ),
   },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
 );

package/src/button/Button.tsx

@@ -1,6 +1,11 @@
+/* eslint-disable react/display-name */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { forwardRef } from 'react';
-import { ButtonProps as NewButtonProps } from './Button.types';
+import {
+  AnchorElementProps,
+  ButtonReferenceType,
+  ButtonProps as NewButtonProps,
+} from './Button.types';
 import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
 import AvatarLayout from '../avatarLayout';
 import ProcessIndicator from '../processIndicator';
@@ -8,7 +13,7 @@ import { clsx } from 'clsx';
 import { Typography } from '../common';
 import Body from '../body';
 
-const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(
+const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
   (
     {
       as = 'button',
@@ -22,9 +27,11 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
       iconStart: IconStart,
       iconEnd: IconEnd,
       avatars,
+      // @ts-expect-error NewButtonProps has `type` prop
       type = 'button',
       loading = false,
       block = false,
+      v2,
       ...props
     },
     ref,

package/src/button/Button.types.ts

@@ -1,27 +1,17 @@
 import { ReactNode } from 'react';
-import type {
-  PrimitiveButtonProps,
-  PrimitiveAnchorProps,
-  PrimitiveButtonElementRef,
-  PrimitiveAnchorElementRef,
-} from '../primitives';
-import type { SingleAvatarType } from '../avatarLayout';
+import type { PrimitiveButtonProps, PrimitiveAnchorProps } from '../primitives';
+import type { AvatarLayoutProps } from '../avatarLayout';
 
 export type ButtonSentiment = 'default' | 'negative';
 export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
-export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
+export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
 
 /**
  * Common properties for the Button component.
  */
-export interface CommonButtonProps {
-  /**
-   * If set, toggles the new Button API
-   * @default false
-   * */
-  v2?: boolean;
+export interface CommonProps {
+  v2: true;
 
   /**
    * The HTML element to render
@@ -72,15 +62,13 @@ export interface CommonButtonProps {
   iconEnd?: React.ElementType;
 
   /** Media to be displayed on the left side of the button */
-  avatars?: SingleAvatarType[];
-
-  /** Optional property to provide component Ref */
-  ref?: ButtonRefType;
+  avatars?: AvatarLayoutProps['avatars'];
 
   /** Content to be displayed inside the button */
   children?: ReactNode;
 }
 
-export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
-export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
+export type ButtonElementProps = PrimitiveButtonProps & CommonProps;
+export type AnchorElementProps = PrimitiveAnchorProps & CommonProps;
+
 export type ButtonProps = ButtonElementProps | AnchorElementProps;

package/src/button/LegacyButton.spec.tsx

@@ -2,8 +2,9 @@ import { createRef } from 'react';
 
 import { render, screen, userEvent } from '../test-utils';
 
-import LegacyButton, { ButtonReferenceType } from './LegacyButton';
+import LegacyButton from './LegacyButton';
 import messages from '../i18n/commonMessages/Button.messages';
+import { ButtonReferenceType } from './Button.types';
 
 describe('LegacyButton', () => {
   // eslint-disable-next-line no-console

package/src/button/LegacyButton.tsx

@@ -22,6 +22,7 @@ import ProcessIndicator from '../processIndicator';
 import messages from '../i18n/commonMessages/Button.messages';
 import { typeClassMap, priorityClassMap } from './classMap';
 import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
+import { ButtonReferenceType } from './Button.types';
 
 /** @deprecated */
 type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
@@ -30,22 +31,22 @@ type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
 type DeprecatedSizes = SizeExtraSmall;
 
 type CommonProps = {
+  v2?: false;
   block?: boolean;
   disabled?: boolean;
   loading?: boolean;
-  /** @deprecated */
   type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
   size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
   htmlType?: 'submit' | 'reset' | 'button';
 };
 
-export type ButtonProps = CommonProps &
+type ButtonProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
     as?: 'button';
   };
 
-export type AnchorProps = CommonProps &
+type AnchorProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
     as?: 'a';
     href?: string;
@@ -53,8 +54,6 @@ export type AnchorProps = CommonProps &
 
 export type LegacyButtonProps = ButtonProps | AnchorProps;
 
-export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-
 /**
  * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
  */

package/src/drawer/Drawer.rtl.spec.tsx

@@ -0,0 +1,59 @@
+import { DimmerProps } from '../dimmer';
+import { SlidingPanelProps } from '../slidingPanel';
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+
+import Drawer from './Drawer';
+
+mockMatchMedia();
+
+jest.mock(
+  '../dimmer',
+  () =>
+    function Dimmer({ open, children }: DimmerProps) {
+      return open ? <div className="dimmer">{children}</div> : null;
+    },
+);
+
+jest.mock(
+  '../slidingPanel',
+  () =>
+    function SlidingPanel({ open, children }: SlidingPanelProps) {
+      return open ? <div className="sliding-panel">{children}</div> : null;
+    },
+);
+
+describe('Drawer', () => {
+  const props = {
+    onClose: jest.fn(),
+    open: true,
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders content when open', () => {
+    const { container } = render(<Drawer {...props}>content</Drawer>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("doesn't render content when closed", () => {
+    const { container } = render(
+      <Drawer {...props} open={false}>
+        content
+      </Drawer>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('calls onClose when user clicks close button', async () => {
+    render(<Drawer {...props}>content</Drawer>);
+    expect(props.onClose).not.toHaveBeenCalled();
+    await userEvent.click(getCloseButton());
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  const getCloseButton = () => screen.getByLabelText('Close');
+});

package/src/drawer/Drawer.spec.js

@@ -0,0 +1,101 @@
+import { mount } from 'enzyme';
+
+import { mockMatchMedia } from '../test-utils';
+import Title from '../title/Title';
+
+import Drawer from '.';
+
+mockMatchMedia();
+jest.mock('../common');
+jest.useFakeTimers();
+
+jest.mock(
+  '../dimmer',
+  () =>
+    function Dimmer({ open, children }) {
+      return open ? <div className="dimmer">{children}</div> : null;
+    },
+);
+
+jest.mock(
+  '../slidingPanel',
+  () =>
+    function SlidingPanel({ open, children }) {
+      return open ? <div className="sliding-panel">{children}</div> : null;
+    },
+);
+
+const defaultLocale = 'en-GB';
+
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function InjectedComponent(props) {
+      return <Component {...props} intl={{ locale: defaultLocale }} />;
+    },
+  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => String(id) }),
+  defineMessages: (translations) => translations,
+}));
+
+describe('Drawer', () => {
+  let component;
+  const props = {
+    open: true,
+    position: 'left',
+    onClose: jest.fn(),
+    children: null,
+    headerTitle: null,
+    footerContent: null,
+  };
+
+  beforeEach(() => {
+    component = mount(<Drawer {...props} />);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    component.unmount();
+  });
+
+  it('renders drawer header if title is provided', () => {
+    expect(component.find('.np-drawer-header--title')).toHaveLength(0);
+    component.setProps({ headerTitle: 'A title' });
+    expect(component.find(Title)).toHaveLength(1);
+    expect(component.find(Title).props().children).toBe('A title');
+  });
+
+  it('renders header with or without borders', () => {
+    expect(component.find('.np-drawer-header--withborder')).toHaveLength(0);
+    component.setProps({ headerTitle: 'A title' });
+    expect(component.find('.np-drawer-header--withborder')).toHaveLength(1);
+  });
+
+  it('renders content if children are provided', () => {
+    expect(component.find('.np-drawer-content')).toHaveLength(0);
+    component.setProps({ children: 'SomeChildren' });
+    expect(component.find('.np-drawer-content')).toHaveLength(1);
+  });
+
+  it('renders drawer footer if footerContent is provided', () => {
+    expect(component.find('.np-drawer-footer')).toHaveLength(0);
+    component.setProps({ footerContent: 'SomeContent' });
+    expect(component.find('.np-drawer-footer')).toHaveLength(1);
+  });
+
+  it('passes onUnmount to Dimmer onExited prop', () => {
+    const onUnmount = jest.fn();
+    component.setProps({ onUnmount });
+    component.setProps({ open: true });
+    expect(component.find('Dimmer').prop('onExited')).toBe(onUnmount);
+  });
+
+  it('calls onUnmount when the component unmounts', () => {
+    const onUnmount = jest.fn();
+    component.setProps({ onUnmount });
+    component.setProps({ open: true });
+    expect(onUnmount).not.toHaveBeenCalled();
+    jest.runAllTimers();
+    component.setProps({ open: false });
+    component.find('Dimmer').prop('onExited')();
+    expect(onUnmount).toHaveBeenCalledTimes(1);
+  });
+});

package/src/drawer/__snapshots__/Drawer.rtl.spec.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Drawer doesn't render content when closed 1`] = `<div />`;
+
+exports[`Drawer renders content when open 1`] = `
+<div>
+  <div
+    class="dimmer"
+  >
+    <div
+      class="sliding-panel"
+    >
+      <div
+        aria-modal="true"
+        class="np-drawer"
+        role="dialog"
+      >
+        <div
+          class="np-drawer-header"
+        >
+          <button
+            aria-label="Close"
+            class="np-close-button close btn-link text-no-decoration np-close-button--large"
+            type="button"
+          >
+            <span
+              class="tw-icon tw-icon-cross "
+              data-testid="cross-icon"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                focusable="false"
+                height="24"
+                role="none"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <path
+                  d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="np-drawer-content"
+        >
+          content
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/index.ts

@@ -96,17 +96,6 @@ export type { UploadProps } from './upload';
 export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
 export type { WithIdProps } from './withId';
 export type { IconButtonProps } from './iconButton';
-export type {
-  TableProps,
-  TableRowType,
-  TableRowClickableType,
-  TableHeaderType,
-  TableCellLeading,
-  TableCellText,
-  TableCellCurrency,
-  TableCellStatus,
-  TableCellType,
-} from './table';
 
 /**
  * Components
@@ -207,7 +196,6 @@ export { default as Tooltip } from './tooltip';
 export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
-export { default as Table } from './table';
 
 /**
  * Hooks

package/src/main.css

@@ -531,8 +531,7 @@ div.critical-comms .critical-comms-body {
   margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -901,6 +900,13 @@ div.critical-comms .critical-comms-body {
 .wds-Button-loader .process-circle {
   stroke: var(--Button-color);
 }
+/* RTL Styles */
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
+  transform: rotate(180deg);
+}
+[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
+  transform: rotate(180deg);
+}
 /* Avatar border transparency */
 /* dark buttons get 20% transparency, light buttons get 12% */
 .wds-Button-avatars .np-circle {
@@ -922,9 +928,6 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
-  transform: rotate(180deg);
-}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;

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

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

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

@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Status } from '../common';
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
-import { userEvent } from '@storybook/test';
+import { userEvent, within } from '@storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -65,8 +65,8 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async () => createDelayedPromise(),
-  onDeleteFile: async () => createDelayedPromise(),
+  onUploadFile: async (formData: FormData) => createDelayedPromise(),
+  onDeleteFile: async (id: string | number) => createDelayedPromise(),
 };
 
 export const UploadInputWithDescriptionFromProps: Story = {
@@ -268,7 +268,7 @@ export const DeletingTop: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async () => {
+  play: async ({ canvasElement }) => {
     await userEvent.tab();
     await triggerModalAndConfirm();
     await triggerModalAndConfirm({ isLink: false });
@@ -282,7 +282,7 @@ export const DeletingBottom: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async () => {
+  play: async ({ canvasElement }) => {
     await userEvent.tab();
     await userEvent.tab();
     await userEvent.tab();

package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts

@@ -38,16 +38,4 @@ describe('getAllowedFileTypes', () => {
       expect(allowedFileTypes).toStrictEqual(['*']);
     });
   });
-
-  describe('using only mime types', () => {
-    const mimeTypes = ['application/json', 'image/jpeg'];
-
-    beforeAll(() => {
-      allowedFileTypes = getAllowedFileTypes(mimeTypes);
-    });
-
-    it('returns the original mime types', () => {
-      expect(allowedFileTypes).toStrictEqual(['JSON', 'JPG, JPEG']);
-    });
-  });
 });

package/src/uploadInput/uploadButton/getAllowedFileTypes.ts

@@ -1,38 +1,12 @@
 import { FileType } from '../../common';
 
-const parseFileType = (fileType: string): string => {
-  if (fileType?.includes('.')) {
-    return fileType.replace('.', '').toUpperCase();
-  }
-
-  const mimeType = fileType?.split('/');
-  if (mimeType?.length > 1) {
-    let parsedType = mimeType[1];
-
-    if (parsedType.toLocaleLowerCase() === 'jpeg') {
-      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
-    }
-
-    return parsedType.toUpperCase();
-  }
-
-  return fileType;
-};
-
 const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
-  fileTypes.map((fileType: string) => {
-    const splittedFileTypes = fileType?.split(',');
-
-    if (splittedFileTypes?.length > 1) {
-      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
-      return splittedFileTypes
-        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))
-        .map((splittedFileType: string) => parseFileType(splittedFileType))
-        .join(', ');
-    }
-
-    // If `fileType` contains only `format` or `mime` type, parse the type
-    return parseFileType(fileType);
-  });
+  fileTypes.map((fileTypeDefinition: string) =>
+    fileTypeDefinition
+      .split(',')
+      .filter((extension) => !extension.includes('/')) // Filter out mime types
+      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
+      .join(', '),
+  );
 
 export default getAllowedFileTypes;