@transferwise/components 0.0.0-experimental-53c607c → 0.0.0-experimental-b002e6f

package/src/button/LegacyButton.tsx

@@ -1,161 +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';
-
-/** @deprecated */
-type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
-
-/** @deprecated */
-type DeprecatedSizes = SizeExtraSmall;
-
-type CommonProps = {
-  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 &
-  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
-    as?: 'button';
-  };
-
-export type AnchorProps = CommonProps &
-  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a';
-    href?: string;
-  };
-
-export type LegacyButtonProps = ButtonProps | AnchorProps;
-
-export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-
-/**
- * @deprecated make sure you use new Button component via `<Button useNewButton .. />` 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/definitionList/DefinitionList.spec.js

@@ -1,91 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import { DefinitionList } from '..';
-import { Layout } from '../common';
-
-const {
-  VERTICAL_TWO_COLUMN,
-  VERTICAL_ONE_COLUMN,
-  HORIZONTAL_LEFT_ALIGNED,
-  HORIZONTAL_RIGHT_ALIGNED,
-  HORIZONTAL_JUSTIFIED,
-} = Layout;
-
-describe('DefinitionList', () => {
-  const someDefinitions = () => [{ title: 'First', value: 'first value', key: 'first' }, null];
-
-  const withLayout = (layout) =>
-    shallow(<DefinitionList layout={layout} definitions={someDefinitions()} />);
-
-  const listHasClass = (layout, className) =>
-    withLayout(layout).find('dl.tw-definition-list').hasClass(className);
-
-  const valueHasClass = (layout, className) =>
-    withLayout(layout).find('dl.tw-definition-list dd').hasClass(className);
-
-  it('applies correct flex class', () => {
-    const colClass = 'flex-column';
-
-    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(true);
-  });
-
-  it('applies correct class for vertical two-column layout', () => {
-    const colClass = 'tw-definition-list--columns flex-column flex-row--sm';
-
-    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(false);
-  });
-
-  it('applies correct class for horiztonal layouts', () => {
-    const rowClass = 'tw-definition-list--horizontal flex-column';
-
-    expect(listHasClass(VERTICAL_TWO_COLUMN, rowClass)).toBe(false);
-    expect(listHasClass(VERTICAL_ONE_COLUMN, rowClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, rowClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, rowClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, rowClass)).toBe(true);
-  });
-
-  it('applies correct class for alignment', () => {
-    expect(valueHasClass(VERTICAL_TWO_COLUMN, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(VERTICAL_ONE_COLUMN, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_LEFT_ALIGNED, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_RIGHT_ALIGNED, 'text-sm-right')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_JUSTIFIED, 'text-sm-justify')).toBe(true);
-  });
-
-  it('has muted text class on title and value when muted flag is passed', () => {
-    const muted = shallow(<DefinitionList muted definitions={someDefinitions()} />);
-    const notMuted = shallow(<DefinitionList definitions={someDefinitions()} />);
-
-    expect(muted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(true);
-    expect(notMuted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(false);
-  });
-
-  it('shows action button when one is passed in', () => {
-    const buttonSpy = jest.fn();
-
-    const definitionList = mount(
-      <DefinitionList
-        definitions={[
-          {
-            title: 'Name',
-            value: 'Jenkins',
-            key: '1',
-            action: { label: 'A button', onClick: buttonSpy },
-          },
-        ]}
-      />,
-    );
-
-    definitionList.find('button').simulate('click');
-    expect(buttonSpy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/slidingPanel/SlidingPanel.spec.js

@@ -1,56 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import SlidingPanel from './SlidingPanel';
-
-describe('SlidingPanel', () => {
-  let component;
-  const props = {
-    open: true,
-    position: 'left',
-    children: null,
-    className: undefined,
-    slidingPanelPositionFixed: false,
-    showSlidingPanelBorder: false,
-    testId: undefined,
-  };
-
-  it('renders with right props', () => {
-    component = mount(<SlidingPanel {...props} />);
-    expect(component.find(SlidingPanel)).toHaveLength(1);
-    expect(component.find(SlidingPanel).props()).toStrictEqual({ ...props });
-  });
-
-  it('renders CSSTransition with right props', () => {
-    component = shallow(<SlidingPanel {...props} />);
-
-    expect(cssTransition()).toHaveLength(1);
-
-    expect(cssTransition().props()).toEqual({
-      className: 'sliding-panel sliding-panel--open-left',
-      children: null,
-    });
-  });
-
-  it('adds fixed class', () => {
-    component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
-    );
-  });
-
-  it('adds border classes if showSlidingPanelBorder is set to true', () => {
-    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
-    );
-    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
-    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
-
-    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
-    );
-  });
-
-  const cssTransition = () => component.find('div');
-});