@transferwise/components 46.27.0 → 46.28.0

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

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -0,0 +1,70 @@
+import { ReactRenderer, Story } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import { PlayFunctionContext } from '@storybook/types';
+import { useState } from 'react';
+
+import DateLookup from './DateLookup';
+
+export default {
+  component: DateLookup,
+  title: 'Forms/DateLookup/Tests',
+};
+
+const Template: Story<DateLookup> = () => {
+  const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
+
+  return (
+    <DateLookup
+      value={value}
+      clearable
+      placeholder="placeholder"
+      onChange={(v) => {
+        setValue(v);
+      }}
+    />
+  );
+};
+
+export const ClearSpace = Template.bind({});
+
+ClearSpace.play = async ({
+  canvasElement,
+  step,
+}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+  const canvas = within(canvasElement);
+
+  await step('space can activate clear button', async () => {
+    // focus on clear button
+    const date = await canvas.findByText('January 10, 1987');
+    await expect(date).toBeInTheDocument();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // clear with space
+    await userEvent.keyboard(' ');
+    const placeholder = canvas.getByText('placeholder');
+    await expect(placeholder).toBeInTheDocument();
+  });
+};
+
+export const ClearEnter = Template.bind({});
+
+ClearEnter.play = async ({
+  canvasElement,
+  step,
+}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+  const canvas = within(canvasElement);
+
+  await step('enter can activate clear button', async () => {
+    // focus on clear button
+    const date = await canvas.findByText('January 10, 1987');
+    await expect(date).toBeInTheDocument();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // clear with space
+    await userEvent.keyboard('{enter}');
+    const placeholder = canvas.getByText('placeholder');
+    await expect(placeholder).toBeInTheDocument();
+  });
+};