@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/molecules/sidesheet/__stories__/variants/CustomHeader.story.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { updateKnob } from '@/utils/storybookEventEmitter';
+import { Text, Paragraph, Sidesheet, ModalDescription, Button, Badge, Heading, Divider } from '@/index';
+
+export const customHeader = () => {
+  const open = boolean('open', true);
+  const seperator = boolean('seperator', false);
+  const stickFooter = boolean('stick bottom', false);
+  const backdropClose = boolean('backdropClose', false);
+
+  const onClose = () => {
+    updateKnob('open', false);
+    action('on close triggered')();
+  };
+
+  const options = {
+    onClose,
+    open,
+    seperator,
+    stickFooter,
+    backdropClose,
+    footer: (
+      <>
+        <Button appearance="primary" className="mr-4">
+          Primary
+        </Button>
+        <Button appearance="basic">Basic</Button>
+      </>
+    ),
+  };
+
+  const modalDescriptionOptions = {
+    title: 'Description Title',
+    description: 'Adding a subheading clearly indicates the hierarchy of the information.',
+    removePadding: true,
+  };
+
+  const modalDescriptionOptionsWithoutTitle = {
+    description: 'Card Sections include supporting text like an article summary or a restaurant description.',
+    removePadding: true,
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Sidesheet
+        {...options}
+        dimension="regular"
+        header={
+          <div className="pl-7">
+            <Heading size="s">Untitled document</Heading>
+            <div className="d-flex">
+              <div className="mr-3">
+                <Badge appearance="primary">User Interface</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Design</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Development</Badge>
+              </div>
+            </div>
+            <Divider></Divider>
+          </div>
+        }
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription {...modalDescriptionOptions} />
+        <ModalDescription {...modalDescriptionOptionsWithoutTitle} />
+      </Sidesheet>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [open, setOpen] = React.useState(true);
+
+  const onClose = () => {
+    setOpen(!open);
+  };
+
+  const options = {
+    onClose,
+    open,
+    footer: (
+      <>
+        <Button appearance="primary" className="mr-4">
+          Primary
+        </Button>
+        <Button appearance="basic">Basic</Button>
+      </>
+    ),
+  };
+
+  const modalDescriptionOptions = {
+    title: 'Description Title',
+    description: 'Adding a subheading clearly indicates the hierarchy of the information.',
+    removePadding: true,
+  };
+
+  const modalDescriptionOptionsWithoutTitle = {
+    description: 'Card Sections include supporting text like an article summary or a restaurant description.',
+    removePadding: true,
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.{' '}
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{' '}
+        <br />
+        <Button appearance="primary" onClick={() => setOpen(true)}>
+          Open
+        </Button>
+      </Paragraph>
+      <Sidesheet
+        {...options}
+        dimension="regular"
+        header={
+          <div className="pl-7">
+            <Heading size="s">Untitled document</Heading>
+            <div className="d-flex">
+              <div className="mr-3">
+                <Badge appearance="primary">User Interface</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Design</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Development</Badge>
+              </div>
+            </div>
+            <Divider></Divider>
+          </div>
+        }
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription {...modalDescriptionOptions} />
+        <ModalDescription {...modalDescriptionOptionsWithoutTitle} />
+      </Sidesheet>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Sidesheet/Custom Header',
+  component: Sidesheet,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Modal',
+        noHtml: true,
+      },
+    },
+  },
+};

package/core/components/molecules/stepper/Step.tsx

@@ -30,6 +30,8 @@ export const Step = (props: StepProps) => {
   const appearance = active ? 'link' : disabled ? 'disabled' : 'default';
 
   return (
+    // TODO(a11y)
+    // eslint-disable-next-line
     <div data-test="DesignSystem-Step" className={StepClass} onClick={onClickHandle}>
       <Icon
         data-test="DesignSystem-Step--Icon"

package/core/components/molecules/tabs/Tabs.tsx

@@ -189,6 +189,8 @@ export const Tabs = (props: TabsProps) => {
     });
 
     return (
+      // TODO(a11y)
+      //  eslint-disable-next-line
       <div
         ref={(element) => element && !disabled && tabRefs.push(element)}
         data-test="DesignSystem-Tabs--Tab"

package/core/components/molecules/tabs/TabsWrapper.tsx

@@ -52,6 +52,8 @@ export const TabsWrapper = (props: TabsWrapperProps) => {
     });
 
     return (
+      // TODO(a11y)
+      //  eslint-disable-next-line
       <div
         data-test="DesignSystem-Tabs--Header"
         key={index}

package/core/components/molecules/tabs/__stories__/CustomLabels.story.tsx

@@ -54,7 +54,7 @@ const customCode = `() => {
 
   const onTabChangeHandler = (tabIndex) => {
     setActiveIndex(tabIndex);
-    console.log(\`\tab-change: \${tabIndex}\`)();
+    console.log(\`tab-change: \${tabIndex}\`)();
   };
 
   return (

package/core/components/molecules/tooltip/Tooltip.tsx

@@ -3,7 +3,7 @@ import { Popover, Text } from '@/index';
 import { PopoverProps } from '@/index.type';
 import { BaseProps, filterProps } from '@/utils/types';
 
-const propsList = [
+const tooltipPropsList = [
   'trigger',
   'on',
   'open',
@@ -15,8 +15,8 @@ const propsList = [
   'hideOnReferenceEscape',
   'closeOnScroll',
 ] as const;
-type PopperProps = typeof propsList[number];
-export interface TooltipProps extends Omit<PopoverProps, PopperProps>, BaseProps {
+type TooltipPopperProps = typeof tooltipPropsList[number];
+export interface TooltipProps extends Omit<PopoverProps, TooltipPopperProps>, BaseProps {
   /**
    * Text to be rendered in `Tooltip`
    */
@@ -49,7 +49,7 @@ export const Tooltip = (props: TooltipProps) => {
 //   ...Popover.defaultProps,
 //   hoverable: false
 // }, propsList);
-Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, propsList), {
+Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
   hoverable: false,
 });
 

package/core/components/molecules/verificationCodeInput/VerificationCodeInput.tsx

@@ -156,7 +156,7 @@ const VerificationCodeInput = (props: VerificationCodeInputProps) => {
     const prev = refs[prevIndex];
     const nextRef = refs[nextIndex];
     switch (e.key) {
-      case KEY_CODE.backspace:
+      case KEY_CODE.backspace: {
         e.preventDefault();
         const vals = [...values];
         if (values[index]) {
@@ -168,26 +168,30 @@ const VerificationCodeInput = (props: VerificationCodeInputProps) => {
           setValues(vals);
         }
         break;
-      case KEY_CODE.left:
+      }
+      case KEY_CODE.left: {
         e.preventDefault();
         if (prev && prev.current) {
           prev.current.focus({ preventScroll: true });
         }
         break;
-      case KEY_CODE.right:
+      }
+      case KEY_CODE.right: {
         e.preventDefault();
         if (nextRef && nextRef.current) {
           nextRef.current.focus({ preventScroll: true });
         }
         break;
+      }
       case KEY_CODE.up:
       case KEY_CODE.down:
       case KEY_CODE.e:
-      case KEY_CODE.E:
+      case KEY_CODE.E: {
         if (type === 'number') {
           e.preventDefault();
         }
         break;
+      }
       default:
         break;
     }

package/core/components/molecules/verificationCodeInput/__stories__/index.story.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VerificationCodeInput, Label } from '@/index';
-import { select, text, boolean, number } from '@storybook/addon-knobs';
+import { select, text, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 // CSF format story
@@ -38,6 +38,8 @@ export const all = () => {
         placeholder={placeholder}
         error={error}
         pattern={pattern}
+        // TODO(a11y)
+        //  eslint-disable-next-line
         autoFocus={autoFocus}
       />
     </>

package/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 40px;"
       >
         <input

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/__stories__/variants/firstDayOfWeek.story.tsx

@@ -9,10 +9,10 @@ export const firstDayOfWeek = () => {
 
   const style = {
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div className="d-flex" style={style}>
       {values.map((v, index) => (
         <div className="mr-9 mt-5" key={index}>

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/calendar/utility.ts

@@ -151,9 +151,9 @@ export const translateToDate = (format: string, val: string, validators: Validat
   if (isValid(validators, val, format)) {
     const separator = format.includes('/') ? '/' : '-';
 
-    let year: number = -1,
-      month: number = -1,
-      date: number = -1;
+    let year = -1,
+      month = -1,
+      date = -1;
     const v = val.split(separator);
     format.split(separator).forEach((f, i) => {
       switch (f) {