@transferwise/components 0.0.0-experimental-2fa5e3f → 0.0.0-experimental-c09cb11

package/src/field/Field.story.tsx

@@ -3,6 +3,12 @@ import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
 import { Sentiment } from '../common';
+import DateInput from '../dateInput';
+import { fn } from '@storybook/test';
+import { lorem10, lorem40 } from '../test-utils';
+import { TextArea } from '../inputs/TextArea';
+import { SearchInput } from '../inputs/SearchInput';
+import Info from '../info';
 
 export default {
   component: Field,
@@ -13,9 +19,66 @@ export default {
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Field label="Phone number">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
+    <div className="row">
+      <div className="col-md-8 col-md-offset-2">
+        <Field label="Required Text Input" required>
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Text Input">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Text Input with Description" description="This a field Description">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field
+          label="Text Input with Validation Error"
+          description="This a field Description"
+          sentiment={Sentiment.NEGATIVE}
+          message="Validation error, please take a look"
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+
+        <Field label="Date Of Birth">
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Date Of Birth with Description" description={lorem10}>
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Search business">
+          <SearchInput />
+        </Field>
+
+        <Field label="Textarea">
+          <TextArea />
+        </Field>
+
+        <Field label="Textarea with Description" description="This a TextArea Description">
+          <TextArea />
+        </Field>
+
+        <Field
+          label="Textarea with Validation Error"
+          description="This a TextArea Description"
+          message={lorem10}
+          sentiment="negative"
+        >
+          <TextArea />
+        </Field>
+
+        <Field
+          label={
+            <>
+              Label with Suffix <Info content={lorem40} />
+            </>
+          }
+        >
+          <TextArea />
+        </Field>
+      </div>
+    </div>
   );
 };
 
@@ -23,16 +86,51 @@ export const WithStatusMessages = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
     <div>
-      <Field label="Phone number" sentiment={Sentiment.POSITIVE} message="Positive message">
+      <Field
+        label="Text Input with Positive Message"
+        sentiment={Sentiment.POSITIVE}
+        message="Positive message"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" sentiment={Sentiment.WARNING} message="Warning message">
+
+      <Field
+        label="Text Input with Warning Message"
+        sentiment={Sentiment.WARNING}
+        message="Warning message"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
+
+      <Field
+        label="Text Input with Validation Error"
+        sentiment={Sentiment.NEGATIVE}
+        message="This is a required field"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      {/* instance with deprecated `hint` prop */}
+      <Field
+        label="Text Input with deprecated `hint` prop"
+        hint="This is a helpful message"
+        sentiment={Sentiment.NEGATIVE}
+        message="Validation error, please take a look"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" message="This is a helpful message">
+
+      {/* instance with deprecated `error` & `hint` props */}
+      <Field
+        label="Text Input with deprecated `error` & `hint` props"
+        hint="This is a helpful message"
+        error="Validation error, please take a look"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
+      <Field label="Text Input with Info under the field" message="This is a helpful message">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
     </div>

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.Text id={labelId} htmlFor={inputId} required={required}>
+                    {label}
+                  </Label.Text>
+                  <Label.Description id={descriptionId}>{description}</Label.Description>
+                  <div className="np-field-control">{children}</div>
                 </Label>
               ) : (
                 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';

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,26 +1,61 @@
 import { Input } from '../inputs/Input';
-import { render, screen } from '../test-utils';
+import { lorem10, render, screen } from '../test-utils';
 import { Label } from './Label';
 
 describe('Label', () => {
   it('renders string labels', () => {
     render(
       <Label>
-        Phone number
-        <Input readOnly />
+        <Label.Text htmlFor="test" required>
+          Phone number
+        </Label.Text>
+        <Input id="test" readOnly />
       </Label>,
     );
 
     expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
   });
-  it('renders node type labels', () => {
+
+  it('renders string labels with (Optional) suffix', () => {
     render(
       <Label>
-        <span>Phone number</span>
-        <Input readOnly />
+        <Label.Text htmlFor="test">Phone number</Label.Text>
+        <Input id="test" readOnly />
       </Label>,
     );
 
-    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/(Optional)/)).toBeInTheDocument();
+  });
+
+  it('renders description', () => {
+    const descriptionId = 'desc-test';
+    render(
+      <Label>
+        <Label.Text htmlFor="test">Phone number</Label.Text>
+        <Label.Description id={descriptionId}>{lorem10}</Label.Description>
+        <Input id="test" readOnly aria-describedby={descriptionId} />
+      </Label>,
+    );
+
+    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>
+        <Label.Text id={labelId} required>
+          Phone number
+        </Label.Text>
+        <div role="group" aria-labelledby={labelId}>
+          Custom complex component
+        </div>
+      </Label>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toHaveAttribute('aria-labelledby', labelId);
   });
 });

package/src/label/Label.story.tsx

@@ -1,37 +1,42 @@
-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>
-  );
-};
+    <>
+      <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">
+        <Label.Text required>Text Input</Label.Text>
+      </Label>
+
+      <Label className="m-b-2">
+        <Label.Text>Text Input</Label.Text>
+      </Label>
+
+      <Label className="m-b-2">
+        <Label.Text>Text Input with Description</Label.Text>
+        <Label.Description>This a field Description</Label.Description>
+      </Label>
+
+      <Label className="m-b-2">
+        <Label.Text>
+          Text Input with Description{' '}
+          <Info content="This is some help in popover" aria-label="The aria label" />{' '}
+        </Label.Text>
+        <Label.Description>This a field Description</Label.Description>
+      </Label>
+    </>
   );
 };