@transferwise/components 46.26.2 → 46.28.0

package/src/alert/{Alert.spec.js → Alert.spec.tsx}

@@ -1,22 +1,15 @@
 /* eslint-disable no-console */
-import {
-  InfoCircle,
-  CheckCircle,
-  AlertCircle,
-  Warning as AlertIcon,
-  HappyEmoji,
-} from '@transferwise/icons';
+import { HappyEmoji } from '@transferwise/icons';
 import { ThemeProvider } from '@wise/components-theming';
 import React from 'react';
 
 import { Sentiment, Size, Theme, Variant } from '../common';
 import { render, cleanup, screen, userEvent, fireEvent } from '../test-utils';
 
-import Alert from './Alert';
-import { AlertArrowPosition } from './withArrow';
+import Alert, { AlertAction, AlertArrowPosition, AlertType } from './Alert';
 
 jest.mock('react', () => {
-  const originReact = jest.requireActual('react');
+  const originReact = jest.requireActual<typeof import('react')>('react');
   const mUseReference = jest.fn();
   return {
     ...originReact,
@@ -25,20 +18,18 @@ jest.mock('react', () => {
 });
 
 describe('Alert', () => {
-  let component;
-  let container;
-  let alert;
-  let closeButton;
-  let action;
+  let component: HTMLElement;
+  let container: HTMLElement;
+  let alert: HTMLElement;
+  let closeButton: HTMLElement;
+  let action: AlertAction;
 
-  const renderIcon = (Icon) => render(<Icon size={24} />).container.innerHTML;
-
-  const classForType = (type) => `alert-${type}`;
+  const classForType = (type: AlertType) => `alert-${type}`;
 
   const message = 'Your card is on its way.';
 
   const origWarn = console.warn;
-  let mockedWarn;
+  let mockedWarn: jest.Mock;
 
   beforeAll(() => {
     mockedWarn = jest.fn();
@@ -56,11 +47,11 @@ describe('Alert', () => {
 
   describe('defaults', () => {
     beforeEach(() => {
-      ({ container } = render(
+      container = render(
         <ThemeProvider theme={Theme.LIGHT}>
           <Alert message={message} />
         </ThemeProvider>,
-      ));
+      ).container;
       component = screen.getByTestId('alert');
     });
 
@@ -70,7 +61,7 @@ describe('Alert', () => {
 
     it('will be of type neutral', () => {
       expect(component).toHaveClass(classForType(Sentiment.NEUTRAL));
-      expect(screen.getByTestId('info-circle-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('info-icon')).toBeInTheDocument();
     });
 
     it('is not dismissible', () => {
@@ -90,7 +81,9 @@ describe('Alert', () => {
       expect(component).toHaveClass('arrow');
       expect(component).toHaveClass('arrow-bottom');
       expect(mockedWarn).toHaveBeenCalledWith(
-        expect.stringContaining('Alert has deprecated the use of arrow.'),
+        expect.stringContaining(
+          "Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.",
+        ),
       );
     });
 
@@ -99,7 +92,9 @@ describe('Alert', () => {
 
       expect(screen.getByText(message)).toBeInTheDocument();
       expect(mockedWarn).toHaveBeenCalledWith(
-        expect.stringContaining('Alert has deprecated the use of children.'),
+        expect.stringContaining(
+          "Alert component doesn't support 'children' anymore, use 'message' instead.",
+        ),
       );
     });
 
@@ -108,7 +103,9 @@ describe('Alert', () => {
 
       expect(container.querySelector('button')).not.toBeInTheDocument();
       expect(mockedWarn).toHaveBeenCalledWith(
-        expect.stringContaining('Alert has deprecated the use of dismissible.'),
+        expect.stringContaining(
+          "Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.",
+        ),
       );
     });
 
@@ -118,7 +115,9 @@ describe('Alert', () => {
 
       expect(small.innerHTML).toStrictEqual(large.innerHTML);
       expect(mockedWarn).toHaveBeenCalledWith(
-        expect.stringContaining('Alert no longer supports any possible variations in size'),
+        expect.stringContaining(
+          "Alert component doesn't support 'size' anymore, please remove that prop.",
+        ),
       );
     });
 
@@ -128,9 +127,9 @@ describe('Alert', () => {
       const success = screen.getByTestId('alert');
 
       expect(success).toHaveClass(classForType(Sentiment.POSITIVE));
-      expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('check-icon')).toBeInTheDocument();
       expect(mockedWarn).toHaveBeenCalledWith(
-        'Alert has deprecated the success value for the `type` prop. Please update to Sentiment.POSITIVE.',
+        "Alert component has deprecated 'success' value for the 'type' prop. Please use 'positive' instead.",
       );
     });
 
@@ -140,9 +139,9 @@ describe('Alert', () => {
       const info = screen.getByTestId('alert');
 
       expect(info).toHaveClass(classForType(Sentiment.NEUTRAL));
-      expect(screen.getByTestId('info-circle-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('info-icon')).toBeInTheDocument();
       expect(mockedWarn).toHaveBeenCalledWith(
-        'Alert has deprecated the info value for the `type` prop. Please update to Sentiment.NEUTRAL.',
+        "Alert component has deprecated 'info' value for the 'type' prop. Please use 'neutral' instead.",
       );
     });
   });
@@ -153,9 +152,11 @@ describe('Alert', () => {
     const error = screen.getByTestId('alert');
 
     expect(error).toHaveClass(classForType(Sentiment.NEGATIVE));
-    expect(screen.getByTestId('cross-circle-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('cross-icon')).toBeInTheDocument();
     expect(mockedWarn).toHaveBeenCalledWith(
-      expect.stringContaining('Alert has deprecated the error value for the `type` prop.'),
+      expect.stringContaining(
+        "Alert component has deprecated 'error' value for the 'type' prop. Please use 'negative' instead.",
+      ),
     );
   });
 
@@ -167,7 +168,7 @@ describe('Alert', () => {
       };
       render(<Alert action={action} message={message} />);
 
-      const element = screen.getByText(action.text);
+      const element = screen.getByText(action.text?.toString() ?? '');
 
       expect(element).toHaveAttribute('href', action.href);
       expect(element).not.toHaveAttribute('aria-label');
@@ -183,7 +184,7 @@ describe('Alert', () => {
       };
       render(<Alert action={action} message={message} />);
 
-      const element = screen.getByText(action.text);
+      const element = screen.getByText(action.text?.toString() ?? '');
 
       expect(element).toHaveAttribute('aria-label', action['aria-label']);
       expect(element).toHaveAttribute('target', action.target);
@@ -245,7 +246,7 @@ describe('Alert', () => {
   });
 
   describe('types', () => {
-    const getComponentWithType = (type) => {
+    const getComponentWithType = (type: AlertType) => {
       render(<Alert type={type} message={message} />);
       return screen.getByTestId('alert');
     };
@@ -254,28 +255,28 @@ describe('Alert', () => {
       component = getComponentWithType(Sentiment.NEUTRAL);
 
       expect(component).toHaveClass(classForType(Sentiment.NEUTRAL));
-      expect(screen.getByTestId('info-circle-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('info-icon')).toBeInTheDocument();
     });
 
     it('renders positive', () => {
       component = getComponentWithType(Sentiment.POSITIVE);
 
       expect(component).toHaveClass(classForType(Sentiment.POSITIVE));
-      expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('check-icon')).toBeInTheDocument();
     });
 
     it('renders negative', () => {
       component = getComponentWithType(Sentiment.NEGATIVE);
 
       expect(component).toHaveClass(classForType(Sentiment.NEGATIVE));
-      expect(screen.getByTestId('cross-circle-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('cross-icon')).toBeInTheDocument();
     });
 
     it('renders warning', () => {
       component = getComponentWithType(Sentiment.WARNING);
 
       expect(component).toHaveClass(classForType(Sentiment.WARNING));
-      expect(screen.getByTestId('warning-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
     });
 
     it('renders error alerts with aria-role alert', () => {
@@ -292,9 +293,11 @@ describe('Alert', () => {
     const { location } = window;
 
     beforeAll(() => {
-      delete window.location;
       jest.spyOn(window, 'open').mockImplementation();
+      // @ts-expect-error value gets set right after its deletion
+      delete window.location;
       window.location = {
+        ...window.location,
         assign: jest.fn(),
       };
     });

package/src/alert/Alert.story.tsx

@@ -4,8 +4,7 @@ import { ClockBorderless } from '@transferwise/icons';
 
 import { Sentiment } from '../common';
 
-import Alert from './Alert';
-import { AlertArrowPosition } from './withArrow';
+import Alert, { AlertArrowPosition } from './Alert';
 
 export default {
   component: Alert,

package/src/alert/Alert.tsx

@@ -0,0 +1,218 @@
+import classNames from 'classnames';
+import { useState, useRef, useEffect } from 'react';
+
+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 { logActionRequired } from '../utilities';
+
+import InlineMarkdown from './inlineMarkdown';
+
+export type AlertAction = {
+  'aria-label'?: string;
+  href: string;
+  target?: string;
+  text: React.ReactNode;
+};
+
+/** @deprecated Use `"top" | "bottom"` instead. */
+type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;
+type AlertTypeResolved = `${
+  | Sentiment.POSITIVE
+  | Sentiment.NEUTRAL
+  | Sentiment.WARNING
+  | Sentiment.NEGATIVE}`;
+export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
+
+export enum AlertArrowPosition {
+  TOP_LEFT = 'up-left',
+  TOP = 'up-center',
+  TOP_RIGHT = 'up-right',
+  BOTTOM_LEFT = 'down-left',
+  BOTTOM = 'down-center',
+  BOTTOM_RIGHT = 'down-right',
+}
+
+export interface AlertProps {
+  /** 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?: AlertAction;
+  className?: string;
+  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
+  icon?: React.ReactElement;
+  /** Title for the alert component */
+  title?: string;
+  /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
+  message?: string;
+  /** The presence of the onDismiss handler will trigger the visibility of the close button */
+  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
+  /** The type dictates which icon and colour will be used */
+  type?: AlertType;
+  variant?: `${Variant}`;
+  /** @deprecated Use `InlineAlert` instead. */
+  arrow?: `${AlertArrowPosition}`;
+  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
+  children?: React.ReactNode;
+  /** @deprecated Use `onDismiss` instead. */
+  dismissible?: boolean;
+  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */
+  size?: `${Size}`;
+}
+
+function resolveType(type: AlertType): AlertTypeResolved {
+  switch (type) {
+    case 'success':
+      return 'positive';
+    case 'info':
+      return 'neutral';
+    case 'error':
+      return 'negative';
+  }
+  return type;
+}
+
+export default function Alert({
+  arrow,
+  action,
+  children,
+  className,
+  dismissible,
+  icon,
+  onDismiss,
+  message,
+  size,
+  title,
+  type = 'neutral',
+  variant = 'desktop',
+}: AlertProps) {
+  useEffect(() => {
+    if (arrow !== undefined) {
+      logActionRequired(
+        "Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.",
+      );
+    }
+  }, [arrow]);
+
+  useEffect(() => {
+    if (children !== undefined) {
+      logActionRequired(
+        "Alert component doesn't support 'children' anymore, use 'message' instead.",
+      );
+    }
+  }, [children]);
+
+  useEffect(() => {
+    if (dismissible !== undefined) {
+      logActionRequired(
+        "Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.",
+      );
+    }
+  }, [dismissible]);
+
+  useEffect(() => {
+    if (size !== undefined) {
+      logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
+    }
+  }, [size]);
+
+  const resolvedType = resolveType(type);
+  useEffect(() => {
+    if (resolvedType !== type) {
+      logActionRequired(
+        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,
+      );
+    }
+  }, [resolvedType, type]);
+
+  const [shouldFire, setShouldFire] = useState(false);
+
+  const closeButtonReference = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div
+      className={classNames(
+        'alert d-flex',
+        `alert-${resolvedType}`,
+        arrow != null && alertArrowClassNames(arrow),
+        className,
+      )}
+      data-testid="alert"
+      onTouchStart={() => setShouldFire(true)}
+      onTouchEnd={(event) => {
+        if (
+          shouldFire &&
+          action &&
+          // Check if current event is triggered from closeButton
+          event.target instanceof Node &&
+          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);
+      }}
+      onTouchMove={() => setShouldFire(false)}
+    >
+      <div
+        className={classNames('alert__content', 'd-flex', 'flex-grow-1', variant)}
+        data-testid={variant}
+      >
+        {icon ? (
+          <div className="alert__icon">{icon}</div>
+        ) : (
+          <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
+        )}
+        <div className="alert__message">
+          <div role={Sentiment.NEGATIVE === resolvedType ? '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>
+  );
+}
+
+function alertArrowClassNames(arrow: `${AlertArrowPosition}`) {
+  switch (arrow) {
+    case 'down-center':
+      return 'arrow arrow-bottom arrow-center';
+    case 'down-left':
+      return 'arrow arrow-bottom arrow-left';
+    case 'down-right':
+      return 'arrow arrow-bottom arrow-right';
+    case 'up-center':
+      return 'arrow arrow-center';
+    case 'up-right':
+      return 'arrow arrow-right';
+    case 'up-left':
+    default:
+      return 'arrow';
+  }
+}

package/src/alert/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Alert';
+export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './Alert';

package/src/button/Button.tsx

@@ -16,7 +16,6 @@ import {
   SizeSmall,
   SizeMedium,
   SizeLarge,
-  LinkProps,
 } from '../common';
 import ProcessIndicator from '../processIndicator';
 
@@ -30,8 +29,7 @@ type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
 /** @deprecated */
 type DeprecatedSizes = SizeExtraSmall;
 
-export type CommonProps = {
-  as?: ElementType;
+type CommonProps = {
   block?: boolean;
   disabled?: boolean;
   loading?: boolean;
@@ -40,22 +38,20 @@ export type CommonProps = {
   size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
 };
 
-export type ButtonProps = CommonProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
+type ButtonProps = CommonProps &
+  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
     as?: 'button';
     htmlType?: 'submit' | 'reset' | 'button';
   };
 
-export type AnchorProps = CommonProps &
-  AnchorHTMLAttributes<HTMLAnchorElement> &
-  Omit<LinkProps, 'href'> & {
+type AnchorProps = CommonProps &
+  React.ComponentPropsWithRef<'a'> & {
     as?: 'a';
-    href?: string; // Optional due to usage of component with next/link's passHref behavior
   };
 
 export type Props = ButtonProps | AnchorProps;
 
-export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
+type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
 
 const Button = forwardRef<ButtonReferenceType, Props>(
   (

package/src/common/dateUtils/isWithinRange/isWithinRange.spec.ts

@@ -22,10 +22,31 @@ describe('isWithinRange', () => {
     expect(isWithinRange(date, min, max)).toBe(false);
   });
 
+  it('returns false when min > date and max is undefined', () => {
+    const date = new Date('1995-12-20');
+    const min = new Date('1995-12-21');
+    const max = null;
+    expect(isWithinRange(date, min, max)).toBe(false);
+  });
+
   it('returns false when date > max', () => {
     const date = new Date('1995-12-23');
     const min = new Date('1995-12-20');
     const max = new Date('1995-12-22');
     expect(isWithinRange(date, min, max)).toBe(false);
   });
+
+  it('returns false when date > max and min is undefined', () => {
+    const date = new Date('1995-12-23');
+    const min = null;
+    const max = new Date('1995-12-22');
+    expect(isWithinRange(date, min, max)).toBe(false);
+  });
+
+  it('returns true when min and max are undefined', () => {
+    const date = new Date('1995-12-23');
+    const min = null;
+    const max = null;
+    expect(isWithinRange(date, min, max)).toBe(true);
+  });
 });

package/src/common/dateUtils/isWithinRange/isWithinRange.ts

@@ -1,3 +1,3 @@
-export function isWithinRange(date: Date, min: Date, max: Date) {
-  return !date || ((!min || date >= min) && (!max || date <= max));
+export function isWithinRange(date: Date, min: Date | null, max: Date | null) {
+  return (!min || date >= min) && (!max || date <= max);
 }

package/src/common/dateUtils/moveToWithinRange/moveToWithinRange.ts

@@ -1,6 +1,10 @@
-import { isWithinRange } from '..';
-
 // Makes sure that date is between min and max dates, returns a cloned min or max
-export function moveToWithinRange(date: Date, min: Date, max: Date) {
-  return isWithinRange(date, min, max) ? date : new Date(min && date < min ? +min : +max);
+export function moveToWithinRange(date: Date, min: Date | null, max: Date | null) {
+  if (min && date < min) {
+    return new Date(min);
+  }
+  if (max && date > max) {
+    return new Date(max);
+  }
+  return date;
 }

package/src/common/propsValues/sentiment.ts

@@ -18,13 +18,3 @@ export enum Sentiment {
    */
   SUCCESS = 'success',
 }
-
-export type SentimentString =
-  | 'negative'
-  | 'neutral'
-  | 'positive'
-  | 'warning'
-  | 'pending'
-  | 'info'
-  | 'error'
-  | 'success';

package/src/dateLookup/DateLookup.state.spec.js

@@ -66,4 +66,11 @@ describe('DateLookup state', () => {
     DateLookup.getDerivedStateFromProps(props, defaultState);
     expect(onChange).toHaveBeenCalledWith(new Date(2018, 10, 1));
   });
+
+  it('updates viewMonth and viewYear to date within min/max on Clear', () => {
+    const props = { value: null, min: new Date(2018, 11, 26), max: new Date(2018, 11, 26) };
+    const newState = DateLookup.getDerivedStateFromProps(props, defaultState);
+    expect(newState.viewMonth).toBe(11);
+    expect(newState.viewYear).toBe(2018);
+  });
 });

package/src/dateLookup/{DateLookup.story.js → DateLookup.story.tsx}

@@ -1,5 +1,5 @@
-import { boolean, select, date, text } from '@storybook/addon-knobs';
-import { userEvent, within } from '@storybook/test';
+import { boolean, select, text, date } from '@storybook/addon-knobs';
+import { userEvent } from '@storybook/test';
 import { useState } from 'react';
 
 import { Size } from '../common';
@@ -13,21 +13,21 @@ export default {
 };
 
 const epoch = new Date('2011-01-01');
-let theFuture = new Date(epoch);
+const theFuture = new Date(epoch);
 theFuture.setUTCDate(epoch.getUTCDate() + 10);
-let thePast = new Date(epoch);
+const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
+const size = select('size', Object.values([Size.SMALL, Size.MEDIUM, Size.LARGE]), Size.MEDIUM);
 
 export const Basic = () => {
-  const [value, setValue] = useState(epoch);
+  const [value, setValue] = useState<Date | null>(epoch);
   const disabled = boolean('disabled', false);
   const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short']);
+  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
   const placeholder = text('placeholder', 'placeholder');
-  const size = select('size', Object.values(Size), Size.MEDIUM);
   const id = text('id', 'date-lookup');
 
-  const clearable = boolean('clearable', false);
+  const clearable = boolean('clearable', true);
 
   return (
     <DateLookup
@@ -35,6 +35,7 @@ export const Basic = () => {
       id={id}
       label={label}
       min={thePast}
+      max={theFuture}
       monthFormat={monthFormat}
       placeholder={placeholder}
       size={size}
@@ -48,10 +49,9 @@ export const Basic = () => {
   );
 };
 
-Basic.play = async ({ canvasElement }) => {
+Basic.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   // testing focus state on keyboard nav
-  const canvas = within(canvasElement);
-  await userEvent.tab(canvas.getByRole('button'));
+  await userEvent.tab();
   await userEvent.keyboard(' ');
 };
 
@@ -61,12 +61,11 @@ export const Basic400Zoom = storyConfig(
 );
 
 export const RightAligned = () => {
-  const [value, setValue] = useState(epoch);
+  const [value, setValue] = useState<Date | null>(epoch);
   const disabled = boolean('disabled', false);
   const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short']);
+  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
   const placeholder = text('placeholder', 'placeholder');
-  const size = select('size', Object.values(Size), Size.MEDIUM);
 
   const minvalue = date('minvalue', thePast);
   const maxvalue = date('maxvalue', theFuture);