@transferwise/components 0.0.0-experimental-b77dac7 → 0.0.0-experimental-fa3aa98

package/src/Calendar/Calendar.types.ts

@@ -0,0 +1,35 @@
+export interface DisabledDateRange {
+  start: Date;
+  end: Date;
+}
+
+export type WeekDayType = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+
+export interface DisabledRules {
+  /** Days of the week to disable (e.g. `['sat', 'sun']` for weekends). */
+  weekdays?: WeekDayType[];
+  /** Specific calendar dates to disable. */
+  dates?: Date[];
+  /** Inclusive date ranges to disable. */
+  ranges?: DisabledDateRange[];
+  /**
+   * Human-readable explanation shown in an InlinePrompt below the calendar grid when a
+   * disabled date is focused or clicked. Required for accessibility: it is linked to
+   * disabled cells via `aria-describedby` so screen reader users understand why a date
+   * is unavailable. Also used as the prompt text when `min`/`max` out-of-range dates
+   * are focused, overriding the built-in default message.
+   */
+  reason: string;
+}
+
+export interface DateChangeMeta {
+  /** Whether the focused date is selectable (not disabled or out of range). */
+  isEnabled: boolean;
+}
+
+export interface OnDateSelectParams {
+  /** The date that was focused or clicked. */
+  date: Date;
+  /** Whether the date is selectable (not disabled or out of range). */
+  isEnabled: boolean;
+}

package/src/Calendar/DateHeader/DateHeader.tsx

@@ -15,6 +15,8 @@ interface DateHeaderProps {
   onPreviousClick: () => void;
   onNextClick: () => void;
   dateMode: string;
+  isPreviousDisabled?: boolean;
+  isNextDisabled?: boolean;
 }
 
 const DateHeader: React.FC<DateHeaderProps> = ({
@@ -23,6 +25,8 @@ const DateHeader: React.FC<DateHeaderProps> = ({
   onPreviousClick,
   onNextClick,
   dateMode,
+  isPreviousDisabled,
+  isNextDisabled,
 }) => {
   const intl = useIntl();
   const { isMobile } = useLayout();
@@ -34,6 +38,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           priority="minimal"
           className="d-inline-flex"
           aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}
+          disabled={isPreviousDisabled}
           onClick={onPreviousClick}
         >
           <ChevronLeft className="left-single-direction" />
@@ -61,6 +66,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           className="d-inline-flex"
           aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}
           priority="minimal"
+          disabled={isNextDisabled}
           onClick={onNextClick}
         >
           <ChevronRight className="right-single-direction" />

package/src/Calendar/DayCalendar/DayCalendar.tsx

@@ -2,6 +2,7 @@ import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
 
 import { MonthFormat } from '../../common';
+import type { DisabledRules } from '../Calendar.types';
 import messages from '../Calendar.messages';
 import DateHeader from '../DateHeader';
 
@@ -10,11 +11,14 @@ import { injectIntl, type WrappedComponentProps } from '../../common/injectIntl'
 
 interface DayCalendarProps extends WrappedComponentProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewMonth: number;
   viewYear: number;
   monthFormat: `${MonthFormat}`;
+  disabledRules?: DisabledRules;
+  disabledReasonId?: string;
   onSelect: (date: Date) => void;
   onLabelClick: () => void;
   onViewDateUpdate: (date: { month: number; year: number }) => void;
@@ -40,15 +44,29 @@ class DayCalendar extends PureComponent<DayCalendarProps> {
   render() {
     const {
       selectedDate,
+      focusedDate,
       min,
       max,
       viewMonth,
       viewYear,
       intl: { locale, formatMessage },
       monthFormat,
+      disabledRules,
+      disabledReasonId,
       onLabelClick,
       onSelect,
     } = this.props;
+    const prevMonth = viewMonth <= 0 ? 11 : viewMonth - 1;
+    const prevYear = viewMonth <= 0 ? viewYear - 1 : viewYear;
+    const nextMonth = viewMonth >= 11 ? 0 : viewMonth + 1;
+    const nextYear = viewMonth >= 11 ? viewYear + 1 : viewYear;
+    const isPreviousDisabled = !!(
+      min && new Date(prevYear, prevMonth) < new Date(min.getFullYear(), min.getMonth())
+    );
+    const isNextDisabled = !!(
+      max && new Date(nextYear, nextMonth) > new Date(max.getFullYear(), max.getMonth())
+    );
+
     return (
       <>
         <DateHeader
@@ -57,11 +75,25 @@ class DayCalendar extends PureComponent<DayCalendarProps> {
             year: 'numeric',
           })}
           dateMode={formatMessage(messages.month)}
+          isPreviousDisabled={isPreviousDisabled}
+          isNextDisabled={isNextDisabled}
           onLabelClick={onLabelClick}
           onPreviousClick={this.selectPreviousMonth}
           onNextClick={this.selectNextMonth}
         />
-        <DayCalendarTable {...{ selectedDate, min, max, viewMonth, viewYear, onSelect }} />
+        <DayCalendarTable
+          {...{
+            selectedDate,
+            focusedDate,
+            min,
+            max,
+            viewMonth,
+            viewYear,
+            disabledRules,
+            disabledReasonId,
+            onSelect,
+          }}
+        />
       </>
     );
   }

package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx

@@ -2,19 +2,28 @@ import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
 import { injectIntl, type WrappedComponentProps } from '../../../common/injectIntl';
 
-import { getDayNames, isWithinRange } from '../../../common/DateUtils';
+import { getDayNames, isWithinRange, isDateDisabled } from '../../../common/DateUtils';
+import type { DisabledRules } from '../../Calendar.types';
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';
 import { getStartOfDay } from '../../GetStartOfDay';
-import TableLink from '../../tableLink';
+import TableLink from '../../TableLink';
 
 const SHORT_DAY_FORMAT: Intl.DateTimeFormatOptions = { day: 'numeric' };
+const LONG_DAY_FORMAT: Intl.DateTimeFormatOptions = {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric',
+};
 
 interface DayCalendarTableProps extends WrappedComponentProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewMonth: number;
   viewYear: number;
+  disabledRules?: DisabledRules;
+  disabledReasonId?: string;
   onSelect: (date: Date) => void;
 }
 
@@ -63,21 +72,36 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
     onSelect(new Date(viewYear, viewMonth, day));
   };
 
-  isDisabled = (day: number) => {
+  isOutOfRange = (day: number) => {
     if (day < 0) {
       return true;
     }
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
-
     return !isWithinRange(date, min, max);
   };
 
+  isDisabled = (day: number) => {
+    if (day < 0) {
+      return false;
+    }
+    const { viewMonth, viewYear, disabledRules } = this.props;
+    const date = new Date(viewYear, viewMonth, day);
+    return isDateDisabled(date, disabledRules);
+  };
+
+  isUnavailable = (day: number) => this.isOutOfRange(day) || this.isDisabled(day);
+
   isActive = (day: number) => {
     const { selectedDate, viewMonth, viewYear } = this.props;
     return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));
   };
 
+  isFocused = (day: number) => {
+    const { focusedDate, viewMonth, viewYear } = this.props;
+    return !!(focusedDate && Number(new Date(viewYear, viewMonth, day)) === Number(focusedDate));
+  };
+
   isToday = (day: number) => {
     const { viewMonth, viewYear } = this.props;
     return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));
@@ -86,15 +110,15 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   getAutofocusDay = (weeks: number[][]) => {
     const days = weeks.flatMap((week) => week);
     return getFocusableTime({
-      isActive: this.isActive,
+      isActive: this.isFocused,
       isNow: this.isToday,
-      isDisabled: this.isDisabled,
+      isDisabled: this.isUnavailable,
       timeSpan: days,
     });
   };
 
   render() {
-    const { viewMonth, viewYear, intl } = this.props;
+    const { viewMonth, viewYear, intl, disabledReasonId } = this.props;
     const weeks = this.getTableStructure();
     const autoFocusDay = this.getAutofocusDay(weeks);
     return (
@@ -124,27 +148,37 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
           {/* eslint-disable react/no-array-index-key */}
           {weeks.map((week, weekIndex) => (
             <tr key={weekIndex}>
-              {week.map((day, dayIndex) => (
-                <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
-                  {day !== -1 && (
-                    <TableLink
-                      item={day}
-                      type="day"
-                      title={formatDate(
-                        new Date(viewYear, viewMonth, day),
-                        intl.locale,
-                        SHORT_DAY_FORMAT,
-                      )}
-                      autofocus={day === autoFocusDay}
-                      longTitle={formatDate(new Date(viewYear, viewMonth, day), intl.locale)}
-                      active={this.isActive(day)}
-                      disabled={this.isDisabled(day)}
-                      today={this.isToday(day)}
-                      onClick={this.selectDay}
-                    />
-                  )}
-                </td>
-              ))}
+              {week.map((day, dayIndex) => {
+                const dayOutOfRange = this.isOutOfRange(day);
+                const dayDisabled = this.isDisabled(day);
+                return (
+                  <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
+                    {day !== -1 && (
+                      <TableLink
+                        item={day}
+                        type="day"
+                        title={formatDate(
+                          new Date(viewYear, viewMonth, day),
+                          intl.locale,
+                          SHORT_DAY_FORMAT,
+                        )}
+                        autofocus={day === autoFocusDay}
+                        longTitle={formatDate(
+                          new Date(viewYear, viewMonth, day),
+                          intl.locale,
+                          LONG_DAY_FORMAT,
+                        )}
+                        active={this.isActive(day)}
+                        outOfRange={dayOutOfRange}
+                        disabled={dayDisabled}
+                        today={this.isToday(day)}
+                        disabledReasonId={disabledReasonId}
+                        onClick={this.selectDay}
+                      />
+                    )}
+                  </td>
+                );
+              })}
             </tr>
           ))}
           {/* eslint-enable react/no-array-index-key */}

package/src/Calendar/MonthCalendar/MonthCalendar.tsx

@@ -9,6 +9,7 @@ import MonthCalendarTable from './Table';
 
 interface MonthCalendarProps extends WrappedComponentProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewYear: number;
@@ -35,6 +36,7 @@ class MonthCalendar extends PureComponent<MonthCalendarProps> {
   render() {
     const {
       selectedDate,
+      focusedDate,
       min,
       max,
       viewYear,
@@ -42,17 +44,23 @@ class MonthCalendar extends PureComponent<MonthCalendarProps> {
       placeholder,
       onLabelClick,
     } = this.props;
+    const isPreviousDisabled = !!(min && viewYear - 1 < min.getFullYear());
+    const isNextDisabled = !!(max && viewYear + 1 > max.getFullYear());
+
     return (
       <>
         <DateHeader
           dateMode={formatMessage(messages.year)}
           label={formatDate(new Date(viewYear, 0), locale, { year: 'numeric' })}
+          isPreviousDisabled={isPreviousDisabled}
+          isNextDisabled={isNextDisabled}
           onLabelClick={onLabelClick}
           onPreviousClick={this.selectPreviousYear}
           onNextClick={this.selectNextYear}
         />
         <MonthCalendarTable
           selectedDate={selectedDate}
+          focusedDate={focusedDate}
           min={min}
           max={max}
           viewYear={viewYear}

package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx

@@ -2,10 +2,11 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';
-import TableLink from '../../tableLink';
+import TableLink from '../../TableLink';
 
 interface MonthCalendarTableProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewYear: number;
@@ -19,6 +20,7 @@ const MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };
 
 const MonthCalendarTable = ({
   selectedDate,
+  focusedDate,
   min,
   max,
   viewYear,
@@ -34,7 +36,8 @@ const MonthCalendarTable = ({
         type="month"
         title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}
         active={isActive(month)}
-        disabled={isDisabled(month)}
+        outOfRange={isDisabled(month)}
+        disabled={false}
         today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
         autofocus={autofocusMonth === month}
         onClick={onSelect}
@@ -46,6 +49,10 @@ const MonthCalendarTable = ({
     return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());
   };
 
+  const isFocused = (month: number) => {
+    return !!(month === focusedDate?.getMonth() && viewYear === focusedDate?.getFullYear());
+  };
+
   const isThisMonth = (month: number) => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
   };
@@ -60,7 +67,12 @@ const MonthCalendarTable = ({
 
   const autofocusMonth = (() => {
     const months = Array.from({ length: ROWS * COLS }, (_, index) => index);
-    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
+    return getFocusableTime({
+      isActive: isFocused,
+      isNow: isThisMonth,
+      isDisabled,
+      timeSpan: months,
+    });
   })();
 
   return (

package/src/Calendar/TableLink/TableLink.css

@@ -0,0 +1,115 @@
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
+  width: 100%;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  border: transparent;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: transparent;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+@media (max-width: 320px) {
+  .wds-Calendar__option--day,
+  .wds-Calendar__option--month,
+  .wds-Calendar__option--year {
+    padding: 0;
+  }
+}
+.wds-Calendar__option--day:focus,
+.wds-Calendar__option--month:focus,
+.wds-Calendar__option--year:focus {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-Calendar__option--day.disabled,
+.wds-Calendar__option--month.disabled,
+.wds-Calendar__option--year.disabled,
+.wds-Calendar__option--day[aria-disabled="true"],
+.wds-Calendar__option--month[aria-disabled="true"],
+.wds-Calendar__option--year[aria-disabled="true"] {
+  --ring-outline-color: var(--color-sentiment-content-primary);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+  cursor: not-allowed;
+}
+.wds-Calendar__option--day.disabled:hover,
+.wds-Calendar__option--month.disabled:hover,
+.wds-Calendar__option--year.disabled:hover,
+.wds-Calendar__option--day[aria-disabled="true"]:hover,
+.wds-Calendar__option--month[aria-disabled="true"]:hover,
+.wds-Calendar__option--year[aria-disabled="true"]:hover,
+.wds-Calendar__option--day.disabled:focus,
+.wds-Calendar__option--month.disabled:focus,
+.wds-Calendar__option--year.disabled:focus,
+.wds-Calendar__option--day[aria-disabled="true"]:focus,
+.wds-Calendar__option--month[aria-disabled="true"]:focus,
+.wds-Calendar__option--year[aria-disabled="true"]:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Calendar__option--day.disabled.active,
+.wds-Calendar__option--month.disabled.active,
+.wds-Calendar__option--year.disabled.active,
+.wds-Calendar__option--day[aria-disabled="true"].active,
+.wds-Calendar__option--month[aria-disabled="true"].active,
+.wds-Calendar__option--year[aria-disabled="true"].active,
+.wds-Calendar__option--day.disabled.active:hover,
+.wds-Calendar__option--month.disabled.active:hover,
+.wds-Calendar__option--year.disabled.active:hover,
+.wds-Calendar__option--day[aria-disabled="true"].active:hover,
+.wds-Calendar__option--month[aria-disabled="true"].active:hover,
+.wds-Calendar__option--year[aria-disabled="true"].active:hover,
+.wds-Calendar__option--day.disabled.active:active,
+.wds-Calendar__option--month.disabled.active:active,
+.wds-Calendar__option--year.disabled.active:active,
+.wds-Calendar__option--day[aria-disabled="true"].active:active,
+.wds-Calendar__option--month[aria-disabled="true"].active:active,
+.wds-Calendar__option--year[aria-disabled="true"].active:active,
+.wds-Calendar__option--day.disabled.active:focus,
+.wds-Calendar__option--month.disabled.active:focus,
+.wds-Calendar__option--year.disabled.active:focus,
+.wds-Calendar__option--day[aria-disabled="true"].active:focus,
+.wds-Calendar__option--month[aria-disabled="true"].active:focus,
+.wds-Calendar__option--year[aria-disabled="true"].active:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-interactive-primary);
+  color: var(--color-sentiment-interactive-secondary);
+}
+.wds-Calendar__option--day.disabled.today,
+.wds-Calendar__option--month.disabled.today,
+.wds-Calendar__option--year.disabled.today,
+.wds-Calendar__option--day[aria-disabled="true"].today,
+.wds-Calendar__option--month[aria-disabled="true"].today,
+.wds-Calendar__option--year[aria-disabled="true"].today {
+  text-decoration-color: #768e9c;
+  text-decoration-color: var(--color-content-tertiary);
+}
+.wds-Calendar__option--day {
+  height: 40px;
+  height: var(--size-40);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  line-height: 40px;
+  line-height: var(--size-40);
+  width: 40px;
+  width: var(--size-40);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.wds-Calendar__option--day.today {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}

package/src/Calendar/TableLink/TableLink.less

@@ -0,0 +1,68 @@
+@import (reference) "./../../styles/variables/neptune-tokens.less";
+
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
+  width: 100%;
+  padding: var(--size-4) 0;
+  @media (--screen-400-zoom) {
+    padding: 0;
+  }
+  border: transparent;
+  border-radius: var(--radius-small);
+  background-color: transparent;
+  font-weight: var(--font-weight-semi-bold);
+  color: var(--color-content-primary);
+
+  &:focus {
+    background-color: var(--color-background-screen-hover);
+  }
+
+  &.disabled,
+  &[aria-disabled="true"] {
+    --ring-outline-color: var(--color-sentiment-content-primary);
+    color: var(--color-content-tertiary);
+    cursor: not-allowed;
+
+    &:hover,
+    &:focus {
+      filter: unset;
+      opacity: unset;
+      background-color: var(--color-sentiment-background-surface);
+      color: var(--color-sentiment-content-primary);
+    }
+
+    &.active {
+      &,
+      &:hover,
+      &:active,
+      &:focus {
+        filter: unset;
+        opacity: unset;
+        background-color: var(--color-sentiment-interactive-primary);
+        color: var(--color-sentiment-interactive-secondary);
+      }
+    }
+
+    &.today {
+      text-decoration-color: var(--color-content-tertiary);
+    }
+  }
+}
+
+.wds-Calendar__option--day {
+  height: var(--size-40);
+  border-radius: var(--radius-full);
+  line-height: var(--size-40);
+  width: var(--size-40);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.today {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 4px;
+  }
+}

package/src/Calendar/{tableLink → TableLink}/TableLink.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import messages from '../Calendar.messages';
+import SentimentSurface from '../../SentimentSurface';
 
 interface TableLinkProps {
   item: number;
@@ -10,9 +11,11 @@ interface TableLinkProps {
   title?: string;
   longTitle?: string;
   active: boolean;
+  outOfRange: boolean;
   disabled: boolean;
   today: boolean;
   autofocus?: boolean;
+  disabledReasonId?: string;
   onClick: (item: number) => void;
 }
 
@@ -22,9 +25,11 @@ const TableLink = ({
   title,
   longTitle,
   active,
+  outOfRange,
   disabled,
   today,
   autofocus,
+  disabledReasonId,
   onClick,
 }: TableLinkProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -38,39 +43,49 @@ const TableLink = ({
     }
   }, [autofocus]);
 
-  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  const onCalendarClick = (event: React.MouseEvent) => {
     event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
+    onClick(item);
   };
 
+  const isUnavailable = outOfRange || disabled;
+
   const calculateAriaLabel = () => {
+    let label = longTitle || title || '';
     if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(
-        messages.selected,
-      )} ${intl.formatMessage(messages[type])}`;
+      label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;
+    }
+    if (isUnavailable) {
+      label += `, ${intl.formatMessage(messages.notAvailable)}`;
     }
-    return longTitle || title;
+    return label;
   };
 
   return (
-    <button
+    <SentimentSurface
+      // @ts-expect-error - Generic forwardRef limitation in SentimentSurface
       ref={buttonRef}
-      type="button"
+      as="button"
+      data-calendar-cell
+      aria-describedby={isUnavailable ? disabledReasonId : undefined}
+      aria-disabled={isUnavailable || undefined}
+      aria-label={calculateAriaLabel()}
+      aria-pressed={active}
       className={clsx(
+        `wds-Calendar__option--${type}`,
         `tw-date-lookup-${type}-option np-text-body-default-bold`,
         { active: !!active },
         { today: !!today },
+        { disabled: !!isUnavailable },
       )}
-      disabled={disabled}
+      hasBaseStyles={false}
+      sentiment={isUnavailable ? 'negative' : 'neutral'}
       tabIndex={autofocus ? 0 : -1}
-      aria-label={calculateAriaLabel()}
-      aria-pressed={active}
+      type="button"
       onClick={onCalendarClick}
     >
       {title || item}
-    </button>
+    </SentimentSurface>
   );
 };