@transferwise/components 0.0.0-experimental-4553cce → 0.0.0-experimental-03e1dec

package/src/alert/Alert.tsx

@@ -0,0 +1,222 @@
+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
+          closeButtonReference.current &&
+          !closeButtonReference.current.contains(event.currentTarget)
+        ) {
+          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}`) {
+  if (arrow) {
+    const classes = 'arrow';
+
+    switch (arrow) {
+      case 'down-center':
+        return `${classes} arrow-bottom arrow-center`;
+      case 'down-left':
+        return `${classes} arrow-bottom arrow-left`;
+      case 'down-right':
+        return `${classes} arrow-bottom arrow-right`;
+      case 'up-center':
+        return `${classes} arrow-center`;
+      case 'up-right':
+        return `${classes} arrow-right`;
+      case 'up-left':
+      default:
+        return classes;
+    }
+  }
+  return '';
+}

package/src/alert/index.ts

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

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/index.ts

@@ -4,6 +4,7 @@
 export type { AccordionProps, AccordionItem } from './accordion';
 export type { AvatarProps } from './avatar';
 export type { ActionOptionProps } from './actionOption';
+export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './alert';
 export type { BadgeProps } from './badge';
 export type { CircularButtonProps } from './circularButton';
 export type { DecisionProps } from './decision/Decision';
@@ -194,7 +195,6 @@ export { AvatarType } from './avatar';
 export { InfoPresentation } from './info';
 export { UploadStep } from './upload';
 export { DecisionPresentation, DecisionType } from './decision';
-export { AlertArrowPosition } from './alert/withArrow';
 export { LogoType } from './logo';
 export { FileType } from './common';
 

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -21,13 +21,6 @@ describe('InlineAlert', () => {
 
       expect(component).toHaveClass('alert-neutral');
     });
-
-    it('has a top left arrow', () => {
-      render(<InlineAlert>{message}</InlineAlert>);
-      const component = screen.getByRole('alert');
-
-      expect(component).toHaveClass('arrow');
-    });
   });
 
   describe('render with types', () => {

package/src/inlineAlert/InlineAlert.tsx

@@ -1,59 +1,31 @@
 import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { ReactNode } from 'react';
 
-import withArrow, { AlertArrowPosition } from '../alert/withArrow';
 import { Sentiment } from '../common';
-import { SentimentString } from '../common/propsValues/sentiment';
 
 export interface InlineAlertProps {
   id?: string;
-  type?: Sentiment | SentimentString;
+  type?: `${Sentiment}`;
   className?: string;
   children: ReactNode;
 }
 
-const typeClassMap: Record<Sentiment.ERROR | Sentiment.NEGATIVE, string> = {
-  [Sentiment.ERROR]: 'danger',
-  [Sentiment.NEGATIVE]: 'danger',
-};
-
-const InlineAlert = ({ id, type = Sentiment.NEUTRAL, className, children }: InlineAlertProps) => {
-  const { isModern } = useTheme();
-
-  const typeClass = `alert-${typeClassMap[type as Sentiment.ERROR | Sentiment.NEGATIVE] || type}`;
-
-  if (isModern) {
-    return (
-      <div role="alert" id={id} className={classNames('alert alert-detach', typeClass, className)}>
-        {(type === 'error' || type === 'negative') && <AlertCircleIcon />}
-        <div>{children}</div>
-      </div>
-    );
-  }
-
-  const getAlertContents = ({
-    children,
-    className,
-  }: {
-    children: ReactNode;
-    className?: string;
-  }) => {
-    return (
-      <div
-        role="alert"
-        id={id}
-        className={classNames('alert alert-detach p-x-2 p-y-1', typeClass, className)}
-      >
-        {children}
-      </div>
-    );
-  };
-
-  const AlertWithArrow = withArrow(getAlertContents, AlertArrowPosition.TOP_LEFT);
-
-  return <AlertWithArrow {...{ id, type, className, children }} />;
-};
-
-export default InlineAlert;
+export default function InlineAlert({
+  id,
+  type = Sentiment.NEUTRAL,
+  className,
+  children,
+}: InlineAlertProps) {
+  const danger = type === 'negative' || type === 'error';
+  return (
+    <div
+      role="alert"
+      id={id}
+      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
+    >
+      {danger && <AlertCircleIcon />}
+      <div>{children}</div>
+    </div>
+  );
+}

package/src/statusIcon/StatusIcon.tsx

@@ -1,27 +1,27 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import classNames from 'classnames';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
 
 export type StatusIconProps = {
-  sentiment: Sentiment;
+  sentiment: `${Sentiment}`;
   size: SizeSmall | SizeMedium | SizeLarge;
 };
 
-const StatusIcon = ({ sentiment = Sentiment.NEUTRAL, size = Size.MEDIUM }: StatusIconProps) => {
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: Check,
-    [Sentiment.NEUTRAL]: Info,
-    [Sentiment.WARNING]: Alert,
-    [Sentiment.NEGATIVE]: Cross,
-    [Sentiment.PENDING]: ClockBorderless,
-    [Sentiment.INFO]: Info,
-    [Sentiment.ERROR]: Cross,
-    [Sentiment.SUCCESS]: Check,
-  };
+const iconTypeMap = {
+  positive: Check,
+  neutral: Info,
+  warning: Alert,
+  negative: Cross,
+  pending: ClockBorderless,
+  info: Info,
+  error: Cross,
+  success: Check,
+} satisfies Record<`${Sentiment}`, React.ElementType>;
 
-  const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
+const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {
   const Icon = iconTypeMap[sentiment];
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
 
   return (
     <span

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