Date year focus & two digit year format fix

lib/src/common/variables.js

@@ -1504,8 +1504,8 @@ export const defaultTranslatedComponentLabels = {
     fetchingDataErrorMessage: "Error fetching data",
   },
   calendar: {
-    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-    daysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+    daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
     months: [
       "January",
       "February",

lib/src/date-input/Calendar.tsx

@@ -35,19 +35,28 @@ const getDays = (innerDate: Dayjs) => {
   return monthDayCells;
 };
 
+const getDateToFocus = (selectedDate, innerDate, today) => {
+  return selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")
+    ? selectedDate
+    : today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year")
+    ? today
+    : innerDate.set("date", 1);
+};
+
 const isDaySelected = (date: { day: number; month: number; year: number }, selectedDate) =>
   selectedDate?.get("month") === date.month &&
   selectedDate?.get("year") === date.year &&
   selectedDate?.get("date") === date.day;
 
-const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: CalendarPropsType): JSX.Element => {
-  const [dateToFocus, setDateToFocus] = useState(
-    selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")
-      ? selectedDate
-      : dayjs()
-  );
-  const [toFocus, setToFocus] = useState(false);
-  const today = dayjs();
+const Calendar = ({
+  selectedDate,
+  innerDate,
+  onInnerDateChange,
+  onDaySelect,
+  today,
+}: CalendarPropsType): JSX.Element => {
+  const [dateToFocus, setDateToFocus] = useState(getDateToFocus(selectedDate, innerDate, today));
+  const [isFocusable, setIsFocusable] = useState(false);
   const dayCells = useMemo(() => getDays(innerDate), [innerDate]);
   const translatedLabels = useTranslatedLabels();
   const weekDays = translatedLabels.calendar.daysShort;
@@ -60,17 +69,7 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
 
   const handleOnBlur = (event) => {
     if (!event?.currentTarget.contains(event.relatedTarget)) {
-      updateDateToFocus();
-    }
-  };
-
-  const updateDateToFocus = () => {
-    if (selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")) {
-      setDateToFocus(selectedDate);
-    } else if (today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year")) {
-      setDateToFocus(today);
-    } else {
-      setDateToFocus(innerDate.set("date", 1));
+      setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
     }
   };
 
@@ -79,21 +78,21 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
       onInnerDateChange(date);
     }
     setDateToFocus(date);
-    setToFocus(true);
+    setIsFocusable(true);
   };
 
   useEffect(() => {
-    if (toFocus) {
+    if (isFocusable) {
       document.getElementById(`day_${dateToFocus.get("date")}_month${dateToFocus.get("month")}`)?.focus();
-      setToFocus(false);
+      setIsFocusable(false);
     }
-  }, [dateToFocus, toFocus]);
+  }, [dateToFocus, isFocusable]);
 
   useEffect(() => {
     if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
-      updateDateToFocus();
+      setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
     }
-  }, [innerDate, dateToFocus, selectedDate]);
+  }, [innerDate, dateToFocus, selectedDate, today]);
 
   const handleDayKeyboardEvent = (event, date) => {
     let dateToFocusTemp =
@@ -163,32 +162,28 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
         ))}
       </DxcFlex>
       <DayCellsContainer onBlur={handleOnBlur}>
-        {dayCells.map((date, index) =>
-          date !== 0 ? (
-            <DayCell
-              onKeyDown={(event) => handleDayKeyboardEvent(event, date)}
-              aria-label={date.day}
-              id={`day_${date.day}_month${date.month}`}
-              key={`day_${index}`}
-              onClick={() => onDateClickHandler(date)}
-              selected={isDaySelected(date, selectedDate)}
-              actualMonth={date.month === innerDate.get("month")}
-              autoFocus={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month")}
-              aria-selected={isDaySelected(date, selectedDate)}
-              tabIndex={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1}
-              isCurrentDay={
-                today.get("date") === date.day &&
-                today.get("month") === innerDate.get("month") &&
-                today.get("month") === date.month &&
-                today.get("year") === innerDate.get("year")
-              }
-            >
-              {date.day}
-            </DayCell>
-          ) : (
-            <EmptyDayCell key={`empty_${index}`} />
-          )
-        )}
+        {dayCells.map((date, index) => (
+          <DayCell
+            onKeyDown={(event) => handleDayKeyboardEvent(event, date)}
+            aria-label={date.day}
+            id={`day_${date.day}_month${date.month}`}
+            key={`day_${index}`}
+            onClick={() => onDateClickHandler(date)}
+            selected={isDaySelected(date, selectedDate)}
+            actualMonth={date.month === innerDate.get("month")}
+            autoFocus={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month")}
+            aria-selected={isDaySelected(date, selectedDate)}
+            tabIndex={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1}
+            isCurrentDay={
+              today.get("date") === date.day &&
+              today.get("month") === innerDate.get("month") &&
+              today.get("month") === date.month &&
+              today.get("year") === innerDate.get("year")
+            }
+          >
+            {date.day}
+          </DayCell>
+        ))}
       </DayCellsContainer>
     </CalendarContainer>
   );
@@ -210,8 +205,7 @@ const WeekHeaderCell = styled.span`
   width: 36px;
   height: 36px;
   font-family: ${(props) => props.theme.dateInput.pickerFontFamily};
-  font-size: 14px;
-  line-height: 19px;
+  font-size: 0.875rem;
   color: ${(props) => props.theme.dateInput.pickerWeekFontColor};
 `;
 
@@ -238,7 +232,6 @@ const DayCell = styled.button<DayCellPropsType>`
   padding: 0;
   font-size: 0.875rem;
   font-family: ${(props) => props.theme.dateInput.pickerFontFamily};
-  font-weight: 400;
   border: none;
   border-radius: 50%;
   cursor: pointer;
@@ -272,10 +265,4 @@ const DayCell = styled.button<DayCellPropsType>`
       : props.theme.dateInput.pickerDayFontColor};
 `;
 
-const EmptyDayCell = styled.div`
-  display: inline-block;
-  width: 40px;
-  height: 36px;
-`;
-
 export default React.memo(Calendar);

lib/src/date-input/DateInput.stories.tsx

@@ -1,10 +1,16 @@
 import React from "react";
 import { userEvent, within, fireEvent, screen } from "@storybook/testing-library";
 import DxcDateInput from "./DateInput";
+import DxcDatePicker from "./DatePicker";
+import YearPicker from "./YearPicker";
+import Calendar from "./Calendar";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import DarkContainer from "../../.storybook/components/DarkSection";
+import dayjs from "dayjs";
+import useTheme from "../useTheme";
+import { ThemeProvider } from "styled-components";
 
 export default {
   title: "Date input",
@@ -107,45 +113,107 @@ export const Chromatic = () => (
   </>
 );
 
-const DatePicker = () => (
-  <ExampleContainer expanded>
-    <Title title="Show date picker" theme="light" level={4} />
-    <DxcDateInput label="Date input" defaultValue="06-04-2027" />
-  </ExampleContainer>
-);
+const DatePickerButtonStates = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <>
+      <ExampleContainer expanded>
+        <Title title="Show date picker over another element with z-index 0" theme="light" level={4} />
+        <DxcDateInput label="From" defaultValue="01-12-1995" />
+        <DxcDateInput label="To" />
+      </ExampleContainer>
+      <ThemeProvider theme={colorsTheme}>
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Isolated calendar focused" theme="light" level={4} />
+          <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Isolated calendar hovered" theme="light" level={4} />
+          <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Isolated calendar actived" theme="light" level={4} />
+          <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
+        </ExampleContainer>
+      </ThemeProvider>
+    </>
+  );
+};
 
-export const ShowDatePicker = DatePicker.bind({});
+export const ShowDatePicker = DatePickerButtonStates.bind({});
 ShowDatePicker.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const dateBtn = canvas.getByRole("combobox");
+  const dateBtn = canvas.getAllByTitle("Open calendar")[0];
   await userEvent.click(dateBtn);
 };
 
-const YearPicker = () => (
-  <ExampleContainer expanded>
-    <Title title="Show year picker" theme="light" level={4} />
-    <DxcDateInput label="Date input" defaultValue="06-04-2027" />
-  </ExampleContainer>
-);
+const YearpickerButtonStates = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <>
+      <ExampleContainer expanded>
+        <Title title="Show year picker" theme="light" level={4} />
+        <DxcDateInput label="Date input" defaultValue="06-04-1905" />
+      </ExampleContainer>
+      <ThemeProvider theme={colorsTheme}>
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Isolated year picker focused" theme="light" level={4} />
+          <YearPicker
+            selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+            onYearSelect={() => {}}
+            today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Isolated year picker hovered" theme="light" level={4} />
+          <YearPicker
+            selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+            onYearSelect={() => {}}
+            today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Isolated year picker actived" theme="light" level={4} />
+          <YearPicker
+            selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+            onYearSelect={() => {}}
+            today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          />
+        </ExampleContainer>
+      </ThemeProvider>
+    </>
+  );
+};
 
-export const ShowYearPicker = YearPicker.bind({});
+export const ShowYearPicker = YearpickerButtonStates.bind({});
 ShowYearPicker.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole("combobox"));
-  await fireEvent.click(screen.getByText("April 2027"));
+  await fireEvent.click(screen.getByText("April 1905"));
 };
 
-const YearPickerFocus = () => (
-  <ExampleContainer expanded>
-    <Title title="Show year picker and focus" theme="light" level={4} />
-    <DxcDateInput label="Date input" defaultValue="06-04-2027" />
-  </ExampleContainer>
-);
-
-export const ShowYearPickerFocus = YearPickerFocus.bind({});
-ShowYearPickerFocus.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole("combobox"));
-  await fireEvent.click(screen.getByText("April 2027"));
-  await userEvent.tab();
+export const DatePickerWithToday = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <ThemeProvider theme={colorsTheme}>
+      <ExampleContainer>
+        <Title title="Isolated calendar with today" theme="light" level={4} />
+        <Calendar
+          selectedDate={dayjs("06-04-1904", "DD-MM-YYYY")}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          onInnerDateChange={() => {}}
+          onDaySelect={() => {}}
+          innerDate={dayjs("06-04-1904", "DD-MM-YYYY")}
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Isolated year picker with today" theme="light" level={4} />
+        <YearPicker
+          selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+          onYearSelect={() => {}}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+        />
+      </ExampleContainer>
+    </ThemeProvider>
+  );
 };