@transferwise/components 0.0.0-experimental-bcea1dd → 0.0.0-experimental-1168b1c

package/src/Calendar/Calendar.tsx

@@ -1,7 +1,15 @@
-import { useState, useCallback, useEffect, KeyboardEvent } from 'react';
+import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';
 
 import { MonthFormat } from '../common';
-import { isWithinRange, moveToWithinRange, returnDateView } from '../common/DateUtils';
+import {
+  isWithinRange,
+  moveToWithinRange,
+  returnDateView,
+  isDateDisabled,
+  hasDisabledDatesInMonth,
+} from '../common/DateUtils';
+import { InlinePrompt } from '../Prompt/InlinePrompt';
+import type { DateChangeMeta, DisabledRules } from './Calendar.types';
 import DayCalendar from './DayCalendar';
 import { getStartOfDay } from './GetStartOfDay';
 import MonthCalendar from './MonthCalendar';
@@ -13,7 +21,8 @@ export interface CalendarProps {
   max?: Date | null;
   monthFormat?: `${MonthFormat}`;
   placeholder?: string;
-  onChange: (date: Date | null) => void;
+  disabledRules?: DisabledRules;
+  onChange: (date: Date | null, meta: DateChangeMeta) => void;
   onSelect?: (date: Date) => void;
 }
 
@@ -23,16 +32,25 @@ const Calendar = ({
   max: maxProp = null,
   monthFormat = MonthFormat.LONG,
   placeholder,
+  disabledRules,
   onChange,
   onSelect,
 }: CalendarProps) => {
   const selectedDate = getStartOfDay(value);
   const min = getStartOfDay(minProp);
   const max = getStartOfDay(maxProp);
+  const disabledReasonId = useId();
+  const [focusedDateDisabled, setFocusedDateDisabled] = useState(false);
+  const disabledRulesRef = useRef(disabledRules);
+  useEffect(() => {
+    disabledRulesRef.current = disabledRules;
+  });
 
   useEffect(() => {
     if (selectedDate && !isWithinRange(selectedDate, min, max)) {
-      onChange(moveToWithinRange(selectedDate, min, max));
+      const clamped = moveToWithinRange(selectedDate, min, max);
+      const isEnabled = !isDateDisabled(clamped, disabledRulesRef.current);
+      onChange(clamped, { isEnabled });
     }
   }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -49,6 +67,16 @@ const Calendar = ({
     setViewYear(view.getFullYear());
   }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (selectedDate) {
+      const isEnabled =
+        isWithinRange(selectedDate, min, max) &&
+        !isDateDisabled(selectedDate, disabledRulesRef.current);
+
+      setFocusedDateDisabled(!isEnabled);
+    }
+  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), disabledRules]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleViewDateUpdate = useCallback(
     // eslint-disable-next-line react-hooks/preserve-manual-memoization
     ({ month, year }: { month?: number; year?: number }) => {
@@ -63,17 +91,21 @@ const Calendar = ({
   const switchToYears = useCallback(() => setMode('year'), []);
 
   const handleSelectedDateUpdate = useCallback(
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     (date: Date) => {
-      if (onSelect) {
+      const isEnabled =
+        isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);
+      setFocusedDateDisabled(!isEnabled);
+      onChange(date, { isEnabled });
+      if (isEnabled && onSelect) {
         onSelect(date);
-      } else {
-        onChange(date);
       }
     },
-    [onChange, onSelect],
+    [min, max, onChange, onSelect],
   );
 
   const adjustDate = useCallback(
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {
       let date: Date | null;
       if (selectedDate) {
@@ -87,7 +119,11 @@ const Calendar = ({
       }
       date &&= moveToWithinRange(date, min, max);
       if (date?.getTime() !== selectedDate?.getTime()) {
-        onChange(date);
+        const isEnabled = date
+          ? isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current)
+          : true;
+        setFocusedDateDisabled(!isEnabled);
+        onChange(date, { isEnabled });
       }
     },
     [selectedDate, min, max, mode, onChange],
@@ -119,6 +155,11 @@ const Calendar = ({
     [adjustDate],
   );
 
+  const showPrompt =
+    mode === 'day' &&
+    !!disabledRules?.reason &&
+    hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div onKeyDown={handleKeyDown}>
@@ -130,6 +171,8 @@ const Calendar = ({
           viewMonth={viewMonth}
           viewYear={viewYear}
           monthFormat={monthFormat}
+          disabledRules={disabledRules}
+          disabledReasonId={showPrompt ? disabledReasonId : undefined}
           onSelect={handleSelectedDateUpdate}
           onLabelClick={switchToYears}
           onViewDateUpdate={handleViewDateUpdate}
@@ -158,6 +201,15 @@ const Calendar = ({
           onViewDateUpdate={handleViewDateUpdate}
         />
       )}
+      {showPrompt && (
+        <InlinePrompt
+          sentiment={focusedDateDisabled ? 'negative' : 'neutral'}
+          width="full"
+          id={disabledReasonId}
+        >
+          {disabledRules.reason}
+        </InlinePrompt>
+      )}
     </div>
   );
 };

package/src/Calendar/Calendar.types.ts

@@ -0,0 +1,22 @@
+export interface DisabledDateRange {
+  start: Date;
+  end: Date;
+}
+
+export type WeekDayType = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+
+export interface DisabledRules {
+  weekdays?: WeekDayType[];
+  dates?: Date[];
+  ranges?: DisabledDateRange[];
+  reason: string;
+}
+
+export interface DateChangeMeta {
+  isEnabled: boolean;
+}
+
+export interface OnDateSelectParams {
+  date: Date;
+  isEnabled: boolean;
+}

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';
 
@@ -15,6 +16,8 @@ interface DayCalendarProps extends WrappedComponentProps {
   viewMonth: number;
   viewYear: number;
   monthFormat: `${MonthFormat}`;
+  disabledRules?: DisabledRules;
+  disabledReasonId?: string;
   onSelect: (date: Date) => void;
   onLabelClick: () => void;
   onViewDateUpdate: (date: { month: number; year: number }) => void;
@@ -46,6 +49,8 @@ class DayCalendar extends PureComponent<DayCalendarProps> {
       viewYear,
       intl: { locale, formatMessage },
       monthFormat,
+      disabledRules,
+      disabledReasonId,
       onLabelClick,
       onSelect,
     } = this.props;
@@ -61,7 +66,18 @@ class DayCalendar extends PureComponent<DayCalendarProps> {
           onPreviousClick={this.selectPreviousMonth}
           onNextClick={this.selectNextMonth}
         />
-        <DayCalendarTable {...{ selectedDate, min, max, viewMonth, viewYear, onSelect }} />
+        <DayCalendarTable
+          {...{
+            selectedDate,
+            min,
+            max,
+            viewMonth,
+            viewYear,
+            disabledRules,
+            disabledReasonId,
+            onSelect,
+          }}
+        />
       </>
     );
   }

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

@@ -2,12 +2,18 @@ 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;
@@ -15,6 +21,8 @@ interface DayCalendarTableProps extends WrappedComponentProps {
   max: Date | null;
   viewMonth: number;
   viewYear: number;
+  disabledRules?: DisabledRules;
+  disabledReasonId?: string;
   onSelect: (date: Date) => void;
 }
 
@@ -67,10 +75,10 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
     if (day < 0) {
       return true;
     }
-    const { min, max, viewMonth, viewYear } = this.props;
+    const { min, max, viewMonth, viewYear, disabledRules } = this.props;
     const date = new Date(viewYear, viewMonth, day);
 
-    return !isWithinRange(date, min, max);
+    return !isWithinRange(date, min, max) || isDateDisabled(date, disabledRules);
   };
 
   isActive = (day: number) => {
@@ -94,7 +102,7 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   };
 
   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 +132,35 @@ 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 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)}
+                        disabled={dayDisabled}
+                        today={this.isToday(day)}
+                        disabledReasonId={dayDisabled ? disabledReasonId : undefined}
+                        onClick={this.selectDay}
+                      />
+                    )}
+                  </td>
+                );
+              })}
             </tr>
           ))}
           {/* eslint-enable react/no-array-index-key */}

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

@@ -2,7 +2,7 @@ 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;

package/src/Calendar/TableLink/TableLink.css

@@ -0,0 +1,109 @@
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
+  width: 100%;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  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.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 {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+}
+.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 {
+  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,60 @@
+@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;
+  }
+  color: var(--color-content-accent);
+  border: transparent;
+  border-radius: var(--radius-small);
+  background-color: transparent;
+  font-weight: var(--font-weight-semi-bold);
+  color: var(--color-content-primary);
+
+  &.disabled,
+  &[aria-disabled="true"] {
+    --ring-outline-color: var(--color-sentiment-content-primary);
+    color: var(--color-content-tertiary);
+    cursor: not-allowed;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-sentiment-background-surface);
+      color: var(--color-sentiment-content-primary);
+      filter: unset;
+      opacity: unset;
+    }
+
+    &.active {
+      &, &:hover, &:active, &:focus {
+        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;
@@ -13,6 +14,7 @@ interface TableLinkProps {
   disabled: boolean;
   today: boolean;
   autofocus?: boolean;
+  disabledReasonId?: string;
   onClick: (item: number) => void;
 }
 
@@ -25,6 +27,7 @@ const TableLink = ({
   disabled,
   today,
   autofocus,
+  disabledReasonId,
   onClick,
 }: TableLinkProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -38,39 +41,46 @@ const TableLink = ({
     }
   }, [autofocus]);
 
-  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  const onCalendarClick = (event: React.MouseEvent) => {
     event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
+    onClick(item);
   };
 
   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 (disabled) {
+      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"
+      aria-describedby={disabled ? disabledReasonId : undefined}
+      aria-disabled={disabled || 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: !!disabled },
       )}
-      disabled={disabled}
+      hasBaseStyles={false}
+      sentiment={disabled ? 'negative' : 'neutral'}
       tabIndex={autofocus ? 0 : -1}
-      aria-label={calculateAriaLabel()}
-      aria-pressed={active}
+      type="button"
       onClick={onCalendarClick}
     >
       {title || item}
-    </button>
+    </SentimentSurface>
   );
 };
 

package/src/Calendar/YearCalendar/Table/YearCalendarTable.tsx

@@ -2,7 +2,7 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';
-import TableLink from '../../tableLink';
+import TableLink from '../../TableLink';
 
 interface YearCalendarTableProps {
   selectedDate: Date | null;