@transferwise/components 46.12.0 → 46.14.0

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

@@ -45,62 +45,6 @@ exports[`Popover on mobile renders when is open 1`] = `
         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="dialog"
-          >
-            <h4
-              class="np-text-title-body m-b-1"
-            >
-              title
-            </h4>
-            content
-          </div>
-        </div>
-      </div>
-    </div>
   </span>
 </div>
 `;

package/src/promoCard/PromoCard.tsx

@@ -13,7 +13,6 @@ import { usePromoCardContext } from './PromoCardContext';
 import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
 
 export type ReferenceType = React.Ref<HTMLInputElement>;
-export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -98,7 +97,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   rel?: RelatedTypes;
 
   /** Optional prop to to display where the linked URL will show */
-  target?: LinkTarget;
+  target?: React.HTMLAttributeAnchorTarget;
 
   /** Only applies to role="radio" or "checkbox" */
   defaultChecked?: never;

package/src/tile/Tile.js

@@ -65,7 +65,7 @@ Tile.propTypes = {
   className: PropTypes.string,
   description: PropTypes.node,
   disabled: PropTypes.bool,
-  href: PropTypes.string.isRequired,
+  href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   /** Accepts only Avatar and images */
   media: PropTypes.node.isRequired,

package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts

@@ -1,6 +0,0 @@
-export function explodeDate(date: any): {
-    year: any;
-    month: any;
-    day: any;
-};
-//# sourceMappingURL=explodeDate.d.ts.map

package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"explodeDate.d.ts","sourceRoot":"","sources":["../../../../../src/dateInput/utils/explodeDate/explodeDate.js"],"names":[],"mappings":"AAAO;;;;EAMN"}

package/build/types/dateInput/utils/explodeDate/index.d.ts

@@ -1,2 +0,0 @@
-export { explodeDate } from "./explodeDate";
-//# sourceMappingURL=index.d.ts.map

package/build/types/dateInput/utils/explodeDate/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/dateInput/utils/explodeDate/index.js"],"names":[],"mappings":""}

package/build/types/decision/decisionEnums.d.ts

@@ -1,9 +0,0 @@
-export declare enum Presentation {
-    LIST = "LIST",
-    LIST_BLOCK = "LIST_BLOCK",
-    LIST_BLOCK_GRID = "LIST_BLOCK_GRID"
-}
-export declare enum Type {
-    NAVIGATION = "NAVIGATION"
-}
-//# sourceMappingURL=decisionEnums.d.ts.map

package/build/types/decision/decisionEnums.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"decisionEnums.d.ts","sourceRoot":"","sources":["../../../src/decision/decisionEnums.ts"],"names":[],"mappings":"AACA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAGD,oBAAY,IAAI;IACd,UAAU,eAAe;CAC1B"}

package/build/types/sizeSwapper/SizeSwapper.d.ts

@@ -1,3 +0,0 @@
-export default SizeSwapper;
-declare const SizeSwapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-//# sourceMappingURL=SizeSwapper.d.ts.map

package/build/types/sizeSwapper/SizeSwapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SizeSwapper.d.ts","sourceRoot":"","sources":["../../../src/sizeSwapper/SizeSwapper.js"],"names":[],"mappings":";AASA,yGAqCG"}

package/build/types/sizeSwapper/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./SizeSwapper";
-//# sourceMappingURL=index.d.ts.map

package/build/types/sizeSwapper/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sizeSwapper/index.js"],"names":[],"mappings":""}

package/src/common/dateUtils/isDateValid/isDateValid.js

@@ -1,6 +0,0 @@
-export const isDateValid = (date) => validDateObject(date) || validDateString(date);
-
-export const validDateString = (dateString) =>
-  typeof dateString === 'string' && validDateObject(new Date(dateString));
-
-const validDateObject = (dateObject) => dateObject instanceof Date && !isNaN(dateObject); // eslint-disable-line no-restricted-globals

package/src/dateInput/index.js

@@ -1,3 +0,0 @@
-import DateInput from './DateInput';
-
-export default DateInput;

package/src/dateInput/utils/explodeDate/explodeDate.js

@@ -1,7 +0,0 @@
-export const explodeDate = (date) => {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const day = date.getDate();
-
-  return { year, month, day };
-};

package/src/dateInput/utils/explodeDate/explodeDate.spec.js

@@ -1,11 +0,0 @@
-import { explodeDate } from '.';
-
-describe('explodeDate', () => {
-  it('returns exploded model for valid format', () => {
-    expect(explodeDate(new Date('1995-12-17T03:24:00'))).toStrictEqual({
-      day: 17,
-      month: 11,
-      year: 1995,
-    });
-  });
-});

package/src/dateInput/utils/explodeDate/index.js

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

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';