@innovaccer/design-system 2.7.0 → 2.9.0-0

package/core/components/atoms/popperWrapper/PopperWrapper.tsx

@@ -86,10 +86,22 @@ export interface PopperWrapperProps {
    * type: 'onMouseLeave' | 'onMouseEnter' | 'outsideClick' | 'onClick';
    */
   onToggle: (open: boolean, type?: string) => void;
+  /*
+   * animationClass is for providing custom animations for open/close of the popover
+   * animationClass.open - takes animation class when popover is open
+   * animationClass.close - takes animation class when popover is close
+   */
+  animationClass?: {
+    open: string;
+    close: string;
+  };
 }
 
 interface PopperWrapperState {
   zIndex?: number;
+  animationKeyframe: string;
+  isOpen: boolean;
+  uniqueKey: string;
 }
 
 export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWrapperState> {
@@ -112,7 +124,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   constructor(props: PopperWrapperProps) {
     super(props);
 
-    this.state = {};
+    this.state = { animationKeyframe: '', isOpen: this.props.open || false, uniqueKey: '' };
 
     this.hoverableDelay = 100;
     this.offsetMapping = {
@@ -120,6 +132,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       medium: '4px',
       large: '8px',
     };
+
     this.triggerRef = React.createRef();
     this.popupRef = React.createRef();
 
@@ -141,12 +154,16 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     }
     if (prevProps.open !== this.props.open) {
       this._throttleWait = false;
+      this.setState({
+        animationKeyframe: '',
+      });
       if (this.props.open) {
         const triggerElement = this.triggerRef.current;
         const zIndex = this.getZIndexForLayer(triggerElement);
 
         this.setState({
           zIndex: zIndex === undefined ? zIndex : zIndex + 1,
+          isOpen: true,
         });
       }
     }
@@ -292,31 +309,106 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   }
 
   getPopperChildren({ ref, style, placement, outOfBoundaries }: PopperChildrenProps) {
-    const { offset, children } = this.props;
-    const { zIndex } = this.state;
+    const { offset, children, open, animationClass } = this.props;
+    const { zIndex, animationKeyframe, uniqueKey } = this.state;
     const newStyle = offset ? this.getUpdatedStyle(style, placement, offset) : style;
+    let childrenStyles = {
+      ...newStyle,
+      zIndex,
+    };
+    let classes = '';
+
+    if (!animationClass) {
+      const maxHeight = this.popupRef.current?.offsetHeight;
+      // we need to check for transformStyles so that we open the popover at correct position (left/right)
+      const transformStyles = this.popupRef.current?.style.getPropertyValue('transform');
+      if (transformStyles && maxHeight && placement && !animationKeyframe) {
+        const uniqueKey = Math.random().toString(36).substring(2, 6);
+        const isTop = placement.includes('top');
+
+        const popperAnimation = `
+        @keyframes popper-open-${uniqueKey} {
+          from { 
+            max-height: 0;
+            ${isTop ? `margin-top: ${maxHeight}px` : ''};
+          }
+          to {
+            max-height: ${maxHeight}px;
+            ${isTop ? `margin-top: 0px` : ''};
+          }
+        }
+        @keyframes popper-close-${uniqueKey} {
+          from {
+            max-height: ${maxHeight}px;
+            ${isTop ? `margin-top: 0px` : ''};
+          }
+          to {
+            max-height: 0;
+            ${isTop ? `margin-top: ${maxHeight}px` : ''};
+          }
+        }
+        `;
+
+        this.setState({
+          animationKeyframe: popperAnimation,
+          uniqueKey,
+        });
+      }
 
-    const element = React.cloneElement(children, {
+      // defining popper-fade-in custom keyframe as it is specific to popover usecase.
+      const popperAnimationStyles = {
+        animation: open
+          ? `popper-open-${uniqueKey} 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms`
+          : `popper-close-${uniqueKey} 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms`,
+      };
+
+      childrenStyles = {
+        ...childrenStyles,
+        ...popperAnimationStyles,
+        overflow: 'hidden',
+      };
+    } else {
+      classes = classNames(
+        {
+          [`${animationClass.open}`]: open,
+          [`${animationClass.close}`]: !open,
+        },
+        children.props.className
+      );
+    }
+
+    const childProps = {
       ref,
-      style: {
-        ...newStyle,
-        zIndex,
-      },
+      style: childrenStyles,
       'data-placement': placement,
       'data-hide': outOfBoundaries,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
-    });
+      onAnimationEnd: () => {
+        if (!open) {
+          this.setState({
+            isOpen: false,
+          });
+        }
+      },
+    };
+
+    const element = React.cloneElement(
+      children,
+      animationClass ? { ...childProps, className: classes } : { ...childProps }
+    );
     return element;
   }
 
   render() {
-    const { placement, appendToBody, open, hide, boundaryElement } = this.props;
+    const { placement, appendToBody, hide, boundaryElement } = this.props;
+    const { animationKeyframe, isOpen } = this.state;
 
     return (
       <Manager>
+        <style>{animationKeyframe}</style>
         <Reference innerRef={this.triggerRef}>{({ ref }) => this.getTriggerElement(ref)}</Reference>
-        {open &&
+        {isOpen &&
           appendToBody &&
           ReactDOM.createPortal(
             <Popper
@@ -331,7 +423,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
             </Popper>,
             document.body
           )}
-        {open && !appendToBody && (
+        {isOpen && !appendToBody && (
           <Popper placement={placement} innerRef={this.popupRef}>
             {this.getPopperChildren}
           </Popper>

package/core/components/atoms/toast/__stories__/WithDescription.story.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { Toast } from '@/index';
 
 // CSF format story
-export const toastWithDescription = () => <Toast appearance="success" title="Message sent successfully" />;
+export const toastWithDescription = () => (
+  <Toast appearance="success" title="Message sent successfully" message="Description goes here" />
+);
 
 export default {
   title: 'Components/Toast/Toast With Description',

package/core/components/css-utilities/designTokens/Data.tsx

@@ -161,3 +161,21 @@ export const gridBreakpointData = [
   { token: '--grid-l-breakpoint', value: '992px' },
   { token: '--grid-xl-breakpoint', value: '1200px' },
 ];
+
+export const transitionsCurveData = [
+  { token: '--standard-productive-curve', value: 'cubic-bezier(0.2, 0, 0.38, 0.9)' },
+  { token: '--standard-expressive-curve', value: 'cubic-bezier(0.4, 0.14, 0.3, 1)' },
+  { token: '--entrance-productive-curve', value: 'cubic-bezier(0, 0, 0.38, 0.9)' },
+  { token: '--entrance-expressive-curve', value: 'cubic-bezier(0, 0, 0.3, 1)' },
+  { token: '--exit-productive-curve', value: 'cubic-bezier(0.2, 0, 1, 0.9)' },
+  { token: '--exit-expressive-curve', value: 'cubic-bezier(0.4, 0.14, 1, 1)' },
+];
+
+export const transitionsDurationData = [
+  { token: '--duration--fast-01', value: '80ms' },
+  { token: '--duration--fast-02', value: '120ms' },
+  { token: '--duration--moderate-01', value: '160ms' },
+  { token: '--duration--moderate-02', value: '240ms' },
+  { token: '--duration--slow-01', value: '400ms' },
+  { token: '--duration--slow-02', value: '720ms' },
+];

package/core/components/css-utilities/designTokens/Transitions.story.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Card, Heading, Table } from '@/index';
+import { spaceSchema } from './Schema';
+import { transitionsCurveData, transitionsDurationData } from './Data';
+
+export const transitions = () => {
+  return (
+    <div>
+      <Heading size="xxl">Design Tokens</Heading>
+      <br />
+      <br />
+      <Heading size="m">Transitions</Heading>
+      <br />
+      <Heading size="m">Transition curve</Heading>
+      <Card className="h-100 overflow-hidden">
+        <Table data={transitionsCurveData} schema={spaceSchema} />
+      </Card>
+      <br />
+      <Heading size="m">Transition Duration</Heading>
+      <Card className="h-100 overflow-hidden">
+        <Table data={transitionsDurationData} schema={spaceSchema} />
+      </Card>
+      <br />
+    </div>
+  );
+};
+
+export default {
+  title: 'Others/Design Tokens/Transitions',
+  parameters: {
+    viewMode: 'story',
+    docs: {
+      page: null,
+      docPage: null,
+    },
+  },
+};

package/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`ChipInput component
         class="ChipInput-wrapper"
       >
         <div
-          class="Chip Chip--input my-2 mx-2"
+          class="Chip-wrapper Chip Chip--input my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span
@@ -33,7 +33,7 @@ exports[`ChipInput component
           </i>
         </div>
         <div
-          class="Chip Chip--input my-2 mx-2"
+          class="Chip-wrapper Chip Chip--input my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span
@@ -86,7 +86,7 @@ exports[`ChipInput component
         class="ChipInput-wrapper"
       >
         <div
-          class="Chip Chip-input--disabled my-2 mx-2"
+          class="Chip-wrapper Chip Chip-input--disabled my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span
@@ -106,7 +106,7 @@ exports[`ChipInput component
           </i>
         </div>
         <div
-          class="Chip Chip-input--disabled my-2 mx-2"
+          class="Chip-wrapper Chip Chip-input--disabled my-2 mx-2"
           data-test="DesignSystem-ChipInput--Chip"
         >
           <span