@transferwise/components 46.30.2 → 46.32.0

package/src/common/card/Card.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { MouseEvent, ReactNode, useRef } from 'react';
+import { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';
 
 import { CloseButton } from '../closeButton';
 import { stopPropagation } from '../domHelpers';
@@ -48,48 +48,56 @@ export interface CardProps {
  *   <p>Hello World!</p>
  * </Card>
  */
-const Card: React.FC<CardProps> = ({
-  className,
-  children = null,
-  id,
-  isDisabled = false,
-  isSmall = false,
-  onDismiss,
-  testId,
-  ...props
-}) => {
-  const closeButtonReference = useRef(null);
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className,
+      children = null,
+      id,
+      isDisabled = false,
+      isSmall = false,
+      onDismiss,
+      testId,
+      ...props
+    },
+    ref,
+  ) => {
+    const closeButtonReference = useRef(null);
 
-  return (
-    <div
-      className={classNames(
-        'np-Card',
-        {
-          'np-Card--small': !!isSmall,
-          'is-disabled': !!isDisabled,
-        },
-        className,
-      )}
-      id={id}
-      data-testid={testId}
-      {...props}
-    >
-      {onDismiss && (
-        <CloseButton
-          ref={closeButtonReference}
-          className="np-Card-closeButton"
-          size={isSmall ? 'sm' : 'md'}
-          isDisabled={isDisabled}
-          testId="close-button"
-          onClick={(e) => {
-            stopPropagation(e);
-            onDismiss();
-          }}
-        />
-      )}
-      {children}
-    </div>
-  );
-};
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          'np-Card',
+          {
+            'np-Card--small': !!isSmall,
+            'is-disabled': !!isDisabled,
+          },
+          className,
+        )}
+        id={id}
+        data-testid={testId}
+        {...props}
+      >
+        {onDismiss && (
+          <CloseButton
+            ref={closeButtonReference}
+            className="np-Card-closeButton"
+            size={isSmall ? 'sm' : 'md'}
+            isDisabled={isDisabled}
+            testId="close-button"
+            onClick={(e) => {
+              stopPropagation(e);
+              onDismiss();
+            }}
+          />
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = 'Card';
 
 export default Card;

package/src/dateInput/DateInput.rtl.spec.tsx

@@ -0,0 +1,17 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, mockResizeObserver, render, screen } from '../test-utils';
+import DateInput from './DateInput';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('DateInput', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Date of birth">
+        <DateInput onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
+  });
+});

package/src/dateInput/DateInput.tsx

@@ -2,22 +2,23 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Input, SelectInput, SelectInputProps, SelectInputOptionContent } from '..';
-import { Size, DateMode, MonthFormat, SizeSmall, SizeMedium, SizeLarge } from '../common';
-import { getMonthNames, isDateValid, isMonthAndYearFormat, MDY, YMD } from '../common/dateUtils';
-
+import { Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
+import { DateMode, MonthFormat, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
+import { useInputAttributes } from '../inputs/contexts';
 import messages from './DateInput.messages';
 import { convertToLocalMidnight } from './utils';
 
 export interface DateInputProps {
+  /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */
   'aria-label'?: string;
   'aria-labelledby'?: string;
   disabled?: boolean;
   size?: SizeSmall | SizeMedium | SizeLarge;
   value?: Date | string;
   onChange: (value: string | null) => void;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
   dayLabel?: string;
   dayAutoComplete?: string;
   monthLabel?: string;
@@ -35,7 +36,7 @@ export interface DateInputProps {
 }
 
 const DateInput = ({
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-label': ariaLabel,
   disabled = false,
   size = Size.MEDIUM,
@@ -51,9 +52,13 @@ const DateInput = ({
   onFocus,
   onBlur,
   placeholders,
-  id,
+  id: idProp,
   selectProps = {},
 }: DateInputProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const id = idProp ?? inputAttributes.id;
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
+
   const { locale, formatMessage } = useIntl();
 
   const getDateObject = (): Date | undefined => {
@@ -95,9 +100,9 @@ const DateInput = ({
   );
   const monthNames = getMonthNames(locale, monthFormat);
 
-  dayLabel = dayLabel || formatMessage(messages.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages.yearLabel);
+  dayLabel ||= formatMessage(messages.dayLabel);
+  monthLabel ||= formatMessage(messages.monthLabel);
+  yearLabel ||= formatMessage(messages.yearLabel);
   placeholders = {
     day: placeholders?.day || formatMessage(messages.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages.monthLabel),
@@ -298,14 +303,15 @@ const DateInput = ({
   return (
     <div
       className="tw-date"
+      {...inputAttributes}
       id={id}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
       role="group" // Add role attribute to indicate container for interactive elements
-      onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
+      onFocus={(event) =>
         shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()
       }
-      onBlur={(event: React.FocusEvent<HTMLInputElement>) =>
+      onBlur={(event) =>
         shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()
       }
     >
@@ -328,7 +334,8 @@ const DateInput = ({
                 {getYear()}
               </>
             );
-          } else if (yearFirst) {
+          }
+          if (yearFirst) {
             return (
               <>
                 {getYear()}
@@ -336,15 +343,14 @@ const DateInput = ({
                 {getDay()}
               </>
             );
-          } else {
-            return (
-              <>
-                {getDay()}
-                {getMonth()}
-                {getYear()}
-              </>
-            );
           }
+          return (
+            <>
+              {getDay()}
+              {getMonth()}
+              {getYear()}
+            </>
+          );
         })()}
       </div>
     </div>

package/src/dateLookup/DateLookup.keyboardEvents.spec.js

@@ -4,12 +4,12 @@ import { mount } from 'enzyme';
 import { fakeKeyDownEventForKey } from '../common/fakeEvents';
 import { mockMatchMedia } from '../test-utils';
 
-import DateLookup from '.';
+import { DateLookupWithoutInputAttributes as DateLookup } from './DateLookup';
 
 mockMatchMedia();
 
 const defaultLocale = 'en-GB';
-const formatMessage = (id) => `${id}`;
+const formatMessage = (id) => String(id);
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {

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

@@ -0,0 +1,21 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, mockResizeObserver, render, screen } from '../test-utils';
+import DateLookup from './DateLookup';
+
+mockMatchMedia();
+mockResizeObserver();
+
+const now = new Date();
+
+describe('DateLookup', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Date of birth">
+        <DateLookup value={now} onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
+      now.getUTCFullYear().toString(),
+    );
+  });
+});

package/src/dateLookup/DateLookup.state.spec.js

@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import { useIntl } from 'react-intl';
 
-import DateLookup from '.';
+import { DateLookupWithoutInputAttributes as DateLookup } from './DateLookup';
 
 jest.mock('react-intl');
 
@@ -38,7 +38,7 @@ describe('DateLookup state', () => {
   it('updates selectedDate on props value change', () => {
     const props = { value: new Date(2018, 11, 27) };
     const newState = DateLookup.getDerivedStateFromProps(props, defaultState);
-    expect(+newState.selectedDate).toBe(+new Date(2018, 11, 27));
+    expect(Number(newState.selectedDate)).toBe(Number(new Date(2018, 11, 27)));
   });
 
   it('sets date values to midnight', () => {
@@ -48,9 +48,9 @@ describe('DateLookup state', () => {
       max: new Date(2018, 11, 28, 0, 30),
     };
     const newState = DateLookup.getDerivedStateFromProps(props, defaultState);
-    expect(+newState.selectedDate).toBe(+new Date(2018, 11, 27, 0, 0));
-    expect(+newState.min).toBe(+new Date(2018, 10, 27, 0, 0));
-    expect(+newState.max).toBe(+new Date(2018, 11, 28, 0, 0));
+    expect(Number(newState.selectedDate)).toBe(Number(new Date(2018, 11, 27, 0, 0)));
+    expect(Number(newState.min)).toBe(Number(new Date(2018, 10, 27, 0, 0)));
+    expect(Number(newState.max)).toBe(Number(new Date(2018, 11, 28, 0, 0)));
   });
 
   it('calls onChange with min when it is < min', () => {

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -1,6 +1,5 @@
-import { ReactRenderer, Story } from '@storybook/react';
+import { Story } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import { PlayFunctionContext } from '@storybook/types';
 import { useState } from 'react';
 
 import DateLookup from './DateLookup';
@@ -10,7 +9,7 @@ export default {
   title: 'Forms/DateLookup/Tests',
 };
 
-const Template: Story<DateLookup> = () => {
+const Template: Story<typeof DateLookup> = () => {
   const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
 
   return (
@@ -27,10 +26,7 @@ const Template: Story<DateLookup> = () => {
 
 export const ClearSpace = Template.bind({});
 
-ClearSpace.play = async ({
-  canvasElement,
-  step,
-}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+ClearSpace.play = async ({ canvasElement, step }) => {
   const canvas = within(canvasElement);
 
   await step('space can activate clear button', async () => {
@@ -49,10 +45,7 @@ ClearSpace.play = async ({
 
 export const ClearEnter = Template.bind({});
 
-ClearEnter.play = async ({
-  canvasElement,
-  step,
-}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+ClearEnter.play = async ({ canvasElement, step }) => {
   const canvas = within(canvasElement);
 
   await step('enter can activate clear button', async () => {

package/src/dateLookup/DateLookup.tsx

@@ -12,7 +12,7 @@ import {
 } from '../common';
 import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
-
+import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
 import DateTrigger from './dateTrigger';
 import DayCalendar from './dayCalendar';
 import { getStartOfDay } from './getStartOfDay';
@@ -36,6 +36,8 @@ export interface DateLookupProps {
   onBlur?: () => void;
 }
 
+type DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;
+
 interface DateLookupState {
   selectedDate: Date | null;
   originalDate: Date | null;
@@ -48,9 +50,9 @@ interface DateLookupState {
   isMobile: boolean;
 }
 
-class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
-  declare props: DateLookupProps &
-    Required<Pick<DateLookupProps, keyof typeof DateLookup.defaultProps>>;
+class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {
+  declare props: DateLookupPropsWithInputAttributes &
+    Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;
 
   static defaultProps = {
     value: null,
@@ -62,7 +64,7 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
     monthFormat: MonthFormat.LONG,
     disabled: false,
     clearable: false,
-  } satisfies Partial<DateLookupProps>;
+  } satisfies Partial<DateLookupPropsWithInputAttributes>;
 
   element = createRef<HTMLDivElement>();
   dropdown = createRef<HTMLDivElement>();
@@ -106,7 +108,7 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
     return null;
   }
 
-  componentDidUpdate(previousProps: DateLookupProps) {
+  componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {
     if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
@@ -301,19 +303,25 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
     const { selectedDate, open } = this.state;
 
     const {
+      inputAttributes,
+      id: idProp,
+      'aria-labelledby': ariaLabelledByProp,
       size,
       placeholder,
       label,
-      'aria-labelledby': ariaLabelledBy,
       monthFormat,
       disabled,
       clearable,
       value,
     } = this.props;
+    const id = idProp ?? inputAttributes?.id;
+    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
+
     return (
       <div
         ref={this.element}
-        id={this.props.id}
+        {...inputAttributes}
+        id={id}
         aria-labelledby={ariaLabelledBy}
         className="input-group"
         onKeyDown={this.handleKeyDown}
@@ -342,4 +350,11 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
   }
 }
 
-export default DateLookup;
+export const DateLookupWithoutInputAttributes = DateLookup;
+
+export default withInputAttributes(
+  DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,
+  {
+    nonLabelable: true,
+  },
+);

package/src/dateLookup/DateLookup.view.spec.js

@@ -7,7 +7,7 @@ import DayCalendar from './dayCalendar';
 import MonthCalendar from './monthCalendar';
 import YearCalendar from './yearCalendar';
 
-import DateLookup from '.';
+import { DateLookupWithoutInputAttributes as DateLookup } from './DateLookup';
 
 mockMatchMedia();
 
@@ -51,7 +51,7 @@ describe('DateLookup view', () => {
   });
 
   it('passes props forward to open button', () => {
-    expect(+dateTrigger().prop('selectedDate')).toBe(+date);
+    expect(Number(dateTrigger().prop('selectedDate'))).toBe(Number(date));
     expect(dateTrigger().prop('size')).toBe('lg');
     expect(dateTrigger().prop('placeholder')).toBe('Asd..');
     expect(dateTrigger().prop('label')).toBe('Date..');
@@ -76,9 +76,9 @@ describe('DateLookup view', () => {
     });
 
     it('passes props forward to day calendar', () => {
-      expect(+dayCalendar().prop('selectedDate')).toBe(+date);
-      expect(+dayCalendar().prop('min')).toBe(+min);
-      expect(+dayCalendar().prop('max')).toBe(+max);
+      expect(Number(dayCalendar().prop('selectedDate'))).toBe(Number(date));
+      expect(Number(dayCalendar().prop('min'))).toBe(Number(min));
+      expect(Number(dayCalendar().prop('max'))).toBe(Number(max));
       expect(dayCalendar().prop('viewMonth')).toBe(11);
       expect(dayCalendar().prop('viewYear')).toBe(2018);
       expect(dayCalendar().prop('monthFormat')).toBe('long');
@@ -103,9 +103,9 @@ describe('DateLookup view', () => {
     });
 
     it('passes props forward to month calendar', () => {
-      expect(+monthCalendar().prop('selectedDate')).toBe(+date);
-      expect(+monthCalendar().prop('min')).toBe(+min);
-      expect(+monthCalendar().prop('max')).toBe(+max);
+      expect(Number(monthCalendar().prop('selectedDate'))).toBe(Number(date));
+      expect(Number(monthCalendar().prop('min'))).toBe(Number(min));
+      expect(Number(monthCalendar().prop('max'))).toBe(Number(max));
       expect(monthCalendar().prop('viewYear')).toBe(2018);
       expect(monthCalendar().prop('placeholder')).toBe('Asd..');
     });
@@ -129,9 +129,9 @@ describe('DateLookup view', () => {
     });
 
     it('passes props forward to year calendar', () => {
-      expect(+yearCalendar().prop('selectedDate')).toBe(+date);
-      expect(+yearCalendar().prop('min')).toBe(+min);
-      expect(+yearCalendar().prop('max')).toBe(+max);
+      expect(Number(yearCalendar().prop('selectedDate'))).toBe(Number(date));
+      expect(Number(yearCalendar().prop('min'))).toBe(Number(min));
+      expect(Number(yearCalendar().prop('max'))).toBe(Number(max));
       expect(yearCalendar().prop('viewYear')).toBe(2018);
       expect(yearCalendar().prop('placeholder')).toBe('Asd..');
     });

package/src/field/Field.spec.tsx

@@ -0,0 +1,95 @@
+import Info from '../info/Info';
+import { Input } from '../inputs/Input';
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+
+import { Field } from './Field';
+
+mockMatchMedia();
+
+describe('Field', () => {
+  it('should render label', () => {
+    render(
+      <Field label="Phone number">
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
+  });
+
+  it('should render help text if provided', () => {
+    render(
+      <Field label="Phone number" hint="This is help text">
+        <Input />
+      </Field>,
+    );
+
+    const textbox = screen.getByRole('textbox', { description: 'This is help text' });
+    expect(textbox).toBeInTheDocument();
+    expect(textbox).not.toBeInvalid();
+  });
+
+  it('should render error text if provided', () => {
+    render(
+      <Field label="Phone number" error="This is error text">
+        <Input />
+      </Field>,
+    );
+
+    const textbox = screen.getByRole('textbox', { description: 'This is error text' });
+    expect(textbox).toBeInTheDocument();
+    expect(textbox).toBeInvalid();
+  });
+
+  it('should prefer error text over help text if both are provided', () => {
+    render(
+      <Field label="Phone number" error="This is error text" hint="This is help text">
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByRole('textbox', { description: 'This is error text' })).toBeInTheDocument();
+    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
+  });
+
+  it('avoids triggering button within label inadvertently', async () => {
+    const handleClick = jest.fn();
+
+    render(
+      <Field
+        label={
+          <span>
+            Phone number{' '}
+            <Info content="Further information explained in detail." onClick={handleClick} />
+          </span>
+        }
+      >
+        <Input />
+      </Field>,
+    );
+
+    const button = screen.getByRole('button');
+    button.addEventListener('click', handleClick);
+
+    const label = screen.getByText('Phone number');
+    userEvent.click(label);
+
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('allows nesting-based label association', async () => {
+    const handleClick = jest.fn();
+
+    render(
+      <Field id={null} label="Phone number">
+        <Input onClick={handleClick} />
+      </Field>,
+    );
+
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('id');
+
+    const label = screen.getByText('Phone number');
+    userEvent.click(label);
+  });
+});

package/src/field/Field.story.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+
+import { Input } from '../inputs/Input';
+import { Field } from './Field';
+
+export default {
+  component: Field,
+  title: 'Field',
+};
+
+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>
+  );
+};
+
+export const WithErrorMessage = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Field label="Phone number" error="This is a required field">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
+  );
+};
+
+export const WithHelp = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Field label="Phone number" hint="This is a helpful message">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
+  );
+};
+
+export const WithHelpAndErrorOnBlur = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  const [error, setError] = useState<string | undefined>(undefined);
+  return (
+    <Field label="Phone number" hint="Please include country code" error={error}>
+      <Input
+        value={value}
+        onChange={({ target }) => {
+          setValue(target.value);
+          setError(undefined);
+        }}
+        onBlur={() => {
+          if (!value) {
+            setError('This is a required field');
+          } else {
+            setError(undefined);
+          }
+        }}
+      />
+    </Field>
+  );
+};