@innovaccer/design-system 2.7.0 → 2.9.0-0

package/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: false
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -19,7 +20,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>
@@ -30,6 +31,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: true
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -45,7 +47,7 @@ exports[`Popover component
     class="Popover Popover--dark"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>
@@ -56,6 +58,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "bottom"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -71,7 +74,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>
@@ -82,6 +85,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "bottom-end"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -97,7 +101,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>
@@ -108,6 +112,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "bottom-start"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -123,7 +128,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>
@@ -134,6 +139,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "top"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -149,7 +155,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>
@@ -160,6 +166,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "top-end"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -175,7 +182,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>
@@ -186,6 +193,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "top-start"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -201,7 +209,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms; overflow: hidden;"
   >
     Popover
   </div>

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
-import { Row, Column, Backdrop, OutsideClick, Button } from '@/index';
+import { Row, Column, Backdrop, OutsideClick, Button, Tooltip } from '@/index';
 import { ColumnProps } from '@/index.type';
 import { OverlayFooter } from '@/components/molecules/overlayFooter';
 import { OverlayHeader, OverlayHeaderProps } from '@/components/molecules/overlayHeader';
@@ -171,18 +171,9 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
 
         if (this.props.closeOnEscape) OverlayManager.add(this.sidesheetRef.current);
       } else {
-        this.setState(
-          {
-            animate: false,
-          },
-          () => {
-            window.setTimeout(() => {
-              this.setState({
-                open: false,
-              });
-            }, 120);
-          }
-        );
+        this.setState({
+          animate: false,
+        });
 
         if (this.props.closeOnEscape) OverlayManager.remove(this.sidesheetRef.current);
       }
@@ -199,6 +190,14 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
     }
   }
 
+  handleAnimationEnd() {
+    if (!this.state.animate) {
+      this.setState({
+        open: false,
+      });
+    }
+  }
+
   render() {
     const { animate, open, zIndex } = this.state;
     const {
@@ -230,7 +229,6 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
       ['Overlay-container']: true,
       ['fade-in']: animate,
       ['Overlay-container--open']: animate,
-      ['fade-out']: !animate,
       ['Overlay-container--close']: !animate,
     });
 
@@ -264,6 +262,7 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
         data-layer={true}
         style={{ zIndex }}
         ref={this.sidesheetRef}
+        onAnimationEnd={this.handleAnimationEnd}
       >
         <Column data-test="DesignSystem-Sidesheet" {...baseProps} className={classes} size={sidesheetWidth[dimension]}>
           <div className={headerClass}>
@@ -273,14 +272,16 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
               {!!header && header}
             </Column>
             <Column className="flex-grow-0">
-              <Button
-                icon="close"
-                appearance="transparent"
-                data-test="DesignSystem-Sidesheet--CloseButton"
-                onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                  if (onClose) onClose(event, 'IconClick');
-                }}
-              />
+              <Tooltip tooltip="Close">
+                <Button
+                  icon="close"
+                  appearance="transparent"
+                  data-test="DesignSystem-Sidesheet--CloseButton"
+                  onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                    if (onClose) onClose(event, 'IconClick');
+                  }}
+                />
+              </Tooltip>
             </Column>
           </div>
           <OverlayBody data-test="DesignSystem-Sidesheet--OverlayBody" className={bodyClass}>

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

@@ -51,24 +51,29 @@ exports[`Sidesheet component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <button
-              class="Button Button--regular Button--regularSquare Button--transparent"
-              data-test="DesignSystem-Sidesheet--CloseButton"
-              tabindex="0"
+            <style />
+            <div
+              class="OutsideClick PopperWrapper-trigger"
             >
-              <div
-                class="Button-icon"
+              <button
+                class="Button Button--regular Button--regularSquare Button--transparent"
+                data-test="DesignSystem-Sidesheet--CloseButton"
+                tabindex="0"
               >
-                <i
-                  class="material-icons material-icons-round Icon Icon--default"
-                  data-test="DesignSystem-Button--Icon"
-                  role="button"
-                  style="font-size: 16px; width: 16px;"
+                <div
+                  class="Button-icon"
                 >
-                  close_round
-                </i>
-              </div>
-            </button>
+                  <i
+                    class="material-icons material-icons-round Icon Icon--default"
+                    data-test="DesignSystem-Button--Icon"
+                    role="button"
+                    style="font-size: 16px; width: 16px;"
+                  >
+                    close_round
+                  </i>
+                </div>
+              </button>
+            </div>
           </div>
         </div>
         <div
@@ -140,24 +145,29 @@ exports[`Sidesheet component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <button
-              class="Button Button--regular Button--regularSquare Button--transparent"
-              data-test="DesignSystem-Sidesheet--CloseButton"
-              tabindex="0"
+            <style />
+            <div
+              class="OutsideClick PopperWrapper-trigger"
             >
-              <div
-                class="Button-icon"
+              <button
+                class="Button Button--regular Button--regularSquare Button--transparent"
+                data-test="DesignSystem-Sidesheet--CloseButton"
+                tabindex="0"
               >
-                <i
-                  class="material-icons material-icons-round Icon Icon--default"
-                  data-test="DesignSystem-Button--Icon"
-                  role="button"
-                  style="font-size: 16px; width: 16px;"
+                <div
+                  class="Button-icon"
                 >
-                  close_round
-                </i>
-              </div>
-            </button>
+                  <i
+                    class="material-icons material-icons-round Icon Icon--default"
+                    data-test="DesignSystem-Button--Icon"
+                    role="button"
+                    style="font-size: 16px; width: 16px;"
+                  >
+                    close_round
+                  </i>
+                </div>
+              </button>
+            </div>
           </div>
         </div>
         <div

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

@@ -15,6 +15,16 @@ const tooltipPropsList = [
   'hideOnReferenceEscape',
   'closeOnScroll',
 ] as const;
+const positionValue = {
+  bottom: 'bottom',
+  top: 'top',
+  'top-start': 'top',
+  'top-end': 'top',
+  'bottom-start': 'bottom',
+  'bottom-end': 'bottom',
+  left: 'left',
+  right: 'right',
+};
 type TooltipPopperProps = typeof tooltipPropsList[number];
 export interface TooltipProps extends Omit<PopoverProps, TooltipPopperProps>, BaseProps {
   /**
@@ -39,7 +49,16 @@ export const Tooltip = (props: TooltipProps) => {
   );
 
   return (
-    <Popover trigger={children} on={'hover'} offset={'medium'} {...rest}>
+    <Popover
+      trigger={children}
+      on={'hover'}
+      offset={'medium'}
+      {...rest}
+      animationClass={{
+        open: `Tooltip-animation-open-${positionValue[props.position]}`,
+        close: `Tooltip-animation-close-${positionValue[props.position]}`,
+      }}
+    >
       {tooltipWrapper}
     </Popover>
   );

package/core/components/molecules/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -25,6 +26,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -45,6 +47,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -65,6 +68,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -85,6 +89,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -105,6 +110,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -125,6 +131,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -145,6 +152,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >

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

@@ -11248,11 +11248,11 @@ exports[`Calendar component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -11263,11 +11263,11 @@ exports[`Calendar component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--regular"
+                class="Text Text--link Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2022
@@ -15555,11 +15555,11 @@ exports[`Calendar component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -15570,11 +15570,11 @@ exports[`Calendar component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--small"
+                class="Text Text--link Text--small"
                 data-test="DesignSystem-Text"
               >
                 2022

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

@@ -645,7 +645,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:disabledAfter
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip-action--disabled"
+          class="Chip-wrapper Chip Chip-action--disabled"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -1307,7 +1307,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:disabledBefore
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -1969,7 +1969,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:disabledBefore
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip-action--disabled"
+          class="Chip-wrapper Chip Chip-action--disabled"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -2630,7 +2630,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:open
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -3291,7 +3291,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:open
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -3952,7 +3952,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -4208,7 +4208,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -4363,11 +4363,11 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
                   </span>
                 </div>
                 <div
-                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
+                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
                   data-test="DesignSystem-Calendar--yearValue"
                 >
                   <span
-                    class="Text Text--link Text--regular"
+                    class="Text Text--default Text--regular"
                     data-test="DesignSystem-Text"
                   >
                     2021
@@ -4378,11 +4378,11 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
                 class="Calendar-valueRow"
               >
                 <div
-                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
+                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
                   data-test="DesignSystem-Calendar--yearValue"
                 >
                   <span
-                    class="Text Text--default Text--regular"
+                    class="Text Text--link Text--regular"
                     data-test="DesignSystem-Text"
                   >
                     2022
@@ -4457,7 +4457,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -5118,7 +5118,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -5139,6 +5139,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >