Merge branch 'master' into feature/oh-more-icons

StenaIT · Aug 28, 2024 · 908910f · 908910f
2 parents 391293d + 130b446
commit 908910f
Show file tree

Hide file tree

Showing 28 changed files with 203 additions and 78 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# v21.0.1 (Tue Aug 27 2024)
+
+#### 🐛 Bug Fix
+
+- `@stenajs-webui/calendar`, `@stenajs-webui/panels`
+  - Add test ids to travel calendar days [#771](https://github.com/StenaIT/stenajs-webui/pull/771) ([@Yoorkevich](https://github.com/Yoorkevich))
+
+#### Authors: 1
+
+- [@Yoorkevich](https://github.com/Yoorkevich)
+
+---
+
 # v21.0.0 (Fri Aug 23 2024)
 
 #### 💥 Breaking Change

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "21.0.0",
+  "version": "21.0.1",
   "command": {
     "publish": {
       "verifyAccess": false

diff --git a/packages/calendar/package.json b/packages/calendar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/calendar",
-  "version": "21.0.0",
+  "version": "21.0.1",
   "type": "module",
   "description": "",
   "author": "mattias800",
@@ -33,12 +33,12 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/core": "21.0.0",
-    "@stenajs-webui/elements": "21.0.0",
-    "@stenajs-webui/forms": "21.0.0",
-    "@stenajs-webui/input-mask": "21.0.0",
-    "@stenajs-webui/theme": "21.0.0",
-    "@stenajs-webui/tooltip": "21.0.0",
+    "@stenajs-webui/core": "21.0.1",
+    "@stenajs-webui/elements": "21.0.1",
+    "@stenajs-webui/forms": "21.0.1",
+    "@stenajs-webui/input-mask": "21.0.1",
+    "@stenajs-webui/theme": "21.0.1",
+    "@stenajs-webui/tooltip": "21.0.1",
     "classnames": "^2.3.1",
     "date-fns": "3.6.0",
     "lodash-es": "^4.17.21"

diff --git a/...alendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx b/...alendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx
@@ -5,6 +5,7 @@ import { TravelDateCalendar } from "./TravelDateCalendar";
 import { Column, Heading, Row, Spacing } from "@stenajs-webui/core";
 import { Banner, Label } from "@stenajs-webui/elements";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
+import { isToday } from "date-fns";
 
 export default {
   title: "calendar/Calendar/TravelDateCalendar",
@@ -47,6 +48,27 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<string>("");
+
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+  return (
+    <div style={{ display: "inline-block" }}>
+      <TravelDateCalendar
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Locales = () => {
   const locales = [
     "sv",

diff --git a/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx b/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx
@@ -22,6 +22,7 @@ export interface TravelDateCalendarProps
   firstMonthInMonthPicker?: Date;
   numMonthsInMonthPicker?: number;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
@@ -36,6 +37,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
   headingLevel,
   numMonthsInMonthPicker = 12,
   firstMonthInMonthPicker = new Date(),
+  dateTestId,
   size = "medium",
 }) => {
   const inputProps = useTravelDateInput(
@@ -85,6 +87,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
           selectedEndDate={selectedDate}
           isValidDateRange={Boolean(selectedDate)}
           multiSelectable={false}
+          dateTestId={dateTestId}
         />
       )}
 

diff --git a/.../components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx b/.../components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx
@@ -6,6 +6,7 @@ import { Column, Heading, Row, Spacing } from "@stenajs-webui/core";
 import { Banner, Label } from "@stenajs-webui/elements";
 import { TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
+import { isToday } from "date-fns";
 
 export default {
   title: "calendar/Calendar/TravelDateRangeCalendar",
@@ -52,6 +53,29 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
+    undefined
+  );
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+
+  return (
+    <div style={{ display: "inline-block" }}>
+      <TravelDateRangeCalendar
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Locales = () => {
   const locales = [
     "sv",

diff --git a/...ndar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx b/...ndar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx
@@ -24,6 +24,7 @@ export interface TravelDateRangeCalendarProps
   firstMonthInMonthPicker?: Date;
   numMonthsInMonthPicker?: number;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateRangeCalendar: React.FC<
@@ -42,6 +43,7 @@ export const TravelDateRangeCalendar: React.FC<
   numMonthsInMonthPicker = 12,
   firstMonthInMonthPicker = new Date(),
   size = "medium",
+  dateTestId,
 }) => {
   const inputProps = useTravelDateRangeInput(
     value,
@@ -83,7 +85,12 @@ export const TravelDateRangeCalendar: React.FC<
       />
 
       {visiblePanel === "calendar" && (
-        <TravelCalendar {...inputProps} size={size} multiSelectable={true} />
+        <TravelCalendar
+          {...inputProps}
+          size={size}
+          multiSelectable={true}
+          dateTestId={dateTestId}
+        />
       )}
 
       {visiblePanel === "month-picker" && (

diff --git a/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.stories.tsx b/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from "@stenajs-webui/elements";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
 import { formatLocalizedDate } from "../../../features/localize-date-format/LocalizedDateFormatter";
-import { addDays } from "date-fns";
+import { addDays, isToday } from "date-fns";
 
 export default {
   title: "calendar/Input/TravelDateInput",
@@ -54,6 +54,28 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<string>("");
+
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+
+  return (
+    <div style={{ display: "inline-block", padding: "150px 80px" }}>
+      <TravelDateInput
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Sizes = () => {
   const [value, setValue] = useState<string>("");
 

diff --git a/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx b/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx
@@ -46,6 +46,7 @@ export interface TravelDateInputProps
   onHideCalendar?: () => void;
   renderBelowCalendar?: (args: RenderBelowSingleDateCalendarArgs) => ReactNode;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateInput: React.FC<TravelDateInputProps> = ({
@@ -65,6 +66,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
   onHideCalendar,
   renderBelowCalendar,
   size = "medium",
+  dateTestId,
 }) => {
   const [calendarOpen, setCalendarOpen] = useState(false);
   const [calendarInDom, setCalendarInDom] = useState(false);
@@ -204,6 +206,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
                   selectedStartDate={selectedDate}
                   selectedEndDate={selectedDate}
                   multiSelectable={false}
+                  dateTestId={dateTestId}
                 />
               )}
 

diff --git a/...endar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx b/...endar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx
@@ -12,7 +12,7 @@ import {
 import { TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
 import { formatLocalizedDate } from "../../../features/localize-date-format/LocalizedDateFormatter";
-import { addWeeks } from "date-fns";
+import { addWeeks, isToday } from "date-fns";
 
 export default {
   title: "calendar/Input/TravelDateRangeInput",
@@ -59,6 +59,30 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
+    undefined
+  );
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+
+  return (
+    <div style={{ display: "inline-block", padding: "150px 80px" }}>
+      <TravelDateRangeInput
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        heading={"Select dates"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Sizes = () => {
   const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
     undefined

diff --git a/...ages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx b/...ages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx
@@ -48,6 +48,7 @@ export interface TravelDateRangeInputProps
   onHideCalendar?: () => void;
   renderBelowCalendar?: (args: RenderBelowCalendarArgs) => ReactNode;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
@@ -68,6 +69,7 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
   onHideCalendar,
   renderBelowCalendar,
   size = "medium",
+  dateTestId,
 }) => {
   const [calendarOpen, setCalendarOpen] = useState(false);
   const [calendarInDom, setCalendarInDom] = useState(false);
@@ -204,6 +206,7 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
                   {...inputProps}
                   size={size}
                   multiSelectable={true}
+                  dateTestId={dateTestId}
                 />
               )}
 

diff --git a/packages/calendar/src/features/travel-calendar/components/TravelCalendar.tsx b/packages/calendar/src/features/travel-calendar/components/TravelCalendar.tsx
@@ -24,6 +24,7 @@ export interface TravelCalendarProps {
   hoverDate: Date | undefined;
   today: Date;
   isDateDisabled: (date: Date) => boolean;
+  dateTestId?: (date: Date) => string | undefined;
   calendarId: string;
   todayIsInVisibleMonth: boolean;
   size?: TravelCalendarSizeVariant;
@@ -46,6 +47,7 @@ export const TravelCalendar: React.FC<TravelCalendarProps> = ({
   todayIsInVisibleMonth,
   size = "medium",
   multiSelectable,
+  dateTestId,
 }) => {
   return (
     <table
@@ -84,6 +86,7 @@ export const TravelCalendar: React.FC<TravelCalendarProps> = ({
                   todayIsInVisibleMonth={todayIsInVisibleMonth}
                   calendarId={calendarId}
                   isDateDisabled={isDateDisabled}
+                  dateTestId={dateTestId}
                 />
               ))}
             </tr>

diff --git a/packages/calendar/src/features/travel-calendar/components/TravelDateCell.tsx b/packages/calendar/src/features/travel-calendar/components/TravelDateCell.tsx
@@ -27,6 +27,7 @@ export interface TravelDateCellProps {
   todayIsInVisibleMonth: boolean;
   calendarId: string;
   isDateDisabled: (date: Date) => boolean;
+  dateTestId?: (date: Date) => string | undefined;
   size: TravelCalendarSizeVariant;
 }
 
@@ -46,6 +47,7 @@ export const TravelDateCell: React.FC<TravelDateCellProps> = ({
   calendarId,
   isDateDisabled,
   size,
+  dateTestId,
 }) => {
   const onKeyDown = useCallback<KeyboardEventHandler<HTMLTableDataCellElement>>(
     async (e) => {
@@ -125,6 +127,7 @@ export const TravelDateCell: React.FC<TravelDateCellProps> = ({
       {...(disabled
         ? undefined
         : { "aria-selected": isSelectionStart || isSelectionEnd })}
+      data-testid={dateTestId?.(day.date)}
     >
       <div className={styles.outline} />
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/core",
-  "version": "21.0.0",
+  "version": "21.0.1",
   "type": "module",
   "description": "",
   "author": "mattias800",
@@ -64,7 +64,7 @@
   ],
   "gitHead": "8bc14a340ae5996f9755c4d435a5d46ffe392961",
   "dependencies": {
-    "@stenajs-webui/theme": "21.0.0",
+    "@stenajs-webui/theme": "21.0.1",
     "classnames": "^2.3.1",
     "lodash-es": "^4.17.21"
   }

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/elements",
-  "version": "21.0.0",
+  "version": "21.0.1",
   "type": "module",
   "description": "",
   "author": "mattias800",
@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@react-aria/focus": "^3.15.0",
-    "@stenajs-webui/core": "21.0.0",
-    "@stenajs-webui/theme": "21.0.0",
+    "@stenajs-webui/core": "21.0.1",
+    "@stenajs-webui/theme": "21.0.1",
     "classnames": "^2.3.1"
   },
   "peerDependencies": {