@innovaccer/design-system 2.3.0 → 2.4.0-0

package/core/components/organisms/calendar/config.ts

@@ -6,7 +6,7 @@ export default {
   daysInRow: 7,
   months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   days: {
-    small: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-    large: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    small: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    large: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   },
 };

package/core/components/organisms/calendar/types.ts

@@ -8,3 +8,4 @@ export type DateObject = {
   date: number;
 };
 export type DateType = number | Date | string;
+export type Events = { [key: string]: boolean };

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Calendar, SharedProps } from '../calendar/Calendar';
 import { DateType, DateFormat } from '../calendar/types';
-import { Popover, Utils } from '@/index';
+import { Popover, Utils, Chip } from '@/index';
 import { PopoverProps, InputMaskProps } from '@/index.type';
 import { Validators } from '@/utils/types';
 import { convertToDate, translateToString, compareDate, getDateInfo } from '../calendar/utility';
 import { Trigger } from './Trigger';
+import config from '../calendar/config';
 
 export type DatePickerProps = SharedProps & {
   /**
@@ -180,19 +181,32 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
       disabledAfter,
       onDateChange,
       closeOnSelect,
+      size,
       ...rest
     } = this.props;
 
     const { date } = this.state;
-
+    const { months } = config;
+    const monthIndex: number = new Date().getMonth();
+    const todayMonthAndDate: string = `${months[monthIndex]} ${new Date().getDate()}`;
     return (
-      <Calendar
-        {...rest}
-        date={convertToDate(date, inputFormat, validators)}
-        disabledBefore={convertToDate(disabledBefore, inputFormat, validators)}
-        disabledAfter={convertToDate(disabledAfter, inputFormat, validators)}
-        onDateChange={this.onDateChangeHandler}
-      />
+      <div>
+        <Calendar
+          {...rest}
+          date={convertToDate(date, inputFormat, validators)}
+          disabledBefore={convertToDate(disabledBefore, inputFormat, validators)}
+          disabledAfter={convertToDate(disabledAfter, inputFormat, validators)}
+          onDateChange={this.onDateChangeHandler}
+        />
+        <div className="d-flex justify-content-center pb-6 pt-3" data-test="DesignSystem-Select--TodaysDate-wrapper">
+          <Chip
+            label={`Today, ${todayMonthAndDate}`}
+            name="chip"
+            type="action"
+            onClick={() => this.onDateChangeHandler(new Date())}
+          />
+        </div>
+      </div>
     );
   }
 

package/core/components/organisms/datePicker/__tests__/{DatePicker.tsx → DatePicker.test.tsx}

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { DatePicker } from '@/index';
 import { DatePickerProps as Props } from '@/index.type';
 
 const view = ['year', 'month', 'date'];
 const booleanValue = [true, false];
+const FunctionValue = jest.fn();
 
 describe('DatePicker component', () => {
   const mapper: Record<string, any> = {
@@ -57,3 +58,17 @@ describe('DatePicker component', () => {
 
   testHelper(mapper, testFunc);
 });
+
+describe('DatePicker component', () => {
+  it('renders component with today date chip', () => {
+    const { getByTestId } = render(<DatePicker date={new Date(2021, 9, 8)} />);
+    expect(getByTestId('DesignSystem-Select--TodaysDate-wrapper')).toBeInTheDocument();
+  });
+
+  it('calls click handler', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} />);
+    const chip = getByTestId('DesignSystem-Chip--GenericChip');
+    fireEvent.click(chip);
+    expect(FunctionValue).toHaveBeenCalled();
+  });
+});