Date year focus & two digit year format fix

lib/.storybook/preview.js

@@ -1,6 +1,10 @@
 import { HalstackProvider } from "../src/HalstackContext";
 import styled from "styled-components";
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { addDecorator } from "@storybook/react";
+import { mockDateDecorator } from "storybook-mock-date-decorator";
+
+addDecorator(mockDateDecorator);
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

lib/package.json

@@ -71,6 +71,7 @@
     "react-dom": "^18.x",
     "react-test-renderer": "^16.8.6",
     "storybook-addon-pseudo-states": "^1.0.0",
+    "storybook-mock-date-decorator": "^1.0.0",
     "styled-components": "^5.0.1",
     "typescript": "^4.5.4"
   },

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,23 @@ 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 [today] = useState(dayjs());
+  const [dateToFocus, setDateToFocus] = useState(getDateToFocus(selectedDate, innerDate, today));
   const [toFocus, setToFocus] = useState(false);
-  const today = dayjs();
   const dayCells = useMemo(() => getDays(innerDate), [innerDate]);
   const translatedLabels = useTranslatedLabels();
   const weekDays = translatedLabels.calendar.daysShort;
@@ -60,17 +64,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));
     }
   };
 
@@ -91,7 +85,7 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
 
   useEffect(() => {
     if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
-      updateDateToFocus();
+      setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
     }
   }, [innerDate, dateToFocus, selectedDate]);
 
@@ -210,8 +204,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 +231,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;