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

package/build/upload/steps/uploadImageStep/uploadImageStep.mjs

@@ -1,10 +1,6 @@
 import { Upload } from '@transferwise/icons';
 import { PureComponent, createRef } from 'react';
-import StatusIcon from '../../../statusIcon/StatusIcon.mjs';
-import InlineAlert from '../../../inlineAlert/InlineAlert.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Sentiment } from '../../../common/propsValues/sentiment.mjs';
-import { Size } from '../../../common/propsValues/size.mjs';
 
 class UploadImageStep extends PureComponent {
   uploadInputRef = /*#__PURE__*/createRef();
@@ -22,18 +18,6 @@ class UploadImageStep extends PureComponent {
       usHelpImage,
       usLabel
     } = this.props;
-    const {
-      errorMessage
-    } = this.props;
-    if (errorMessage) {
-      return /*#__PURE__*/jsx("div", {
-        className: "d-flex flex-column align-items-center",
-        children: /*#__PURE__*/jsx(StatusIcon, {
-          size: Size.LARGE,
-          sentiment: Sentiment.NEGATIVE
-        })
-      });
-    }
     if (!usHelpImage) {
       return /*#__PURE__*/jsx("div", {
         className: "circle circle-sm circle-inverse p-t-1",
@@ -58,49 +42,41 @@ class UploadImageStep extends PureComponent {
       usButtonText,
       usDisabled,
       usLabel,
-      usPlaceholder,
-      errorMessage
+      usPlaceholder
     } = this.props;
     return /*#__PURE__*/jsx("div", {
-      className: "droppable-default-card",
-      "aria-hidden": isComplete,
-      children: /*#__PURE__*/jsxs("div", {
-        className: "droppable-card-content",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "m-b-3",
-          children: this.getImage()
-        }), usLabel && /*#__PURE__*/jsx("h4", {
-          className: "np-text-title-body m-b-1",
-          children: usLabel
-        }), usPlaceholder && /*#__PURE__*/jsx("p", {
-          className: "np-text-body-large m-b-3",
-          children: String(usPlaceholder)
-        }), /*#__PURE__*/jsxs("label", {
-          className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
-          children: [usButtonText ? /*#__PURE__*/jsx("span", {
-            children: usButtonText
-          }) : /*#__PURE__*/jsx(Upload, {
-            size: 24,
-            className: "m-r-0"
-          }), /*#__PURE__*/jsx("input", {
-            ref: this.uploadInputRef,
-            type: "file",
-            accept: usAccept === '*' ? undefined : usAccept,
-            className: "tw-droppable-input hidden",
-            disabled: usDisabled,
-            name: "file-upload",
-            onChange: () => this.onManualUpload()
+      children: /*#__PURE__*/jsx("div", {
+        className: "droppable-default-card",
+        "aria-hidden": isComplete,
+        children: /*#__PURE__*/jsxs("div", {
+          className: "droppable-card-content",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "m-b-3",
+            children: this.getImage()
+          }), usLabel && /*#__PURE__*/jsx("h4", {
+            className: "np-text-title-body m-b-1",
+            children: usLabel
+          }), usPlaceholder && /*#__PURE__*/jsx("p", {
+            className: "np-text-body-large m-b-3",
+            children: String(usPlaceholder)
+          }), /*#__PURE__*/jsxs("label", {
+            className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
+            children: [usButtonText ? /*#__PURE__*/jsx("span", {
+              children: usButtonText
+            }) : /*#__PURE__*/jsx(Upload, {
+              size: 24,
+              className: "m-r-0"
+            }), /*#__PURE__*/jsx("input", {
+              ref: this.uploadInputRef,
+              type: "file",
+              accept: usAccept === '*' ? undefined : usAccept,
+              className: "tw-droppable-input hidden",
+              disabled: usDisabled,
+              name: "file-upload",
+              onChange: () => this.onManualUpload()
+            })]
           })]
-        }), errorMessage && /*#__PURE__*/jsx("div", {
-          className: "upload-error-message",
-          children: /*#__PURE__*/jsx("div", {
-            className: "m-t-3 has-error",
-            children: /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEGATIVE,
-              children: errorMessage
-            })
-          })
-        })]
+        })
       })
     });
   }

package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"uploadImageStep.mjs","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport InlineAlert from '../../../inlineAlert';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =\n      this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n          <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","UploadIcon","src","alt","render","isComplete","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","ref","type","accept","undefined","disabled","name","onChange","InlineAlert"],"mappings":"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"}
+{"version":3,"file":"uploadImageStep.mjs","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder } = this.props;\n\n    return (\n      <div>\n        <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n          <div className=\"droppable-card-content\">\n            <div className=\"m-b-3\">{this.getImage()}</div>\n            {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n            {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n            <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>\n              {usButtonText ? (\n                <span>{usButtonText}</span>\n              ) : (\n                <UploadIcon size={24} className=\"m-r-0\" />\n              )}\n              <input\n                ref={this.uploadInputRef}\n                type=\"file\"\n                accept={usAccept === '*' ? undefined : usAccept}\n                className=\"tw-droppable-input hidden\"\n                disabled={usDisabled}\n                name=\"file-upload\"\n                onChange={() => this.onManualUpload()}\n              />\n            </label>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","getImage","usHelpImage","usLabel","_jsx","className","children","UploadIcon","size","src","alt","render","isComplete","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","ref","type","accept","undefined","disabled","name","onChange"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-be73f56",
+  "version": "0.0.0-experimental-f304e2c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-be73f56",
+    "@transferwise/neptune-css": "0.0.0-experimental-f304e2c",
     "@wise/components-theming": "1.5.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-be73f56",
+    "@transferwise/neptune-css": "0.0.0-experimental-f304e2c",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/dateInput/DateInput.tests.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, fn } from '@storybook/test';
 
-import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { DateInput, Field, InlineAlert, Label } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
 import Provider from '../provider/Provider';
@@ -39,43 +39,19 @@ export const WithLabel = {
   },
   render: (args) => {
     const id1 = 'date-input-group-label-1';
-    const label = 'Date of Birth';
 
     return (
       <>
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
-          <code>aria-labelledby</code> prop
-        </Title>
-        <div className="control-label" id={id1}>
-          Date of Delivery
-        </div>
+        <Label id={id1}>
+          <Label.Optional>Date of Delivery</Label.Optional>
+        </Label>
         <DateInput {...args} aria-labelledby={id1} />
 
         <br />
 
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
-          via <code>aria-label</code> attribute
-        </Title>
-        <div className="control-label">
-          {label}{' '}
-          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
-        </div>
-        <DateInput {...args} aria-label={label} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
-          label (rare use case)
-        </Title>
-        <fieldset>
-          <legend className="control-label">
-            Expiry Date for Credit Card (example of MONTH_YEAR mode)
-          </legend>
-          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
-        </fieldset>
+        <Field label="Date of Delivery">
+          <DateInput {...args} />
+        </Field>
       </>
     );
   },

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -28,7 +28,7 @@ describe('DateLookup', () => {
       </Field>,
     );
     // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
-    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
+    expect(screen.getByLabelText(/Date of birth/)).toHaveTextContent(
       initialValue.getFullYear().toString(),
     );
   });

package/src/dateLookup/dateTrigger/DateTrigger.css

@@ -4,18 +4,10 @@
   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;

package/src/dateLookup/dateTrigger/DateTrigger.less

@@ -7,16 +7,8 @@
   white-space: nowrap;
   width: 100%;
 
-  .control-label {
-    font-weight: var(--font-weight-regular);
-  }
-
   .np-theme-personal & {
     padding-left: var(--size-16);
-
-    .control-label + span {
-      font-weight: var(--font-weight-regular);
-    }
   }
 }
 

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -119,5 +119,5 @@ describe('DateTrigger', () => {
   const button = () => component.find('.np-date-trigger');
   const clearButton = () => component.find('.clear-btn');
   const chevron = () => component.find(Chevron);
-  const label = () => component.find('.control-label');
+  const label = () => component.find('.np-date-trigger-label');
 });

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -2,12 +2,13 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
-import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
+import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 import { useContext } from 'react';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
+import Body from '../../body';
 
 interface DateTriggerProps {
   selectedDate: Date | null;
@@ -45,15 +46,19 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         type="button"
         onClick={onClick}
       >
-        {label && <span className="control-label small m-r-1">{label}</span>}
+        {label && (
+          <Body as="span" className="np-date-trigger-label m-r-1">
+            {label}
+          </Body>
+        )}
         {selectedDate ? (
-          <span className="font-weight-normal">
+          <Body as="span" type={Typography.BODY_LARGE}>
             {formatDate(selectedDate, locale, {
               day: 'numeric',
               month: monthFormat,
               year: 'numeric',
             })}
-          </span>
+          </Body>
         ) : (
           <span
             className="form-control-placeholder visible-xs-inline visible-sm-inline

package/src/field/Field.css

@@ -0,0 +1,4 @@
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}

package/src/field/Field.less

@@ -0,0 +1,5 @@
+.np-field {
+  &-control {
+      margin-top: var(--size-4);
+  }
+}

package/src/field/Field.spec.tsx

@@ -14,7 +14,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
     expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
   });
 
@@ -25,7 +25,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    const textbox = screen.getByRole('textbox', { description: 'This is help text' });
+    const textbox = screen.getByText('This is help text');
     expect(textbox).toBeInTheDocument();
     expect(textbox).not.toBeInvalid();
   });
@@ -50,7 +50,7 @@ describe('Field', () => {
     );
 
     expect(screen.getByRole('textbox', { description: 'This is error text' })).toBeInTheDocument();
-    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
+    expect(screen.getByText('This is help text')).toBeInTheDocument();
   });
 
   it('avoids triggering button within label inadvertently', async () => {

package/src/field/Field.story.tsx

@@ -1,8 +1,15 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 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 +20,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 +87,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();
@@ -53,7 +58,7 @@ export const Field = ({
           <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,
@@ -65,8 +70,9 @@ export const Field = ({
             >
               {label != null ? (
                 <Label id={labelId} htmlFor={inputId}>
-                  {label}
-                  {children}
+                  {required ? label : <Label.Optional>{label}</Label.Optional>}
+                  {description && <Label.Description>{description}</Label.Description>}
+                  <div className="np-field-control">{children}</div>
                 </Label>
               ) : (
                 children

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...",
@@ -35,7 +36,6 @@
   "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",
@@ -56,5 +56,6 @@
   "neptune.UploadItem.uploaded": "Uploaded",
   "neptune.UploadItem.uploadedFile": "Uploaded file",
   "neptune.UploadItem.uploading": "Uploading...",
-  "neptune.UploadItem.uploadingFailed": "Uploading failed"
+  "neptune.UploadItem.uploadingFailed": "Uploading failed",
+  "neptune.aria.Label.optional": "This field is optional"
 }

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