@transferwise/components 0.0.0-experimental-5a0aa47 → 0.0.0-experimental-0b80b83

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

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

package/src/alert/Alert.story.tsx

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

package/src/alert/index.js

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

package/src/alert/withArrow/alertArrowPositions.ts

@@ -0,0 +1,9 @@
+// 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

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

package/src/alert/withArrow/withArrow.js

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,51 @@
+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/common/propsValues/sentiment.ts

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

package/src/i18n/ja.json

@@ -1,7 +1,7 @@
 {
   "neptune.Button.loadingAriaLabel": "読み込み中…",
-  "neptune.Chips.ariaLabel": "{choice} をクリア",
-  "neptune.ClearButton.ariaLabel": "消去",
+  "neptune.Chips.ariaLabel": "{choice}を消去する",
+  "neptune.ClearButton.ariaLabel": "消去する",
   "neptune.CloseButton.ariaLabel": "閉じる",
   "neptune.DateInput.day.label": "日",
   "neptune.DateInput.day.placeholder": "日",
@@ -21,19 +21,19 @@
   "neptune.Link.opensInNewTab": "（新しいタブで開きます）",
   "neptune.MoneyInput.Select.placeholder": "選択してください...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
-  "neptune.Select.searchPlaceholder": "検索... ",
+  "neptune.Select.searchPlaceholder": "検索する... ",
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
   "neptune.Summary.statusDone": "完了",
-  "neptune.Summary.statusNotDone": "未対応",
+  "neptune.Summary.statusNotDone": "未完了",
   "neptune.Summary.statusPending": "保留中",
   "neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
   "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
   "neptune.Upload.csSuccessText": "アップロードが完了しました。",
   "neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
   "neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
-  "neptune.Upload.psButtonText": "キャンセル",
-  "neptune.Upload.psProcessingText": "アップロード中…",
-  "neptune.Upload.usButtonText": "または、ファイルを選択する",
+  "neptune.Upload.psButtonText": "キャンセルする",
+  "neptune.Upload.psProcessingText": "アップロードしています…",
+  "neptune.Upload.usButtonText": "またはファイルを選択する",
   "neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
   "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ＆ドロップしてください",
   "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
@@ -42,16 +42,16 @@
   "neptune.UploadButton.uploadFile": "ファイルをアップロードする",
   "neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
   "neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
-  "neptune.UploadInput.deleteModalCancelButtonText": "キャンセル",
-  "neptune.UploadInput.deleteModalConfirmButtonText": "削除",
+  "neptune.UploadInput.deleteModalCancelButtonText": "キャンセルする",
+  "neptune.UploadInput.deleteModalConfirmButtonText": "削除する",
   "neptune.UploadInput.deleteModalTitle": "このファイルを削除しますか？",
   "neptune.UploadInput.fileIsTooLarge": "ファイルが大きすぎます。",
   "neptune.UploadInput.fileTypeNotSupported": "このファイルの種類はサポートされていません",
   "neptune.UploadInput.maximumFilesAlreadyUploaded": "申し訳ございませんが、このアップロードに失敗しました。一度に{maxFilesAllowed}個のファイルのみ受付可能です。",
-  "neptune.UploadItem.deleting": "削除中...",
-  "neptune.UploadItem.removeFile": "{filename} を削除",
+  "neptune.UploadItem.deleting": "削除しています...",
+  "neptune.UploadItem.removeFile": "{filename}のファイルを削除する",
   "neptune.UploadItem.uploaded": "アップロード済み",
   "neptune.UploadItem.uploadedFile": "アップロード済みのファイル",
-  "neptune.UploadItem.uploading": "アップロード中…",
-  "neptune.UploadItem.uploadingFailed": "アップロードが失敗しました"
+  "neptune.UploadItem.uploading": "アップロードしています…",
+  "neptune.UploadItem.uploadingFailed": "アップロードに失敗しました"
 }

package/src/index.ts

@@ -4,7 +4,6 @@
 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';
@@ -195,6 +194,7 @@ 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,6 +21,13 @@ 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,31 +1,59 @@
 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}`;
+  type?: Sentiment | SentimentString;
   className?: string;
   children: ReactNode;
 }
 
-export default function InlineAlert({
-  id,
-  type = '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>
-  );
-}
+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;

package/src/provider/Provider.tsx

@@ -7,7 +7,8 @@ import { DirectionProvider } from './direction';
 import { LanguageProvider } from './language';
 
 export interface ProviderProps {
-  i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages' | 'defaultRichTextElements'>;
+  i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &
+    Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;
   children?: React.ReactNode;
 }
 

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 } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size } from '../common';
 
 export type StatusIconProps = {
-  sentiment: `${Sentiment}`;
+  sentiment: Sentiment;
   size: SizeSmall | SizeMedium | SizeLarge;
 };
 
-const iconTypeMap = {
-  positive: Check,
-  neutral: Info,
-  warning: Alert,
-  negative: Cross,
-  pending: ClockBorderless,
-  info: Info,
-  error: Cross,
-  success: Check,
-} satisfies Record<`${Sentiment}`, React.ElementType>;
+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 StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {
+  const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
   const Icon = iconTypeMap[sentiment];
-  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
 
   return (
     <span