@transferwise/components 0.0.0-experimental-4c79cff → 0.0.0-experimental-28a3dd5

package/src/button/LegacyButton.story.tsx

@@ -0,0 +1,220 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, fn, expect } from '@storybook/test';
+import { useState } from 'react';
+
+import Button from '.';
+
+const withContainer = (Story: any) => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'initial',
+      justifyContent: 'center',
+      flexFlow: 'column',
+      alignItems: 'center',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Legacy',
+  args: {
+    children: 'Button text',
+    loading: false,
+    type: undefined,
+    onClick: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
+    href: 'https://example.com',
+    as: undefined,
+  },
+  argTypes: {
+    as: {
+      control: {
+        name: 'enum',
+        options: ['button', 'a'],
+      },
+    },
+    type: {
+      type: {
+        name: 'enum',
+        value: ['accent', 'positive', 'negative'],
+      },
+    },
+    size: {
+      type: {
+        name: 'enum',
+        value: ['xs', 'sm', 'md', 'lg'],
+      },
+    },
+    priority: {
+      type: {
+        name: 'enum',
+        value: ['primary', 'secondary', 'tertiary'],
+      },
+    },
+    sentiment: {
+      table: {
+        disable: true,
+      },
+    },
+    iconStart: {
+      table: {
+        disable: true,
+      },
+    },
+    iconEnd: {
+      table: {
+        disable: true,
+      },
+    },
+    avatars: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [withContainer],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {};
+
+export const Secondary: Story = {
+  args: {
+    type: 'accent',
+    priority: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    type: 'accent',
+    priority: 'tertiary',
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    type: 'negative',
+    priority: 'primary',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const Variants: Story = {
+  render: () => {
+    return (
+      <div className="d-flex flex-column p-b-2 align-items-start">
+        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
+          <Button type="accent" priority="primary">
+            Primary Accent
+          </Button>
+          <Button type="accent" priority="secondary">
+            Secondary Accent
+          </Button>
+          <Button type="accent" priority="tertiary">
+            Tertiary Accent
+          </Button>
+        </div>
+        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
+          <Button type="positive" priority="primary">
+            Primary Positive
+          </Button>
+          <Button type="positive" priority="secondary">
+            Secondary Accent
+          </Button>
+        </div>
+        <div className="d-flex flex-row flex- p-b-2" style={{ gap: 'var(--size-16)' }}>
+          <Button type="negative" priority="primary">
+            Primary Negative
+          </Button>
+          <Button type="negative" priority="secondary">
+            Secondary Negative
+          </Button>
+        </div>
+        <div className="d-flex flex-row p-b-1" style={{ gap: 'var(--size-16)' }}>
+          <Button type="accent" priority="primary" disabled>
+            Button Disabled
+          </Button>
+          <Button type="accent" priority="secondary" disabled>
+            Button Disabled
+          </Button>
+          <Button type="accent" priority="tertiary" disabled>
+            Button Disabled
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+export const Focused: Story = {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await expect(button).toHaveTextContent('Focused!');
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [focused, setFocused] = useState(false);
+
+    return (
+      <Button {...args} onFocus={() => setFocused(true)}>
+        {focused ? 'Focused!' : 'Button text'}
+      </Button>
+    );
+  },
+};
+
+export const SocialMedia: Story = {
+  render: () => {
+    return (
+      <>
+        <div className="m-b-2">
+          <button type="button" className="btn btn-google">
+            Login with Google
+          </button>
+        </div>
+        <div className="m-b-2">
+          <button type="button" className="btn btn-facebook">
+            Login with Facebook
+          </button>
+        </div>
+        <div className="m-b-2">
+          <button type="button" className="btn btn-lg btn-facebook">
+            Large Button
+          </button>
+        </div>
+        <div className="m-b-2">
+          <button type="button" className="btn btn-block btn-facebook">
+            Block Button
+          </button>
+        </div>
+        <div className="m-b-2">
+          <button type="button" className="btn btn-lg btn-block btn-facebook">
+            Large Block Button
+          </button>
+        </div>
+      </>
+    );
+  },
+};

package/src/button/LegacyButton.tsx

@@ -0,0 +1,160 @@
+import { clsx } from 'clsx';
+import { ElementType, forwardRef, MouseEvent } from 'react';
+import { useIntl } from 'react-intl';
+
+import {
+  Size,
+  ControlType,
+  Priority,
+  ControlTypeAccent,
+  ControlTypeNegative,
+  ControlTypePositive,
+  PriorityPrimary,
+  PrioritySecondary,
+  PriorityTertiary,
+  SizeExtraSmall,
+  SizeSmall,
+  SizeMedium,
+  SizeLarge,
+} from '../common';
+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';
+
+/** @deprecated */
+type DeprecatedSizes = SizeExtraSmall;
+
+type CommonProps = {
+  v2?: false;
+  block?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
+  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
+  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
+  htmlType?: 'submit' | 'reset' | 'button';
+};
+
+type ButtonProps = CommonProps &
+  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
+    as?: 'button';
+  };
+
+type AnchorProps = CommonProps &
+  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
+    as?: 'a';
+    href?: string;
+  };
+
+export type LegacyButtonProps = ButtonProps | AnchorProps;
+
+/**
+ * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
+ */
+const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
+  (
+    {
+      as: component = 'button',
+      block = false,
+      children,
+      className,
+      disabled,
+      loading = false,
+      priority = Priority.PRIMARY,
+      size = Size.MEDIUM,
+      type = ControlType.ACCENT,
+      onClick,
+      ...rest
+    }: LegacyButtonProps,
+    ref,
+  ) => {
+    const intl = useIntl();
+
+    logDeprecationNotices({ size, type });
+
+    const newType = establishNewType(type);
+    const newPriority = establishNewPriority(priority, type);
+
+    const classes = clsx(
+      `btn btn-${size}`,
+      `np-btn np-btn-${size}`,
+      {
+        'btn-loading': loading,
+        'btn-block np-btn-block': block,
+        disabled,
+      },
+      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      typeClassMap[newType],
+      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      priorityClassMap[newPriority],
+      className,
+    );
+
+    function processIndicatorSize() {
+      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
+    }
+
+    const Element = (component as ElementType) ?? 'button';
+    let props;
+
+    if (Element === 'button') {
+      const { htmlType = 'button', ...restProps } = rest as ButtonProps;
+      props = {
+        ...restProps,
+        disabled,
+        'aria-disabled': loading,
+        type: htmlType,
+      };
+    } else {
+      props = {
+        ...rest,
+        'aria-disabled': loading,
+      } as AnchorProps;
+    }
+
+    /**
+     * Ensures that the button cannot be activated in loading or disabled mode,
+     * when `aria-disabled` might be used over the `disabled` HTML attribute
+     */
+    const handleClick =
+      (handler: LegacyButtonProps['onClick']) =>
+      (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {
+        if (disabled || loading) {
+          event.preventDefault();
+        } else if (typeof handler === 'function') {
+          handler(event);
+        }
+      };
+
+    return (
+      <Element
+        ref={ref as React.Ref<ButtonReferenceType>}
+        className={classes}
+        onClick={handleClick(onClick)}
+        {...props}
+        aria-live={loading ? 'polite' : 'off'}
+        aria-busy={loading}
+        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}
+      >
+        {children}
+        {loading && (
+          <ProcessIndicator
+            size={processIndicatorSize()}
+            className="btn-loader"
+            data-testid="ButtonProgressIndicator"
+          />
+        )}
+      </Element>
+    );
+  },
+);
+
+export default LegacyButton;

package/src/button/index.ts

@@ -1,3 +1,2 @@
-export { default } from './Button';
-
-export type { Props as ButtonProps } from './Button';
+export { default } from './Button.resolver';
+export type { ButtonProps } from './Button.resolver';

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/field/Field.story.tsx

@@ -12,7 +12,7 @@ import Info from '../info';
 
 export default {
   component: Field,
-  title: 'Field',
+  title: 'Forms/Field',
   tags: ['autodocs'],
   argTypes: {
     messageIconLabel: {

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -9,10 +9,9 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
       <button
-        aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
-        class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
+        class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
         style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
         type="button"
       >

package/src/i18n/ja.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
   "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
   "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
-  "neptune.UploadButton.maximumFiles": "最大ファイル数：{maxFiles}個",
   "neptune.UploadButton.uploadFile": "ファイルをアップロードする",
   "neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
   "neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",

package/src/i18n/pt.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
   "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
   "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
-  "neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
   "neptune.UploadButton.uploadFile": "Enviar arquivo",
   "neptune.UploadButton.uploadFiles": "Enviar arquivos",
   "neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",

package/src/i18n/ru.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Все типы файлов",
   "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
   "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
-  "neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Загрузить файл",
   "neptune.UploadButton.uploadFiles": "Загрузить файлы",
   "neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",

package/src/i18n/zh-HK.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "所有檔案類型",
   "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
   "neptune.UploadButton.instructions": "{fileTypes}，小於{size}MB",
-  "neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
   "neptune.UploadButton.uploadFile": "上載檔案",
   "neptune.UploadButton.uploadFiles": "上載檔案",
   "neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",

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