@transferwise/components 0.0.0-experimental-e3593b2 → 0.0.0-experimental-a33db42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e3593b2",
+  "version": "0.0.0-experimental-a33db42",
   "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-e3593b2",
+    "@transferwise/neptune-css": "14.12.1",
     "@wise/components-theming": "1.4.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-e3593b2",
+    "@transferwise/neptune-css": "^14.9.6",
     "@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, Field, InlineAlert, Label } from '..';
+import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
 import Provider from '../provider/Provider';
@@ -39,19 +39,43 @@ export const WithLabel = {
   },
   render: (args) => {
     const id1 = 'date-input-group-label-1';
+    const label = 'Date of Birth';
 
     return (
       <>
-        <Label id={id1}>
-          <Label.Optional>Date of Delivery</Label.Optional>
-        </Label>
-        <DateInput {...args} aria-labelledby={id1} aria-label="" />
+        <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>
+        <DateInput {...args} aria-labelledby={id1} />
 
         <br />
 
-        <Field label="Date of Delivery">
-          <DateInput {...args} />
-        </Field>
+        <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>
       </>
     );
   },

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,10 +4,18 @@
   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,8 +7,16 @@
   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('.np-date-trigger-label');
+  const label = () => component.find('.control-label');
 });

package/src/dateLookup/dateTrigger/DateTrigger.tsx

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

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.getByText('This is help text');
+    const textbox = screen.getByRole('textbox', { description: '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.getByText('This is help text')).toBeInTheDocument();
+    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
   });
 
   it('avoids triggering button within label inadvertently', async () => {

package/src/field/Field.story.tsx

@@ -13,17 +13,9 @@ export default {
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <>
-      <Field label="Phone number" required>
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number" description="Please provide you primary phone number">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-    </>
+    <Field label="Phone number">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
   );
 };
 
@@ -40,35 +32,6 @@ export const WithStatusMessages = () => {
       <Field label="Phone number" 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="Phone number"
-        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>
-      {/* instance with deprecated `error` & `hint` props */}
-      <Field
-        label="Phone number"
-        hint="This is a helpful message"
-        error="Validation error, please take a look"
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-
-      <Field
-        label="Phone number"
-        description="This is a helpful message"
-        sentiment={Sentiment.NEGATIVE}
-        message="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="Phone number" message="This is a helpful message">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>

package/src/field/Field.tests.story.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import { Input } from '../inputs/Input';
+import { Field } from './Field';
+import { Sentiment } from '../common';
+
+export default {
+  component: Field,
+  title: 'Field/Tests',
+};
+
+export const WithHelpAndErrorOnBlur = () => {
+  const [value, setValue] = useState('This is some text');
+  const [error, setError] = useState<string | undefined>(undefined);
+  return (
+    <Field
+      label="Phone number"
+      sentiment={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
+      message={error || 'Please include country code'}
+    >
+      <Input
+        value={value}
+        onChange={({ target }) => {
+          setValue(target.value);
+          setError(undefined);
+        }}
+        onBlur={() => {
+          setError('Something went wrong');
+        }}
+      />
+    </Field>
+  );
+};

package/src/field/Field.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactNode, useId } from 'react';
+import { useId } from 'react';
 
 import { Sentiment } from '../common';
 import InlineAlert from '../inlineAlert/InlineAlert';
@@ -9,18 +9,16 @@ import {
   InputIdContextProvider,
   InputInvalidProvider,
 } from '../inputs/contexts';
-import { Label } from '../label';
+import { Label } from '../label/Label';
 
 export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
   label?: React.ReactNode;
-  required?: boolean;
-  /** @deprecated use `description` prop instead */
+  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
-  description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
   sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
@@ -31,23 +29,20 @@ export type FieldProps = {
 export const Field = ({
   id,
   label,
-  required = false,
   message: propMessage,
-  hint,
-  description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }: FieldProps) => {
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
-  const message = propMessage || props.error;
+  const message = props.error || props.hint || propMessage;
   const hasError = sentiment === Sentiment.NEGATIVE;
 
   const labelId = useId();
 
   const fallbackInputId = useId();
-  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;
+  const inputId = id !== null ? id ?? fallbackInputId : undefined;
 
   const descriptionId = useId();
 
@@ -70,8 +65,7 @@ export const Field = ({
             >
               {label != null ? (
                 <Label id={labelId} htmlFor={inputId}>
-                  {required ? label : <Label.Optional>{label}</Label.Optional>}
-                  {description && <Label.Description>{description}</Label.Description>}
+                  {label}
                   {children}
                 </Label>
               ) : (

package/src/i18n/en.json

@@ -18,7 +18,6 @@
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
-  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -56,6 +55,5 @@
   "neptune.UploadItem.uploaded": "Uploaded",
   "neptune.UploadItem.uploadedFile": "Uploaded file",
   "neptune.UploadItem.uploading": "Uploading...",
-  "neptune.UploadItem.uploadingFailed": "Uploading failed",
-  "neptune.aria.Label.optional": "This field is optional"
+  "neptune.UploadItem.uploadingFailed": "Uploading failed"
 }

package/src/index.ts

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

package/src/inlineAlert/InlineAlert.story.tsx

@@ -5,8 +5,6 @@ import { Sentiment } from '../common';
 import { Input } from '../inputs/Input';
 
 import InlineAlert, { InlineAlertProps } from './InlineAlert';
-import { Label } from '../label';
-import { lorem40 } from '../test-utils';
 
 export default {
   component: InlineAlert,
@@ -68,26 +66,41 @@ export const Basic = () => {
         this manually.
       </p>
       <div className={`form-group ${typeClass}`}>
-        <Label htmlFor="id0">Toggleable</Label>
+        <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 htmlFor="id1">Negative</Label>
+        <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 htmlFor="id2">Positive</Label>
+        <label className="control-label" htmlFor="id2">
+          Positive
+        </label>
         <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">{lorem40}</InlineAlert>
+        <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 htmlFor="id3">Neutral</Label>
+        <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 htmlFor="id4">No has-* class</label>
+        <label className="control-label" htmlFor="id4">
+          No has-* class
+        </label>
         <Input id="id4" value="Neptune is cool" />
         <InlineAlert type="negative">{message}</InlineAlert>
       </div>

package/src/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.story.tsx

@@ -1,53 +1,37 @@
 import { useState } from 'react';
 
+import Info from '../info/Info';
 import { Input } from '../inputs/Input';
 import { Label } from './Label';
-import InlineAlert from '../inlineAlert/InlineAlert';
-import { lorem10 } from '../test-utils';
 
 export default {
   component: Label,
   title: 'Label',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <>
-      <Label className="m-b-2">
-        Phone number
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label className="m-b-2">
-        <Label.Optional>Phone number</Label.Optional>
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label className="m-b-2">
-        <Label.Optional>Phone number</Label.Optional>
-        <Label.Description>This an field Description</Label.Description>
-        <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
-      </Label>
-
-      <Label htmlFor="phone-number-1">
-        <Label.Optional>Phone number</Label.Optional>
-        <Label.Description>This an field Description</Label.Description>
-      </Label>
-      <Input
-        id="phone-number-1"
-        className="m-b-2"
-        value={value}
-        onChange={({ target }) => setValue(target.value)}
-      />
+    <Label>
+      Phone number
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
+  );
+};
 
-      {/* Instance of legacy and deprecated way of doing labels for visual testing */}
-      <label className="control-label" htmlFor="phone-number-1">
-        Phone number
-      </label>
-      <Input id="phone-number-1" value={value} onChange={({ target }) => setValue(target.value)} />
-      <InlineAlert>{lorem10}</InlineAlert>
-    </>
+export const WithInfo = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Label>
+      <span className="d-flex">
+        Phone number{' '}
+        <Info
+          content="This is some help in popover"
+          aria-label="The aria label"
+          className="m-l-1"
+        />
+      </span>
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
   );
 };

package/src/label/Label.tsx

@@ -1,9 +1,4 @@
 import classNames from 'classnames';
-import Body from '../body';
-import { useIntl } from 'react-intl';
-import messages from './Label.messages';
-import { CommonProps } from '../common';
-import { PropsWithChildren } from 'react';
 
 export type LabelProps = {
   id?: string;
@@ -12,51 +7,14 @@ export type LabelProps = {
   children?: React.ReactNode;
 };
 
-const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
   return (
     <label
       id={id}
       htmlFor={htmlFor}
-      className={classNames(
-        'd-flex',
-        'flex-column',
-        'm-b-0',
-        'np-text-body-default-bold',
-        'text-primary',
-        className,
-      )}
+      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
     >
       {children}
     </label>
   );
 };
-
-export type LabelOptionalProps = PropsWithChildren<CommonProps>;
-
-const Optional = ({ children, className }: LabelOptionalProps) => {
-  const { formatMessage } = useIntl();
-  return (
-    <div>
-      {children}
-      <Body
-        as="span"
-        aria-label={formatMessage(messages.optionalAriaLabel)}
-        className={classNames('text-secondary', 'm-l-1', className)}
-      >
-        {formatMessage(messages.optionalLabel)}
-      </Body>
-    </div>
-  );
-};
-
-export type LabelDescriptionProps = PropsWithChildren<CommonProps>;
-
-const Description = ({ children, className }: LabelDescriptionProps) =>
-  children ? (
-    <Body className={classNames('text-secondary', 'm-b-1', className)}>{children}</Body>
-  ) : null;
-
-Label.Optional = Optional;
-Label.Description = Description;
-
-export { Label };

package/src/main.css

@@ -1719,10 +1719,18 @@ button.np-option {
   white-space: nowrap;
   width: 100%;
 }
+.np-date-trigger .control-label {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
+.np-theme-personal .np-date-trigger .control-label + span {
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;