@transferwise/components 46.52.2 → 46.53.0

package/src/field/Field.tsx

@@ -9,16 +9,18 @@ import {
   InputIdContextProvider,
   InputInvalidProvider,
 } from '../inputs/contexts';
-import { Label } from '../label/Label';
+import { Label } from '../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;
-  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
+  required?: boolean;
+  /** @deprecated use `description` 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}`;
@@ -29,14 +31,17 @@ 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 = props.error || props.hint || propMessage;
+  const message = propMessage || props.error;
   const hasError = sentiment === Sentiment.NEGATIVE;
 
   const labelId = useId();
@@ -44,16 +49,32 @@ 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={message ? descriptionId : undefined}>
+        <InputDescribedByProvider value={ariaDescribedbyByIds()}>
           <InputInvalidProvider value={hasError}>
             <div
               className={clsx(
-                'form-group d-block',
+                'np-field form-group d-block',
                 {
                   'has-success': sentiment === Sentiment.POSITIVE,
                   'has-warning': sentiment === Sentiment.WARNING,
@@ -64,16 +85,19 @@ export const Field = ({
               )}
             >
               {label != null ? (
-                <Label id={labelId} htmlFor={inputId}>
-                  {label}
-                  {children}
-                </Label>
+                <>
+                  <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>
+                </>
               ) : (
                 children
               )}
 
               {message && (
-                <InlineAlert type={sentiment} id={descriptionId}>
+                <InlineAlert type={sentiment} id={messageId}>
                   {message}
                 </InlineAlert>
               )}

package/src/i18n/en.json

@@ -18,6 +18,7 @@
   "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...",

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 } from './label/Label';
+export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
@@ -75,6 +75,7 @@ export type { StickyProps } from './sticky';
 export type { SummaryProps } from './summary';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
+export type { TabItem, TabsProps } from './tabs';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { TooltipProps } from './tooltip';
 export type { TypeaheadOption, TypeaheadProps } from './typeahead';

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%;

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