@transferwise/components 45.12.0 → 45.14.0

package/src/switch/Switch.spec.js

@@ -0,0 +1,85 @@
+import KeyCodes from '../common/keyCodes';
+import { render, fireEvent, screen } from '../test-utils';
+
+import Switch from './Switch';
+
+const props = {
+  'aria-label': 'a label',
+  checked: true,
+  className: 'a-class-name',
+  id: 'id',
+  onClick: jest.fn(),
+};
+
+describe('Switch', () => {
+  it('renders component when checked', () => {
+    const { container } = render(
+      <Switch
+        aria-label={props['aria-label']}
+        checked={props.checked}
+        className={props.className}
+        id={props.id}
+        onClick={props.onClick}
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders component associated with label', () => {
+    render(
+      <>
+        <label id="labelID" htmlFor={props.id}>
+          A switch with a label
+        </label>
+        <Switch
+          aria-labelledby="labelID"
+          checked={props.checked}
+          className={props.className}
+          id={props.id}
+          onClick={props.onClick}
+        />
+        ,
+      </>,
+    );
+    expect(screen.getByLabelText('A switch with a label')).toBeInTheDocument();
+  });
+
+  it('renders component when unchecked', () => {
+    const { container } = render(
+      <Switch
+        checked={false}
+        className={props.className}
+        id={props.id}
+        aria-label={props['aria-label']}
+        onClick={props.onClick}
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('calls onClick when user press space key', () => {
+    render(
+      <Switch
+        checked={props.checked}
+        className={props.className}
+        id={props.id}
+        aria-label={props['aria-label']}
+        onClick={props.onClick}
+      />,
+    );
+
+    const input = screen.getAllByRole('checkbox')[0];
+    fireEvent.keyDown(input, { key: '33', keyCode: KeyCodes.ENTER });
+    expect(props.onClick).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, { key: '32', keyCode: KeyCodes.SPACE });
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call onClick if disabled', () => {
+    const mockCallback = jest.fn();
+    render(<Switch {...props} disabled onClick={mockCallback} />);
+    const input = screen.getByRole('switch');
+    fireEvent.click(input);
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+});

package/src/switch/Switch.story.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+import Switch from './Switch';
+
+export default {
+  component: Switch,
+  title: 'Actions/Switch',
+};
+
+export const Basic = () => {
+  const [checked1, setCheck1] = useState(false);
+  const [checked2, setCheck2] = useState(false);
+
+  return (
+    <div className="d-flex flex-column">
+      <label id="labelID" htmlFor="switchId">
+        A switch with a label
+      </label>
+      <Switch
+        checked={checked1}
+        className="a-class-name"
+        aria-labelledby="labelID"
+        id="switchId"
+        onClick={() => setCheck1(!checked1)}
+      />
+
+      <Switch
+        checked={checked2}
+        className="a-class-name m-t-4"
+        aria-label="I'm a switch without label"
+        onClick={() => setCheck2(!checked2)}
+      />
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  const [checked, setCheck] = useState(false);
+
+  return (
+    <div className="d-flex flex-column">
+      <Switch
+        checked={checked}
+        disabled
+        className="a-class-name"
+        aria-labelledby="labelID"
+        id="switchId"
+        onClick={() => setCheck(!checked)}
+      />
+
+      <Switch
+        checked={!checked}
+        disabled
+        className="a-class-name"
+        aria-labelledby="labelID"
+        id="switchId"
+        onClick={() => setCheck(!checked)}
+      />
+    </div>
+  );
+};

package/src/switch/Switch.tsx

@@ -0,0 +1,90 @@
+import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
+import { useTheme } from '@wise/components-theming';
+import classnames from 'classnames';
+import { KeyboardEventHandler, MouseEvent, ReactElement } from 'react';
+
+import { CommonProps } from '../common';
+import KeyCodes from '../common/keyCodes';
+import { logActionRequiredIf } from '../utilities';
+
+type Props = CommonProps & {
+  /** Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null) */
+  'aria-label'?: string;
+  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
+  'aria-labelledby'?: string;
+  /** Whether the switch is checked or not */
+  checked?: boolean;
+  disabled?: boolean;
+  /** ID to apply to the switch container */
+  id?: string;
+  /** Function called when the switch is toggled */
+  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;
+};
+
+const Switch = (props: Props): ReactElement => {
+  const { isModern } = useTheme();
+  const { checked, className, id, onClick, disabled } = props;
+
+  const handleKeyDown: KeyboardEventHandler = (event) => {
+    if (event.code === '32' || event.keyCode === KeyCodes.SPACE) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  const returnIcon = () => {
+    if (isModern) {
+      return <span className="np-switch--thumb" />;
+    }
+
+    if (checked) {
+      return (
+        <span className="np-switch--thumb">
+          <CheckCircleFill size={24} />
+        </span>
+      );
+    }
+    return (
+      <span className="np-switch--thumb">
+        <CrossCircleFill size={24} />
+      </span>
+    );
+  };
+
+  const ariaLabel = props['aria-label'];
+  const ariaLabelledby = ariaLabel ? undefined : props['aria-labelledby'];
+
+  logActionRequiredIf(
+    'Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.',
+    !ariaLabel && !ariaLabelledby,
+  );
+
+  return (
+    <span
+      className={classnames(
+        'np-switch',
+
+        {
+          'np-switch--unchecked': !checked,
+          'np-switch--checked': checked,
+          disabled: disabled,
+        },
+        className,
+      )}
+      tabIndex={0}
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      id={id}
+      aria-disabled={disabled}
+      onClick={!disabled ? onClick : undefined}
+      onKeyDown={!disabled ? handleKeyDown : undefined}
+    >
+      {returnIcon()}
+      <input type="checkbox" checked={checked} readOnly />
+    </span>
+  );
+};
+
+export default Switch;

package/src/switch/__snapshots__/Switch.spec.js.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch renders component when checked 1`] = `
+<div>
+  <span
+    aria-checked="true"
+    aria-label="a label"
+    class="np-switch np-switch--checked a-class-name"
+    id="id"
+    role="switch"
+    tabindex="0"
+  >
+    <span
+      class="np-switch--thumb"
+    >
+      <span
+        aria-hidden="true"
+        class="tw-icon tw-icon-check-circle-fill "
+        data-testid="check-circle-fill-icon"
+        role="presentation"
+      >
+        <svg
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M12 22.286c5.68 0 10.286-4.605 10.286-10.286C22.286 6.32 17.68 1.714 12 1.714 6.32 1.714 1.714 6.32 1.714 12c0 5.68 4.605 10.286 10.286 10.286Zm-1.32-5.397 7.712-7.711-1.212-1.213-7.109 7.109-3.465-3.466-1.212 1.212 4.068 4.069a.861.861 0 0 0 1.219 0Z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </span>
+    <input
+      checked=""
+      readonly=""
+      type="checkbox"
+    />
+  </span>
+</div>
+`;
+
+exports[`Switch renders component when unchecked 1`] = `
+<div>
+  <span
+    aria-checked="false"
+    aria-label="a label"
+    class="np-switch np-switch--unchecked a-class-name"
+    id="id"
+    role="switch"
+    tabindex="0"
+  >
+    <span
+      class="np-switch--thumb"
+    >
+      <span
+        aria-hidden="true"
+        class="tw-icon tw-icon-cross-circle-fill "
+        data-testid="cross-circle-fill-icon"
+        role="presentation"
+      >
+        <svg
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M1.714 12C1.714 6.344 6.343 1.716 12 1.716S22.286 6.343 22.286 12c0 5.657-4.629 10.285-10.286 10.285S1.714 17.658 1.714 12.001ZM12 10.8l4.243-4.244 1.2 1.2L13.2 12l4.243 4.243-1.2 1.2L12 13.2l-4.243 4.243-1.2-1.2L10.8 12 6.557 7.756l1.2-1.2L12 10.8Z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </span>
+    <input
+      readonly=""
+      type="checkbox"
+    />
+  </span>
+</div>
+`;

package/src/switch/index.ts

@@ -0,0 +1 @@
+export { default } from './Switch';

package/src/switchOption/SwitchOption.spec.js

@@ -0,0 +1,128 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FastFlag } from '@transferwise/icons';
+
+import SwitchOption from '.';
+
+describe('SwitchOption', () => {
+  it('renders the option with the provided content', () => {
+    render(
+      <SwitchOption
+        media={<FastFlag data-testid="fast-flag" />}
+        id="id"
+        title="title"
+        aria-label="title"
+        content="content"
+        checked={false}
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText('title')).toBeInTheDocument();
+    expect(screen.getByText('content')).toBeInTheDocument();
+    expect(screen.getByTestId('fast-flag')).toBeInTheDocument();
+    expect(screen.getAllByRole('checkbox')[0]).toBeInTheDocument();
+  });
+
+  it('checks the switch when the user interacts with it', () => {
+    // Uses first in array to bypass the fact theres a hidden readonly input
+    const getSwitch = () => screen.getAllByRole('checkbox')[0];
+
+    const mockOnChange = jest.fn();
+
+    const { rerender } = render(
+      <SwitchOption
+        id="id"
+        title="title"
+        aria-label="title"
+        content="content"
+        checked={false}
+        onChange={mockOnChange}
+      />,
+    );
+
+    expect(getSwitch()).toBeInTheDocument();
+    expect(getSwitch()).not.toBeChecked();
+
+    expect(mockOnChange).not.toHaveBeenCalled();
+
+    fireEvent.click(getSwitch());
+
+    expect(mockOnChange).toHaveBeenCalledWith(true);
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <SwitchOption
+        id="id"
+        title="title"
+        aria-label="title"
+        content="content"
+        checked
+        onChange={mockOnChange}
+      />,
+    );
+
+    expect(getSwitch()).toBeChecked();
+
+    fireEvent.keyDown(getSwitch(), {
+      keyCode: 32,
+      code: 'Space',
+    });
+
+    expect(mockOnChange).toHaveBeenLastCalledWith(false);
+    expect(mockOnChange).toHaveBeenCalledTimes(2);
+
+    rerender(
+      <SwitchOption
+        id="id"
+        title="title"
+        aria-label="title"
+        content="content"
+        checked={false}
+        onChange={mockOnChange}
+      />,
+    );
+
+    expect(getSwitch()).not.toBeChecked();
+  });
+
+  it('fires the onClick handler once regardless of where you click on the option', () => {
+    const mockOnChange = jest.fn();
+
+    render(
+      <SwitchOption
+        id="id"
+        title="title"
+        aria-label="title"
+        content="content"
+        onChange={mockOnChange}
+      />,
+    );
+
+    expect(mockOnChange).toHaveBeenCalledTimes(0);
+
+    fireEvent.click(screen.queryByText('title'));
+
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.queryByText('content'));
+
+    expect(mockOnChange).toHaveBeenCalledTimes(2);
+
+    fireEvent.click(screen.getAllByRole('checkbox')[0]);
+
+    expect(mockOnChange).toHaveBeenCalledTimes(3);
+  });
+
+  it('renders aligned with container content', () => {
+    render(
+      <SwitchOption
+        id="id"
+        title="title"
+        aria-label="title"
+        content="content"
+        isContainerAligned
+      />,
+    );
+    expect(document.querySelector('.np-option__container-aligned')).toBeInTheDocument();
+  });
+});

package/src/switchOption/SwitchOption.story.tsx

@@ -0,0 +1,74 @@
+import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
+import { FastFlag as FastFlagIcon } from '@transferwise/icons';
+import { useState } from 'react';
+
+import { Nudge } from '..';
+
+import SwitchOption from './SwitchOption';
+
+export default {
+  component: SwitchOption,
+  title: 'Option/SwitchOption',
+};
+
+const Template = () => {
+  const [checked, setChecked] = useState(false);
+  const title = text('title', 'Switch option');
+  const content = text('content', 'Normally, the button and icon are vertically centered.');
+  const disabled = boolean('disabled', false);
+  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
+  const isContainerAligned = boolean('isContainerAligned', false);
+
+  return (
+    <SwitchOption
+      media={<FastFlagIcon />}
+      title={title}
+      content={content}
+      id="id"
+      checked={checked}
+      complex={false}
+      disabled={disabled}
+      showMediaAtAllSizes={showMediaAtAllSizes}
+      isContainerAligned={isContainerAligned}
+      aria-label={title}
+      onChange={setChecked}
+    />
+  );
+};
+
+export const Basic = () => {
+  return <Template />;
+};
+
+export const Multiple = () => {
+  return (
+    <>
+      <Template />
+      <Template />
+      <Template />
+    </>
+  );
+};
+
+export const WithContainerContent = () => {
+  return (
+    <>
+      <h2 className="m-b-2">Choose how to pay</h2>
+      <Template />
+      <Template />
+      <Template />
+      <div>
+        <Nudge
+          className="m-t-2"
+          mediaName="globe"
+          title="Text that is no longer than two lines."
+          link="Link"
+          href="#"
+          onClick={action('action clicked')}
+          onDismiss={action('dismissed')}
+        />
+      </div>
+    </>
+  );
+};

package/src/switchOption/SwitchOption.tsx

@@ -0,0 +1,81 @@
+import { MouseEvent, ReactChild, ReactElement } from 'react';
+
+import Option from '../common/Option';
+import Switch from '../switch';
+
+type Props = {
+  checked?: boolean;
+  complex?: boolean;
+  content?: ReactChild;
+  disabled?: boolean;
+  showMediaCircle?: boolean;
+  showMediaAtAllSizes?: boolean;
+  isContainerAligned?: boolean;
+  id?: string;
+  media?: ReactChild;
+  onChange: (newValue: boolean) => void;
+  title: ReactChild;
+  'aria-label': string;
+};
+
+const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    }
+  }
+};
+
+const SwitchOption = ({
+  checked,
+  complex,
+  content,
+  disabled,
+  id,
+  media,
+  onChange,
+  title,
+  showMediaCircle,
+  showMediaAtAllSizes,
+  isContainerAligned,
+  'aria-label': ariaLabel,
+}: Props): ReactElement => {
+  const sharedProps = {
+    media,
+    title,
+    content,
+    complex,
+    disabled,
+    showMediaCircle,
+    showMediaAtAllSizes,
+    isContainerAligned,
+  };
+  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {
+    stopPropagation(event);
+    if (disabled) {
+      return;
+    }
+
+    onChange(!checked);
+  };
+
+  return (
+    <Option
+      {...sharedProps}
+      button={
+        <Switch
+          id={id}
+          checked={checked}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          onClick={toggle}
+        />
+      }
+      onClick={toggle}
+    />
+  );
+};
+
+export default SwitchOption;

package/src/switchOption/index.ts

@@ -0,0 +1 @@
+export { default } from './SwitchOption';

package/src/tabs/Tab.js

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { forwardRef, useEffect, useRef } from 'react';
+
+const Tab = forwardRef(
+  (
+    { children, id, disabled, panelId, selected, onKeyDown, onClick, style, focusTab },
+    reference,
+  ) => {
+    const firstUpdate = useRef(true);
+
+    const checkFocus = () => {
+      if (firstUpdate.current) {
+        firstUpdate.current = false;
+        return;
+      }
+
+      if (selected && focusTab) {
+        focusTab();
+      }
+    };
+
+    useEffect(() => {
+      checkFocus();
+    }, [selected]);
+
+    return (
+      <li
+        ref={reference}
+        className={classNames(
+          'tabs__tab',
+          selected ? 'np-text-body-large-bold' : 'np-text-body-large',
+          {
+            'tabs__tab--selected': selected,
+            clickable: !disabled,
+            disabled: disabled,
+          },
+        )}
+        role="tab"
+        id={id}
+        aria-selected={selected ? 'true' : 'false'}
+        aria-disabled={disabled ? 'true' : 'false'}
+        aria-controls={disabled ? null : panelId}
+        tabIndex="0"
+        style={style}
+        onKeyDown={disabled ? null : onKeyDown}
+        onClick={onClick}
+      >
+        <span className="tabs__tab__content">{children}</span>
+      </li>
+    );
+  },
+);
+
+Tab.defaultProps = {
+  disabled: false,
+  selected: false,
+  onClick: null,
+  style: null,
+  focusTab: null,
+};
+
+Tab.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+  selected: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  panelId: PropTypes.string.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  style: PropTypes.shape({ width: PropTypes.string }),
+  focusTab: PropTypes.func,
+};
+
+export default Tab;

package/src/tabs/TabList.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const TabList = ({ children }) => {
+  return (
+    <ul className="tabs__tab-list" role="tablist">
+      {children}
+    </ul>
+  );
+};
+
+TabList.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+};
+
+export default TabList;