@transferwise/components 0.0.0-experimental-696128b → 0.0.0-experimental-328f2cc

package/src/button/LegacyButton.story.tsx

@@ -1,225 +0,0 @@
-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,
-      },
-    },
-    'data-testid': {
-      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

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