feat: add close icon in date picker and date range picker calendar

affects: @medly-components/core, @medly-components/forms
medly · Oct 30, 2024 · cf18bf5 · cf18bf5
1 parent 3d14681
commit cf18bf5
Show file tree

Hide file tree

Showing 14 changed files with 2,059 additions and 1,499 deletions.
diff --git a/packages/core/src/components/Calendar/Calendar.styled.tsx b/packages/core/src/components/Calendar/Calendar.styled.tsx
@@ -33,6 +33,8 @@ export const MonthNavigation = styled.button.attrs({ type: 'button' })<{ disable
     }
 `;
 export const Header = styled.div`
+    padding: 0 0.8rem;
+    box-sizing: border-box;
     width: 100%;
     display: flex;
     align-items: center;

diff --git a/packages/core/src/components/Calendar/Calendar.test.tsx b/packages/core/src/components/Calendar/Calendar.test.tsx
@@ -203,4 +203,20 @@ describe('Calendar Component', () => {
         expect(month).toEqual('Dec');
         expect(year).toEqual('2021');
     });
+
+    it('should call onClose on click on close icon', () => {
+        const onClose = jest.fn();
+        render(
+            <Calendar
+                id="test-calendar"
+                date={new Date(2020, 11, 15)}
+                onChange={jest.fn()}
+                onClose={onClose}
+                minSelectableDate={new Date(2020, 11, 10)}
+                maxSelectableDate={new Date(2021, 11, 20)}
+            />
+        );
+        fireEvent.click(screen.getByTitle('test-calendar-close-icon'));
+        expect(onClose).toHaveBeenCalled();
+    });
 });
diff --git a/packages/core/src/components/Calendar/Calendar.tsx b/packages/core/src/components/Calendar/Calendar.tsx
@@ -1,4 +1,4 @@
-import { KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components/icons';
+import { CloseIcon, KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components/icons';
 import { WithStyle } from '@medly-components/utils';
 import { endOfDay } from 'date-fns';
 import type { FC } from 'react';
@@ -12,7 +12,7 @@ import { getCalendarDates, getMonthAndYearFromDate, getNextMonthAndYear, getPrev
 import { CalendarProps } from './types';
 
 const Component: FC<CalendarProps> = memo(
-    ({ date, onChange, minSelectableDate, maxSelectableDate, isErrorPresent, defaultMonth = 0, defaultYear, ...restProps }) => {
+    ({ date, onChange, onClose, minSelectableDate, maxSelectableDate, isErrorPresent, defaultMonth = 0, defaultYear, ...restProps }) => {
         const today = new Date(),
             ref = useRef<HTMLDivElement>(null),
             defaultDate = defaultYear ? new Date(defaultYear, defaultMonth, 1) : null,
@@ -78,6 +78,13 @@ const Component: FC<CalendarProps> = memo(
                     >
                         <KeyboardArrowRightIcon title={`${restProps.id}-navigation-forward-icon`} />
                     </Styled.MonthNavigation>
+                    <CloseIcon
+                        title={`${restProps.id}-close-icon`}
+                        onClick={() => {
+                            onClose?.();
+                            setCalenderVisibility(false);
+                        }}
+                    />
                 </Styled.Header>
                 <Styled.CalendarGrid>
                     <WeekDays />