@transferwise/components 0.0.0-experimental-6a46f89 → 0.0.0-experimental-d54bc7a

package/src/field/Field.tsx

@@ -9,18 +9,16 @@ import {
   InputIdContextProvider,
   InputInvalidProvider,
 } from '../inputs/contexts';
-import { Label } from '../label';
+import { Label } from '../label/Label';
 
 export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
-  required?: boolean;
-  /** @deprecated use `description` prop instead */
+  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
-  description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
   sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
@@ -31,17 +29,14 @@ export type FieldProps = {
 export const Field = ({
   id,
   label,
-  required = false,
   message: propMessage,
-  hint,
-  description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }: FieldProps) => {
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
-  const message = propMessage || props.error;
+  const message = props.error || props.hint || propMessage;
   const hasError = sentiment === Sentiment.NEGATIVE;
 
   const labelId = useId();
@@ -49,32 +44,16 @@ export const Field = ({
   const fallbackInputId = useId();
   const inputId = id !== null ? (id ?? fallbackInputId) : undefined;
 
-  const messageId = useId();
   const descriptionId = useId();
 
-  /**
-   * form control can have multiple messages to describe it,
-   * e.g the description underneath the label and inline alert
-   */
-  function ariaDescribedbyByIds() {
-    const messageIds = [];
-    if (description) {
-      messageIds.push(descriptionId);
-    }
-    if (message) {
-      messageIds.push(messageId);
-    }
-    return messageIds.length > 0 ? messageIds.join(' ') : undefined;
-  }
-
   return (
     <FieldLabelIdContextProvider value={labelId}>
       <InputIdContextProvider value={inputId}>
-        <InputDescribedByProvider value={ariaDescribedbyByIds()}>
+        <InputDescribedByProvider value={message ? descriptionId : undefined}>
           <InputInvalidProvider value={hasError}>
             <div
               className={clsx(
-                'np-field form-group d-block',
+                'form-group d-block',
                 {
                   'has-success': sentiment === Sentiment.POSITIVE,
                   'has-warning': sentiment === Sentiment.WARNING,
@@ -85,19 +64,16 @@ export const Field = ({
               )}
             >
               {label != null ? (
-                <>
-                  <Label id={labelId} htmlFor={inputId}>
-                    {required ? label : <Label.Optional>{label}</Label.Optional>}
-                  </Label>
-                  <Label.Description id={descriptionId}>{description}</Label.Description>
-                  <div className="np-field-control">{children}</div>
-                </>
+                <Label id={labelId} htmlFor={inputId}>
+                  {label}
+                  {children}
+                </Label>
               ) : (
                 children
               )}
 
               {message && (
-                <InlineAlert type={sentiment} id={messageId}>
+                <InlineAlert type={sentiment} id={descriptionId}>
                   {message}
                 </InlineAlert>
               )}

package/src/i18n/en.json

@@ -18,7 +18,6 @@
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
-  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -36,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/index.ts

@@ -44,7 +44,7 @@ export type {
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
-export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
+export type { LabelProps } from './label/Label';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';

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,16 +29,81 @@ 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>
-        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>
+        Where possible consumers should use{' '}
+        <a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
+        this manually.
       </p>
-      <InlineAlert type={type}>{message}</InlineAlert>
-      <InlineAlert type="negative">{message}</InlineAlert>
-      <InlineAlert type="positive">{lorem40}</InlineAlert>
+      <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>
     </>
   );
 };

package/src/inlineAlert/InlineAlert.tsx

@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
 
 import { Sentiment, Size } from '../common';
 import StatusIcon from '../statusIcon';
-import Body from '../body';
 
 export interface InlineAlertProps {
   id?: string;
@@ -20,15 +19,6 @@ const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
   Sentiment.WARNING,
 ]);
 
-/**
- * Avoid using `<InlineAlert>` component directly
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
- *
- * Example:
- * ```
- * <Field sentiment={..} message={..}>..</Field>
- * ```
- */
 export default function InlineAlert({
   id,
   type = 'neutral',
@@ -36,18 +26,17 @@ export default function InlineAlert({
   children,
 }: InlineAlertProps) {
   return (
-    <Body
+    <div
       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} />}
-      {children}
-    </Body>
+      <div className="np-text-body-default">{children}</div>
+    </div>
   );
 }

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -2,7 +2,6 @@ import { text } from '@storybook/addon-knobs';
 import { userEvent, within } from '@storybook/test';
 
 import InputWithDisplayFormat from '.';
-import { Field } from '../field/Field';
 
 export default {
   component: InputWithDisplayFormat,
@@ -14,7 +13,10 @@ export const Basic = () => {
   const displayPattern = text('DisplayPattern', '**-**-**');
 
   return (
-    <Field label="Display pattern is controlled via knobs" id="Basic">
+    <>
+      <label id="template" htmlFor="Basic">
+        Display pattern is controlled via knobs
+      </label>
       <InputWithDisplayFormat
         id="Basic"
         placeholder={placeholder}
@@ -24,7 +26,7 @@ export const Basic = () => {
         onBlur={(v) => console.log(v)}
         onFocus={(v) => console.log(v)}
       />
-    </Field>
+    </>
   );
 };
 
@@ -35,7 +37,10 @@ const Template = (args) => {
   const id = label.replaceAll(' ', '-').toLowerCase();
 
   return (
-    <Field label={label} id={id}>
+    <>
+      <label id="template" htmlFor={id}>
+        {label}
+      </label>
       <InputWithDisplayFormat
         id={id}
         placeholder={placeholder}
@@ -45,7 +50,7 @@ const Template = (args) => {
         onBlur={(v) => console.log(v)}
         onFocus={(v) => console.log(v)}
       />
-    </Field>
+    </>
   );
 };
 

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.spec.tsx

@@ -1,5 +1,5 @@
 import { Input } from '../inputs/Input';
-import { lorem10, render, screen } from '../test-utils';
+import { render, screen } from '../test-utils';
 import { Label } from './Label';
 
 describe('Label', () => {
@@ -7,68 +7,20 @@ describe('Label', () => {
     render(
       <Label>
         Phone number
-        <Input id="test" readOnly />
+        <Input readOnly />
       </Label>,
     );
 
     expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
   });
-
-  it('renders string labels with (Optional) suffix', () => {
+  it('renders node type labels', () => {
     render(
       <Label>
-        <Label.Optional>Phone number</Label.Optional>
-        <Input id="test" readOnly />
+        <span>Phone number</span>
+        <Input readOnly />
       </Label>,
     );
 
-    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
-    expect(screen.getByLabelText(/(Optional)/)).toBeInTheDocument();
-  });
-
-  it('renders description', () => {
-    const descriptionId = 'desc-test';
-    render(
-      <>
-        <Label htmlFor="test">Phone number</Label>
-        <Label.Description id={descriptionId}>{lorem10}</Label.Description>
-        <Input id="test" readOnly aria-describedby={descriptionId} />
-      </>,
-    );
-
     expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
-    expect(screen.getByText(lorem10)).toBeInTheDocument();
-    expect(screen.getByText(lorem10)).toHaveAttribute('id', descriptionId);
-  });
-
-  it('renders description with optional', () => {
-    const descriptionId = 'desc-test';
-    render(
-      <>
-        <Label htmlFor="test">
-          <Label.Optional>Phone number</Label.Optional>
-        </Label>
-        <Label.Description id={descriptionId}>{lorem10}</Label.Description>
-        <Input id="test" readOnly aria-describedby={descriptionId} />
-      </>,
-    );
-
-    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
-    expect(screen.getByText(lorem10)).toBeInTheDocument();
-    expect(screen.getByText(lorem10)).toHaveAttribute('id', descriptionId);
-  });
-
-  it('connects label with form control via `id` + `aria-labelledby`', () => {
-    const labelId = 'label-id';
-    render(
-      <>
-        <Label id={labelId}>Phone number</Label>
-        <div role="group" aria-labelledby={labelId}>
-          Custom complex component
-        </div>
-      </>,
-    );
-
-    expect(screen.getByLabelText('Phone number')).toHaveAttribute('aria-labelledby', labelId);
   });
 });

package/src/label/Label.story.tsx

@@ -1,45 +1,37 @@
-import Info from '../info';
+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 (
-    <>
-      <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>
-      <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>
-      <Label.Description>This a field Description</Label.Description>
-
-      <Label className="m-b-2">
-        Text Input with Description
-        <Info content="This is some help in popover" aria-label="The aria label" />{' '}
-      </Label>
-      <Label.Description>This a field Description</Label.Description>
+    <Label>
+      Phone number
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
+  );
+};
 
-      <Label className="m-b-2">
-        <Label.Optional>
-          Text Input with Description{' '}
-          <Info content="This is some help in popover" aria-label="The aria label" />{' '}
-        </Label.Optional>
-      </Label>
-      <Label.Description>This a field Description</Label.Description>
-    </>
+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>
   );
 };

package/src/label/Label.tsx

@@ -1,65 +1,20 @@
 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;
-  htmlFor?: string | undefined;
+  htmlFor?: string;
   className?: string;
   children?: React.ReactNode;
 };
 
-/**
- * Avoid using `<Label>` component directly
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
- *
- * Example:
- * ```
- * <Field label={..} description={..} required={..}>..</Field>
- * ```
- */
-const Label = ({ className, children, htmlFor, id }: LabelProps) => {
+export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
   return (
     <label
       id={id}
       htmlFor={htmlFor}
-      className={clsx(
-        'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
-        className,
-      )}
+      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}
     >
       {children}
     </label>
   );
 };
-
-export type LabelOptionalProps = PropsWithChildren<CommonProps>;
-
-// eslint-disable-next-line functional/immutable-data
-Label.Optional = function Optional({ children, className }: LabelOptionalProps) {
-  const { formatMessage } = useIntl();
-  return (
-    <div>
-      {children}
-      <Body as="span" className={clsx('text-secondary', 'm-l-1', className)}>
-        {formatMessage(messages.optionalLabel)}
-      </Body>
-    </div>
-  );
-};
-
-export type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };
-
-// eslint-disable-next-line functional/immutable-data
-Label.Description = function Description({ id, children, className }: LabelDescriptionProps) {
-  return children ? (
-    <Body id={id} className={clsx('text-secondary', className)}>
-      {children}
-    </Body>
-  ) : null;
-};
-
-export { Label };

package/src/main.css

@@ -1719,10 +1719,18 @@ 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;
@@ -2377,10 +2385,6 @@ 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%;
@@ -5440,6 +5444,13 @@ 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);
+  text-align: start;
+}
 .np-upload-button-container {
   border-style: solid;
 }

package/src/main.less

@@ -32,7 +32,6 @@
 @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,7 +4,8 @@ import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
-import { Field } from '../field/Field';
+import Provider from '../provider/Provider';
+import translations from '../i18n';
 
 export default {
   component: MoneyInput,
@@ -16,13 +17,14 @@ export default {
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <Field id={args.id} label="Editable money input label" required>
+      <>
+        <label htmlFor={args.id}>Editable money input label</label>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
           onCurrencyChange={handleOnCurrencyChange}
         />
-      </Field>
+      </>
     );
   },
   args: {
@@ -159,19 +161,17 @@ export const SmallInput: Story = {
   render: (args) => {
     return (
       <>
-        <Field id={args.id} label="Money inputs" required>
-          <MoneyInput {...args} {...SingleCurrency.args} />
-        </Field>
+        <label htmlFor={args.id}>Money inputs</label>
+        <MoneyInput {...args} {...SingleCurrency.args} />
         <br />
         <MoneyInput {...args} {...MultipleCurrencies.args} />
         <hr />
-        <Field id={args.id} label="Error states" sentiment="negative" required>
+        <div className="has-error">
+          <label htmlFor={args.id}>Error states</label>
           <MoneyInput {...args} {...SingleCurrency.args} />
-        </Field>
-        <br />
-        <Field sentiment="negative">
+          <br />
           <MoneyInput {...args} {...MultipleCurrencies.args} />
-        </Field>
+        </div>
       </>
     );
   },