@transferwise/components 46.52.3 → 46.54.0

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,16 @@ 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>
     </>
   );
 };

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;
@@ -19,6 +20,15 @@ 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',
@@ -26,17 +36,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/inputWithDisplayFormat/InputWithDisplayFormat.story.js

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

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

package/src/label/Label.spec.tsx

@@ -1,5 +1,5 @@
 import { Input } from '../inputs/Input';
-import { render, screen } from '../test-utils';
+import { lorem10, render, screen } from '../test-utils';
 import { Label } from './Label';
 
 describe('Label', () => {
@@ -11,16 +11,65 @@ describe('Label', () => {
       </Label>,
     );
 
-    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
   });
-  it('renders node type labels', () => {
+
+  it('renders string labels with (Optional) suffix', () => {
     render(
       <Label>
-        <span>Phone number</span>
+        <Label.Optional>Phone number</Label.Optional>
         <Input readOnly />
       </Label>,
     );
 
+    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/(Optional)/)).toBeInTheDocument();
+  });
+
+  it('renders description', () => {
+    const inputId = 'input-id';
+    const descriptionId = 'desc-test';
+    render(
+      <>
+        <Label htmlFor={inputId}>Phone number</Label>
+        <Label.Description id={descriptionId}>{lorem10}</Label.Description>
+        <Input id={inputId} 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,37 +1,43 @@
-import { useState } from 'react';
-
-import Info from '../info/Info';
-import { Input } from '../inputs/Input';
+import Info from '../info';
 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>
-  );
-};
-
-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>
+    <>
+      <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>
+        <Label.Optional>Text Input with Description</Label.Optional>
+      </Label>
+      <Label.Description className="m-b-2">This a field Description</Label.Description>
+      <Label>
+        <div>
+          Text Input with Description{' '}
+          <Info content="This is some help in popover" aria-label="The aria label" />
+        </div>
+      </Label>
+      <Label.Description className="m-b-2">This a field Description</Label.Description>
+      <Label>
+        <Label.Optional>
+          Text Input with Description{' '}
+          <Info content="This is some help in popover" aria-label="The aria label" />{' '}
+        </Label.Optional>
+      </Label>
+      <Label.Description className="m-b-2">This a field Description</Label.Description>
+    </>
   );
 };

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,54 @@ export type LabelProps = {
   children?: React.ReactNode;
 };
 
-export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+/**
+ * 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) => {
   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 np-text-body-default-bold text-primary 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/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,6 +5440,16 @@ 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;
+}
+.upload-error-message .alert {
+  min-width: 100px;
+}
 .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,7 @@ import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
-import Provider from '../provider/Provider';
-import translations from '../i18n';
+import { Field } from '../field/Field';
 
 export default {
   component: MoneyInput,
@@ -17,14 +16,13 @@ export default {
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <>
-        <label htmlFor={args.id}>Editable money input label</label>
+      <Field id={args.id} label="Editable money input label" required>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
           onCurrencyChange={handleOnCurrencyChange}
         />
-      </>
+      </Field>
     );
   },
   args: {
@@ -161,17 +159,19 @@ export const SmallInput: Story = {
   render: (args) => {
     return (
       <>
-        <label htmlFor={args.id}>Money inputs</label>
-        <MoneyInput {...args} {...SingleCurrency.args} />
+        <Field id={args.id} label="Money inputs" required>
+          <MoneyInput {...args} {...SingleCurrency.args} />
+        </Field>
         <br />
         <MoneyInput {...args} {...MultipleCurrencies.args} />
         <hr />
-        <div className="has-error">
-          <label htmlFor={args.id}>Error states</label>
+        <Field id={args.id} label="Error states" sentiment="negative" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
-          <br />
+        </Field>
+        <br />
+        <Field sentiment="negative">
           <MoneyInput {...args} {...MultipleCurrencies.args} />
-        </div>
+        </Field>
       </>
     );
   },

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/switch/Switch.story.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import Switch from './Switch';
+import { Field } from '../field/Field';
 
 export default {
   component: Switch,
@@ -13,16 +14,14 @@ export const Basic = () => {
 
   return (
     <div className="d-flex flex-column">
-      <label id="labelID" htmlFor="switchId">
-        A switch with a label
-      </label>
-      <Switch
-        checked={checked1}
-        className="a-class-name"
-        aria-labelledby="labelID"
-        id="switchId"
-        onClick={() => setCheck1(!checked1)}
-      />
+      <Field id="switchId" label="A switch with a label" required>
+        <Switch
+          checked={checked1}
+          className="a-class-name"
+          id="switchId"
+          onClick={() => setCheck1(!checked1)}
+        />
+      </Field>
 
       <Switch
         checked={checked2}
@@ -39,17 +38,16 @@ export const Disabled = () => {
 
   return (
     <div className="d-flex flex-column">
-      <label id="labelID" htmlFor="switchId">
-        A switch with a label
-      </label>
-      <Switch
-        checked={checked}
-        disabled
-        className="a-class-name"
-        aria-labelledby="labelID"
-        id="switchId"
-        onClick={() => setCheck(!checked)}
-      />
+      <Field id="switchId" label="A switch with a label" required>
+        <Switch
+          checked={checked}
+          disabled
+          className="a-class-name"
+          aria-labelledby="labelID"
+          id="switchId"
+          onClick={() => setCheck(!checked)}
+        />
+      </Field>
 
       <Switch
         checked={!checked}