Merge pull request #818 from fahad-aot/feature/fwf-5213-date-range-picker

feature/fwf-5213:Added daterangepicker

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/ButtonDropdown.tsx

@@ -159,12 +159,12 @@ const { extraActionClass, backgroundColor } = getExtraActionStyles(variant);
 
         <Dropdown.Menu className={(dropdownType === "DROPDOWN_ONLY") && 'dropdown-only'}>
         {onSearch && (<CustomSearch
-          handleClearSearch={handleClearSearch}
+          // handleClearSearch={handleClearSearch}
           search={search}
           setSearch={setSearch}
           handleSearch={handleSearch}
           placeholder={t("Search")}
-          title={t("Search")}
+          // title={t("Search")}
           dataTestId="search-filter"
         />)}
           {dropdownItems.map((item) => (

forms-flow-components/src/components/CustomComponents/DateFilter.tsx

@@ -1,14 +1,14 @@
 import React, { useState, useRef, useEffect, FC, KeyboardEvent } from "react";
 import { useTranslation } from "react-i18next";
 import {
-  AngleLeftIcon,
-  AngleRightIcon,
-  CloseIcon,
   RightFarIcon,
   LeftFarIcon,
   DownArrowIcon,
   UpArrowIcon,
+  CalenderLeftIcon,
+  CalenderRightIcon,
 } from "../SvgIcons";
+import { V8CustomButton } from "../../formsflow-components";
 
 type DateValue = Date | string | null;
 interface DateRange {
@@ -434,6 +434,26 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
     );
   };
 
+  // Select today's date 
+  const handleTodayClick = (): void => {
+    const today = new Date();
+    const normalizedToday = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate()
+    );
+    const filterRange = createFilterDateRange(normalizedToday, normalizedToday);
+    setDateRange({
+      startDate: filterRange.startDate,
+      endDate: filterRange.endDate,
+    });
+    setCurrentMonth(normalizedToday);
+    onChange({
+      startDate: filterRange.startDate,
+      endDate: filterRange.endDate,
+    });
+  };
+
   // Handle keyboard navigation
   const handleNavKeyDown = (
     event: KeyboardEvent<HTMLButtonElement>,
@@ -543,49 +563,40 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
       ref={calendarRef}
       data-testid="date-range-picker"
     >
-      <button
-        className={`date-range-display ${isOpen ? "open" : ""} button-as-div`}
+      <div className="drp-input-container">
+        <input
+        onClick={toggleCalendar}
+          type="text"
+          className="drp-date-input"
+          value={formatDateValue(dateRange.startDate)}
+          readOnly
+          aria-label="Start date"
+          placeholder="Start date"
+        />
+        <span className="drp-separator">to</span>
+        <input
         onClick={toggleCalendar}
-        onKeyDown={(e) => handleNavKeyDown(e, toggleCalendar)}
-        data-testid="date-range-display"
-        aria-label={t("Date range selector")}
-        aria-expanded={isOpen}
-        type="button"
-      >
+          type="text"
+          className="drp-date-input"
+          value={formatDateValue(dateRange.endDate)}
+          readOnly
+          aria-label="End date"
+          placeholder="End date"
+        />
+
         <span
-          className={`date-range-text ${isOpen ? "open" : ""}`}
-          data-testid="date-range-text"
+          className={`date-range-toggle-icon cursor-pointer ${isOpen ? "open" : ""}`}
+          data-testid="date-range-toggle-icon"
+          aria-hidden="true"
+          onClick={toggleCalendar}
         >
-          {formatDateRange()}
-        </span>
-        <div className="date-range-controls">
-          {isOpen && (
-            <button
-              className="date-range-close button-as-div"
-              data-testid="date-range-close-btn"
-              aria-label={t("Close calendar")}
-              type="button"
-              onClick={(e) => handleCloseCalendar(e)}
-              onKeyDown={(e) =>
-                handleNavKeyDown(e, () => handleCloseCalendar())
-              }
-            >
-              <CloseIcon />
-            </button>
+          {isOpen ? (
+            <UpArrowIcon color="#4A4A4A" />
+          ) : (
+            <DownArrowIcon color="#4A4A4A" />
           )}
-          <span
-            className={`date-range-toggle-icon ${isOpen ? "open" : ""}`}
-            data-testid="date-range-toggle-icon"
-            aria-hidden="true"
-          >
-            {isOpen ? (
-              <UpArrowIcon color="white" />
-            ) : (
-              <DownArrowIcon color="white" />
-            )}
-          </span>
-        </div>
-      </button>
+        </span>
+      </div>
 
       {isOpen && (
         <div
@@ -603,7 +614,8 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
                 aria-label={t("Previous year")}
                 type="button"
               >
-                <LeftFarIcon />
+                <CalenderLeftIcon color="#212529" />
+                <CalenderLeftIcon color="#212529" />
               </button>
               <button
                 className="calendar-prev-month-btn button-as-div"
@@ -613,7 +625,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
                 type="button"
                 onClick={goToPrevMonth}
               >
-                <AngleLeftIcon />
+                <CalenderLeftIcon color="#212529" />
               </button>
             </div>
             <span
@@ -631,7 +643,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
                 type="button"
                 onClick={goToNextMonth}
               >
-                <AngleRightIcon />
+                <CalenderRightIcon color="#212529" />
               </button>
               <button
                 className="calendar-next-year-btn button-as-div"
@@ -641,23 +653,27 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
                 aria-label={t("Next year")}
                 type="button"
               >
-                <RightFarIcon />
+                <CalenderRightIcon color="#212529" />
+                <CalenderRightIcon color="#212529" />
+
+
               </button>
             </div>
           </div>
 
+          <div className="calender-week-days-container">
           <div
             className="calendar-days-header"
             data-testid="calendar-days-header"
           >
             {[
-              t("MO"),
-              t("TU"),
-              t("WE"),
-              t("TH"),
-              t("FR"),
-              t("SA"),
-              t("SU"),
+              t("Mon"),
+              t("Tue"),
+              t("Wed"),
+              t("Thu"),
+              t("Fri"),
+              t("Sat"),
+              t("Sun"),
             ].map((day) => (
               <div
                 key={day}
@@ -707,6 +723,16 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
               );
             })}
           </div>
+          <div className="calendar-today-container">
+            <V8CustomButton 
+            label="Today"
+            onClick={handleTodayClick}
+            ariaLabel="Today"
+            dataTestId="calendar-today-btn"
+            variant="secondary"
+            />
+          </div>
+          </div>
         </div>
       )}
     </div>

forms-flow-components/src/components/CustomComponents/Search.tsx

@@ -7,6 +7,7 @@ interface CustomSearchProps {
   handleSearch: () => void;
   placeholder?: string;
   dataTestId: string;
+  disabled?: boolean;
 }
 
 export const CustomSearch: FC<CustomSearchProps> = ({
@@ -15,6 +16,7 @@ export const CustomSearch: FC<CustomSearchProps> = ({
   handleSearch,
   placeholder = "Search",
   dataTestId,
+  disabled = false,
 }) => {
   const { t } = useTranslation();
   return (
@@ -28,6 +30,7 @@ export const CustomSearch: FC<CustomSearchProps> = ({
         aria-label={placeholder}
         value={search}
         role="searchbox"
+        disabled={disabled}
       />
     </div>
   );

forms-flow-components/src/components/SvgIcons/index.tsx

@@ -397,9 +397,11 @@ export const AngleRightIcon = ({ color = baseColor, ...props }) => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 17 17"
     onClick={props.onClick}
-    className={props.className || "svgIcon-primary"}
+    className={props.className}
+    fill="none"
+    {...props}
   >
-    <path d="M5.24976 15.0003L11.7503 8.49971L5.25034 1.9997"/>
+    <path stroke={color} d="M5.24976 15.0003L11.7503 8.49971L5.25034 1.9997"/>
   </svg>
 );
 
@@ -408,9 +410,11 @@ export const AngleLeftIcon = ({ color = baseColor, ...props }) => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 17 17"
     onClick={props.onClick}
-    className={props.className || "svgIcon-primary"}
+    className={props.className }
+    fill="none"
+    {...props}
   >
-    <path d="M11.7503 1.99971L5.24972 8.50029L11.7497 15.0003"/>
+    <path  stroke={color} d="M11.7503 1.99971L5.24972 8.50029L11.7497 15.0003"/>
   </svg>
 );
 
@@ -761,6 +765,7 @@ export const UpArrowIcon = ({ color = baseColor, ...props }) => (
     height="10"
     viewBox="0 0 16 10"
     fill="none"
+    {...props}
   >
     <path
       d="M14.5003 8.25034L8.00028 1.74976L1.49969 8.24976"
@@ -856,3 +861,33 @@ export const NavbarSubmitIcon = ({
       />
     </svg>
 );
+
+export const CalenderLeftIcon = ({ color = baseColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="7"
+    height="12"
+    viewBox="0 0 7 12"
+    fill="none"
+  >
+    <path
+      d="M0.294026 5.29402C-0.0964468 5.6845 -0.0964468 6.31862 0.294026 6.7091L5.29207 11.7071C5.68255 12.0976 6.31667 12.0976 6.70715 11.7071C7.09762 11.3167 7.09762 10.6825 6.70715 10.2921L2.41507 6L6.70402 1.70793C7.09449 1.31745 7.09449 0.683327 6.70402 0.292854C6.31355 -0.0976181 5.67942 -0.0976182 5.28895 0.292854L0.290902 5.2909L0.294026 5.29402Z"
+      fill="#4A4A4A"
+    />
+  </svg>
+);
+
+export const CalenderRightIcon = ({ color = baseColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="7"
+    height="12"
+    viewBox="0 0 7 12"
+    fill="none"
+  >
+    <path
+      d="M6.70597 6.70597C7.09645 6.3155 7.09645 5.68137 6.70597 5.2909L1.70793 0.292854C1.31745 -0.0976182 0.683326 -0.0976181 0.292854 0.292854C-0.0976186 0.683327 -0.0976186 1.31745 0.292854 1.70793L4.58493 6L0.295978 10.2921C-0.0944947 10.6825 -0.0944946 11.3167 0.295978 11.7071C0.68645 12.0976 1.32058 12.0976 1.71105 11.7071L6.7091 6.7091L6.70597 6.70597Z"
+      fill="#4A4A4A"
+    />
+  </svg>
+);