@transferwise/components 0.0.0-experimental-1f90331 → 0.0.0-experimental-db4013c

package/src/drawer/Drawer.spec.tsx

@@ -0,0 +1,93 @@
+import { render, screen, userEvent, mockMatchMedia } from '../test-utils';
+import { Position } from '../common';
+
+import Drawer from './Drawer';
+
+jest.mock('../common/DOMOperations');
+mockMatchMedia();
+
+describe('Drawer', () => {
+  const renderedComponent = (props: React.ComponentProps<typeof Drawer>) =>
+    render(<Drawer {...props} />);
+
+  const props = {
+    open: true,
+    onClose: jest.fn(),
+    headerTitle: 'Drawer Title',
+    footerContent: <div>Footer Content</div>,
+    children: <p>Drawer Content</p>,
+    className: 'drawer-class',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the Drawer component', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('renders the header title', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+  });
+
+  it('renders the footer content', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Footer Content')).toBeInTheDocument();
+  });
+
+  it('renders the children content', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Drawer Content')).toBeInTheDocument();
+  });
+
+  it('passes through the className prop', () => {
+    renderedComponent({ ...props, className: 'drawer-class' });
+    expect(screen.getByRole('dialog')).toHaveClass('drawer-class');
+  });
+
+  it('calls onClose when the close button is clicked', async () => {
+    renderedComponent(props);
+    await userEvent.click(screen.getByLabelText('Close'));
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose if the dimmer is clicked', async () => {
+    render(<Drawer {...props} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClose if the drawer content is clicked', async () => {
+    render(<Drawer {...props}>Drawer Content</Drawer>);
+    await userEvent.click(screen.getByText('Drawer Content'));
+    expect(props.onClose).not.toHaveBeenCalled();
+  });
+
+  it('does not render the Drawer when open is false', () => {
+    renderedComponent({ ...props, open: false });
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('renders the Drawer with the correct aria-labelledby attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-labelledby');
+  });
+
+  it('renders the Drawer with the correct position', () => {
+    renderedComponent({ ...props, position: Position.LEFT });
+    expect(screen.getByRole('dialog').parentElement).toHaveClass('sliding-panel--open-left');
+  });
+
+  it('renders the Drawer with the correct role attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('role', 'dialog');
+  });
+
+  it('renders the Drawer with the correct aria-modal attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+  });
+});

package/src/index.ts

@@ -96,6 +96,17 @@ 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
@@ -196,6 +207,7 @@ 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,7 +531,8 @@ 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) * 2 - var(--np-avatar-offset));
+  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)));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {

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, within } from '@storybook/test';
+import { userEvent } from '@storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -65,8 +65,8 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => createDelayedPromise(),
-  onDeleteFile: async (id: string | number) => createDelayedPromise(),
+  onUploadFile: async () => createDelayedPromise(),
+  onDeleteFile: async () => createDelayedPromise(),
 };
 
 export const UploadInputWithDescriptionFromProps: Story = {
@@ -268,7 +268,7 @@ export const DeletingTop: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
     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 ({ canvasElement }) => {
+  play: async () => {
     await userEvent.tab();
     await userEvent.tab();
     await userEvent.tab();

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

@@ -38,4 +38,16 @@ 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,12 +1,38 @@
 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((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(', '),
-  );
+  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);
+  });
 
 export default getAllowedFileTypes;

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

@@ -1,59 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,55 +0,0 @@
-// 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>
-`;