@innovaccer/design-system 2.5.0-4 → 2.6.0

package/core/components/organisms/calendar/Calendar.tsx

@@ -16,6 +16,31 @@ import {
   convertToDate,
 } from './utility';
 
+type OnHover = React.MouseEvent<HTMLSpanElement> | React.MouseEvent<HTMLDivElement>;
+interface hoveredDateProps {
+  value: number;
+  isToday: boolean;
+  isDisabled: boolean;
+  todayDate?: Date;
+  fullDate: Date;
+  date: number;
+  month: string;
+  year: number;
+  dayName: string;
+}
+interface hoveredMonthProps {
+  value: string;
+  month: string;
+  year?: number;
+  isCurrentMonth: boolean;
+  isDisabled: boolean;
+}
+interface hoveredYearProps {
+  value: number;
+  year: number;
+  isCurrentYear: boolean;
+  isDisabled: boolean;
+}
 export interface SharedProps extends BaseProps {
   /**
    * Size of `Calendar`
@@ -73,6 +98,18 @@ export type CalendarProps = {
    * Callback function called when range is changed
    */
   onRangeChange?: (startDate: Date | undefined, endDate: Date | undefined) => void;
+  /**
+   * Callback function called when a date is hovered
+   */
+  onDateHover?: (dateData: hoveredDateProps, evnt: OnHover) => void;
+  /**
+   * Callback function called when a month is hovered
+   */
+  onMonthHover?: (monthData: hoveredMonthProps, evnt: OnHover) => void;
+  /**
+   * Callback function called when a year is hovered
+   */
+  onYearHover?: (yearData: hoveredYearProps, evnt: OnHover) => void;
   /**
    * Selected date
    */
@@ -351,6 +388,22 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     });
   };
 
+  yearMouseOverHandler = (
+    year: number,
+    isCurrentYear: boolean,
+    isDisabled: boolean,
+    ev: React.MouseEvent<HTMLDivElement>
+  ) => {
+    const { onYearHover } = this.props;
+    const yearData = {
+      value: year,
+      year: year,
+      isCurrentYear: isCurrentYear,
+      isDisabled: isDisabled,
+    };
+    if (onYearHover) onYearHover(yearData, ev);
+  };
+
   selectMonth = (month: number) => () => {
     this.updateState(this.state.yearNav, month);
     this.setState({
@@ -358,7 +411,38 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     });
   };
 
+  monthMouseOverHandler = (
+    month: number,
+    isCurrentMonth: boolean,
+    isDisabled: boolean,
+    ev: React.MouseEvent<HTMLDivElement>
+  ) => {
+    const { months } = config;
+    const { onMonthHover } = this.props;
+    const monthData = {
+      value: months[month],
+      month: months[month],
+      year: this.state.year,
+      isCurrentMonth: isCurrentMonth,
+      isDisabled: isDisabled,
+    };
+    if (onMonthHover) onMonthHover(monthData, ev);
+  };
+
   selectDate = (index: number, date: number, prevMonthDayRange: number, dayRange: number) => {
+    const d = this.calculateDate(index, date, prevMonthDayRange, dayRange, false);
+    this.setState({
+      currDate: d,
+    });
+  };
+
+  calculateDate = (
+    index: number,
+    date: number,
+    prevMonthDayRange: number,
+    dayRange: number,
+    isDateHovered: boolean
+  ) => {
     let neighbouringMonthIndex;
     let neighbouringMonthDate;
     let type = '';
@@ -375,12 +459,12 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       neighbouringMonthDate = date;
     }
     const { year, month } = this.getNavDateInfo(neighbouringMonthIndex);
-    this.updateState(year, month, neighbouringMonthDate);
-    this.onNavIconClickHandler(type)();
+    if (isDateHovered === false) {
+      this.updateState(year, month, neighbouringMonthDate);
+      this.onNavIconClickHandler(type)();
+    }
     const d = this.getDateValue(year, month, neighbouringMonthDate);
-    this.setState({
-      currDate: d,
-    });
+    return d;
   };
 
   onNavIconClickHandler = (type: string) => () => {
@@ -525,6 +609,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     return (
       <div className={headerContentClass}>
         {view !== 'date' && (
+          // TODO(a11y)
+          //  eslint-disable-next-line
           <div
             className="d-flex justify-content-center align-items-center"
             onClick={this.onNavHeadingClickHandler(view)}
@@ -532,14 +618,19 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
             {renderHeading(headerContent)}
           </div>
         )}
+
         {view === 'date' && (
           <>
+            {/* TODO(a11y) */}
+            {/* eslint-disable-next-line */}
             <div
               onClick={this.onNavHeadingClickHandler(view)}
               className="d-flex justify-content-center align-items-center"
             >
               {renderHeading(months[monthNavVal])}
             </div>
+            {/* TODO(a11y) */}
+            {/* eslint-disable-next-line */}
             <div
               className="ml-4 d-flex justify-content-center align-items-center"
               onClick={this.onNavHeadingClickHandler('month')}
@@ -584,11 +675,14 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
           });
 
           return (
+            //  TODO(a11y)
+            //  eslint-disable-next-line
             <div
               key={`${row}-${col}`}
               data-test="DesignSystem-Calendar--yearValue"
               className={valueClass}
               onClick={this.selectYear(year)}
+              onMouseOver={this.yearMouseOverHandler.bind(this, year, isCurrentYear(), disabled)}
             >
               <Text
                 size={size === 'small' ? 'small' : 'regular'}
@@ -632,11 +726,14 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
           });
 
           return (
+            //TODO(a11y)
+            //eslint-disable-next-line
             <div
               key={`${row}-${col}`}
               data-test="DesignSystem-Calendar--monthValue"
               className={valueClass}
               onClick={this.selectMonth(month)}
+              onMouseOver={this.monthMouseOverHandler.bind(this, month, isCurrentMonth(), disabled)}
             >
               <Text
                 size={size === 'small' ? 'small' : 'regular'}
@@ -703,7 +800,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
   renderDateValues = (index: number) => {
     const { daysInRow, monthBlock } = config;
 
-    const { size, rangePicker, firstDayOfWeek, disabledBefore, disabledAfter, monthsInView } = this.props;
+    const { size, rangePicker, firstDayOfWeek, disabledBefore, disabledAfter, monthsInView, onDateHover } = this.props;
 
     const {
       startDate,
@@ -727,10 +824,10 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const dayDiff = getFirstDayOfMonth(yearNavVal, monthNavVal) - getIndexOfDay(firstDayOfWeek);
     const dummyDays = Math.abs(dayDiff);
     let noOfRows = Math.ceil((dayRange + dummyDays) / daysInRow);
+    // TODO: @veekays
+    // if(noOfRows !== 6 && monthsInView <= 1) ?
     if (noOfRows === 6) {
-      noOfRows = noOfRows;
     } else if (monthsInView > 1) {
-      noOfRows = noOfRows;
     } else {
       noOfRows = noOfRows + 1;
     }
@@ -761,6 +858,29 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       }
     };
 
+    const onMouseEnterHandler = (
+      date: number,
+      isToday: boolean,
+      isDisabled: boolean,
+      ev: React.MouseEvent<HTMLSpanElement>
+    ) => {
+      const d = this.calculateDate(index, date, prevMonthDayRange, dayRange, true) || new Date();
+      const { months, days } = config;
+      const dayName = days.large[d.getDay()];
+      const dateData = {
+        value: d.getDate(),
+        isToday: isToday,
+        isDisabled: isDisabled,
+        todayDate: this.state.currDate,
+        fullDate: d,
+        date: d.getDate(),
+        month: months[d.getMonth()],
+        year: d.getFullYear(),
+        dayName: dayName,
+      };
+      if (onDateHover) onDateHover(dateData, ev);
+    };
+
     return Array.from({ length: noOfRows }, (_y, row) => {
       return (
         <div key={row} className="Calendar-valueRow">
@@ -876,6 +996,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
                       className={valueClass}
                       onClick={onClickHandler(date)}
                       onMouseOver={onMouseOverHandler(date)}
+                      onMouseEnter={onMouseEnterHandler.bind(this, date, today(), disabled)}
                     >
                       {date}
                     </Text>
@@ -891,6 +1012,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
                       className={valueClass}
                       onClick={onClickHandler(date)}
                       onMouseOver={onMouseOverHandler(date)}
+                      onMouseEnter={onMouseEnterHandler.bind(this, date, today(), disabled)}
                     >
                       {date <= 0 ? prevMonthDayRange + date : date - dayRange}
                     </Text>

package/core/components/organisms/calendar/__tests__/Calendar.test.tsx

@@ -214,4 +214,31 @@ describe('Calendar compoennt', () => {
     fireEvent.click(month);
     expect(FunctionValue).toHaveBeenCalled();
   });
+
+  it('calls onMouseOver handler when date value is hovered', () => {
+    const { getAllByTestId } = render(
+      <Calendar date={new Date(2020, 2, 15)} rangePicker={false} onDateHover={FunctionValue} view="date" />
+    );
+    const date = getAllByTestId('DesignSystem-Calendar--dateValue')[0];
+    fireEvent.mouseOver(date);
+    expect(FunctionValue).toHaveBeenCalled();
+  });
+
+  it('calls onMouseOver handler when month value is hovered', () => {
+    const { getAllByTestId } = render(
+      <Calendar date={new Date(2020, 2, 15)} rangePicker={false} onMonthHover={FunctionValue} view="month" />
+    );
+    const month = getAllByTestId('DesignSystem-Calendar--monthValue')[0];
+    fireEvent.mouseOver(month);
+    expect(FunctionValue).toHaveBeenCalled();
+  });
+
+  it('calls onMouseOver handler when year value is hovered', () => {
+    const { getAllByTestId } = render(
+      <Calendar date={new Date(2020, 2, 15)} rangePicker={false} onYearHover={FunctionValue} view="year" />
+    );
+    const year = getAllByTestId('DesignSystem-Calendar--yearValue')[0];
+    fireEvent.mouseOver(year);
+    expect(FunctionValue).toHaveBeenCalled();
+  });
 });

package/core/components/organisms/choiceList/ChoiceList.tsx

@@ -187,7 +187,7 @@ export const ChoiceList = (props: ChoiceListProps) => {
     <>
       <fieldset className={ChoiceListClass} data-test="DesignSystem-ChoiceList-Wrapper">
         {title && title.trim() && <Label>{title.trim()}</Label>}
-        {!!allowMultiple ? (
+        {allowMultiple ? (
           <div className={`${alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass}`}>
             {renderCheckbox(choices, handleOnChange, disabled, size, alignment, selected)}
           </div>

package/core/components/organisms/datePicker/DatePicker.tsx

@@ -58,6 +58,14 @@ export type DatePickerProps = SharedProps & {
    * Close Popover on date selection
    */
   closeOnSelect: boolean;
+  /**
+   * Add or remove the select today's date chip from DatePicker Footer
+   */
+  showTodayDate?: boolean;
+  /**
+   * Element to be rendered inside Popover
+   */
+  children: React.ReactNode;
 };
 
 export interface DatePickerState {
@@ -182,6 +190,8 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
       onDateChange,
       closeOnSelect,
       size,
+      showTodayDate = true,
+      children = <></>,
       ...rest
     } = this.props;
 
@@ -205,23 +215,28 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
     };
     return (
       <div>
-        <Calendar
-          {...rest}
-          size={size}
-          date={currDate}
-          disabledBefore={dateDisabledBefore}
-          disabledAfter={dateDisabledAfter}
-          onDateChange={this.onDateChangeHandler}
-        />
-        <div className="d-flex justify-content-center pb-6" data-test="DesignSystem-Select--TodaysDate-wrapper">
-          <Chip
-            label={`Today, ${todayMonthAndDate}`}
-            name="chip"
-            type="action"
-            disabled={isTodayDisabled()}
-            onClick={() => this.onDateChangeHandler(new Date())}
+        <div className="d-flex">
+          {children}
+          <Calendar
+            {...rest}
+            size={size}
+            date={currDate}
+            disabledBefore={dateDisabledBefore}
+            disabledAfter={dateDisabledAfter}
+            onDateChange={this.onDateChangeHandler}
           />
         </div>
+        {showTodayDate && (
+          <div className="d-flex justify-content-center pb-6" data-test="DesignSystem-Select--TodaysDate-wrapper">
+            <Chip
+              label={`Today, ${todayMonthAndDate}`}
+              name="chip"
+              type="action"
+              disabled={isTodayDisabled()}
+              onClick={() => this.onDateChangeHandler(new Date())}
+            />
+          </div>
+        )}
       </div>
     );
   }

package/core/components/organisms/datePicker/__tests__/DatePicker.test.tsx

@@ -19,68 +19,158 @@ afterAll(() => {
 const view = ['year', 'month', 'date'];
 const booleanValue = [true, false];
 const FunctionValue = jest.fn();
+const newDate = new Date(2020, 2, 1);
 
-describe('DatePicker component', () => {
-  const mapper: Record<string, any> = {
-    view: valueHelper(view, { required: true, iterate: true }),
-  };
+const testFunc = (props: Record<string, any>): void => {
+  const attr = filterUndefined(props) as Props;
 
-  const testFunc = (props: Record<string, any>): void => {
-    const attr = filterUndefined(props) as Props;
-
-    it(testMessageHelper(attr), () => {
-      const { baseElement } = render(<DatePicker date={new Date(2020, 2, 1)} {...attr} />);
-      expect(baseElement).toMatchSnapshot();
-    });
-  };
-
-  testHelper(mapper, testFunc);
-});
-
-describe('DatePicker component', () => {
-  const mapper: Record<string, any> = {
-    withInput: valueHelper(booleanValue, { required: true, iterate: true }),
-  };
-
-  const testFunc = (props: Record<string, any>): void => {
-    const attr = filterUndefined(props) as Props;
-
-    it(testMessageHelper(attr), () => {
-      const { baseElement } = render(<DatePicker date={new Date(2020, 2, 1)} {...attr} />);
-      expect(baseElement).toMatchSnapshot();
-    });
-  };
+  it(testMessageHelper(attr), () => {
+    const { baseElement } = render(<DatePicker date={newDate} {...attr} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+};
+
+describe('DatePicker component snapshots', () => {
+  describe('renders snapshot for prop:view', () => {
+    const mapper: Record<string, any> = {
+      view: valueHelper(view, { required: true, iterate: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-  testHelper(mapper, testFunc);
-});
+  describe('renders snapshot for prop:withInput', () => {
+    const mapper: Record<string, any> = {
+      withInput: valueHelper(booleanValue, { required: true, iterate: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-describe('DatePicker component', () => {
-  const mapper: Record<string, any> = {
-    open: valueHelper(booleanValue, { required: true, iterate: true }),
-  };
+  describe('renders snapshot for prop:open', () => {
+    const mapper: Record<string, any> = {
+      open: valueHelper(booleanValue, { required: true, iterate: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-  const testFunc = (props: Record<string, any>): void => {
-    const attr = filterUndefined(props) as Props;
+  describe('renders snapshot for prop:disabledBefore, prop:disabledAfter', () => {
+    const mapper: Record<string, any> = {
+      disabledBefore: valueHelper('10/10/2020', { required: true }),
+      disabledAfter: valueHelper('10/10/2021', { required: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-    it(testMessageHelper(attr), () => {
-      const { baseElement } = render(<DatePicker date={new Date(2020, 2, 1)} withInput={true} {...attr} />);
-      expect(baseElement).toMatchSnapshot();
-    });
-  };
+  describe('renders snapshot for prop:disabledBefore', () => {
+    const mapper: Record<string, any> = {
+      disabledBefore: valueHelper('10/10/2020', { required: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-  testHelper(mapper, testFunc);
+  describe('renders snapshot for prop:disabledAfter', () => {
+    const mapper: Record<string, any> = {
+      disabledAfter: valueHelper('10/10/2021', { required: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 });
 
-describe('DatePicker component', () => {
+describe('DatePicker component today date chip', () => {
   it('renders component with today date chip', () => {
-    const { getByTestId } = render(<DatePicker date={new Date(2021, 9, 8)} />);
+    const { getByTestId } = render(<DatePicker date={newDate} />);
     expect(getByTestId('DesignSystem-Select--TodaysDate-wrapper')).toBeInTheDocument();
   });
 
   it('calls click handler', () => {
-    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} date={new Date(2021, 9, 25)} />);
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} date={newDate} />);
     const chip = getByTestId('DesignSystem-Chip--GenericChip');
     fireEvent.click(chip);
     expect(FunctionValue).toHaveBeenCalled();
   });
 });
+
+describe('renders DatePicker component Event Handlers ', () => {
+  it('checks for trigger popover on input field click', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
+    const input = getByTestId('DesignSystem-InputWrapper');
+    fireEvent.click(input);
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('checks for input field onChange event', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.change(input, { target: { value: newDate } });
+    expect(FunctionValue).toHaveBeenCalled();
+  });
+
+  it('checks onCancel Event', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} date={newDate} />);
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    expect(closeIcon).toBeInTheDocument();
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('checks onCancel Event in case of required:true', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <DatePicker
+        onDateChange={FunctionValue}
+        withInput={true}
+        date={newDate}
+        inputOptions={{
+          required: true,
+        }}
+      />
+    );
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    expect(closeIcon).toBeInTheDocument();
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Caption')).toBeInTheDocument();
+    expect(getAllByTestId('DesignSystem-Text')[0]).toHaveTextContent('Invalid value');
+  });
+
+  it('checks for custom caption onCancel Event', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <DatePicker
+        onDateChange={FunctionValue}
+        withInput={true}
+        date={newDate}
+        inputOptions={{
+          required: true,
+          caption: 'Invalid Date Entered',
+        }}
+      />
+    );
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Caption')).toBeInTheDocument();
+    expect(getAllByTestId('DesignSystem-Text')[0]).toHaveTextContent('Invalid Date Entered');
+  });
+
+  it('checks for custom placeholderChar option onClose Event', () => {
+    const { getByTestId } = render(
+      <DatePicker
+        onDateChange={FunctionValue}
+        withInput={true}
+        date={newDate}
+        inputOptions={{
+          required: true,
+          placeholderChar: '*',
+        }}
+      />
+    );
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Input')).toHaveValue('**/**/****');
+  });
+
+  it('checks onBlur Event', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} date={newDate} />);
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.click(closeIcon);
+    fireEvent.blur(input);
+    expect(input).toHaveValue('__/__/____');
+  });
+});