@transferwise/components 46.40.0 → 46.41.0

package/src/dateInput/DateInput.tests.story.tsx

@@ -0,0 +1,238 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, fn } from '@storybook/test';
+
+import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { lorem10, storyConfig } from '../test-utils';
+
+import Provider from '../provider/Provider';
+import translations from '../i18n';
+
+const meta = {
+  component: DateInput,
+  title: 'Forms/DateInput/Tests',
+  args: {
+    dayLabel: 'Day input',
+    dayAutoComplete: 'bday-day',
+    monthLabel: 'Month select',
+    yearLabel: 'Year input',
+    yearAutoComplete: 'bday-year',
+  },
+} satisfies Meta<typeof DateInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Basic = {
+  args: {
+    onChange: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+} satisfies Story;
+
+export const WithLabel = {
+  args: {
+    onChange: fn(),
+  },
+  render: (args) => {
+    const id1 = 'date-input-group-label-1';
+    const label = 'Date of Birth';
+
+    return (
+      <>
+        <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 />
+
+        <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>
+      </>
+    );
+  },
+} satisfies Story;
+
+export const InputError = {
+  ...Basic,
+  render: (args) => (
+    <div className="form-group has-error">
+      <DateInput {...args} value={new Date('2010-04-05')} />
+      <InlineAlert type="error">{lorem10}</InlineAlert>
+    </div>
+  ),
+} satisfies Story;
+
+export const CustomPlaceholders = {
+  ...Basic,
+  args: {
+    placeholders: {
+      day: 'D',
+      month: 'M',
+      year: 'YY',
+    },
+  },
+};
+
+export const SingleZero = storyConfig(Basic, {});
+SingleZero.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter leading zero on day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '0');
+  });
+  await step('can enter 1 leading zero on year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0');
+  });
+};
+
+export const ZeroesAsValue = storyConfig(Basic, {});
+ZeroesAsValue.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter 2 leading zeroes on day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '00');
+  });
+  await step('can enter 4 leading zeroes on year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0000');
+  });
+};
+
+export const ZeroesBeforeValue = storyConfig(Basic, {});
+ZeroesBeforeValue.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter leading zeroes on day followed by day', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '01');
+  });
+  await step('can enter leading zeroes on year followed by year', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0001');
+  });
+};
+
+export const MaxLengthRespected = storyConfig(Basic, {});
+MaxLengthRespected.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can only enter 4 digits in the year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '11111111');
+  });
+  await step('can only enter 2 digits in the day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '11111111');
+  });
+};
+
+export const LocalizationWorks: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'zh-HK';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const YearFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'ja';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const MonthFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'en-US';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const DayFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'en';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const NoNonDigitsAllowed = storyConfig(Basic, {});
+NoNonDigitsAllowed.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can only enter digits in the day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, 'abcd1');
+  });
+  await step('can only enter digits in the year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, 'abcd2');
+  });
+};
+
+export const BasicMobile = storyConfig(Basic, { variants: ['mobile'] });
+
+export const InputErrorMobile = storyConfig(InputError, { variants: ['mobile'] });

package/src/dateInput/DateInput.tsx

@@ -2,8 +2,16 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
-import { DateMode, MonthFormat, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
+import {
+  DateMode,
+  MonthFormat,
+  Size,
+  SizeLarge,
+  SizeMedium,
+  SizeSmall,
+  Typography,
+} from '../common';
 import { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 import { useInputAttributes } from '../inputs/contexts';
 import messages from './DateInput.messages';
@@ -93,8 +101,10 @@ const DateInput = ({
   };
 
   const [day, setDay] = useState(() => getInitialDate('day'));
+  const [displayDay, setDisplayDay] = useState(day?.toString());
   const [month, setMonth] = useState(() => getInitialDate('month'));
   const [year, setYear] = useState(() => getInitialDate('year'));
+  const [displayYear, setDisplayYear] = useState(year?.toString());
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | null | undefined>(
     getDateObject,
   );
@@ -129,7 +139,7 @@ const DateInput = ({
   const getSelectElement = () => {
     return (
       <label className="d-flex flex-column">
-        <span className="sr-only">{monthLabel}</span>
+        <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>
         <SelectInput
           name="month"
           disabled={disabled}
@@ -147,13 +157,25 @@ const DateInput = ({
     );
   };
 
+  const isDayValid = (newDay: number, newMonth: number, newYear: number) => {
+    const maxDay = new Date(newYear, newMonth + 1, 0).getDate();
+    return newDay <= maxDay;
+  };
+
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    if (newDay == null || newMonth == null || newYear == null) {
+    if (newDay == null || newDay === 0 || newMonth == null || newYear == null || newYear === 0) {
+      broadcastNewValue(null);
+      return;
+    }
+    if (!isDayValid(newDay, newMonth, newYear)) {
       broadcastNewValue(null);
       return;
     }
 
     const dateValue = new Date(newYear, newMonth, newDay);
+    if (newYear < 100) {
+      dateValue.setFullYear(newYear);
+    }
 
     if (!isDateValid(dateValue)) {
       broadcastNewValue(null);
@@ -170,9 +192,12 @@ const DateInput = ({
   };
 
   const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checkedDay } = checkDate(Number.parseInt(event.target.value, 10), month, year);
-    setDay(checkedDay);
-    handleInternalValue(checkedDay, month, year);
+    const newDayString = event.target.value.replace(/\D/g, '');
+    const newDayNumber = Number.parseInt(newDayString, 10);
+
+    setDay(newDayNumber);
+    setDisplayDay(newDayString);
+    handleInternalValue(newDayNumber, month, year);
   };
 
   const handleMonthChange = (selectedMonth: number | null) => {
@@ -181,30 +206,21 @@ const DateInput = ({
       handleInternalValue(day, null, year);
       return;
     }
-    const { checkedDay } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
-    }
-    handleInternalValue(checkedDay, selectedMonth, year);
+    handleInternalValue(day, selectedMonth, year);
   };
 
   const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value;
-    const slicedYear = newValue.length > 4 ? newValue.slice(0, 4) : newValue;
-
-    if (slicedYear.toString().length === 4) {
-      // Correct day based on year and month.
-      const { checkedDay } = checkDate(day, month, Number.parseInt(newValue, 10));
-
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
-      }
+    const newYearString = event.target.value.replace(/\D/g, '');
+    const newYearNumber = Number.parseInt(newYearString, 10);
 
-      setYear(Number.parseInt(slicedYear, 10));
-      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
+    if (newYearString.length >= 4 && newYearString.length <= 6) {
+      setYear(newYearNumber);
+      setDisplayYear(newYearString);
+      handleInternalValue(day, month, newYearNumber);
     } else {
-      setYear(Number.parseInt(slicedYear, 10));
+      setYear(null);
+      setDisplayYear(newYearString);
       handleInternalValue(day, month, null);
     }
   };
@@ -216,29 +232,6 @@ const DateInput = ({
     }
   };
 
-  const checkDate = (
-    newDay: number | null = null,
-    newMonth: number | null = 0,
-    newYear: number | null = null,
-  ) => {
-    let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
-
-    if (!newDay) {
-      checkedDay = null;
-    }
-
-    if (newDay && newDay < 0) {
-      checkedDay = 1;
-    }
-
-    if ((newDay && newMonth) || (newDay && newDay > 31)) {
-      checkedDay = newDay > maxDay ? maxDay : newDay;
-    }
-
-    return { checkedDay, checkedMonth: newMonth, checkedYear: newYear };
-  };
-
   const monthYearOnly = mode === DateMode.MONTH_YEAR;
 
   const monthWidth = classNames({
@@ -254,7 +247,7 @@ const DateInput = ({
     return (
       <div className="col-sm-3">
         <label>
-          <span className="sr-only">{dayLabel}</span>
+          <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
               type="text"
@@ -262,10 +255,12 @@ const DateInput = ({
               pattern="[0-9]*"
               name="day"
               autoComplete={dayAutoComplete}
-              value={day || ''}
+              value={displayDay || ''}
               placeholder={placeholders?.day}
               disabled={disabled}
               min={1}
+              max={31}
+              maxLength={2}
               onChange={(event) => handleDayChange(event)}
             />
           </div>
@@ -278,7 +273,7 @@ const DateInput = ({
     return (
       <div className="col-sm-4">
         <label>
-          <span className="sr-only">{yearLabel}</span>
+          <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
               type="text"
@@ -287,9 +282,11 @@ const DateInput = ({
               name="year"
               autoComplete={yearAutoComplete}
               placeholder={placeholders?.year}
-              value={year || ''}
+              value={displayYear || ''}
               disabled={disabled}
-              min={1}
+              min={0}
+              max={9999}
+              maxLength={6}
               onChange={(event) => handleYearChange(event)}
             />
           </div>

package/src/field/Field.story.tsx

@@ -2,10 +2,12 @@ import { useState } from 'react';
 
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
+import { Sentiment } from '../common';
 
 export default {
   component: Field,
   title: 'Field',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {
@@ -17,43 +19,22 @@ export const Basic = () => {
   );
 };
 
-export const WithErrorMessage = () => {
+export const WithStatusMessages = () => {
   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>
+    <div>
+      <Field label="Phone number" sentiment={Sentiment.POSITIVE} message="Positive message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" sentiment={Sentiment.WARNING} message="Warning message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" message="This is a helpful message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    </div>
   );
 };

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

@@ -15,15 +15,28 @@ export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   label: React.ReactNode;
+  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
+  message?: React.ReactNode;
+  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
+  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
   className?: string;
   children?: React.ReactNode;
 };
 
-export const Field = ({ id, label, hint, error, className, children }: FieldProps) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+export const Field = ({
+  id,
+  label,
+  message: propMessage,
+  sentiment: propType = Sentiment.NEUTRAL,
+  className,
+  children,
+  ...props
+}: FieldProps) => {
+  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = sentiment === Sentiment.NEGATIVE;
 
   const labelId = useId();
 
@@ -35,14 +48,16 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
   return (
     <FieldLabelIdContextProvider value={labelId}>
       <InputIdContextProvider value={inputId}>
-        <InputDescribedByProvider value={hasError || hasHint ? descriptionId : undefined}>
+        <InputDescribedByProvider value={message ? descriptionId : undefined}>
           <InputInvalidProvider value={hasError}>
             <div
               className={classNames(
                 'form-group d-block',
                 {
+                  'has-success': sentiment === Sentiment.POSITIVE,
+                  'has-warning': sentiment === Sentiment.WARNING,
                   'has-error': hasError,
-                  'has-info': hasHint,
+                  'has-info': sentiment === Sentiment.NEUTRAL,
                 },
                 className,
               )}
@@ -51,14 +66,9 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
                 {label}
                 {children}
               </Label>
-              {hasHint && (
-                <InlineAlert type={Sentiment.NEUTRAL} id={descriptionId}>
-                  {hint}
-                </InlineAlert>
-              )}
-              {hasError && (
-                <InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
-                  {error}
+              {message && (
+                <InlineAlert type={sentiment} id={descriptionId}>
+                  {message}
                 </InlineAlert>
               )}
             </div>

package/src/inlineAlert/InlineAlert.story.tsx

@@ -51,7 +51,7 @@ export const Basic = () => {
 
   return (
     <>
-      {/*eslint-disable-next-line react/no-adjacent-inline-elements */}
+      {/* eslint-disable-next-line react/no-adjacent-inline-elements */}
       <p>
         The styling for the input (the coloured border) and the visibility of the inline alert is
         controlled through the use of <code>has-***</code> classes which are applied to the{' '}
@@ -60,7 +60,11 @@ export const Basic = () => {
         element. The available classes are <code>has-error</code>, <code>has-info</code>,{' '}
         <code>has-warning</code> and <code>has-success</code>.
       </p>
-      <p>Where possible consumers should use Field instead of doing this manually.</p>
+      <p>
+        Where possible consumers should use{' '}
+        <a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
+        this manually.
+      </p>
       <div className={`form-group ${typeClass}`}>
         <label className="control-label" htmlFor="id0">
           Toggleable
@@ -73,14 +77,18 @@ export const Basic = () => {
           Negative
         </label>
         <Input id="id1" value="Neptune is cool" />
-        <InlineAlert type="error">{message}</InlineAlert>
+        <InlineAlert type="negative">{message}</InlineAlert>
       </div>
-      <div className="form-group has-positive">
+      <div className="form-group has-success">
         <label className="control-label" htmlFor="id2">
           Positive
         </label>
         <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">{message}</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 className="control-label" htmlFor="id3">