(fix): ui-toolkit - Calendar functionality and styling

packages/ui-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/ui-toolkit",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "A lightning nature UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/ui-toolkit/src/components/molecules/Calendar/Calendar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import MonthCalendar from './MonthCalendar';
 import DateCalendar from './DateCalendar';
+import { CalendarProps } from './calendar.types';
 
 export const CALENDAR_TYPE = {
   MONTH: 'MONTH',
@@ -22,34 +23,22 @@ const Calendar = (props:Props) => {
 
   const emptyFunction = () => void 0;
 
-  if (type === CALENDAR_TYPE.MONTH) {
-
-    return (
-      <MonthCalendar currentDate={currentDate || new Date()}
-        onDateChange={onDateChange || emptyFunction}
-      />
-    );
-
-  } else if (type === CALENDAR_TYPE.DATE) {
-    return (
-      <DateCalendar
-        minDate={minDate}
-        maxDate={maxDate}
-        onDateChange={onDateChange || emptyFunction}
-        currentDate={currentDate || new Date()}
-        highlightCurrentDate={highlightCurrentDate}
-      />
-    );
-
-  }
-
-  return <div />;
+  const CalendarComponent = type === CALENDAR_TYPE.MONTH ? MonthCalendar : DateCalendar;
+
+  return (
+    <CalendarComponent
+      currentDate={currentDate || new Date()}
+      minDate={minDate}
+      maxDate={maxDate}
+      onDateChange={onDateChange || emptyFunction}
+      highlightCurrentDate={highlightCurrentDate}
+    />
+  );
 };
 
 
 export type Props = {
-  type: ValueOf<typeof CALENDAR_TYPE>;
-} & Partial<React.ComponentProps<typeof MonthCalendar>>
-& Partial<React.ComponentProps<typeof DateCalendar>>;
+  type: keyof typeof CALENDAR_TYPE;
+} & CalendarProps;
 
 export default Calendar;

packages/ui-toolkit/src/components/molecules/Calendar/DateCalendar/dateCalendar.css

@@ -5,12 +5,7 @@
   cursor: auto;
 }
 
-.cc12YearBox {
-  justify-content: space-between;
-}
-
 .cc12WeekNameBox {
-  justify-content: space-between;
   margin-top: 14px;
   text-align: center;
 }
@@ -32,14 +27,15 @@
 
 .cc12DateNotSelected {}
 
-.cc12DateSelected {
-  background: var(--green500);
-}
-
+/* NOTE: Here below order matters as active, hover state color override */
 .cc12DateNotSelected:hover {
   background: var(--overlay30);
 }
 
+.cc12DateCurrent {
+  background: var(--green300);
+}
+
 .cc12DateRow {
   justify-content: space-between;
   margin-top: 8px;
@@ -52,4 +48,5 @@
 
 .cc12DisableDate {
   opacity: 0.2;
+  cursor: default;
 }