@transferwise/components 46.119.5 → 46.120.1

package/src/typeahead/Typeahead.tsx

@@ -16,8 +16,7 @@ import {
   removeClickClassFromDocumentOnIos,
   stopPropagation,
 } from '../common';
-import InlineAlert from '../inlineAlert';
-import { InlineAlertProps } from '../inlineAlert/InlineAlert';
+import { InlinePrompt, InlinePromptProps } from '../prompt';
 import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
@@ -40,9 +39,17 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   id: string;
   name: string;
   addon?: ReactNode;
+  /**
+   * @deprecated Please use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
+   * @deprecated `error`, `info` and `success` are deprecated as alert types and will be soon removed.
+   */
   alert?: {
-    message: InlineAlertProps['children'];
-    type?: InlineAlertProps['type'];
+    message: InlinePromptProps['children'];
+    type?:
+      | InlinePromptProps['sentiment']
+      | `${Sentiment.ERROR}`
+      | `${Sentiment.INFO}`
+      | `${Sentiment.SUCCESS}`;
   };
   allowNew?: boolean;
   autoFillOnBlur?: boolean;
@@ -474,9 +481,20 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       dropdownOpen,
     });
 
-    const alertType = alert?.type ?? Sentiment.NEUTRAL;
-    const hasError = errorState || (alert && alertType === Sentiment.ERROR);
-    const displayAlert = (!errorState && alert) || (alert && alertType === Sentiment.ERROR);
+    const alertType = (() => {
+      if (!alert?.type || alert.type === Sentiment.INFO) {
+        return Sentiment.NEUTRAL;
+      }
+      if (alert.type === Sentiment.ERROR) {
+        return Sentiment.NEGATIVE;
+      }
+      if (alert.type === Sentiment.SUCCESS) {
+        return Sentiment.POSITIVE;
+      }
+      return alert.type;
+    })();
+    const hasError = errorState || (alert && alertType === Sentiment.NEGATIVE);
+    const displayAlert = (!errorState && alert) || (alert && alertType === Sentiment.NEGATIVE);
     const hasWarning = displayAlert && alertType === Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return (
@@ -494,7 +512,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         onClick={stopPropagation}
       >
         <div
-          className={clsx('form-group', {
+          className={clsx('form-group', 'form-group--typeahead', {
             'has-error': hasError,
             'has-warning': hasWarning,
             'has-info': hasInfo,
@@ -546,7 +564,13 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               </div>
             )}
           </div>
-          {displayAlert ? <InlineAlert type={alert.type}>{alert.message}</InlineAlert> : menu}
+          {displayAlert ? (
+            <InlinePrompt sentiment={alertType} className="typeahead--prompt" width="full">
+              {alert.message}
+            </InlinePrompt>
+          ) : (
+            menu
+          )}
         </div>
       </div>
     );

package/src/upload/Upload.story.tsx

@@ -71,7 +71,7 @@ const meta = {
     },
     errorIconLabel: {
       description:
-        "Override for the InlineAlert icon's default, accessible name announced by the screen readers",
+        "Override for the InlinePrompt icon's default, accessible name announced by the screen readers",
     },
     usHelpImage: {
       control: false,

package/src/upload/Upload.tests.story.tsx

@@ -1,4 +1,5 @@
-import type { Meta } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, waitFor } from 'storybook/test';
 
 import Upload from '.';
 import { Field } from '../field/Field';
@@ -73,6 +74,40 @@ export const MaxSizes = () => {
   );
 };
 
+export const WithError: StoryObj<typeof meta> = {
+  render: () => (
+    <Field label="Upload a file">
+      <Upload
+        usAccept="*"
+        usLabel="Upload a file"
+        usPlaceholder="Maximum filesize is 1B"
+        usDisabled={false}
+        maxSize={1}
+        errorIconLabel="File too large error"
+        httpOptions={{
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+        }}
+      />
+    </Field>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const fileInput = canvasElement.querySelector<HTMLInputElement>('input[type="file"]');
+
+    if (!fileInput) {
+      throw new Error('File input not found');
+    }
+
+    const file = new File(['This file content is definitely more than 1 byte'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+
+    await userEvent.upload(fileInput, file);
+    await waitFor(async () => canvas.findByText(/Maximum filesize is/i), { timeout: 3000 });
+  },
+};
+
 export const AllVariants = () => {
   return (
     <div style={{ display: 'flex', gap: '1rem' }}>

package/src/upload/Upload.tsx

@@ -55,7 +55,7 @@ export interface UploadProps extends WrappedComponentProps {
   usLabel?: string;
   usPlaceholder?: string;
   /**
-   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
    * announced by the screen readers
    * */
   errorIconLabel?: string;

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -2,7 +2,7 @@ import { Upload as UploadIcon } from '@transferwise/icons';
 import { createRef, PureComponent } from 'react';
 import StatusIcon from '../../../statusIcon';
 import { Sentiment, Size } from '../../../common';
-import InlineAlert from '../../../inlineAlert';
+import { InlinePrompt } from '../../../prompt/InlinePrompt/InlinePrompt';
 
 export interface UploadImageStepProps {
   fileDropped: (file: File) => void;
@@ -105,9 +105,13 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
           {errorMessage && (
             <div className="upload-error-message">
               <div className="m-t-3 has-error">
-                <InlineAlert type={Sentiment.NEGATIVE} iconLabel={errorIconLabel}>
+                <InlinePrompt
+                  sentiment={Sentiment.NEGATIVE}
+                  mediaLabel={errorIconLabel}
+                  width="full"
+                >
                   {errorMessage}
-                </InlineAlert>
+                </InlinePrompt>
               </div>
             </div>
           )}

package/src/withId/withId.story.tsx

@@ -27,7 +27,7 @@ DescribedButton.displayName = 'DescribedButton';
 export default {
   component: DescribedButton,
   title: 'HoCs/withId',
-  tags: ['docs-only'],
+  tags: ['docs-only', '!manifest'],
 } satisfies Meta<typeof withId>;
 
 export const WithoutId: Story = {};

package/build/types/test-utils/story-config.d.ts

@@ -1,64 +0,0 @@
-import { StoryObj } from '@storybook/react-webpack5';
-export declare const viewports: {
-    mobile3: {
-        name: string;
-        styles: {
-            height: string;
-            width: string;
-        };
-        type: string;
-    };
-    desktop: {
-        name: string;
-        styles: {
-            height: string;
-            width: string;
-        };
-        type: string;
-    };
-    mobile1: {
-        readonly name: "Small mobile";
-        readonly styles: {
-            readonly height: "568px";
-            readonly width: "320px";
-        };
-        readonly type: "mobile";
-    };
-    mobile2: {
-        readonly name: "Large mobile";
-        readonly styles: {
-            readonly height: "896px";
-            readonly width: "414px";
-        };
-        readonly type: "mobile";
-    };
-    tablet: {
-        readonly name: "Tablet";
-        readonly styles: {
-            readonly height: "1112px";
-            readonly width: "834px";
-        };
-        readonly type: "tablet";
-    };
-};
-export interface StoryConfig {
-    /**
-     * Creates variations of the component for the current story. Some
-     * padding is applied to the variants for spacing.
-     *
-     * - `default` adds just the story itself with some padding.
-     * - `light` adds a light theme variant.
-     * - `dark` adds a dark theme variant.
-     * - `rtl` adds a right-to-left writing mode variant.
-     * - `mobile` sets the default viewport for the Story with mobile
-     *   dimensions and uses those dimensions for snapshots.
-     *
-     * @default undefined
-     */
-    variants?: ('default' | 'light' | 'dark' | 'bright-green' | 'forest-green' | 'business' | 'business--forest-green' | 'business--bright-green' | 'platform' | 'platform--forest-green' | 'rtl' | 'mobile' | '400%')[];
-}
-/**
- * Utility function for creating variants of a CSFv3 story.
- */
-export declare const storyConfig: <Args>(storyObject: StoryObj<Args>, { variants }: StoryConfig) => StoryObj<Args>;
-//# sourceMappingURL=story-config.d.ts.map

package/build/types/test-utils/story-config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,UAAU,GACV,wBAAwB,GACxB,wBAAwB,GACxB,UAAU,GACV,wBAAwB,GACxB,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAkBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,EAC9B,aAAa,QAAQ,CAAC,IAAI,CAAC,EAC3B,cAAc,WAAW,KACxB,QAAQ,CAAC,IAAI,CAuBf,CAAC"}

package/src/test-utils/story-config.ts

@@ -1,95 +0,0 @@
-import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
-import { StoryObj } from '@storybook/react-webpack5';
-
-export const viewports = {
-  ...MINIMAL_VIEWPORTS,
-  mobile3: {
-    name: '400% Zoom',
-    // 320x256 https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
-    styles: { height: '256px', width: '320px' },
-    type: 'mobile',
-  },
-  desktop: {
-    name: 'Desktop',
-    styles: { height: '1024px', width: '1280px' },
-    type: 'desktop',
-  },
-};
-
-export interface StoryConfig {
-  /**
-   * Creates variations of the component for the current story. Some
-   * padding is applied to the variants for spacing.
-   *
-   * - `default` adds just the story itself with some padding.
-   * - `light` adds a light theme variant.
-   * - `dark` adds a dark theme variant.
-   * - `rtl` adds a right-to-left writing mode variant.
-   * - `mobile` sets the default viewport for the Story with mobile
-   *   dimensions and uses those dimensions for snapshots.
-   *
-   * @default undefined
-   */
-  variants?: (
-    | 'default'
-    | 'light'
-    | 'dark'
-    | 'bright-green'
-    | 'forest-green'
-    | 'business'
-    | 'business--forest-green'
-    | 'business--bright-green'
-    | 'platform'
-    | 'platform--forest-green'
-    | 'rtl'
-    | 'mobile'
-    | '400%'
-  )[];
-}
-
-const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {
-  if (viewport.styles && typeof viewport.styles === 'object') {
-    return Number.parseInt(viewport.styles.width, 10);
-  }
-  throw new Error('Unknown viewport styles');
-};
-
-/**
- * The key to 'Large mobile' viewport {@link viewports.mobile2}
- */
-const mobileViewportKey = 'mobile2';
-const mobileViewportWidth = getViewportWidth(viewports.mobile2);
-
-const zoom400perViewportKey = 'mobile3';
-const zoom400perViewportWidth = getViewportWidth(viewports.mobile3);
-
-/**
- * Utility function for creating variants of a CSFv3 story.
- */
-export const storyConfig = <Args>(
-  storyObject: StoryObj<Args>,
-  { variants }: StoryConfig,
-): StoryObj<Args> => {
-  const isMobile = variants?.includes('mobile') || undefined;
-  const is400Zoom = variants?.includes('400%') || undefined;
-
-  return {
-    ...storyObject,
-    parameters: {
-      ...storyObject.parameters,
-      variants,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      chromatic: {
-        ...storyObject.parameters?.chromatic,
-        viewports: (isMobile && [mobileViewportWidth]) || (is400Zoom && [zoom400perViewportWidth]),
-      },
-    },
-    globals: {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      viewport: {
-        ...storyObject.globals?.viewport,
-        value: (isMobile && mobileViewportKey) || (is400Zoom && zoom400perViewportKey),
-      },
-    },
-  };
-};