@transferwise/components 46.30.2 → 46.32.0

package/src/promoCard/PromoCard.tsx

@@ -1,19 +1,19 @@
 import { useId } from '@radix-ui/react-id';
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, FunctionComponent, useEffect, useState } from 'react';
+import React, { forwardRef, type FunctionComponent, useEffect, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card, { CardProps } from '../common/card';
+import Card, { type CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
 import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
+import PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';
 
-export type ReferenceType = React.Ref<HTMLInputElement>;
+export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -68,6 +68,9 @@ export interface PromoCardCommonProps {
   /** Specify an onClick event handler */
   onClick?: () => void;
 
+  /** Specify an onKeyDown event handler */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
   /** Optional prop to specify the ID used for testing */
   testId?: string;
 
@@ -76,6 +79,8 @@ export interface PromoCardCommonProps {
 
   /** Set to false to use body font style for the title   */
   useDisplayFont?: boolean;
+
+  ref?: ReferenceType;
 }
 
 export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
@@ -91,6 +96,14 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   /** Optionally specify the language of the linked URL */
   hrefLang?: string;
 
+  /** Optional property that can be pass a ref for the anchor. */
+  anchorRef?: React.Ref<HTMLAnchorElement>;
+
+  /**
+   * Optional prop to specify the ID of the anchor element which can be useful when using a ref.
+   */
+  anchorId?: string;
+
   /**
    * Relationship between the PromoCard href URL and the current page. See
    * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
@@ -105,7 +118,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   isChecked?: never;
   tabIndex?: never;
   type?: never;
-  reference?: never;
+  ref?: ReferenceType;
   value?: never;
 }
 
@@ -120,7 +133,7 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   tabIndex?: number;
 
   /** Optional property to provide component Ref */
-  reference?: ReferenceType;
+  ref?: ReferenceType;
 
   /** Optional prop to specify the input type of the PromoCard  */
   type?: 'checkbox' | 'radio';
@@ -131,6 +144,8 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   /** Only applies to <a />s */
   download?: never;
   href?: never;
+  anchorRef?: never;
+  anchorId?: never;
   hrefLang?: never;
   rel?: never;
   target?: never;
@@ -202,6 +217,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       isChecked,
       isDisabled,
       onClick,
+      onKeyDown,
       rel,
       tabIndex,
       target,
@@ -211,9 +227,11 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       value,
       isSmall,
       useDisplayFont = true,
+      anchorRef,
+      anchorId,
       ...props
     },
-    reference,
+    ref: ReferenceType,
   ) => {
     // Set the `checked` state to the value of `defaultChecked` if it is truthy,
     // or the value of `isChecked` if it is truthy, or `false` if neither
@@ -276,7 +294,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       id: componentId,
       isDisabled: isDisabled || contextIsDisabled,
       onClick,
-      ref: reference,
+      onKeyDown,
+      ref,
       'data-testid': testId,
       isSmall,
     };
@@ -291,6 +310,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             hrefLang,
             rel,
             target,
+            ref: anchorRef,
+            id: anchorId,
           }
         : {};
 
@@ -311,7 +332,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
                 handleClick();
               }
             },
-            ref: reference,
+            ref,
             tabIndex: 0,
           }
         : {};

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);
   }