@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/src/button/LegacyButton.tsx

@@ -1,177 +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;
-
-  /** Makes the button take up the full width of its container */
-  block?: boolean;
-
-  /**
-   * The `target` attribute for HTML anchor.
-   * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
-   */
-  target?: string;
-  /**
-   * Toggles the disabled state
-   * @default false
-   */
-
-  disabled?: boolean;
-  /**
-   * Toggles the loading state
-   * @default false
-   */
-  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/radio/Radio.rtl.spec.tsx

@@ -1,24 +0,0 @@
-import Avatar, { AvatarType } from '../avatar';
-import { render } from '../test-utils';
-
-import Radio from '.';
-
-jest.mock('../common/hooks');
-
-describe('Radio', () => {
-  const props = {
-    label: 'This is a label',
-    name: 'name',
-    onChange: jest.fn(),
-    checked: false,
-    disabled: false,
-    secondary: '',
-  };
-
-  it('shows the avatar when supplied', () => {
-    expect(
-      render(<Radio {...props} avatar={<Avatar type={AvatarType.INITIALS}>HD</Avatar>} />)
-        .container,
-    ).toMatchSnapshot();
-  });
-});

package/src/radio/Radio.spec.js

@@ -1,76 +0,0 @@
-import { shallow } from 'enzyme';
-
-import Body from '../body';
-import RadioButton from '../common/RadioButton';
-
-import Radio from '.';
-
-jest.mock('../common/hooks');
-
-describe('Radio', () => {
-  let props;
-  let component;
-
-  beforeEach(() => {
-    props = {
-      label: 'hello, i am a radio',
-      name: 'radio name',
-      onChange: jest.fn(),
-      checked: false,
-      disabled: false,
-      secondary: '',
-    };
-    component = shallow(<Radio {...props} />);
-  });
-
-  it('displays the given label', () => {
-    expect(component.find(Body).props().children).toContain(props.label);
-  });
-
-  it('does not render secondary text', () => {
-    expect(component.find('small')).toHaveLength(0);
-  });
-
-  it('has id as label for prop', () => {
-    component.setProps({ id: 'some-id' });
-    expect(component.find('label').prop('htmlFor')).toBe('some-id');
-  });
-
-  it('passes radio button id', () => {
-    component.setProps({ id: 'some-id' });
-    expect(radioButton().prop('id')).toBe('some-id');
-  });
-
-  it('passes radio button name', () => {
-    component.setProps({ name: 'a-name' });
-    expect(radioButton().prop('name')).toBe('a-name');
-  });
-
-  it('passes radio button checked', () => {
-    expect(radioButton().prop('checked')).toBe(false);
-    component.setProps({ checked: true });
-    expect(radioButton().prop('checked')).toBe(true);
-  });
-
-  it('passes radio button change handler', () => {
-    const onChange = jest.fn();
-    component.setProps({ onChange });
-    expect(radioButton().prop('onChange')).toBe(onChange);
-  });
-
-  it('passes radio button disabled', () => {
-    expect(radioButton().prop('disabled')).toBe(false);
-    component.setProps({ disabled: true });
-    expect(radioButton().prop('disabled')).toBe(true);
-  });
-
-  it('displays secondary text when supplied', () => {
-    component.setProps({ secondary: 'additional info' });
-    expect(component.find(Body).last().props().children).toContain('additional info');
-    expect(component.find('.radio').hasClass('radio-lg')).toBe(true);
-  });
-
-  function radioButton() {
-    return component.find(RadioButton);
-  }
-});

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Radio shows the avatar when supplied 1`] = `
-<div>
-  <div
-    class="radio np-radio"
-  >
-    <label
-      class=""
-    >
-      <span
-        class="m-r-2 np-radio-button"
-      >
-        <input
-          class="sr-only"
-          name="name"
-          type="radio"
-          value=""
-        />
-        <span
-          class="tw-radio-button"
-        >
-          <span
-            class="tw-radio-check"
-          />
-        </span>
-      </span>
-      <span
-        class="np-text-body-large np-radio__text"
-      >
-        This is a label
-      </span>
-      <span
-        class="np-radio__avatar m-l-auto"
-      >
-        <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-        >
-          <div
-            class="tw-avatar__content"
-          >
-            HD
-          </div>
-        </div>
-      </span>
-    </label>
-  </div>
-</div>
-`;

package/src/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,30 +0,0 @@
-import { render, screen } from '../test-utils';
-
-import RadioGroup from '.';
-import { Field } from '../field/Field';
-
-describe('RadioGroup', () => {
-  it('has accessible role', () => {
-    render(
-      <RadioGroup
-        name="currency"
-        radios={[{ label: 'USD' }, { label: 'EUR' }]}
-        onChange={() => {}}
-      />,
-    );
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Currency">
-        <RadioGroup
-          name="currency"
-          radios={[{ label: 'USD' }, { label: 'EUR' }]}
-          onChange={() => {}}
-        />
-      </Field>,
-    );
-    expect(screen.getByRole('radiogroup')).toHaveAccessibleName(/^Currency/);
-  });
-});

package/src/radioGroup/RadioGroup.spec.js

@@ -1,90 +0,0 @@
-/* eslint-disable no-console */
-import { shallow } from 'enzyme';
-
-import { Radio, RadioGroup } from '..';
-import Avatar, { AvatarType } from '../avatar';
-
-const props = { onChange: jest.fn(), name: 'radio-group' };
-const avatar = <Avatar type={AvatarType.INITIALS}>HD</Avatar>;
-
-const RADIOS = [
-  {
-    id: 'id-test-0',
-    value: 'value-test0',
-    label: 'Radio1',
-    secondary: 'secondary',
-    disabled: true,
-    avatar,
-  },
-  {
-    id: 'id-test-1',
-    value: 'value-test1',
-    label: 'Radio2',
-    secondary: 'secondary',
-    disabled: false,
-  },
-  {
-    id: 'id-test-2',
-    value: 'value-test2',
-    label: 'Radio3',
-    secondary: 'secondary',
-    disabled: false,
-  },
-];
-
-describe('RadioGroup', () => {
-  it('renders null if no radios are provided', () => {
-    expect(shallow(<RadioGroup radios={[]} {...props} />).isEmptyRender()).toBe(true);
-  });
-
-  it('renders radio options', () => {
-    const component = shallow(<RadioGroup radios={RADIOS} {...props} />);
-    expect(component.find(Radio)).toHaveLength(RADIOS.length);
-
-    const { onChange, ...primitiveProps } = component.find(Radio).at(0).props();
-    expect(primitiveProps).toStrictEqual({
-      id: 'id-test-0',
-      value: 'value-test0',
-      label: 'Radio1',
-      name: 'radio-group',
-      disabled: true,
-      checked: false,
-      secondary: 'secondary',
-      avatar,
-    });
-  });
-
-  it('renders a single radio option, when radios array contains a single element', () => {
-    const component = shallow(<RadioGroup radios={RADIOS.slice(0, 1)} {...props} />);
-    expect(component.find(Radio)).toHaveLength(1);
-
-    const { onChange, ...primitiveProps } = component.find(Radio).at(0).props();
-    expect(primitiveProps).toStrictEqual({
-      id: 'id-test-0',
-      value: 'value-test0',
-      label: 'Radio1',
-      name: 'radio-group',
-      disabled: true,
-      checked: false,
-      secondary: 'secondary',
-      avatar,
-    });
-  });
-
-  it('checks specified radio', () => {
-    const component = shallow(
-      <RadioGroup radios={RADIOS} selectedValue="value-test2" {...props} />,
-    );
-    expect(component.find(Radio)).toHaveLength(RADIOS.length);
-    expect(component.find(Radio).at(2).props().checked).toBeTruthy();
-
-    expect(component.find(Radio).at(0).props().checked).toBeFalsy();
-  });
-
-  it('calls onChange with selected value', () => {
-    const component = shallow(<RadioGroup radios={RADIOS} {...props} />);
-    component.find(Radio).at(2).simulate('change', 'value-test2');
-
-    expect(props.onChange).toHaveBeenCalledWith('value-test2');
-  });
-});