@transferwise/components 46.13.0 → 46.14.0

package/src/decision/Decision.js

@@ -1,148 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { Size, Breakpoint } from '../common';
-import NavigationOption from '../navigationOption';
-import SizeSwapper from '../sizeSwapper';
-import Tile from '../tile';
-
-import { Presentation, Type } from './decisionEnums';
-
-const Decision = ({
-  options,
-  presentation,
-  type,
-  showMediaCircleInList,
-  isContainerAligned,
-  size,
-}) => {
-  if (type === Type.NAVIGATION) {
-    const { LIST_BLOCK, LIST_BLOCK_GRID } = Presentation;
-    if (presentation === LIST_BLOCK || presentation === LIST_BLOCK_GRID) {
-      const isSmall = size === Size.SMALL;
-      const isGrid = presentation === LIST_BLOCK_GRID;
-      const items = [
-        {
-          items: [],
-          layout: SizeSwapper.Layout.COLUMN,
-        },
-        {
-          items: [],
-          breakpoint: isSmall ? Breakpoint.EXTRA_SMALL : Breakpoint.SMALL,
-          wrap: isGrid,
-        },
-      ];
-
-      options.forEach(
-        ({ description, disabled, href, target, media: { block, list }, onClick, title }, key) => {
-          items[0].items.push(
-            <NavigationOption
-              // eslint-disable-next-line react/no-array-index-key
-              key={`nav-${key}`}
-              complex={false}
-              content={description}
-              disabled={disabled}
-              href={href}
-              target={target}
-              media={list}
-              showMediaAtAllSizes
-              showMediaCircle={showMediaCircleInList}
-              isContainerAligned={isContainerAligned}
-              title={title}
-              onClick={onClick}
-            />,
-          );
-          items[1].items.push(
-            <Tile
-              // eslint-disable-next-line react/no-array-index-key
-              key={`tile-${key}`}
-              className={classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
-                'np-decision__tile--fixed-width': isGrid,
-              })}
-              description={description}
-              disabled={disabled}
-              href={href}
-              target={target}
-              media={block}
-              size={isSmall ? Size.SMALL : Size.MEDIUM}
-              title={title}
-              onClick={onClick}
-            />,
-          );
-        },
-      );
-
-      return (
-        <div
-          className={classNames('np-decision', {
-            'np-decision--small': isSmall,
-            'np-decision--grid': isGrid,
-          })}
-        >
-          <SizeSwapper items={items} />
-        </div>
-      );
-    }
-    // LIST
-    return options.map(
-      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (
-        <NavigationOption
-          // eslint-disable-next-line react/no-array-index-key
-          key={`nav-${key}`}
-          complex={false}
-          content={description}
-          disabled={disabled}
-          href={href}
-          target={target}
-          media={list}
-          showMediaAtAllSizes
-          showMediaCircle={showMediaCircleInList}
-          isContainerAligned={isContainerAligned}
-          title={title}
-          onClick={onClick}
-        />
-      ),
-    );
-  }
-  return <></>;
-};
-
-Decision.propTypes = {
-  /**  A list of elements to be rendered */
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.node,
-      disabled: PropTypes.bool,
-      href: PropTypes.string,
-      target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-      media: PropTypes.shape({
-        block: PropTypes.node.isRequired,
-        list: PropTypes.node.isRequired,
-      }),
-      onClick: PropTypes.func,
-      title: PropTypes.node.isRequired,
-    }),
-  ).isRequired,
-  /**  Handles the display mode of the component */
-  presentation: PropTypes.oneOf(['LIST', 'LIST_BLOCK', 'LIST_BLOCK_GRID']),
-  /** Size currently affects only Tile dimension */
-  size: PropTypes.oneOf(['sm', 'md']),
-  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */
-  type: PropTypes.oneOf(['NAVIGATION']),
-
-  /** Display media in a circle in list presentation */
-  showMediaCircleInList: PropTypes.bool,
-
-  /** Sets navigation options to be aligned with the parent container */
-  isContainerAligned: PropTypes.bool,
-};
-
-Decision.defaultProps = {
-  presentation: Presentation.LIST,
-  size: Size.MEDIUM,
-  type: Type.NAVIGATION,
-  showMediaCircleInList: true,
-  isContainerAligned: false,
-};
-
-export default Decision;

package/src/decision/decisionEnums.ts

@@ -1,11 +0,0 @@
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum Presentation {
-  LIST = 'LIST',
-  LIST_BLOCK = 'LIST_BLOCK',
-  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',
-}
-
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum Type {
-  NAVIGATION = 'NAVIGATION',
-}

package/src/decision/index.js

@@ -1,2 +0,0 @@
-export { Presentation as DecisionPresentation, Type as DecisionType } from './decisionEnums';
-export { default } from './Decision';

package/src/sizeSwapper/SizeSwapper.js

@@ -1,69 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { forwardRef, useRef } from 'react';
-
-import { Breakpoint } from '../common';
-import { useClientWidth } from '../common/hooks';
-
-const Layout = { COLUMN: 'COLUMN' };
-
-const SizeSwapper = forwardRef(({ items, inline }, reference) => {
-  const parentReference = useRef(null);
-  const [clientWidth] = useClientWidth({ ref: reference || parentReference });
-
-  if (!items || items.length === 0) {
-    return null;
-  }
-  // If all breakpoints are specified and clientWidth never > breakpoint itemsToRender can be undefined.
-  // Do not use deconstruct here to get items and layout.
-  let itemsToRender = [];
-
-  if (clientWidth) {
-    itemsToRender = items.filter(({ breakpoint = 0 }) => clientWidth >= breakpoint).pop();
-  } else {
-    // On SSR environments useClientWidth returns null because ref is undefined so we render
-    // all elements by default.
-    // If there's no SSR and on first Hydration only the right elements are going to be rendered.
-    // If clientWidth is null or zero all elements render like a responsive technique would do.
-    itemsToRender.items = items.map(({ items }) => Object.values(items));
-  }
-
-  // Always return parent container even if there are no items to display to
-  // keep the ref on DOM and let clientWidth be calculated properly.
-  return (
-    <div
-      ref={parentReference}
-      className={classNames('np-size-swapper', {
-        'd-flex': !inline,
-        'd-inline-flex': inline,
-        'flex-column': itemsToRender && itemsToRender.layout === Layout.COLUMN,
-        'flex-wrap': itemsToRender && itemsToRender.wrap,
-      })}
-      style={{ visibility: clientWidth ? 'visible' : 'hidden' }}
-    >
-      {itemsToRender && itemsToRender.items}
-    </div>
-  );
-});
-
-SizeSwapper.Breakpoint = Breakpoint;
-SizeSwapper.Layout = Layout;
-
-SizeSwapper.propTypes = {
-  inline: PropTypes.bool,
-  /** List of items that will appear at the specified breakpoint and presented in row or columns depending on layout  */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      items: PropTypes.arrayOf(PropTypes.element),
-      breakpoint: PropTypes.number,
-      layout: PropTypes.oneOf([SizeSwapper.Layout.COLUMN]),
-      wrap: PropTypes.bool,
-    }),
-  ).isRequired,
-};
-
-SizeSwapper.defaultProps = {
-  inline: false,
-};
-
-export default SizeSwapper;

package/src/sizeSwapper/SizeSwapper.spec.js

@@ -1,100 +0,0 @@
-import '@testing-library/jest-dom';
-import { Breakpoint } from '../common';
-import { render, fireEvent, screen } from '../test-utils';
-
-import SizeSwapper from '.';
-
-jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
-
-describe('SizeSwapper', () => {
-  const resetClientWidth = (width) => {
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      value: width,
-    });
-  };
-  const breakpoints = [0, Breakpoint.EXTRA_SMALL];
-
-  const items = breakpoints.map((bp) => ({
-    items: [...new Array(2)].map((_, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <div key={`${index}-${bp}`}>
-        element-{index + 1}-{bp}
-      </div>
-    )),
-    layout: SizeSwapper.Layout.COLUMN,
-    breakpoint: bp,
-  }));
-
-  afterAll(() => {
-    const originalClientWidth = Object.getOwnPropertyDescriptor(
-      HTMLElement.prototype,
-      'clientWidth',
-    );
-
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
-  });
-
-  it('renders all elements and hides sizeswapper if clientWidth is not defined', () => {
-    const { container } = render(<SizeSwapper items={items} />);
-
-    expect(screen.getByText('element-1-0')).toBeInTheDocument();
-    expect(screen.getByText('element-2-0')).toBeInTheDocument();
-    expect(screen.getByText(`element-1-${breakpoints[1]}`)).toBeInTheDocument();
-    expect(screen.getByText(`element-2-${breakpoints[1]}`)).toBeInTheDocument();
-
-    expect(container.querySelector('.np-size-swapper')).toHaveStyle(`visibility: hidden`);
-  });
-
-  it('changes visibility when clientWidth is set', () => {
-    const { container } = render(<SizeSwapper items={items} />);
-
-    expect(container.querySelector('.np-size-swapper')).toHaveStyle(`visibility: hidden`);
-
-    resetClientWidth(breakpoints[1]);
-    fireEvent(window, new Event('resize'));
-
-    expect(container.querySelector('.np-size-swapper')).toHaveStyle(`visibility: visible`);
-  });
-
-  it('switches elements according to breakpoints', () => {
-    render(<SizeSwapper items={items} />);
-    resetClientWidth(breakpoints[1] - 1);
-    fireEvent(window, new Event('resize'));
-
-    expect(screen.getByText(`element-1-0`)).toBeInTheDocument();
-    expect(screen.getByText(`element-2-0`)).toBeInTheDocument();
-    expect(screen.queryByText(`element-1-${breakpoints[1]}`)).not.toBeInTheDocument();
-    expect(screen.queryByText(`element-2-${breakpoints[1]}`)).not.toBeInTheDocument();
-
-    // resetClientWidth(breakpoints[1]);
-    // fireEvent(window, new Event('resize'));
-
-    // expect(screen.queryByText(`element-1-${breakpoints[0]}`)).not.toBeInTheDocument();
-    // expect(screen.queryByText(`element-2-${breakpoints[0]}`)).not.toBeInTheDocument();
-    // expect(screen.getByText(`element-1-${breakpoints[1]}`)).toBeInTheDocument();
-    // expect(screen.getByText(`element-2-${breakpoints[1]}`)).toBeInTheDocument();
-  });
-
-  describe('when ref is window', () => {
-    it('switches elements according to breakpoints', () => {
-      render(<SizeSwapper ref={window} items={items} />);
-      global.innerWidth = breakpoints[1] - 1;
-      fireEvent(window, new Event('resize'));
-
-      expect(screen.getByText(`element-1-0`)).toBeInTheDocument();
-      expect(screen.getByText(`element-2-0`)).toBeInTheDocument();
-      expect(screen.queryByText(`element-1-${breakpoints[1]}`)).not.toBeInTheDocument();
-      expect(screen.queryByText(`element-2-${breakpoints[1]}`)).not.toBeInTheDocument();
-
-      [, global.innerWidth] = breakpoints;
-
-      fireEvent(window, new Event('resize'));
-
-      expect(screen.queryByText(`element-1-${breakpoints[0]}`)).not.toBeInTheDocument();
-      expect(screen.queryByText(`element-2-${breakpoints[0]}`)).not.toBeInTheDocument();
-      expect(screen.getByText(`element-1-${breakpoints[1]}`)).toBeInTheDocument();
-      expect(screen.getByText(`element-2-${breakpoints[1]}`)).toBeInTheDocument();
-    });
-  });
-});

package/src/sizeSwapper/SizeSwapper.story.js

@@ -1,34 +0,0 @@
-import SizeSwapper from './SizeSwapper';
-
-export default {
-  component: SizeSwapper,
-  title: 'Internal/SizeSwapper',
-};
-
-export const Basic = () => {
-  const breakpoints = [
-    0,
-    SizeSwapper.Breakpoint.EXTRA_SMALL,
-    SizeSwapper.Breakpoint.SMALL,
-    SizeSwapper.Breakpoint.MEDIUM,
-    SizeSwapper.Breakpoint.LARGE,
-    SizeSwapper.Breakpoint.EXTRA_LARGE,
-  ];
-
-  const items = breakpoints.map((bp, key) => {
-    const isColumn = (key + 1) % 2 === 0;
-
-    return {
-      items: [...new Array(4)].map((value, key2) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div key={`el-${key2}-${key}`} className="p-a-3 well m-x-2">
-          Element shown from {bp}px {isColumn && `in ${SizeSwapper.Layout.COLUMN} mode`}
-        </div>
-      )),
-      layout: isColumn ? SizeSwapper.Layout.COLUMN : null,
-      breakpoint: bp,
-    };
-  });
-
-  return <SizeSwapper items={items} />;
-};

package/src/sizeSwapper/index.js

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