@transferwise/components 0.0.0-experimental-be73f56 → 0.0.0-experimental-f304e2c

package/src/inlineAlert/InlineAlert.story.tsx

@@ -2,9 +2,9 @@ import { select, text } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react';
 
 import { Sentiment } from '../common';
-import { Input } from '../inputs/Input';
 
 import InlineAlert, { InlineAlertProps } from './InlineAlert';
+import { lorem40 } from '../test-utils';
 
 export default {
   component: InlineAlert,
@@ -29,81 +29,17 @@ export const Basic = () => {
 
   const message = text('message', 'Please enter a password over 5 characters');
 
-  let typeClass = '';
-  switch (type) {
-    case Sentiment.ERROR:
-    case Sentiment.NEGATIVE:
-      typeClass = 'has-error';
-      break;
-    case Sentiment.SUCCESS:
-    case Sentiment.POSITIVE:
-      typeClass = 'has-success';
-      break;
-    case Sentiment.INFO:
-    case Sentiment.NEUTRAL:
-      typeClass = 'has-info';
-      break;
-    case Sentiment.WARNING:
-      typeClass = 'has-warning';
-      break;
-    case Sentiment.PENDING:
-  }
-
   return (
     <>
-      {/* eslint-disable-next-line react/no-adjacent-inline-elements */}
-      <p>
-        The styling for the input (the coloured border) and the visibility of the inline alert is
-        controlled through the use of <code>has-***</code> classes which are applied to the{' '}
-        <code>form-group</code> element. For example, to display an inline alert of type error, you
-        must also apply the class <code>has-error</code> to the parent <code>form-group</code>{' '}
-        element. The available classes are <code>has-error</code>, <code>has-info</code>,{' '}
-        <code>has-warning</code> and <code>has-success</code>.
-      </p>
       <p>
-        Where possible consumers should use{' '}
-        <a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
-        this manually.
+        Avoid using <code>InlineAlert</code> directly (unless for some custom use cases), for form
+        control validation, info messaging please use <code>Field</code> component
+        <pre>{'<Field sentiment={..} message={..}>'}</pre>
       </p>
-      <div className={`form-group ${typeClass}`}>
-        <label className="control-label" htmlFor="id0">
-          Toggleable
-        </label>
-        <Input id="id0" value="Neptune is cool" />
-        <InlineAlert type={type}>{message}</InlineAlert>
-      </div>
-      <div className="form-group has-error">
-        <label className="control-label" htmlFor="id1">
-          Negative
-        </label>
-        <Input id="id1" value="Neptune is cool" />
-        <InlineAlert type="negative">{message}</InlineAlert>
-      </div>
-      <div className="form-group has-success">
-        <label className="control-label" htmlFor="id2">
-          Positive
-        </label>
-        <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </InlineAlert>
-      </div>
-      <div className="form-group has-neutral">
-        <label className="control-label" htmlFor="id3">
-          Neutral
-        </label>
-        <Input id="id3" value="Neptune is cool" />
-        <InlineAlert type="neutral">{message}</InlineAlert>
-      </div>
-      <div className="form-group">
-        <label className="control-label" htmlFor="id4">
-          No has-* class
-        </label>
-        <Input id="id4" value="Neptune is cool" />
-        <InlineAlert type="negative">{message}</InlineAlert>
-      </div>
+      <InlineAlert type={type}>{message}</InlineAlert>
+      <InlineAlert type="negative">{message}</InlineAlert>
+      <InlineAlert type="positive">{lorem40}</InlineAlert>
+      <InlineAlert type="negative">{message}</InlineAlert>
     </>
   );
 };

package/src/inlineAlert/InlineAlert.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 
 import { Sentiment, Size } from '../common';
 import StatusIcon from '../statusIcon';
+import Body from '../body';
 
 export interface InlineAlertProps {
   id?: string;
@@ -26,17 +27,18 @@ export default function InlineAlert({
   children,
 }: InlineAlertProps) {
   return (
-    <div
+    <Body
       role="alert"
       id={id}
       className={clsx(
         'alert alert-detach',
         `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
+        'd-flex',
         className,
       )}
     >
       {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}
-      <div className="np-text-body-default">{children}</div>
-    </div>
+      {children}
+    </Body>
   );
 }

package/src/inputs/InputGroup.spec.tsx

@@ -26,6 +26,6 @@ describe('InputGroup', () => {
         </InputGroup>
       </Field>,
     );
-    expect(screen.getByLabelText('Search…')).toHaveRole('textbox');
+    expect(screen.getByLabelText(/Search…/)).toHaveRole('textbox');
   });
 });

package/src/inputs/SearchInput.spec.tsx

@@ -11,6 +11,6 @@ describe('SearchInput', () => {
         <SearchInput />
       </Field>,
     );
-    expect(screen.getByLabelText('Search…')).toHaveRole('searchbox');
+    expect(screen.getByLabelText(/Search…/)).toHaveRole('searchbox');
   });
 });

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
+    expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
   });
 });

package/src/label/Label.messages.tsx

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  optionalLabel: {
+    id: 'neptune.Label.optional',
+    defaultMessage: '(Optional)',
+  },
+  optionalAriaLabel: {
+    id: 'neptune.aria.Label.optional',
+    defaultMessage: 'This field is optional',
+  },
+});

package/src/label/Label.story.tsx

@@ -1,37 +1,31 @@
-import { useState } from 'react';
-
-import Info from '../info/Info';
-import { Input } from '../inputs/Input';
 import { Label } from './Label';
 
 export default {
   component: Label,
   title: 'Label',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {
-  const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Label>
-      Phone number
-      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-    </Label>
-  );
-};
+    <>
+      <p>
+        Avoid using <code>Label</code> component directly (unless for some custom use cases), for
+        form control labels and descriptions / info messages, please use <code>Field</code>{' '}
+        component
+        <pre>{'<Field label={..} description={..} required={..}>'}</pre>
+      </p>
 
-export const WithInfo = () => {
-  const [value, setValue] = useState<string | undefined>('This is some text');
-  return (
-    <Label>
-      <span className="d-flex">
-        Phone number{' '}
-        <Info
-          content="This is some help in popover"
-          aria-label="The aria label"
-          className="m-l-1"
-        />
-      </span>
-      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-    </Label>
+      <Label className="m-b-2">Text Input</Label>
+
+      <Label className="m-b-2">
+        <Label.Optional>Text Input</Label.Optional>
+      </Label>
+
+      <Label className="m-b-2">
+        <Label.Optional>Text Input with Description</Label.Optional>
+        <Label.Description>This a field Description</Label.Description>
+      </Label>
+    </>
   );
 };

package/src/label/Label.tsx

@@ -1,4 +1,9 @@
 import { clsx } from 'clsx';
+import messages from './Label.messages';
+import { useIntl } from 'react-intl';
+import Body from '../body';
+import { CommonProps } from '../common';
+import { PropsWithChildren } from 'react';
 
 export type LabelProps = {
   id?: string;
@@ -7,14 +12,45 @@ export type LabelProps = {
   children?: React.ReactNode;
 };
 
-export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+const Label = ({ id, htmlFor, className, children }: LabelProps) => {
   return (
     <label
       id={id}
       htmlFor={htmlFor}
-      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}
+      className={clsx(
+        'np-label d-flex flex-column m-b-0 np-text-body-default-bold text-primary',
+        className,
+      )}
     >
       {children}
     </label>
   );
 };
+
+export type LabelOptionalProps = PropsWithChildren<CommonProps>;
+
+const Optional = ({ children, className }: LabelOptionalProps) => {
+  const { formatMessage } = useIntl();
+  return (
+    <div>
+      {children}
+      <Body
+        as="span"
+        aria-label={formatMessage(messages.optionalAriaLabel)}
+        className={clsx('text-secondary', 'm-l-1', className)}
+      >
+        {formatMessage(messages.optionalLabel)}
+      </Body>
+    </div>
+  );
+};
+
+export type LabelDescriptionProps = PropsWithChildren<CommonProps>;
+
+const Description = ({ children, className }: LabelDescriptionProps) =>
+  children ? <Body className={clsx('text-secondary', className)}>{children}</Body> : null;
+
+Label.Optional = Optional;
+Label.Description = Description;
+
+export { Label };

package/src/label/index.ts

@@ -0,0 +1,2 @@
+export { Label } from './Label';
+export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';

package/src/main.css

@@ -1719,18 +1719,10 @@ button.np-option {
   white-space: nowrap;
   width: 100%;
 }
-.np-date-trigger .control-label {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
-.np-theme-personal .np-date-trigger .control-label + span {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;
@@ -2385,6 +2377,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;
@@ -5444,12 +5440,6 @@ 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/main.less

@@ -32,6 +32,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
+@import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";
 @import "./inputs/TextArea.less";

package/src/moneyInput/MoneyInput.story.tsx

@@ -4,8 +4,6 @@ import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
-import Provider from '../provider/Provider';
-import translations from '../i18n';
 
 export default {
   component: MoneyInput,

package/src/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '../test-utils';
 
 import RadioGroup from '.';
 import { Field } from '../field/Field';

package/src/select/Select.rtl.spec.tsx

@@ -12,6 +12,6 @@ describe('Select', () => {
         <Select options={options} selected={options[0]} onChange={() => {}} />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
+    expect(screen.getByLabelText(/Currency/)).toHaveTextContent('USD');
   });
 });

package/src/switch/Switch.spec.tsx

@@ -89,6 +89,6 @@ describe('Switch', () => {
         <Switch checked onClick={props.onClick} />
       </Field>,
     );
-    expect(screen.getByLabelText('Dark mode')).toHaveAttribute('role', 'switch');
+    expect(screen.getByLabelText(/Dark mode/)).toHaveAttribute('role', 'switch');
   });
 });

package/src/upload/Upload.css

@@ -13,9 +13,3 @@
 .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,8 +19,3 @@
 .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,8 +41,4 @@ 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,7 +46,6 @@ 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',
 };
@@ -232,7 +231,7 @@ describe('Upload', () => {
       expect(component.find(CompleteStep)).toHaveLength(1);
     });
 
-    it('step UploadImageStep is called with error props', async () => {
+    it('step CompleteStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
       asyncFileRead.mockImplementation(async () => {
@@ -245,12 +244,12 @@ describe('Upload', () => {
       await waitForUpload();
       component.update();
 
-      expect(component.find(UploadImageStep).props()).toStrictEqual({
-        ...UPLOADIMAGE_STEP_PROPS,
-        isComplete: false,
-        errorMessage: 'csFailureText',
-        usButtonText: 'Try again',
-        usHelpImage: null,
+      expect(component.find(CompleteStep).props()).toStrictEqual({
+        ...COMPLETED_STEP_PROPS,
+        isImage: false,
+        isComplete: true,
+        isError: true,
+        uploadedImage: undefined,
       });
     });
 

package/src/upload/Upload.story.tsx

@@ -6,7 +6,6 @@ import { MAX_SIZE_DEFAULT } from './Upload';
 
 const meta = {
   component: Upload,
-  title: 'Forms/Upload',
   tags: ['autodocs'],
   argTypes: {
     maxSize: {
@@ -36,20 +35,3 @@ export const Basic = {
     onCancel: fn(),
   },
 } satisfies Story;
-
-export const Loading = {
-  args: {
-    animationDelay: 10000000000,
-    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;

package/src/upload/Upload.tsx

@@ -50,7 +50,6 @@ export interface UploadProps extends WrappedComponentProps {
    */
   usAccept?: string;
   usButtonText?: string;
-  usButtonRetryText?: string;
   usDisabled?: boolean;
   usDropMessage?: string;
   usHelpImage?: React.ReactNode;
@@ -326,7 +325,6 @@ export class Upload extends Component<UploadProps, UploadState> {
       usDropMessage,
       usAccept,
       usButtonText,
-      usButtonRetryText,
       usDisabled,
       usHelpImage,
       usLabel,
@@ -361,8 +359,8 @@ export class Upload extends Component<UploadProps, UploadState> {
           'tw-droppable-lg droppable-lg': size === 'lg',
           'droppable-dropping': isDroppable,
           'droppable-processing': isProcessing,
-          'droppable-complete': isComplete && !isError,
-          'droppable-negative': isError && !isProcessing,
+          'droppable-complete': isComplete,
+          'droppable-negative': isError,
         })}
         onDragEnter={(event) => this.onDragEnter(event)}
         onDragLeave={(event) => this.onDragLeave(event)}
@@ -385,36 +383,28 @@ export class Upload extends Component<UploadProps, UploadState> {
           />
         )}
 
-        {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in
+        {isProcessing && (
+          <ProcessingStep
+            isComplete={isComplete}
+            isError={isError}
+            isSuccess={isSuccess}
+            psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
+            psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
+            psButtonDisabled={psButtonDisabled}
+            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
+            onClear={(event) => this.handleOnClear(event)}
+          />
+        )}
+        {/* Starts render the step when isSuccess or isError are true so markup is there when css transition kicks in
       css transition to work properly */}
-        {(isSuccess || isComplete) && !isError && (
+        {(isSuccess || isError || isComplete) && (
           <CompleteStep
             fileName={fileName}
             isComplete={isComplete}
+            isError={isError}
             isImage={isImage}
             csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}
-            csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}
-            uploadedImage={uploadedImage}
-            onClear={(event) => this.handleOnClear(event)}
-          />
-        )}
-        {isError && !isProcessing && (
-          <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(
+            csFailureText={this.getErrorMessage(
               response != null &&
                 typeof response === 'object' &&
                 'status' in response &&
@@ -422,17 +412,8 @@ export class Upload extends Component<UploadProps, UploadState> {
                 ? response.status
                 : undefined,
             )}
-          />
-        )}
-        {isProcessing && (
-          <ProcessingStep
-            isComplete={isComplete}
-            isError={isError}
-            isSuccess={isSuccess}
-            psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
-            psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
-            psButtonDisabled={psButtonDisabled}
-            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
+            csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}
+            uploadedImage={uploadedImage}
             onClear={(event) => this.handleOnClear(event)}
           />
         )}

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

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 
 import Body from '../../../body';
 import Button from '../../../button';
+import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import CompleteStep from '.';
 
@@ -40,6 +41,14 @@ 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);
   });