@transferwise/components 46.39.0 → 46.41.0

package/src/inlineAlert/InlineAlert.tsx

@@ -1,8 +1,8 @@
-import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
-import { Sentiment } from '../common';
+import { Sentiment, Size } from '../common';
+import StatusIcon from '../statusIcon';
 
 export interface InlineAlertProps {
   id?: string;
@@ -17,15 +17,22 @@ export default function InlineAlert({
   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)}
+      className={classNames(
+        'alert alert-detach',
+        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
+        className,
+      )}
     >
-      {danger && <AlertCircleIcon />}
-      <div>{children}</div>
+      <div className="d-inline-flex">
+        {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
+          <StatusIcon sentiment={type} size={Size.SMALL} />
+        )}
+        <div className="np-text-body-default">{children}</div>
+      </div>
     </div>
   );
 }

package/src/main.css

@@ -4208,14 +4208,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/src/processIndicator/ProcessIndicator.tsx

@@ -7,7 +7,7 @@ const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
 
 const ANIMATION_DURATION_IN_MS = 1500;
 
-type ProcessIndicatorStatus =
+export type ProcessIndicatorStatus =
   `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
 
 export interface ProcessIndicatorProps {

package/src/statusIcon/StatusIcon.css

@@ -66,13 +66,15 @@
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/src/statusIcon/StatusIcon.less

@@ -60,7 +60,8 @@
   }
 }
 
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 
@@ -68,6 +69,7 @@
   background-color: var(--color-content-secondary);
 }
 
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/src/statusIcon/StatusIcon.tsx

@@ -26,7 +26,7 @@ const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) =>
   return (
     <span
       data-testid="status-icon"
-      className={classNames('status-circle', 'status-circle-' + size, sentiment)}
+      className={classNames('status-circle', `status-circle-${size}`, sentiment)}
     >
       <Icon className={classNames('status-icon', iconColor)} />
     </span>

package/src/upload/Upload.spec.js

@@ -3,7 +3,7 @@ import { act } from 'react';
 
 import { ANIMATION_DURATION_IN_MS } from '../processIndicator';
 
-import { CompleteStep, UploadImageStep, MediaUploadStep, ProcessingStep } from './steps';
+import { CompleteStep, UploadImageStep, ProcessingStep } from './steps';
 
 import Upload from '.';
 
@@ -56,7 +56,7 @@ const UPLOADIMAGE_STEP_PROPS = {
   usAccept: props.usAccept,
   usButtonText: props.usButtonText,
   usDisabled: false,
-  usHelpImage: '',
+  usHelpImage: undefined,
   usLabel: '',
   usPlaceholder: props.usPlaceholder,
 };
@@ -105,17 +105,6 @@ describe('Upload', () => {
 
   it('renders the UploadImageStep by default', () => {
     expect(component.find(UploadImageStep)).toHaveLength(1);
-    expect(component.find(MediaUploadStep)).toHaveLength(0);
-    expect(component.find(ProcessingStep)).toHaveLength(0);
-    expect(component.find(CompleteStep)).toHaveLength(0);
-    expect(component.find('.droppable-dropping-card')).toHaveLength(1);
-  });
-
-  it(`renders the MediaUploadStep by default is it's the uploadStep in props`, () => {
-    component.setProps({ uploadStep: 'mediaUploadStep' });
-
-    expect(component.find(MediaUploadStep)).toHaveLength(1);
-    expect(component.find(UploadImageStep)).toHaveLength(0);
     expect(component.find(ProcessingStep)).toHaveLength(0);
     expect(component.find(CompleteStep)).toHaveLength(0);
     expect(component.find('.droppable-dropping-card')).toHaveLength(1);
@@ -260,7 +249,7 @@ describe('Upload', () => {
         isImage: false,
         isComplete: true,
         isError: true,
-        uploadedImage: null,
+        uploadedImage: undefined,
       });
     });
 

package/src/upload/Upload.story.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import Upload from '.';
+import { MAX_SIZE_DEFAULT } from './Upload';
+
+const meta = {
+  component: Upload,
+  tags: ['autodocs'],
+  argTypes: {
+    maxSize: {
+      control: {
+        type: 'number',
+        min: 0,
+      },
+    },
+  },
+} satisfies Meta<typeof Upload>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    maxSize: MAX_SIZE_DEFAULT,
+    usAccept: 'image/*',
+    usLabel: 'Front of your ID document',
+    httpOptions: {
+      url: 'https://httpbin.org/post',
+      method: 'POST',
+    },
+    onStart: fn(),
+    onSuccess: fn(),
+    onFailure: fn(),
+    onCancel: fn(),
+  },
+} satisfies Story;