@transferwise/components 0.0.0-experimental-37390a6 → 0.0.0-experimental-833aa39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-37390a6",
+  "version": "0.0.0-experimental-833aa39",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.5.0",
-    "@transferwise/neptune-css": "14.12.1"
+    "@transferwise/neptune-css": "0.0.0-experimental-833aa39",
+    "@wise/components-theming": "1.5.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.9.6",
+    "@transferwise/neptune-css": "0.0.0-experimental-833aa39",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/card/Card.spec.tsx

@@ -104,49 +104,17 @@ describe('Card', () => {
       expect(screen.getByTestId('chevron-up-icon')).toHaveClass(Position.BOTTOM);
     });
 
-
-    describe('when collapsed', () => {
-      const CONTENT = 'mock children';
-
-      it('should not render children', async () => {
-        renderCard({ children: CONTENT });
-        expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
-      });
-
-      it('should render appropriate aria attributes', async () => {
-        renderCard({ children: CONTENT });
-        const button = screen.getByRole('button');
-        expect(button).toHaveAttribute('aria-expanded', 'false')
-        expect(button).not.toHaveAttribute('aria-controls')
-      });
-    });
-
     describe('when expanded', () => {
-      const defaultProps = {
-        children: 'mock children',
-        isExpanded: true,
-      };
-
       it('flips chevron', () => {
-        renderCard(defaultProps);
+        renderCard({ children: 'mock children', isExpanded: true });
 
         expect(screen.getByTestId('chevron-up-icon')).toHaveClass(Position.TOP);
       });
 
       it('renders children', () => {
-        renderCard(defaultProps);
-
-        expect(screen.getByText(defaultProps.children)).toBeInTheDocument();
-      });
-
-      it('should render appropriate aria attributes', async () => {
-        const {container} = renderCard(defaultProps);
-        const button = screen.getByRole('button');
-        const controlledId = button.getAttribute('aria-controls');
-        expect(button).toHaveAttribute('aria-expanded', 'true')
+        renderCard({ children: 'mock children', isExpanded: true });
 
-        const contentId = screen.getByText(defaultProps.children).getAttribute('id');
-        expect(contentId).toBe(controlledId);
+        expect(screen.getByText('mock children')).toBeInTheDocument();
       });
     });
   });

package/src/card/Card.story.tsx

@@ -1,70 +1,54 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { select, text } from '@storybook/addon-knobs';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-import { fn } from '@storybook/test';
 
 import Card from '.';
-
-type Story = StoryObj<typeof Card>;
+import { CardProps } from './Card';
 
 export default {
   component: Card,
   title: 'Layouts/Card',
-  args: {
-    title: 'A card',
-    details: 'Some details about this card',
-    children: 'Lorem ipsum dolor sit amet.',
-    onClick: fn(),
-    as: 'div',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Card>;
-
-
-export const Basic: Story = {
-  render: function Render(args) {
-    const [isExpanded, setIsExpanded] = useState(false);
-
-    const handleClick = (isCurrentExpanded: boolean) => {
-      setIsExpanded(isCurrentExpanded)
-      args?.onClick?.(!isExpanded);
-    }
-
-    return <Card {...args} isExpanded={isExpanded} onClick={handleClick} />;
-  }
 };
 
+const Template = (props: Pick<CardProps, 'isExpanded' | 'icon' | 'onClick'>) => {
+  const elementType = select('elementType', ['div', 'li'], 'div');
+  const title = text('title', 'A card');
+  const details = text('details', 'Some details about this card');
+  const content = text('content', 'Lorem ipsum dolor sit amet.');
+
+  return (
+    <Card as={elementType} title={title} details={details} {...props}>
+      {content}
+    </Card>
+  );
+};
 
-export const Multiple: Story = {
-  render: function Render(args) {
-    const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(0);
+export const Basic = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
 
-    const handleOnCardClick = (index: number) => {
-      args?.onClick?.(index !== expandedCardIndex);
-      setExpandedCardIndex(index !== expandedCardIndex ? index : null);
-    };
+  return <Template isExpanded={isExpanded} onClick={setIsExpanded} />;
+};
 
-    return (
-      <>
-        <Card
-          {...args}
-          icon={<FastFlagIcon />}
-          isExpanded={expandedCardIndex === 0}
-          onClick={() => handleOnCardClick(0)}
-        />
-        <Card
-          {...args}
-          icon={<FastFlagIcon />}
-          isExpanded={expandedCardIndex === 1}
-          onClick={() => handleOnCardClick(1)}
-        />
-        <Card
-          {...args}
-          icon={<FastFlagIcon />}
-          isExpanded={expandedCardIndex === 2}
-          onClick={() => handleOnCardClick(2)}
-        />
-      </>
-    );
-  }
+export const Multiple = () => {
+  const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(0);
+
+  const handleOnCardClick = (index: number) => {
+    setExpandedCardIndex(index !== expandedCardIndex ? index : null);
+  };
+
+  return (
+    <>
+      <Template
+        icon={<FastFlagIcon />}
+        isExpanded={expandedCardIndex === 0}
+        onClick={() => handleOnCardClick(0)}
+      />
+      <Template
+        icon={<FastFlagIcon />}
+        isExpanded={expandedCardIndex === 1}
+        onClick={() => handleOnCardClick(1)}
+      />
+      <Template isExpanded={expandedCardIndex === 2} onClick={() => handleOnCardClick(2)} />
+    </>
+  );
 };

package/src/card/Card.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { forwardRef, useId } from 'react';
+import { forwardRef } from 'react';
 
 import Body from '../body';
 import Chevron from '../chevron';
@@ -40,16 +40,13 @@ const Card = forwardRef(function Card(
   }: CardProps,
   reference,
 ) {
-  const labelId = useId();
-  const contentId = useId();
-  const isExpandable = Boolean(children);
-
+  const isOpen = !!(isExpanded && children);
 
   return (
     <Element
       ref={reference}
       className={clsx('np-card', className, {
-        'np-card--expanded': isExpandable && isExpanded,
+        'np-card--expanded': isOpen,
         'np-card--inactive': !children,
         'np-card--has-icon': !!icon,
       })}
@@ -57,38 +54,23 @@ const Card = forwardRef(function Card(
       data-testid={dataTestId}
     >
       <Option
-        aria-expanded={isExpandable ? isExpanded : undefined}
-        aria-controls={isExpanded ? contentId : undefined}
-        id={labelId}
         aria-label={ariaLabel}
-        as={isExpandable ? 'button' : 'div'}
-        className="np-card__button"
+        as={children ? 'button' : 'div'}
+        className={clsx('np-card__button')}
         media={icon}
         title={title}
         content={details}
         showMediaAtAllSizes
-        button={
-          isExpandable ? <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} /> : null
-        }
-        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}
+        button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}
+        onClick={children ? () => onClick?.(!isExpanded) : undefined}
       />
-
-      {isExpandable && (
-        <div
-          className={clsx('np-card__divider', {
-            'np-card__divider--expanded': isExpanded,
-          })}
-        />
-      )}
-
-      {isExpandable && isExpanded && (
-        <Body
-          as="div"
-          type={Typography.BODY_LARGE}
-          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}
-          id={contentId}
-          aria-labelledby={labelId}
-        >
+      <div
+        className={clsx('np-card__divider', {
+          'np-card__divider--expanded': isOpen,
+        })}
+      />
+      {isOpen && (
+        <Body as="span" type={Typography.BODY_LARGE} className="np-card__content d-block">
           {children}
         </Body>
       )}

package/src/common/Option/Option.tsx

@@ -6,8 +6,6 @@ import { LinkProps } from '../commonProps';
 
 export interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {
   'aria-label'?: string;
-  'aria-expanded'?: boolean;
-  'aria-controls'?: string;
   media?: ReactNode;
   name?: string;
   htmlFor?: string;

package/src/i18n/en.json

@@ -35,6 +35,7 @@
   "neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
   "neptune.Upload.psButtonText": "Cancel",
   "neptune.Upload.psProcessingText": "Uploading...",
+  "neptune.Upload.retry": "Retry",
   "neptune.Upload.usButtonText": "Or select a file",
   "neptune.Upload.usDropMessage": "Drop file to start upload",
   "neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",

package/src/main.css

@@ -5444,6 +5444,12 @@ html:not([dir="rtl"]) .np-navigation-option {
 .tw-droppable-sm {
   min-height: 245px;
 }
+.upload-error-message {
+  margin-top: 24px;
+  margin-top: var(--padding-medium);
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+}
 .np-upload-button-container {
   border-style: solid;
 }

package/src/upload/Upload.css

@@ -13,3 +13,9 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+.upload-error-message {
+  margin-top: 24px;
+  margin-top: var(--padding-medium);
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+}

package/src/upload/Upload.less

@@ -19,3 +19,8 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+
+.upload-error-message {
+  margin-top: var(--padding-medium);
+  border-top: 1px solid var(--color-border-neutral);
+}

package/src/upload/Upload.messages.ts

@@ -41,4 +41,8 @@ export default defineMessages({
     id: 'neptune.Upload.usPlaceholder',
     defaultMessage: 'Drag and drop a file less than {maxSize}MB',
   },
+  retry: {
+    id: 'neptune.Upload.retry',
+    defaultMessage: 'Retry',
+  },
 });

package/src/upload/Upload.spec.js

@@ -46,6 +46,7 @@ const props = {
   psProcessingText: 'psProcessingText',
   usAccept: 'image/*',
   usButtonText: 'Or Select File',
+  usButtonRetryText: 'Try again',
   usDropMessage: 'Drop file to start upload',
   usPlaceholder: 'Drag and drop a file less than 5MB',
 };
@@ -231,7 +232,7 @@ describe('Upload', () => {
       expect(component.find(CompleteStep)).toHaveLength(1);
     });
 
-    it('step CompleteStep is called with error props', async () => {
+    it('step UploadImageStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
       asyncFileRead.mockImplementation(async () => {
@@ -244,12 +245,12 @@ describe('Upload', () => {
       await waitForUpload();
       component.update();
 
-      expect(component.find(CompleteStep).props()).toStrictEqual({
-        ...COMPLETED_STEP_PROPS,
-        isImage: false,
-        isComplete: true,
-        isError: true,
-        uploadedImage: undefined,
+      expect(component.find(UploadImageStep).props()).toStrictEqual({
+        ...UPLOADIMAGE_STEP_PROPS,
+        isComplete: false,
+        errorMessage: 'csFailureText',
+        usButtonText: 'Try again',
+        usHelpImage: null,
       });
     });
 

package/src/upload/Upload.story.tsx

@@ -6,6 +6,7 @@ import { MAX_SIZE_DEFAULT } from './Upload';
 
 const meta = {
   component: Upload,
+  title: 'Forms/Upload',
   tags: ['autodocs'],
   argTypes: {
     maxSize: {

package/src/upload/Upload.tsx

@@ -50,6 +50,7 @@ export interface UploadProps extends WrappedComponentProps {
    */
   usAccept?: string;
   usButtonText?: string;
+  usButtonRetryText?: string;
   usDisabled?: boolean;
   usDropMessage?: string;
   usHelpImage?: React.ReactNode;
@@ -325,6 +326,7 @@ export class Upload extends Component<UploadProps, UploadState> {
       usDropMessage,
       usAccept,
       usButtonText,
+      usButtonRetryText,
       usDisabled,
       usHelpImage,
       usLabel,
@@ -359,7 +361,7 @@ export class Upload extends Component<UploadProps, UploadState> {
           'tw-droppable-lg droppable-lg': size === 'lg',
           'droppable-dropping': isDroppable,
           'droppable-processing': isProcessing,
-          'droppable-complete': isComplete,
+          'droppable-complete': isComplete && !isError,
           'droppable-negative': isError,
         })}
         onDragEnter={(event) => this.onDragEnter(event)}
@@ -395,16 +397,36 @@ export class Upload extends Component<UploadProps, UploadState> {
             onClear={(event) => this.handleOnClear(event)}
           />
         )}
-        {/* Starts render the step when isSuccess or isError are true so markup is there when css transition kicks in
+        {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in
       css transition to work properly */}
-        {(isSuccess || isError || isComplete) && (
+        {(isSuccess || isComplete) && !isError && (
           <CompleteStep
             fileName={fileName}
             isComplete={isComplete}
-            isError={isError}
             isImage={isImage}
             csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}
-            csFailureText={this.getErrorMessage(
+            csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}
+            uploadedImage={uploadedImage}
+            onClear={(event) => this.handleOnClear(event)}
+          />
+        )}
+        {isError && (
+          <UploadImageStep
+            fileDropped={async (file) => {
+              this.reset();
+              await this.fileDropped(file);
+            }}
+            isComplete={!isError}
+            usAccept={usAccept}
+            usButtonText={usButtonRetryText || intl.formatMessage(messages.retry)}
+            usDisabled={usDisabled}
+            usHelpImage={null}
+            usLabel={usLabel}
+            usPlaceholder={
+              usPlaceholder ||
+              intl.formatMessage(messages.usPlaceholder, { maxSize: maxSize / 1000000 })
+            }
+            errorMessage={this.getErrorMessage(
               response != null &&
                 typeof response === 'object' &&
                 'status' in response &&
@@ -412,9 +434,6 @@ export class Upload extends Component<UploadProps, UploadState> {
                 ? response.status
                 : undefined,
             )}
-            csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}
-            uploadedImage={uploadedImage}
-            onClear={(event) => this.handleOnClear(event)}
           />
         )}
         {!isProcessing && (

package/src/upload/steps/completeStep/completeStep.spec.js

@@ -41,14 +41,6 @@ describe('CompleteStep', () => {
     });
   });
 
-  describe('when error is true', () => {
-    it('renders errorMessage and icon when error is true', () => {
-      component = shallow(<CompleteStep {...COMPLETED_STEP_PROPS} isError />);
-      expect(component.find('p').text()).toBe(COMPLETED_STEP_PROPS.csFailureText);
-      expect(component.find(StatusIcon)).toHaveLength(1);
-    });
-  });
-
   it('renders button when csButtonText is set up', () => {
     expect(component.find(Button)).toHaveLength(1);
   });

package/src/upload/steps/completeStep/completeStep.tsx

@@ -3,17 +3,13 @@ import { Document as DocumentIcon } from '@transferwise/icons';
 import { Typography } from '../../..';
 import Body from '../../../body';
 import Button from '../../../button';
-import { Sentiment, Size } from '../../../common';
-import StatusIcon from '../../../statusIcon';
 import Title from '../../../title';
 
 export interface CompleteStepProps {
   csButtonText: string;
   csSuccessText: string;
-  csFailureText: string;
   fileName: string;
   isComplete: boolean;
-  isError: boolean;
   isImage: boolean;
   uploadedImage?: string;
   onClear: React.MouseEventHandler<HTMLButtonElement>;
@@ -21,11 +17,9 @@ export interface CompleteStepProps {
 
 export default function CompleteStep({
   csButtonText,
-  csFailureText,
   csSuccessText,
   fileName,
   isComplete,
-  isError,
   isImage,
   onClear,
   uploadedImage,
@@ -37,34 +31,25 @@ export default function CompleteStep({
           className="droppable-card-content d-flex flex-column align-items-center"
           aria-live="polite"
         >
-          {isError ? (
-            <>
-              <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
-              {csFailureText && <p className="m-t-2 m-b-0">{csFailureText}</p>}
-            </>
+          {isImage && uploadedImage ? (
+            <img src={uploadedImage} alt="OK" className="thumbnail " />
           ) : (
-            <>
-              {isImage && uploadedImage ? (
-                <img src={uploadedImage} alt="OK" className="thumbnail " />
-              ) : (
-                <DocumentIcon />
-              )}
+            <DocumentIcon />
+          )}
 
-              {fileName && (
-                <Body as="p" className="m-b-0">
-                  {fileName}
-                </Body>
-              )}
-              {csSuccessText && (
-                <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
-                  {csSuccessText}
-                </Title>
-              )}
-            </>
+          {fileName && (
+            <Body as="p" className="m-b-0">
+              {fileName}
+            </Body>
+          )}
+          {csSuccessText && (
+            <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
+              {csSuccessText}
+            </Title>
           )}
         </div>
         {csButtonText && (
-          <Button className={isError ? 'm-t-2' : 'm-t-1'} onClick={onClear}>
+          <Button className="m-t-1" onClick={onClear}>
             {csButtonText}
           </Button>
         )}

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js

@@ -1,5 +1,6 @@
 import { Upload as UploadIcon } from '@transferwise/icons';
 import { shallow } from 'enzyme';
+import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import UploadImageStep from '.';
 
@@ -13,6 +14,7 @@ describe('uploadImageStep', () => {
     usLabel: '',
     usHelpImage: '',
     usPlaceholder: '',
+    errorMessage: '',
   };
   let component;
   beforeEach(() => {
@@ -63,4 +65,14 @@ describe('uploadImageStep', () => {
 
     expect(component.find('.test-image')).toHaveLength(1);
   });
+
+  describe('when errorMessage is not empty', () => {
+    it('renders errorMessage and icon when error is true', () => {
+      component = shallow(
+        <UploadImageStep {...UPLOADIMAGE_STEP_PROPS} errorMessage="error message" />,
+      );
+      expect(component.find('.upload-error-message').text()).toBe('<InlineAlert />');
+      expect(component.find(StatusIcon)).toHaveLength(1);
+    });
+  });
 });

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

@@ -1,5 +1,8 @@
 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';
 
 export interface UploadImageStepProps {
   fileDropped: (file: File) => void;
@@ -10,6 +13,7 @@ export interface UploadImageStepProps {
   usHelpImage: React.ReactNode;
   usLabel: string;
   usPlaceholder: string;
+  errorMessage?: string | string[];
 }
 
 export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
@@ -25,6 +29,15 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
 
   getImage = () => {
     const { usHelpImage, usLabel } = this.props;
+    const { errorMessage } = this.props;
+
+    if (errorMessage) {
+      return (
+        <div className="d-flex flex-column align-items-center">
+          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
+        </div>
+      );
+    }
 
     if (!usHelpImage) {
       return (
@@ -42,7 +55,8 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
   };
 
   render() {
-    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder } = this.props;
+    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =
+      this.props;
 
     return (
       <div>
@@ -67,6 +81,13 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
                 onChange={() => this.onManualUpload()}
               />
             </label>
+            {errorMessage && (
+              <div className="upload-error-message">
+                <div className="m-t-3 has-error">
+                  <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>