@innovaccer/design-system 2.3.0 → 2.4.0-0

package/core/components/molecules/inputMask/__tests__/InputMask.test.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { InputMaskProps as Props } from '@/index.type';
+import { InputMask } from '@/index';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+const onFocusHandler = jest.fn();
+const onChangeHandler = jest.fn();
+const onBlurHandler = jest.fn();
+const onClearHandler = jest.fn();
+
+const mask = [
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+  ' ',
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+  ' ',
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+  ' ',
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+];
+
+describe('Input Mask component', () => {
+  const mapper = {
+    placeholderChar: valueHelper('*', { required: false }),
+    mask: valueHelper(mask, { required: true }),
+    caption: valueHelper('card', { required: true }),
+    validators: valueHelper(undefined, { required: true }),
+    onChange: valueHelper(onChangeHandler, { required: false }),
+    onBlur: valueHelper(onBlurHandler, { required: false }),
+    onClear: valueHelper(onChangeHandler, { required: false }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(<InputMask {...attr} />);
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+  testHelper(mapper, testFunc);
+});
+
+describe('Input Mask component with prop mask', () => {
+  it('render Input', () => {
+    const { getByTestId } = render(<InputMask mask={mask} />);
+    expect(getByTestId('DesignSystem-InputMask--Wrapper')).toHaveClass('d-flex');
+  });
+});
+
+describe('Input Mask component prop: onFocusHandler', () => {
+  it('calls onFocusHandler callback without value', () => {
+    const { getByTestId } = render(<InputMask mask={mask} onFocus={onFocusHandler} />);
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.focus(input);
+    expect(input).toHaveAttribute('value', '____ ____ ____ ____');
+    expect(onFocusHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onFocusHandler callback with value', () => {
+    const value = '1111 2222 3333 4444';
+    const { getByTestId } = render(<InputMask mask={mask} onFocus={onFocusHandler} value={value} />);
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.focus(input);
+    expect(input).toHaveAttribute('value', value);
+  });
+});
+
+describe('Input Mask component prop: onBlurHandler', () => {
+  const value = '____ ____ ____ ____';
+  it('calls onBlurHandler callback  when clearOnEmptyBlur is false', () => {
+    const { getByTestId } = render(<InputMask mask={mask} onBlur={onBlurHandler} clearOnEmptyBlur={false} />);
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.focus(input);
+    expect(input).toHaveValue(value);
+    fireEvent.blur(input);
+    expect(input).toHaveValue(value);
+  });
+
+  it('calls onBlurHandler callback  when clearOnEmptyBlur is true', () => {
+    const { getByTestId } = render(<InputMask mask={mask} onBlur={onBlurHandler} />);
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.focus(input);
+    expect(input).toHaveValue(value);
+    fireEvent.blur(input);
+    expect(input).toHaveValue('');
+  });
+});
+
+describe('Input Mask component prop: onChangeHandler', () => {
+  it('calls onChangeHandler callback ', async () => {
+    const value = '33';
+    const { getByTestId } = render(<InputMask mask={mask} onChange={onChangeHandler} />);
+    const input = getByTestId('DesignSystem-Input');
+    input.focus();
+    fireEvent.select(input, {
+      target: { selectionStart: 0, selectionEnd: 0 },
+    });
+    fireEvent.change(input, {
+      target: {
+        value,
+        selectionStart: value.length,
+        selectionEnd: value.length,
+      },
+    });
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+});
+
+describe('Input Mask component prop: onClearHandler', () => {
+  it('calls onClearHandler callback without value', () => {
+    const value = '1111 2222 3333 4444';
+    const { getByTestId } = render(<InputMask mask={mask} onClear={onClearHandler} value={value} />);
+    const input = getByTestId('DesignSystem-Input--closeIcon');
+    fireEvent.click(input);
+    expect(onClearHandler).toHaveBeenCalledTimes(1);
+  });
+});

package/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Mask component 
+  mask: [{},{},{},{}," ",{},{},{},{}," ",{},{},{},{}," ",{},{},{},{}], caption: "card", placeholderChar: [null,"*"], onChange: [null], onBlur: [null], onClear: [null]
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
+    >
+      <div
+        class="Input Input--regular"
+        data-test="DesignSystem-InputWrapper"
+        style="min-width: 256px;"
+      >
+        <input
+          autocomplete="off"
+          class="Input-input Input-input--regular"
+          data-test="DesignSystem-Input"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        class="Caption Caption--withInput"
+        data-test="DesignSystem-Caption"
+      >
+        <span
+          class="Text Text--subtle Text--medium Text--small"
+          data-test="DesignSystem-Text"
+        >
+          card
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;

package/core/components/molecules/modal/Modal.tsx

@@ -223,6 +223,8 @@ class Modal extends React.Component<ModalProps, ModalState> {
       onClose,
     } = this.props;
 
+    const BackdropZIndex: number = zIndex ? zIndex - 1 : 1000;
+
     const classes = classNames(
       {
         Modal: true,
@@ -311,8 +313,8 @@ class Modal extends React.Component<ModalProps, ModalState> {
               {headerOptions || footerOptions || footer || header ? (
                 <OverlayBody className={bodyClass}>{this.props.children}</OverlayBody>
               ) : (
-                  children
-                )}
+                children
+              )}
             </>
           )}
           {(!!footer || !!footerOptions) && (
@@ -334,15 +336,15 @@ class Modal extends React.Component<ModalProps, ModalState> {
         {ModalContainer}
       </OutsideClick>
     ) : (
-        ModalContainer
-      );
+      ModalContainer
+    );
 
     const WrapperElement = ReactDOM.createPortal(ModalWrapper, this.element);
 
     return (
       <>
         {WrapperElement}
-        <Backdrop open={this.state.animate} />
+        <Backdrop open={this.state.animate} zIndex={BackdropZIndex} />
       </>
     );
   }

package/core/components/molecules/modal/__tests__/__snapshots__/Modal.test.tsx.snap

@@ -78,6 +78,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -165,6 +166,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -308,6 +310,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -456,6 +459,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -599,6 +603,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -747,6 +752,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -829,6 +835,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -916,6 +923,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1059,6 +1067,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1207,6 +1216,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1350,6 +1360,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1498,6 +1509,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1580,6 +1592,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1667,6 +1680,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1810,6 +1824,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -1958,6 +1973,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -2101,6 +2117,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -2249,6 +2266,7 @@ exports[`Modal component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;

package/core/components/molecules/sidesheet/Sidesheet.tsx

@@ -217,6 +217,8 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
       onClose,
     } = this.props;
 
+    const BackdropZIndex: number = zIndex ? zIndex - 1 : 1000;
+
     const classes = classNames(
       {
         Sidesheet: true,
@@ -298,15 +300,15 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
         {SidesheetContainer}
       </OutsideClick>
     ) : (
-        SidesheetContainer
-      );
+      SidesheetContainer
+    );
 
     const WrapperElement = ReactDOM.createPortal(SidesheetWrapper, this.element);
 
     return (
       <>
         {WrapperElement}
-        <Backdrop open={this.state.animate} />
+        <Backdrop open={this.state.animate} zIndex={BackdropZIndex} />
       </>
     );
   }

package/core/components/molecules/sidesheet/__tests__/__snapshots__/Sidesheet.test.tsx.snap

@@ -82,6 +82,7 @@ exports[`Sidesheet component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;
@@ -168,6 +169,7 @@ exports[`Sidesheet component
     class="Backdrop Backdrop--open Backdrop-animation--open"
     data-layer="true"
     data-test="DesignSystem-Backdrop"
+    style="z-index: 1000;"
   />
 </body>
 `;

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Button, Heading, Subheading, Text } from '@/index';
+import { Button, Heading, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
 import config from './config';
-import { Size, Day, View } from './types';
+import { Size, Day, View, Events } from './types';
 import {
   compareDate,
   compareYearBlock,
@@ -95,6 +95,13 @@ export type CalendarProps = {
    * **set `0` or `undefined` for infinite limit**
    */
   rangeLimit?: number;
+  /**
+   * Adds event highlighter to given date
+   * `events: {
+   *    'mm/dd/yyyy': true
+   * }`
+   */
+  events?: Events;
 } & SharedProps;
 
 interface CalendarState {
@@ -109,6 +116,9 @@ interface CalendarState {
   yearBlockNav: number;
   yearNav: number;
   monthNav: number;
+  todayDate: number;
+  currMonth: number;
+  currYear: number;
 }
 
 export class Calendar extends React.Component<CalendarProps, CalendarState> {
@@ -130,7 +140,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const yearNav = props.yearNav !== undefined ? props.yearNav : getDateInfo(currDate || Date.now()).year;
     const monthNav = props.monthNav !== undefined ? props.monthNav : getDateInfo(currDate || Date.now()).month;
     const { year, month, date } = getDateInfo(currDate);
-
+    const todayCompleteDate = getDateInfo(new Date());
     this.state = {
       currDate,
       startDate,
@@ -140,6 +150,9 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       year,
       month,
       date,
+      todayDate: todayCompleteDate.date,
+      currMonth: todayCompleteDate.month,
+      currYear: todayCompleteDate.year,
       view: monthsInView > 1 ? 'date' : view,
       yearBlockNav: getYearBlock(yearNav),
     };
@@ -427,7 +440,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       <Button
         type="button"
         className={headerIconClass}
-        appearance="transparent"
+        appearance="basic"
         icon={`arrow_${type === 'next' ? 'forward' : 'back'}`}
         disabled={disabled}
         onClick={this.onNavIconClickHandler(type)}
@@ -600,6 +613,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
 
     const { size, firstDayOfWeek } = this.props;
 
+    const textSize = size === 'large' ? 'regular' : 'small';
+
     return (
       <>
         <div className="Calendar-dayValues">
@@ -610,9 +625,9 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
             const dayValue = (day + daysInRow + getIndexOfDay(firstDayOfWeek)) % daysInRow;
 
             return (
-              <Subheading key={day} className={valueClass} appearance="disabled">
+              <Text key={day} className={valueClass} appearance="default" weight="strong" size={textSize}>
                 {days[size][dayValue]}
-              </Subheading>
+              </Text>
             );
           })}
         </div>
@@ -623,12 +638,31 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     );
   };
 
+  renderEventsIndicator(size: string, active: boolean) {
+    const eventsIndicatorClass = classNames({
+      'Calendar-eventsIndicator': true,
+      [`Calendar-eventsIndicator--${size}`]: true,
+      'Calendar-eventsIndicator--active': active,
+    });
+    return <span data-test="DesignSystem-Calendar-Event-Indicator" className={eventsIndicatorClass} />;
+  }
+
   renderDateValues = (index: number) => {
     const { daysInRow } = config;
 
     const { size, rangePicker, firstDayOfWeek, disabledBefore, disabledAfter } = this.props;
 
-    const { startDate, endDate, hoverDate, year: yearState, month: monthState, date: dateState } = this.state;
+    const {
+      startDate,
+      endDate,
+      hoverDate,
+      year: yearState,
+      month: monthState,
+      date: dateState,
+      currMonth,
+      currYear,
+      todayDate,
+    } = this.state;
 
     const { year: yearNavVal, month: monthNavVal } = this.getNavDateInfo(index);
 
@@ -638,6 +672,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const noOfRows = Math.ceil((dayRange + dummyDays) / daysInRow);
     const inRangeError = this.getInRangeError();
 
+    const events = this.props.events;
+
     const onClickHandler = (date: number) => () => {
       if (rangePicker) {
         if (startDate && endDate) {
@@ -672,6 +708,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
               (compareDate(disabledBefore, 'more', yearNavVal, monthNavVal, date) ||
                 compareDate(disabledAfter, 'less', yearNavVal, monthNavVal, date));
             let active = !disabled && yearState === yearNavVal && monthState === monthNavVal && dateState === date;
+            const today =
+              !rangePicker && !disabled && currYear === yearNavVal && currMonth === monthNavVal && todayDate === date;
             let startActive = false;
             let endActive = false;
             let inRange = false;
@@ -707,6 +745,12 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
               endActive || (startDate && inRangeLast && compareDate(hoverDate, 'more', sYear, sMonth, sDate));
             const isRangeError = inRange && inRangeError;
 
+            const monthInString = `${monthNavVal + 1 > 9 ? monthNavVal + 1 : `0${monthNavVal + 1}`}`;
+            const dateInString = `${date > 9 ? date : `0${date}`}`;
+            const yearInString = `${yearNavVal}`;
+            const completeDateString = `${monthInString}/${dateInString}/${yearInString}`;
+            const isEventExist = events && typeof events === 'object' && events.hasOwnProperty(completeDateString);
+
             const wrapperClass = classNames({
               'Calendar-valueWrapper': true,
               'Calendar-valueWrapper--inRange': inRange || (rangePicker && active),
@@ -729,24 +773,24 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
               'Calendar-value--disabled': disabled,
               'Calendar-dateValue': true,
               [`Calendar-dateValue--${size}`]: size,
+              'Calendar-value--currentDate': today,
             });
             return (
-              <div
-                key={`${row}-${col}`}
-                className={wrapperClass}
-                data-test="designSystem-Calendar-WrapperClass"
-              >
+              <div key={`${row}-${col}`} className={wrapperClass} data-test="designSystem-Calendar-WrapperClass">
                 {!dummy && (
-                  <Text
-                    appearance={active ? 'white' : disabled ? 'disabled' : 'default'}
-                    size={size === 'small' ? 'small' : 'regular'}
-                    data-test="DesignSystem-Calendar--dateValue"
-                    className={valueClass}
-                    onClick={onClickHandler(date)}
-                    onMouseOver={onMouseOverHandler(date)}
-                  >
-                    {date}
-                  </Text>
+                  <>
+                    <Text
+                      appearance={active ? 'white' : disabled ? 'disabled' : today ? 'link' : 'default'}
+                      size={size === 'small' ? 'small' : 'regular'}
+                      data-test="DesignSystem-Calendar--dateValue"
+                      className={valueClass}
+                      onClick={onClickHandler(date)}
+                      onMouseOver={onMouseOverHandler(date)}
+                    >
+                      {date}
+                    </Text>
+                    {isEventExist && this.renderEventsIndicator(size, active)}
+                  </>
                 )}
               </div>
             );

package/core/components/organisms/calendar/__stories__/variants/withEvents.story.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Calendar from '../../Calendar';
+import Card from '@/components/atoms/card';
+import Heading from '@/components/atoms/heading';
+
+// CSF format story
+export const withEvents = () => {
+  return (
+    <>
+      <div className="mt-8">
+        <Heading>size: small with events</Heading>
+        <div className="d-flex">
+          <div className="mr-8">
+            <Card className="d-inline-flex" shadow="light">
+              <Calendar events={{ '12/21/2021': true }} date={new Date('12/21/2021')} size={'small'} />
+            </Card>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <Heading>size: large with events</Heading>
+        <div className="d-flex">
+          <div className="mr-8">
+            <Card className="d-inline-flex" shadow="light">
+              <Calendar events={{ '12/20/2021': true }} date={new Date('12/21/2021')} size={'large'} />
+            </Card>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'Components/Calendar/Variants/With Events',
+  component: Calendar,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Calendar',
+      },
+    },
+  },
+};

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

@@ -121,4 +121,14 @@ describe('Calendar compoennt', () => {
     expect(getByTestId('DesignSystem-Calendar')).toHaveClass('Calendar--large');
     expect(getAllByTestId('DesignSystem-Calendar--yearValue')[0]).toHaveClass('Calendar-yearValue--large');
   });
+
+  it('renders events indicator on given date', () => {
+    const events = { '09/12/2021': true };
+    const { getByTestId, getAllByTestId } = render(
+      <Calendar date={new Date('09/12/2021')} events={events} size="small" />
+    );
+
+    expect(getByTestId('DesignSystem-Calendar-Event-Indicator')).toBeInTheDocument();
+    expect(getAllByTestId('DesignSystem-Calendar-Event-Indicator')[0]).toHaveClass('Calendar-eventsIndicator--small');
+  });
 });