@transferwise/components 46.30.1 → 46.31.0

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/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,29 +1,23 @@
-import { select, boolean, object } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import PhoneNumberInput from './PhoneNumberInput';
 
-export default {
+const meta = {
   component: PhoneNumberInput,
   title: 'Forms/PhoneNumberInput',
-};
+  tags: ['autodocs'],
+} satisfies Meta<typeof PhoneNumberInput>;
 
-export const Basic = () => {
-  const disabled = boolean('disabled', false);
-  const required = boolean('required', false);
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const selectProps = object('selectProps', {
-    className: 'custom-class',
-  });
+export default meta;
 
-  return (
-    <PhoneNumberInput
-      disabled={disabled}
-      required={required}
-      size={size}
-      selectProps={selectProps}
-      searchPlaceholder="searchPlaceholder"
-      placeholder="placeholder"
-      onChange={console.log}
-    />
-  );
-};
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    searchPlaceholder: 'searchPlaceholder',
+    placeholder: 'placeholder',
+    selectProps: {
+      className: 'custom-class',
+    },
+  },
+} satisfies Story;

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -28,7 +28,7 @@ export interface PhoneNumberInputProps {
   initialValue?: string;
   onChange: (value: string | null, prefix: string) => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: () => void;
   countryCode?: string;
   searchPlaceholder?: string;
   size?: SizeSmall | SizeMedium | SizeLarge;
@@ -73,6 +73,13 @@ const PhoneNumberInput = ({
   });
   const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
 
+  const [suffixDirty, setSuffixDirty] = useState(false);
+  useEffect(() => {
+    if (internalValue.suffix) {
+      setSuffixDirty(true);
+    }
+  }, [internalValue.suffix]);
+
   const countriesByPrefix = useMemo(
     () =>
       groupCountriesByPrefix(
@@ -168,6 +175,11 @@ const PhoneNumberInput = ({
             const country = prefix != null ? findCountryByPrefix(prefix) : null;
             setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
           }}
+          onClose={() => {
+            if (suffixDirty) {
+              onBlur?.();
+            }
+          }}
           {...selectProps}
         />
       </div>
@@ -186,7 +198,7 @@ const PhoneNumberInput = ({
             onChange={onSuffixChange}
             onPaste={onPaste}
             onFocus={onFocus}
-            onBlur={onBlur}
+            onBlur={() => onBlur?.()}
           />
         </div>
       </div>

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}

package/src/utilities/logActionRequired.js

@@ -1,5 +1,5 @@
 export function logActionRequired(message) {
-  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }