@transferwise/components 46.27.0 → 46.29.0

package/src/upload/Upload.spec.js

@@ -8,7 +8,7 @@ import Upload from '.';
 
 jest.useFakeTimers();
 jest.mock('./utils/postData', () => ({
-  postData: () => new Promise((resolve) => resolve('ServerResponse')),
+  postData: async () => 'ServerResponse',
 }));
 
 jest.mock('./utils/asyncFileRead');
@@ -88,7 +88,7 @@ describe('Upload', () => {
   let component;
   beforeEach(() => {
     component = shallow(<Upload {...props} />).dive();
-    asyncFileRead.mockImplementation(() => new Promise((resolve) => resolve('a value')));
+    asyncFileRead.mockImplementation(async () => 'a value');
   });
 
   afterEach(() => {
@@ -183,7 +183,9 @@ describe('Upload', () => {
     });
 
     it('step ProcessingStep is called with error props', async () => {
-      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+      asyncFileRead.mockImplementation(async () => {
+        throw 'An error';
+      });
 
       await component.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay);
@@ -230,7 +232,9 @@ describe('Upload', () => {
     it('step CompleteStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
-      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+      asyncFileRead.mockImplementation(async () => {
+        throw 'An error';
+      });
 
       await upload.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -225,6 +225,7 @@ const UploadButton = ({
         data-testid={TEST_IDS.uploadInput}
         onChange={filesSelected}
       />
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label
         htmlFor={id}
         className={classNames('btn', 'np-upload-accent', 'np-upload-button', {

package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css

@@ -1,5 +0,0 @@
-.formatted-value__h3-custom-alignment {
-  margin-bottom: 16px;
-  margin-bottom: var(--size-16);
-  line-height: 24px;
-}

package/build/types/alert/withArrow/alertArrowPositions.d.ts

@@ -1,9 +0,0 @@
-export declare enum ArrowPosition {
-    TOP_LEFT = "up-left",
-    TOP = "up-center",
-    TOP_RIGHT = "up-right",
-    BOTTOM_LEFT = "down-left",
-    BOTTOM = "down-center",
-    BOTTOM_RIGHT = "down-right"
-}
-//# sourceMappingURL=alertArrowPositions.d.ts.map

package/build/types/alert/withArrow/alertArrowPositions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertArrowPositions.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/alertArrowPositions.ts"],"names":[],"mappings":"AACA,oBAAY,aAAa;IACvB,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B"}

package/build/types/alert/withArrow/index.d.ts

@@ -1,3 +0,0 @@
-export { ArrowPosition as AlertArrowPosition } from "./alertArrowPositions";
-export { default } from "./withArrow";
-//# sourceMappingURL=index.d.ts.map

package/build/types/alert/withArrow/index.d.ts.map

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

package/build/types/alert/withArrow/withArrow.d.ts

@@ -1,11 +0,0 @@
-export default withArrow;
-declare function withArrow(Alert: any, arrow: any): {
-    (props: any): import("react").JSX.Element;
-    propTypes: {
-        className: any;
-    };
-    defaultProps: {
-        className: undefined;
-    };
-};
-//# sourceMappingURL=withArrow.d.ts.map

package/build/types/alert/withArrow/withArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withArrow.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/withArrow.js"],"names":[],"mappings":";AAKA;;;;;;;;EAkBC"}

package/build/types/common/requirements.d.ts

@@ -1,3 +0,0 @@
-export function prepFields(fields: any, model: any, validationMessages: any): any;
-export function getControlType(field: any): any;
-//# sourceMappingURL=requirements.d.ts.map

package/build/types/common/requirements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"requirements.d.ts","sourceRoot":"","sources":["../../../src/common/requirements.js"],"names":[],"mappings":"AAqCA,kFAgBC;AAuTD,gDAsBC"}

package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-export interface DynamicFieldDefinitionListModel {
-}
-
-export interface DynamicFieldDefinitionListFields {
-}
-
-export type DynamicFieldDefinitionListLayout = "VERTICAL_TWO_COLUMN" | "VERTICAL_ONE_COLUMN" | "HORIZONTAL_JUSTIFIED" | "HORIZONTAL_LEFT_ALIGNED";
-
-export interface DynamicFieldDefinitionListProps {
-    model: DynamicFieldDefinitionListModel;
-    fields: DynamicFieldDefinitionListFields;
-    title?: string;
-    layout?: DynamicFieldDefinitionListLayout;
-}
-
-declare const DynamicFieldDefinitionList: React.FC<DynamicFieldDefinitionListProps>;
-
-export default DynamicFieldDefinitionList;
-

package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts.map

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

package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts

@@ -1,12 +0,0 @@
-export default FormattedValue;
-declare function FormattedValue({ field, value }: {
-    field: any;
-    value: any;
-}): import("react").JSX.Element;
-declare namespace FormattedValue {
-    namespace propTypes {
-        const field: any;
-        const value: any;
-    }
-}
-//# sourceMappingURL=FormattedValue.d.ts.map

package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormattedValue.d.ts","sourceRoot":"","sources":["../../../../src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js"],"names":[],"mappings":";AAuBA;;;gCA+BC"}

package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts

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

package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts.map

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

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

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

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

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

package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts

@@ -1,2 +0,0 @@
-export default function createDefinitions(fields: any, model: any): any;
-//# sourceMappingURL=createDefinitions.d.ts.map

package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createDefinitions.d.ts","sourceRoot":"","sources":["../../../../src/dynamicFieldDefinitionList/utils/createDefinitions.js"],"names":[],"mappings":"AAIA,wEAIC"}

package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts

@@ -1,2 +0,0 @@
-export function formatUsingPattern(value: string | undefined, pattern: any): string;
-//# sourceMappingURL=text-format.d.ts.map

package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-format.d.ts","sourceRoot":"","sources":["../../../../src/dynamicFieldDefinitionList/utils/text-format.js"],"names":[],"mappings":"AAAA,oFAgCC"}

package/src/alert/Alert.js

@@ -1,196 +0,0 @@
-import {
-  InfoCircle,
-  Warning as AlertTriangle,
-  CrossCircle,
-  CheckCircle,
-  Clock,
-} from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { useState, useRef } from 'react';
-import requiredIf from 'react-required-if';
-
-import Body from '../body/Body';
-import { Sentiment, Size, Typography, Variant } from '../common';
-import { CloseButton } from '../common/closeButton';
-import Link from '../link';
-import StatusIcon from '../statusIcon';
-import Title from '../title/Title';
-import { logActionRequiredIf, deprecated } from '../utilities';
-
-import InlineMarkdown from './inlineMarkdown';
-import withArrow from './withArrow';
-
-const deprecatedTypeMap = {
-  [Sentiment.SUCCESS]: Sentiment.POSITIVE,
-  [Sentiment.INFO]: Sentiment.NEUTRAL,
-  [Sentiment.ERROR]: Sentiment.NEGATIVE,
-};
-
-const Alert = (props) => {
-  const { isModern } = useTheme();
-
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: CheckCircle,
-    [Sentiment.NEUTRAL]: InfoCircle,
-    [Sentiment.WARNING]: AlertTriangle,
-    [Sentiment.NEGATIVE]: CrossCircle,
-    [Sentiment.PENDING]: Clock,
-  };
-
-  const [shouldFire, setShouldFire] = useState(false);
-  const { arrow, action, children, className, icon, onDismiss, message, title, type, variant } =
-    props;
-  const closeButtonReference = useRef(null);
-  if (arrow) {
-    const AlertWithArrow = withArrow(Alert, arrow);
-    return <AlertWithArrow {...props} />;
-  }
-  logActionRequired(props);
-  const mappedType = deprecatedTypeMap[type] || type;
-  const Icon = iconTypeMap[mappedType];
-
-  function generateIcon() {
-    if (icon) {
-      return <div className="alert__icon">{icon}</div>;
-    }
-    if (isModern) {
-      return <StatusIcon size={Size.LARGE} sentiment={mappedType} />;
-    } else {
-      return <Icon size={24} />;
-    }
-  }
-
-  const handleTouchStart = () => setShouldFire(true);
-  const handleTouchMove = () => setShouldFire(false);
-  const handleTouchEnd = (event) => {
-    if (shouldFire && action) {
-      // Check if current event is triggered from closeButton
-      if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
-        if (action?.target === '_blank') {
-          window.top.open(action.href);
-        } else {
-          window.top.location.assign(action.href);
-        }
-      }
-    }
-    setShouldFire(false);
-  };
-  return (
-    <div
-      className={classNames('alert d-flex', `alert-${mappedType}`, className)}
-      data-testid="alert"
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onTouchMove={handleTouchMove}
-    >
-      <div
-        className={classNames('alert__content', 'd-flex', 'flex-grow-1', variant)}
-        data-testid={variant}
-      >
-        {generateIcon()}
-        <div className="alert__message">
-          <div role={Sentiment.NEGATIVE === mappedType ? 'alert' : 'status'}>
-            {title && (
-              <Title className="m-b-1" type={Typography.TITLE_BODY}>
-                {title}
-              </Title>
-            )}
-            <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
-              {children || <InlineMarkdown>{message}</InlineMarkdown>}
-            </Body>
-          </div>
-          {action && (
-            <Link
-              href={action.href}
-              className="m-t-1"
-              aria-label={action['aria-label']}
-              target={action.target}
-              type={Typography.LINK_LARGE}
-            >
-              {action.text}
-            </Link>
-          )}
-        </div>
-      </div>
-      {onDismiss && (
-        <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
-      )}
-    </div>
-  );
-};
-
-const deprecatedTypeMapMessage = {
-  [Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
-  [Sentiment.INFO]: 'Sentiment.NEUTRAL',
-  [Sentiment.ERROR]: 'Sentiment.NEGATIVE',
-};
-
-const deprecatedTypes = Object.keys(deprecatedTypeMap);
-
-function logActionRequired({ size, type }) {
-  logActionRequiredIf(
-    'Alert no longer supports any possible variations in size. Please remove the `size` prop.',
-    !!size,
-  );
-  logActionRequiredIf(
-    `Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,
-    deprecatedTypes.includes(type),
-  );
-}
-
-Alert.propTypes = {
-  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */
-  action: PropTypes.shape({
-    'aria-label': PropTypes.string,
-    href: PropTypes.string.isRequired,
-    target: PropTypes.string,
-    text: PropTypes.node.isRequired,
-  }),
-  className: PropTypes.string,
-  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
-  icon: PropTypes.element,
-  /** Title for the alert component */
-  title: PropTypes.string,
-  /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
-  message: requiredIf(PropTypes.node, ({ children }) => !children),
-  /** The presence of the onDismiss handler will trigger the visibility of the close button */
-  onDismiss: PropTypes.func,
-  /** The type dictates which icon and colour will be used */
-  type: PropTypes.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
-  variant: PropTypes.oneOf(['desktop', 'mobile']),
-  /** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
-  arrow: deprecated(
-    PropTypes.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']),
-    { component: 'Alert', expiryDate: new Date('03-01-2021') },
-  ),
-  /** @deprecated use `message` property instead */
-  children: deprecated(
-    requiredIf(PropTypes.node, ({ message }) => !message),
-    {
-      component: 'Alert',
-      message:
-        'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
-      expiryDate: new Date('03-01-2021'),
-    },
-  ),
-  /** @deprecated use `onDismiss` instead */
-  dismissible: deprecated(PropTypes.bool, {
-    component: 'Alert',
-    message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
-    expiryDate: new Date('03-01-2021'),
-  }),
-};
-
-Alert.defaultProps = {
-  action: undefined,
-  arrow: undefined,
-  className: undefined,
-  dismissible: undefined,
-  icon: undefined,
-  type: Sentiment.NEUTRAL,
-  variant: Variant.DESKTOP,
-};
-
-export default Alert;

package/src/alert/index.js

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

package/src/alert/withArrow/alertArrowPositions.ts

@@ -1,9 +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 ArrowPosition {
-  TOP_LEFT = 'up-left',
-  TOP = 'up-center',
-  TOP_RIGHT = 'up-right',
-  BOTTOM_LEFT = 'down-left',
-  BOTTOM = 'down-center',
-  BOTTOM_RIGHT = 'down-right',
-}

package/src/alert/withArrow/index.js

@@ -1,2 +0,0 @@
-export { ArrowPosition as AlertArrowPosition } from './alertArrowPositions';
-export { default } from './withArrow';

package/src/alert/withArrow/withArrow.js

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { ArrowPosition } from './alertArrowPositions';
-
-function withArrow(Alert, arrow) {
-  const AlertWithArrow = (props) => (
-    <Alert
-      {...props}
-      className={classNames(props.className, arrowClasses(arrow))}
-      arrow={undefined}
-    />
-  );
-
-  AlertWithArrow.propTypes = {
-    className: PropTypes.string,
-  };
-
-  AlertWithArrow.defaultProps = {
-    className: undefined,
-  };
-
-  return AlertWithArrow;
-}
-
-function arrowClasses(arrow) {
-  if (arrow) {
-    const classes = ['arrow'];
-    const { BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, TOP, TOP_RIGHT, TOP_LEFT } = ArrowPosition;
-
-    switch (arrow) {
-      case BOTTOM:
-        return classes.concat('arrow-bottom', 'arrow-center');
-      case BOTTOM_LEFT:
-        return classes.concat('arrow-bottom', 'arrow-left');
-      case BOTTOM_RIGHT:
-        return classes.concat('arrow-bottom', 'arrow-right');
-      case TOP:
-        return classes.concat('arrow-center');
-      case TOP_RIGHT:
-        return classes.concat('arrow-right');
-      case TOP_LEFT:
-      default:
-        return classes;
-    }
-  }
-  return '';
-}
-
-export default withArrow;

package/src/alert/withArrow/withArrow.spec.js

@@ -1,51 +0,0 @@
-import { render, screen } from '../../test-utils';
-import Alert from '../Alert';
-
-import { ArrowPosition } from './alertArrowPositions';
-import withArrow from './withArrow';
-
-describe('withArrow', () => {
-  const message = 'I hope you have a nice day today';
-
-  describe('default props', () => {
-    it(`returns an arrowless alert if you don't pass an arrow`, () => {
-      const ArrowLessAlert = withArrow(Alert);
-
-      render(<ArrowLessAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).not.toHaveClass('arrow');
-    });
-
-    it(`ignores the arrow prop passed to the new alert`, () => {
-      const AlertTopArrow = withArrow(Alert, ArrowPosition.TOP_LEFT);
-
-      render(<AlertTopArrow message={message} arrow={ArrowPosition.BOTTOM_LEFT} />);
-      const component = screen.getByTestId('alert');
-      expect(component).toHaveClass('arrow');
-      expect(component).not.toHaveClass('arrow-bottom');
-    });
-  });
-
-  describe('renders arrows', () => {
-    const getPointyAlert = (arrow) => withArrow(Alert, arrow);
-
-    it(`returns an bottom arrowed alert if you pass a bottom arrow`, () => {
-      const BottomArrowAlert = getPointyAlert(ArrowPosition.BOTTOM);
-      render(<BottomArrowAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).toHaveClass('arrow');
-      expect(component).toHaveClass('arrow-bottom');
-    });
-
-    it(`returns an top-right arrowed alert if you pass a top right arrow`, () => {
-      const BottomArrowAlert = getPointyAlert(ArrowPosition.TOP_RIGHT);
-      render(<BottomArrowAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).toHaveClass('arrow');
-      expect(component).toHaveClass('arrow-right');
-    });
-  });
-});

package/src/dateLookup/index.js

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

package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { Typography, Layout } from '../common';
-import { prepFields } from '../common/requirements';
-import DefinitionList from '../definitionList';
-import Title from '../title';
-
-import createDefinitions from './utils/createDefinitions';
-
-const DynamicFieldDefinitionList = ({ model, title, layout, fields }) => (
-  <>
-    {title && (
-      <div className="m-t-1 m-b-3">
-        <Title type={Typography.TITLE_BODY} className="p-t-3">
-          {title}
-        </Title>
-      </div>
-    )}
-
-    <DefinitionList layout={layout} definitions={createDefinitions(prepFields(fields), model)} />
-  </>
-);
-
-DynamicFieldDefinitionList.propTypes = {
-  model: PropTypes.shape({}).isRequired,
-  fields: PropTypes.shape({}).isRequired,
-  title: PropTypes.string,
-  layout: PropTypes.oneOf([
-    'VERTICAL_TWO_COLUMN',
-    'VERTICAL_ONE_COLUMN',
-    'HORIZONTAL_JUSTIFIED',
-    'HORIZONTAL_LEFT_ALIGNED',
-  ]),
-};
-
-DynamicFieldDefinitionList.defaultProps = {
-  title: null,
-  layout: Layout.VERTICAL_TWO_COLUMN,
-};
-
-export default DynamicFieldDefinitionList;

package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.spec.js

@@ -1,21 +0,0 @@
-import { shallow } from 'enzyme';
-
-import { DynamicFieldDefinitionList } from '..';
-import Title from '../title';
-
-describe('DynamicFieldDefinitionList', () => {
-  it('has title when title is passed', () => {
-    const component = shallow(
-      <DynamicFieldDefinitionList model={{}} fields={{}} title="A title" />,
-    );
-
-    expect(component.find(Title).exists()).toBe(true);
-    expect(component.find(Title).props().children).toBe('A title');
-  });
-
-  it('has no title when no title is passed', () => {
-    const component = shallow(<DynamicFieldDefinitionList model={{}} fields={{}} />);
-
-    expect(component.find('.np-text-body-title').exists()).toBe(false);
-  });
-});