@transferwise/components 0.0.0-experimental-946d3a7 → 0.0.0-experimental-bf4cb26

package/src/inputs/Input.tsx

@@ -3,9 +3,9 @@ import { forwardRef } from 'react';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { Merge } from '../utils';
-
+import { inputClassNameBase } from './_common';
+import { useInputAttributes } from './contexts';
 import { useInputPaddings } from './InputGroup';
-import { formControlClassNameBase } from './_common';
 
 export interface InputProps
   extends Merge<
@@ -21,17 +21,19 @@ export const Input = forwardRef(function Input(
   { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,
   reference: React.ForwardedRef<HTMLInputElement>,
 ) {
+  const inputAttributes = useInputAttributes();
   const inputPaddings = useInputPaddings();
 
   return (
     <input
       ref={reference}
-      className={classNames(className, formControlClassNameBase({ size }), 'np-input', {
+      className={classNames(className, inputClassNameBase({ size }), 'np-input', {
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',
       })}
       // eslint-disable-next-line react/forbid-dom-props
       style={inputPaddings}
+      {...inputAttributes}
       {...restProps}
     />
   );

package/src/inputs/SelectInput.spec.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import { SelectInput } from './SelectInput';
+import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
@@ -216,14 +217,12 @@ describe('SelectInput', () => {
     expect(trigger).toHaveAttribute('id', 'custom');
   });
 
-  it('supports `onBlur` handler', () => {
-    const handleBlur = jest.fn();
-
-    render(<SelectInput items={[]} onBlur={handleBlur} />);
-
-    userEvent.tab();
-    expect(handleBlur).not.toHaveBeenCalled();
-    userEvent.tab();
-    expect(handleBlur).toHaveBeenCalled();
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Currency">
+        <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
+      </Field>,
+    );
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
   });
 });

package/src/inputs/SelectInput.tsx

@@ -13,12 +13,13 @@ import { Breakpoint } from '../common/propsValues/breakpoint';
 import dateTriggerMessages from '../dateLookup/dateTrigger/DateTrigger.messages';
 import { Merge } from '../utils';
 
-import { InputGroup } from './InputGroup';
-import { SearchInput } from './SearchInput';
-import messages from './SelectInput.messages';
 import { BottomSheet } from './_BottomSheet';
 import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
+import { useInputAttributes } from './contexts';
+import { InputGroup } from './InputGroup';
+import { SearchInput } from './SearchInput';
+import messages from './SelectInput.messages';
 
 function searchableString(value: string) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
@@ -156,7 +157,6 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
   onClear?: () => void;
-  onBlur?: () => void;
 }
 
 const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, size, className }) => (
@@ -221,7 +221,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
 const noop = () => {};
 
 export function SelectInput<T = string, M extends boolean = false>({
-  id,
+  id: idProp,
   name,
   multiple,
   placeholder,
@@ -240,8 +240,10 @@ export function SelectInput<T = string, M extends boolean = false>({
   onFilterChange = noop,
   onChange,
   onClear,
-  onBlur,
 }: SelectInputProps<T, M>) {
+  const inputAttributes = useInputAttributes();
+  const id = idProp ?? inputAttributes.id;
+
   const [open, setOpen] = useState(false);
 
   const [filterQuery, _setFilterQuery] = useState('');
@@ -296,6 +298,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                     ref(node);
                     triggerRef.current = node;
                   },
+                  ...inputAttributes,
                   id,
                   ...mergeProps(
                     {
@@ -312,9 +315,6 @@ export function SelectInput<T = string, M extends boolean = false>({
                           setOpen((prev) => !prev);
                         }
                       },
-                      onBlur: () => {
-                        onBlur?.();
-                      },
                     },
                     getInteractionProps(),
                   ),

package/src/inputs/TextArea.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
-
-import { formControlClassNameBase } from './_common';
+import { inputClassNameBase } from './_common';
+import { useInputAttributes } from './contexts';
 
 export interface TextAreaProps
   extends Merge<
@@ -17,10 +17,13 @@ export const TextArea = forwardRef(function TextArea(
   { className, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement>,
 ) {
+  const inputAttributes = useInputAttributes();
+
   return (
     <textarea
       ref={reference}
-      className={classNames(className, formControlClassNameBase(), 'np-text-area')}
+      className={classNames(className, inputClassNameBase(), 'np-text-area')}
+      {...inputAttributes}
       {...restProps}
     />
   );

package/src/inputs/_ButtonInput.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 
 import { useInputPaddings } from './InputGroup';
-import { formControlClassNameBase } from './_common';
+import { inputClassNameBase } from './_common';
 
 export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
   size?: 'sm' | 'md' | 'lg';
@@ -18,7 +18,7 @@ export const ButtonInput = forwardRef(function ButtonInput(
     <button
       ref={ref}
       type="button"
-      className={classNames(className, formControlClassNameBase({ size }), 'np-button-input')}
+      className={classNames(className, inputClassNameBase({ size }), 'np-button-input')}
       // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}

package/src/inputs/_common.ts

@@ -2,11 +2,11 @@ import classNames from 'classnames';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 
-export type FormControlPropsBase = {
+export type InputPropsBase = {
   size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
 };
 
-export function formControlClassNameBase({ size = 'auto' }: FormControlPropsBase = {}) {
+export function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {
   return classNames(
     'form-control', // TODO: Deprecate
     'np-form-control',

package/src/inputs/contexts.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+
+const FieldLabelIdContext = createContext<string | undefined>(undefined);
+export const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+
+const InputIdContext = createContext<string | undefined>(undefined);
+export const InputIdContextProvider = InputIdContext.Provider;
+
+const InputDescribedByContext = createContext<string | undefined>(undefined);
+export const InputDescribedByProvider = InputDescribedByContext.Provider;
+
+const InputInvalidContext = createContext<boolean | undefined>(undefined);
+export const InputInvalidProvider = InputInvalidContext.Provider;
+
+interface UseInputAttributesArgs {
+  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */
+  nonLabelable?: boolean;
+}
+
+export function useInputAttributes({ nonLabelable = false }: UseInputAttributesArgs = {}) {
+  const labelId = useContext(FieldLabelIdContext);
+  return {
+    id: useContext(InputIdContext),
+    'aria-labelledby': nonLabelable ? labelId : undefined,
+    'aria-describedby': useContext(InputDescribedByContext),
+    'aria-invalid': useContext(InputInvalidContext),
+  } satisfies React.HTMLAttributes<HTMLElement>;
+}

package/src/label/Label.spec.tsx

@@ -0,0 +1,26 @@
+import { Input } from '../inputs/Input';
+import { render, screen } from '../test-utils';
+import { Label } from './Label';
+
+describe('Label', () => {
+  it('renders string labels', () => {
+    render(
+      <Label>
+        Phone number
+        <Input readOnly />
+      </Label>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+  });
+  it('renders node type labels', () => {
+    render(
+      <Label>
+        <span>Phone number</span>
+        <Input readOnly />
+      </Label>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+  });
+});

package/src/label/Label.story.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+import Info from '../info/Info';
+import { Input } from '../inputs/Input';
+import { Label } from './Label';
+
+export default {
+  component: Label,
+  title: 'Label',
+};
+
+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>
+  );
+};

package/src/label/Label.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+
+export type LabelProps = {
+  id?: string;
+  htmlFor?: string;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+  return (
+    <label
+      id={id}
+      htmlFor={htmlFor}
+      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
+    >
+      {children}
+    </label>
+  );
+};

package/src/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 
 import RadioGroup from '.';
+import { Field } from '../field/Field';
 
 describe('RadioGroup', () => {
   it('has accessible role', () => {
@@ -13,4 +14,17 @@ describe('RadioGroup', () => {
     );
     expect(screen.getByRole('radiogroup')).toBeInTheDocument();
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Currency">
+        <RadioGroup
+          name="currency"
+          radios={[{ label: 'USD' }, { label: 'EUR' }]}
+          onChange={() => {}}
+        />
+      </Field>,
+    );
+    expect(screen.getByRole('radiogroup')).toHaveAccessibleName(/^Currency/);
+  });
 });

package/src/radioGroup/RadioGroup.story.tsx

@@ -5,6 +5,7 @@ import { Flag } from '@wise/art';
 import Avatar, { AvatarType } from '../avatar';
 
 import RadioGroup from './RadioGroup';
+import { Field } from '../field/Field';
 
 export default {
   component: RadioGroup,
@@ -53,3 +54,28 @@ export const Basic = () => {
     </div>
   );
 };
+
+export const Labeled = () => {
+  return (
+    <Field label="Do you like our product?">
+      <RadioGroup
+        name="radio-group"
+        radios={[
+          {
+            value: 'yes',
+            label: 'Yes',
+          },
+          {
+            value: 'definitely',
+            label: 'Definitely',
+          },
+          {
+            value: 'absolutely',
+            label: 'Absolutely',
+          },
+        ]}
+        onChange={(v) => action(v)}
+      />
+    </Field>
+  );
+};

package/src/radioGroup/RadioGroup.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import Radio from '../radio';
 import { RadioProps } from '../radio/Radio';
+import { useInputAttributes } from '../inputs/contexts';
 
 export type RadioGroupRadio<T extends string | number = string> = Omit<
   RadioProps<T>,
@@ -21,10 +22,12 @@ export default function RadioGroup<T extends string | number = never>({
   selectedValue: controlledValue,
   onChange,
 }: RadioGroupProps<T>) {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
 
   return radios.length > 0 ? (
-    <div role="radiogroup">
+    <div role="radiogroup" {...inputAttributes}>
       {radios.map(({ value = '' as T, ...restProps }, index) => (
         <Radio
           // eslint-disable-next-line react/no-array-index-key

package/src/switch/Switch.spec.tsx

@@ -1,3 +1,4 @@
+import { Field } from '../field/Field';
 import { render, fireEvent, screen } from '../test-utils';
 
 import Switch from './Switch';
@@ -81,4 +82,13 @@ describe('Switch', () => {
     fireEvent.click(input);
     expect(mockCallback).not.toHaveBeenCalled();
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Dark mode">
+        <Switch checked onClick={props.onClick} />
+      </Field>,
+    );
+    expect(screen.getByLabelText('Dark mode')).toHaveAttribute('role', 'switch');
+  });
 });

package/src/switch/Switch.tsx

@@ -1,13 +1,16 @@
 import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import { useTheme } from '@wise/components-theming';
 import classnames from 'classnames';
-import { KeyboardEventHandler, MouseEvent } from 'react';
+import type { KeyboardEventHandler, MouseEvent } from 'react';
 
-import { CommonProps } from '../common';
-import { logActionRequiredIf } from '../utilities';
+import type { CommonProps } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 
 export type SwitchProps = CommonProps & {
-  /** Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null) */
+  /**
+   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)
+   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.
+   */
   'aria-label'?: string;
   /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
   'aria-labelledby'?: string;
@@ -21,8 +24,18 @@ export type SwitchProps = CommonProps & {
 };
 
 const Switch = (props: SwitchProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const { isModern } = useTheme();
-  const { checked, className, id, onClick, disabled } = props;
+  const {
+    checked,
+    className,
+    id = inputAttributes.id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledbyProp,
+    onClick,
+    disabled,
+  } = props;
 
   const handleKeyDown: KeyboardEventHandler = (event) => {
     if (event.key === ' ') {
@@ -50,13 +63,8 @@ const Switch = (props: SwitchProps) => {
     );
   };
 
-  const ariaLabel = props['aria-label'];
-  const ariaLabelledby = ariaLabel ? undefined : props['aria-labelledby'];
-
-  logActionRequiredIf(
-    'Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.',
-    !ariaLabel && !ariaLabelledby,
-  );
+  const ariaLabelledby =
+    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
 
   return (
     <span
@@ -66,7 +74,7 @@ const Switch = (props: SwitchProps) => {
         {
           'np-switch--unchecked': !checked,
           'np-switch--checked': checked,
-          disabled: disabled,
+          disabled,
         },
         className,
       )}
@@ -74,6 +82,7 @@ const Switch = (props: SwitchProps) => {
       role="switch"
       aria-checked={checked}
       aria-label={ariaLabel}
+      {...inputAttributes}
       aria-labelledby={ariaLabelledby}
       id={id}
       aria-disabled={disabled}