@transferwise/components 0.0.0-experimental-3ede9cc → 0.0.0-experimental-a8c8413

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,12 +2,10 @@ 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 = () => {
@@ -19,22 +17,43 @@ export const Basic = () => {
   );
 };
 
-export const WithStatusMessages = () => {
+export const WithErrorMessage = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <div>
-      <Field label="Phone number" type={Sentiment.POSITIVE} message="Positive message">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number" type={Sentiment.WARNING} message="Warning message">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number" type={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>
+    <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>
   );
 };

package/src/field/Field.tsx

@@ -15,28 +15,15 @@ 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;
-  type?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
   className?: string;
   children?: React.ReactNode;
 };
 
-export const Field = ({
-  id,
-  label,
-  message: propMessage,
-  type: propType,
-  className,
-  children,
-  ...props
-}: FieldProps) => {
-  const type = props.error ? Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
-  const hasError = type === Sentiment.NEGATIVE;
+export const Field = ({ id, label, hint, error, className, children }: FieldProps) => {
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
 
   const labelId = useId();
 
@@ -48,16 +35,14 @@ export const Field = ({
   return (
     <FieldLabelIdContextProvider value={labelId}>
       <InputIdContextProvider value={inputId}>
-        <InputDescribedByProvider value={message ? descriptionId : undefined}>
+        <InputDescribedByProvider value={hasError || hasHint ? descriptionId : undefined}>
           <InputInvalidProvider value={hasError}>
             <div
               className={classNames(
                 'form-group d-block',
                 {
-                  'has-success': type === Sentiment.POSITIVE,
-                  'has-warning': type === Sentiment.WARNING,
                   'has-error': hasError,
-                  'has-info': type === Sentiment.NEUTRAL,
+                  'has-info': hasHint,
                 },
                 className,
               )}
@@ -66,9 +51,14 @@ export const Field = ({
                 {label}
                 {children}
               </Label>
-              {message && (
-                <InlineAlert type={type} id={descriptionId}>
-                  {message}
+              {hasHint && (
+                <InlineAlert type={Sentiment.NEUTRAL} id={descriptionId}>
+                  {hint}
+                </InlineAlert>
+              )}
+              {hasError && (
+                <InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
+                  {error}
                 </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,11 +60,7 @@ 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{' '}
-        <a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
-        this manually.
-      </p>
+      <p>Where possible consumers should use Field instead of doing this manually.</p>
       <div className={`form-group ${typeClass}`}>
         <label className="control-label" htmlFor="id0">
           Toggleable
@@ -77,18 +73,14 @@ export const Basic = () => {
           Negative
         </label>
         <Input id="id1" value="Neptune is cool" />
-        <InlineAlert type="negative">{message}</InlineAlert>
+        <InlineAlert type="error">{message}</InlineAlert>
       </div>
-      <div className="form-group has-success">
+      <div className="form-group has-positive">
         <label className="control-label" htmlFor="id2">
           Positive
         </label>
         <Input id="id2" value="Neptune is cool" />
-        <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>
+        <InlineAlert type="positive">{message}</InlineAlert>
       </div>
       <div className="form-group has-neutral">
         <label className="control-label" htmlFor="id3">

package/src/inlineAlert/InlineAlert.tsx

@@ -1,6 +1,6 @@
-import { AlertCircleFill, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
+import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { Sentiment } from '../common';
 
@@ -17,54 +17,15 @@ export default function InlineAlert({
   className,
   children,
 }: InlineAlertProps) {
-  const getStatusIcon = (sentiment: Sentiment) => {
-    switch (sentiment) {
-      case Sentiment.POSITIVE:
-      case Sentiment.SUCCESS:
-        return <CheckCircleFill />;
-      case Sentiment.WARNING:
-        return <AlertCircleFill />;
-      case Sentiment.NEGATIVE:
-      case Sentiment.ERROR:
-        return <CrossCircleFill />;
-      default:
-        return null;
-    }
-  };
-
-  const hasTextChildren = (content: ReactNode) => {
-    let label = '';
-
-    const fillLabel = (childrenNodes: ReactNode) => {
-      React.Children.map(childrenNodes, (child: ReactNode) => {
-        if (typeof child === 'string') {
-          label += child;
-        }
-        if (typeof child === 'object' && React.isValidElement(child)) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          fillLabel(child?.props?.children as ReactNode);
-        }
-      });
-    };
-
-    fillLabel(content);
-
-    return !!label.length;
-  };
-
+  const danger = type === 'negative' || type === 'error';
   return (
     <div
       role="alert"
       id={id}
-      className={classNames(
-        'alert alert-detach',
-        `alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type as Sentiment) ? 'danger' : type}`,
-        className,
-      )}
+      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
     >
-      {/* We should show the status icon only if we have some text to show */}
-      {hasTextChildren(children) && getStatusIcon(type as Sentiment)}
-      <div className="np-text-body-default">{children}</div>
+      {danger && <AlertCircleIcon />}
+      <div>{children}</div>
     </div>
   );
 }

package/src/label/Label.tsx

@@ -12,7 +12,7 @@ export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
     <label
       id={id}
       htmlFor={htmlFor}
-      className={classNames('control-label d-flex flex-column gap-y-xs m-b-0', className)}
+      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
     >
       {children}
     </label>

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

@@ -1,17 +0,0 @@
-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/);
-  });
-});