@transferwise/components 45.12.0 → 45.13.0

package/src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.spec.js

@@ -0,0 +1,56 @@
+import { sortArrayByProperty } from './sortArrayByProperty';
+
+const arrayToSort = [
+  {
+    iso3: 'BBB',
+    phone: '+2',
+  },
+  {
+    iso3: 'CCC',
+    phone: '+1',
+  },
+  {
+    iso3: 'AAA',
+    phone: '+3',
+  },
+];
+
+const arraySortedByISO3 = [
+  {
+    iso3: 'AAA',
+    phone: '+3',
+  },
+  {
+    iso3: 'BBB',
+    phone: '+2',
+  },
+  {
+    iso3: 'CCC',
+    phone: '+1',
+  },
+];
+
+const arraySortedByPhone = [
+  {
+    iso3: 'CCC',
+    phone: '+1',
+  },
+  {
+    iso3: 'BBB',
+    phone: '+2',
+  },
+  {
+    iso3: 'AAA',
+    phone: '+3',
+  },
+];
+
+describe('sortArrayByPropery', () => {
+  it('should sort the array based on property phone', () => {
+    expect(sortArrayByProperty(arrayToSort, 'phone')).toStrictEqual(arraySortedByPhone);
+  });
+
+  it('should sort the array based on property iso3', () => {
+    expect(sortArrayByProperty(arrayToSort, 'iso3')).toStrictEqual(arraySortedByISO3);
+  });
+});

package/src/popover/Popover.css

@@ -0,0 +1 @@
+.np-theme-personal .np-popover__container{border-radius:16px;border-radius:var(--radius-medium)}.np-popover__container .np-popover__content{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14)}.np-popover__container .np-popover__content p:last-child{margin-bottom:0}.np-popover__container.np-panel .np-popover__content{max-width:276px;padding:16px 24px;padding:var(--size-16) var(--size-24)}.np-theme-personal .np-popover__container.np-panel .np-popover__content{padding:24px;padding:var(--size-24)}.np-popover__container.np-bottom-sheet .np-popover__title{color:#37517e;color:var(--color-content-primary);font-size:1.625rem;font-size:var(--font-size-26);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;letter-spacing:-.02em;line-height:1.2;line-height:var(--line-height-title);line-height:122%;margin:0}.np-popover__container.np-bottom-sheet .np-popover__title+p{margin-top:8px;margin-top:var(--size-8)}.np-popover__container.np-bottom-sheet .np-popover__content{padding:32px 24px;padding:var(--size-32) var(--size-24)}

package/src/popover/Popover.js

@@ -0,0 +1,97 @@
+import { useTheme } from '@wise/components-theming';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { useRef, useState, cloneElement } from 'react';
+
+import { Position, Typography } from '../common';
+import ResponsivePanel from '../common/responsivePanel';
+import Title from '../title';
+import { logActionRequiredIf } from '../utilities';
+
+const Popover = ({ children, className, content, preferredPlacement, title }) => {
+  logActionRequired({ preferredPlacement });
+  const anchorReference = useRef(null);
+  const [open, setOpen] = useState(false);
+  const { isModern } = useTheme();
+
+  const onClose = () => setOpen(false);
+
+  return (
+    <span className={classnames('np-popover', className)}>
+      <span ref={anchorReference} className="d-inline-block">
+        {cloneElement(children, {
+          onClick: () => {
+            if (children?.props?.onClick) {
+              children.props.onClick();
+            }
+            setOpen(!open);
+          },
+        })}
+      </span>
+      <ResponsivePanel
+        open={open}
+        anchorRef={anchorReference}
+        position={deprecatedPlacements[preferredPlacement] || preferredPlacement}
+        arrow
+        className="np-popover__container"
+        onClose={onClose}
+      >
+        <div
+          className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
+          aria-hidden={!open}
+          role="tooltip"
+        >
+          {title && (
+            <Title type={Typography.TITLE_BODY} className="m-b-1">
+              {title}
+            </Title>
+          )}
+          {content}
+        </div>
+      </ResponsivePanel>
+    </span>
+  );
+};
+
+const logActionRequired = ({ preferredPlacement }) => {
+  logActionRequiredIf(
+    `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`,
+    deprecatedPlacements[preferredPlacement],
+  );
+};
+
+Popover.defaultProps = {
+  className: undefined,
+  preferredPlacement: Position.RIGHT,
+  title: undefined,
+};
+
+Popover.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  /**
+   * `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
+   * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
+   */
+  preferredPlacement: PropTypes.oneOf([
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'left-top',
+    'right-top',
+    'bottom-right',
+    'bottom-left',
+  ]),
+  title: PropTypes.node,
+};
+
+const deprecatedPlacements = {
+  [Position.BOTTOM_LEFT]: Position.BOTTOM,
+  [Position.BOTTOM_RIGHT]: Position.BOTTOM,
+  [Position.LEFT_TOP]: Position.TOP,
+  [Position.RIGHT_TOP]: Position.TOP,
+};
+
+export default Popover;

package/src/popover/Popover.less

@@ -0,0 +1,40 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+
+// This can't be wrapped in np-popover because styles won't get applied to bottomsheet
+//which is opened in a portal hence it won't be contained in np-popover.
+
+.np-popover__container {
+  .np-theme-personal & {
+    border-radius: var(--radius-medium);
+  }
+
+  .np-popover__content {
+    color: var(--color-content-secondary);
+    font-size: var(--font-size-14);
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &.np-panel {
+    .np-popover__content {
+      padding: var(--size-16) var(--size-24);
+      max-width: 276px;
+
+      .np-theme-personal & {
+        padding: var(--size-24);
+      }
+    }
+  }
+
+  &.np-bottom-sheet {
+    .np-popover__title {
+      .np-text-title-section();
+    }
+
+    .np-popover__content {
+      padding: var(--size-32) var(--size-24);
+    }
+  }
+}

package/src/popover/Popover.spec.js

@@ -0,0 +1,119 @@
+import { Breakpoint, Position } from '../common';
+import { render, screen, userEvent } from '../test-utils';
+
+import Popover from './Popover';
+
+jest.mock('react-transition-group', () => ({
+  __esModule: true,
+  CSSTransition: (props) => (props.in ? props.children : null),
+}));
+
+jest.mock(
+  '../dimmer',
+  () =>
+    function ({ open, children }) {
+      return open ? <div className="dimmer">{children}</div> : null;
+    },
+);
+
+describe('Popover', () => {
+  const props = {
+    arrow: true,
+    content: 'content',
+    position: Position.BOTTOM,
+    title: 'title',
+  };
+
+  let container;
+  let rerender;
+
+  describe('on desktop', () => {
+    it('renders when is open', async () => {
+      render(
+        <Popover {...props}>
+          <button type="button">Open</button>
+        </Popover>,
+      );
+
+      userEvent.click(screen.getByText('Open'));
+
+      await waitForPanel();
+      expect(getPanel()).toMatchSnapshot();
+    });
+
+    it('renders title', async () => {
+      ({ container, rerender } = render(
+        <Popover {...props}>
+          <button type="button">Open</button>
+        </Popover>,
+      ));
+
+      userEvent.click(screen.getByText('Open'));
+      await waitForPanel();
+
+      expect(getTitle()).toBeInTheDocument();
+
+      rerender(
+        <Popover {...props} title={undefined}>
+          <button type="button">Open</button>
+        </Popover>,
+      );
+
+      userEvent.click(screen.getByText('Open'));
+
+      expect(getTitle()).not.toBeInTheDocument();
+    });
+
+    it('renders Panel onClick', async () => {
+      render(
+        <Popover {...props}>
+          <button type="button">Open</button>
+        </Popover>,
+      );
+
+      expect(getPanel()).not.toBeInTheDocument();
+
+      userEvent.click(screen.getByText('Open'));
+      await waitForPanel();
+
+      expect(getPanel()).toBeInTheDocument();
+    });
+  });
+
+  describe('on mobile', () => {
+    beforeEach(() => {
+      global.innerWidth = Breakpoint.SMALL - 1;
+    });
+
+    it('renders when is open', () => {
+      ({ container } = render(
+        <Popover {...props}>
+          <button type="button">Open</button>
+        </Popover>,
+      ));
+
+      userEvent.click(screen.getByText('Open'));
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('renders BottomSheet onClick', () => {
+      render(
+        <Popover {...props}>
+          <button type="button">Open</button>
+        </Popover>,
+      );
+
+      expect(getBottomSheet()).not.toBeInTheDocument();
+
+      userEvent.click(screen.getByText('Open'));
+
+      expect(getBottomSheet()).toBeInTheDocument();
+    });
+  });
+
+  const waitForPanel = async () => screen.findByText('content');
+  const getPanel = () => document.querySelector('.np-panel');
+  const getBottomSheet = () => document.querySelector('.np-bottom-sheet');
+  const getTitle = () => screen.queryByText('title');
+});

package/src/popover/Popover.story.js

@@ -0,0 +1,54 @@
+import { action } from '@storybook/addon-actions';
+import { select } from '@storybook/addon-knobs';
+
+import Button from '../button';
+import { Position } from '../common';
+
+import Popover from './Popover';
+
+export default {
+  component: Popover,
+  title: 'Dialogs/Popover',
+};
+
+export const Basic = () => {
+  const preferredPlacement = select(
+    'preferredPlacement',
+    [
+      Position.TOP,
+      Position.RIGHT,
+      Position.BOTTOM,
+      Position.LEFT,
+      Position.LEFT_TOP,
+      Position.RIGHT_TOP,
+      Position.BOTTOM_RIGHT,
+      Position.BOTTOM_LEFT,
+    ],
+    Position.TOP,
+  );
+
+  return (
+    <div className="text-xs-center">
+      <Popover
+        content={
+          <>
+            You’ll get this rate as long as we receive your 10 EUR within the next 51 hours.
+            <div>
+              <a href="test1">Test 1</a>
+            </div>
+            <div>
+              <a href="test1">Test 2</a>
+            </div>
+            <div>
+              <a href="test1">Test 3</a>
+            </div>
+          </>
+        }
+        preferredPlacement={preferredPlacement}
+        title="Guaranteed rate"
+      >
+        <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>
+      </Popover>
+    </div>
+  );
+};

package/src/popover/__snapshots__/Popover.spec.js.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover on desktop renders when is open 1`] = `
+<div
+  class="np-panel np-panel--open np-theme-light np-popover__container"
+  data-popper-escaped="true"
+  data-popper-placement="right"
+  data-popper-reference-hidden="true"
+  style="position: absolute; left: 0px; top: 0px; transform: translate(16px, 0px);"
+>
+  <div
+    class="np-panel__content"
+  >
+    <div
+      aria-hidden="false"
+      class="np-popover__content"
+      role="tooltip"
+    >
+      <h4
+        class="np-text-title-body m-b-1"
+      >
+        title
+      </h4>
+      content
+    </div>
+    <div
+      class="np-panel__arrow"
+      style="position: absolute; top: 0px; transform: translate(0px, 0px);"
+    />
+  </div>
+</div>
+`;
+
+exports[`Popover on mobile renders when is open 1`] = `
+<div>
+  <span
+    class="np-popover"
+  >
+    <span
+      class="d-inline-block"
+    >
+      <button
+        type="button"
+      >
+        Open
+      </button>
+    </span>
+    <div
+      class="dimmer"
+    >
+      <div
+        class="sliding-panel sliding-panel--open-bottom np-bottom-sheet np-popover__container"
+      >
+        <div
+          class="np-bottom-sheet--top-bar"
+        >
+          <div
+            class="np-bottom-sheet--handler"
+          />
+          <button
+            aria-label="Close"
+            class="np-close-button close btn-link text-no-decoration sr-only np-bottom-sheet--close-btn"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="tw-icon tw-icon-cross "
+              data-testid="cross-icon"
+              role="presentation"
+            >
+              <svg
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                viewBox="0 0 24 24"
+                width="16"
+              >
+                <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-bottom-sheet--content"
+          style="max-height: calc(768px - 64px - 32px);"
+        >
+          <div
+            aria-hidden="false"
+            class="np-popover__content"
+            role="tooltip"
+          >
+            <h4
+              class="np-text-title-body m-b-1"
+            >
+              title
+            </h4>
+            content
+          </div>
+        </div>
+      </div>
+    </div>
+  </span>
+</div>
+`;

package/src/popover/index.js

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

package/src/processIndicator/ProcessIndicator.js

@@ -0,0 +1,117 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+
+import { Status, Size } from '../common';
+
+const radius = { xs: 11, sm: 22, xl: 61 };
+export const ANIMATION_DURATION_IN_MS = 1500;
+
+class ProcessIndicator extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: props.status,
+      size: props.size,
+    };
+    this.interval = null;
+    this.timeout = null;
+  }
+
+  /**
+   * Create interval for animation duration (1500ms)
+   * Update state only at the end of every interval
+   * (end of animation loop) if props changed before end of animation
+   */
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      const statusFromState = this.state.status;
+      const sizeFromState = this.state.size;
+
+      const statusFromProps = this.props.status;
+      const sizeFromProps = this.props.size;
+
+      if (statusFromState !== statusFromProps) {
+        this.setState({ status: statusFromProps }, this.runCallBack(statusFromProps));
+      }
+
+      if (sizeFromState !== sizeFromProps) {
+        this.setState({ size: sizeFromProps });
+      }
+    }, ANIMATION_DURATION_IN_MS);
+  }
+
+  /**
+   * Only trigger render if comopnent's state got
+   * updated from interval callback
+   *
+   * @param nextProps
+   * @param nextState
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    const isSameStatus = nextProps.status === nextState.status;
+    const isSameSize = nextProps.size === nextState.size;
+
+    return isSameStatus && isSameSize;
+  }
+
+  // Clear interval before destroying component
+  componentWillUnmount() {
+    clearInterval(this.interval);
+    clearTimeout(this.timeout);
+  }
+
+  runCallBack = (statusFromProps) => {
+    const { onAnimationCompleted } = this.props;
+    if (onAnimationCompleted) {
+      this.timeouts = setTimeout(() => {
+        onAnimationCompleted(statusFromProps);
+      }, ANIMATION_DURATION_IN_MS);
+    }
+  };
+
+  render() {
+    const { className, 'data-testid': dataTestId } = this.props;
+    const { size, status } = this.state;
+    const classes = classNames(`process process-${size}`, className, {
+      [`process-danger`]: status === Status.FAILED,
+      [`process-stopped`]: status === Status.HIDDEN,
+      [`process-success`]: status === Status.SUCCEEDED,
+    });
+
+    return (
+      <span className={classes} data-testid={dataTestId}>
+        <span className="process-icon-container">
+          <span className="process-icon-horizontal" />
+          <span className="process-icon-vertical" />
+        </span>
+        <svg xmlns="http://www.w3.org/2000/svg">
+          <circle
+            className="process-circle"
+            cx="50%"
+            cy="50%"
+            r={radius[this.state.size]}
+            fillOpacity="0.0"
+          />
+        </svg>
+      </span>
+    );
+  }
+}
+ProcessIndicator.propTypes = {
+  status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
+  size: PropTypes.oneOf(['xs', 'sm', 'xl']),
+  onAnimationCompleted: PropTypes.func,
+  className: PropTypes.string,
+  'data-testid': PropTypes.string,
+};
+
+ProcessIndicator.defaultProps = {
+  status: Status.PROCESSING,
+  size: Size.SMALL,
+  onAnimationCompleted: null,
+  className: undefined,
+  'data-testid': null,
+};
+
+export default ProcessIndicator;

package/src/processIndicator/ProcessIndicator.spec.js

@@ -0,0 +1,101 @@
+import { mount } from 'enzyme';
+
+import { Status, Size } from '../common';
+
+import ProcessIndicator from '.';
+
+describe('processIndicator', () => {
+  let wrapper;
+  const ANIMATION_DURATION = 1500;
+  const props = {
+    status: Status.PROCESSING,
+    size: Size.Small,
+    onAnimationCompleted: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    wrapper = mount(<ProcessIndicator {...props} />);
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+  });
+
+  it('has right classes when rendered with provided props', () => {
+    expect(wrapper.find('.process')).toHaveLength(1);
+    expect(wrapper.find('.process-sm')).toHaveLength(1);
+
+    expect(wrapper.find('.process-lg')).toHaveLength(0);
+    expect(wrapper.find('.process-xs')).toHaveLength(0);
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+  });
+
+  it('updates component state with delay on props change to create smooth transition between CSS animations', () => {
+    expect(wrapper.state().status).toBe('processing');
+
+    wrapper.setProps({ status: 'succeeded' });
+    expect(wrapper.props().status).toBe('succeeded');
+    expect(wrapper.state().status).toBe('processing');
+
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+
+    expect(wrapper.state().status).toBe('succeeded');
+  });
+
+  it('updates size classes with delay', () => {
+    expect(wrapper.find('.process-sm')).toHaveLength(1);
+    wrapper.setProps({ size: 'xl' });
+    expect(wrapper.find('.process-xl')).toHaveLength(0);
+
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+
+    expect(wrapper.find('.process-xs')).toHaveLength(0);
+    expect(wrapper.find('.process-sm')).toHaveLength(0);
+    expect(wrapper.find('.process-xl')).toHaveLength(1);
+  });
+
+  it('properly updates status classes with delay', () => {
+    wrapper.setProps({ status: 'succeeded' });
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+    expect(wrapper.find('.process-success')).toHaveLength(1);
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+
+    wrapper.setProps({ status: 'failed' });
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+    expect(wrapper.find('.process-danger')).toHaveLength(1);
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+
+    wrapper.setProps({ status: 'hidden' });
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    expect(wrapper.find('.process-stopped')).toHaveLength(1);
+  });
+
+  it('calls onAnimationCompleted with Delay', () => {
+    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
+    wrapper.setProps({ status: Status.FAILED });
+    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
+    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.FAILED);
+    wrapper.setProps({ status: Status.SUCCEEDED });
+    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
+    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.SUCCEEDED);
+  });
+});