@innovaccer/design-system 2.7.0 → 2.9.0-0

package/css/src/components/ProgressBar.css

@@ -1,7 +1,7 @@
 .ProgressBar {
   width: 100%;
   border-radius: var(--spacing-m);
-  background: var(--secondary-lightest);
+  background: var(--secondary-lighter);
 }
 
 .ProgressBar-indicator {

package/css/src/components/avatarGroup.css

@@ -17,12 +17,3 @@
   align-items: flex-end;
   overflow-y: auto;
 }
-
-.AvatarGroup-TextWrapper::-webkit-scrollbar {
-  width: var(--spacing);
-}
-
-.AvatarGroup-TextWrapper::-webkit-scrollbar-thumb {
-  background: var(--secondary);
-  border-radius: var(--spacing-m);
-}

package/css/src/components/button.css

@@ -21,12 +21,12 @@
   line-height: var(--font-height-s);
   color: var(--text-white);
 
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Button:disabled {
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 .Button:focus {
@@ -111,7 +111,7 @@
 }
 
 .Button--basic:hover {
-  background: var(--secondary);
+  box-shadow: var(--shadow-s);
 }
 
 .Button--basic:active {
@@ -198,7 +198,7 @@
 
 .Button--transparent:focus {
   background: color-mod(var(--stone-light) a(0.2));
-  /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
 .Button--transparent:active {

package/css/src/components/chip.css

@@ -15,6 +15,10 @@
   cursor: default;
   height: var(--spacing-xl);
 }
+.Chip-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
 
 .Chip-icon--left {
   padding-right: var(--spacing-m);

package/css/src/components/dropdown.css

@@ -59,6 +59,11 @@
   box-sizing: border-box;
 }
 
+.Dropdown-items {
+  animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  animation-fill-mode: forwards;
+}
+
 .Option {
   display: flex;
 }
@@ -135,12 +140,3 @@
   height: fit-content;
   line-height: var(--font-height);
 }
-
-.Dropdown-wrapper::-webkit-scrollbar {
-  width: var(--spacing);
-}
-
-.Dropdown-wrapper::-webkit-scrollbar-thumb {
-  background: var(--secondary);
-  border-radius: var(--spacing-m);
-}

package/css/src/components/dropdownButton.css

@@ -61,6 +61,8 @@
 .DropdownButton--open {
   background-color: var(--secondary-dark) !important;
   color: var(--text) !important;
+  animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  animation-duration: 120ms;
 }
 
 .DropdownButton:disabled {

package/css/src/components/fullscreenModal.css

@@ -32,11 +32,6 @@
   overflow: auto;
   display: flex;
   flex-direction: column;
-  visibility: hidden;
-}
-
-.FullscreenModal--open {
-  visibility: visible;
 }
 
 .FullscreenModal-animation--open {

package/css/src/components/grid.css

@@ -118,17 +118,6 @@
   overflow-y: overlay;
 }
 
-.Grid-body::-webkit-scrollbar {
-  background: var(--white);
-  height: var(--spacing-l);
-  width: var(--spacing-l);
-}
-
-.Grid-body::-webkit-scrollbar-thumb {
-  background: var(--secondary);
-  border-radius: var(--spacing);
-}
-
 .Grid-rowWrapper {
   display: inline-flex;
   flex-direction: column;

package/css/src/components/overlay.css

@@ -36,14 +36,3 @@
   padding-left: var(--spacing-xl);
   padding-right: var(--spacing-xl);
 }
-
-.OverlayBody::-webkit-scrollbar {
-  width: var(--spacing-2);
-}
-
-.OverlayBody::-webkit-scrollbar-thumb {
-  border: var(--spacing-m) solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-  border-radius: var(--spacing);
-  background-color: var(--secondary);
-}

package/css/src/components/popover.css

@@ -15,3 +15,15 @@
   visibility: hidden;
   pointer-events: none;
 }
+
+@keyframes popper-fade-in {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/css/src/components/slider.css

@@ -99,4 +99,5 @@
 .Slider-handle--disabled {
   pointer-events: none;
   background-color: var(--secondary-light);
+  box-shadow: none;
 }

package/css/src/components/tabs.css

@@ -63,7 +63,7 @@
   outline: none;
   border-radius: 4px;
   /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
-  box-shadow: color-mod(var(--primary) a(0.2)) 0px 0px 0px var(--spacing-s) inset;
+  box-shadow: color-mod(var(--primary) a(0.16)) 0px 0px 0px calc(var(--spacing-xs) + var(--spacing-s)) inset;
 }
 
 .Tab:active:focus {

package/css/src/components/textarea.css

@@ -47,14 +47,3 @@
 .Textarea--resize {
   resize: auto;
 }
-
-.Textarea::-webkit-scrollbar {
-  width: var(--spacing-2);
-}
-
-.Textarea::-webkit-scrollbar-thumb {
-  border: var(--spacing-m) solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-  border-radius: var(--spacing);
-  background-color: var(--secondary);
-}

package/css/src/components/tooltip.css

@@ -15,3 +15,118 @@
   word-break: break-word;
   hyphens: auto;
 }
+
+@keyframes tooltip-open-top {
+  from {
+    top: 0px;
+    opacity: 0.5;
+  }
+  to {
+    top: -8px;
+    opacity: 1;
+  }
+}
+@keyframes tooltip-close-top {
+  from {
+    top: -8px;
+    opacity: 0.5;
+  }
+  to {
+    top: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-top {
+  animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-top {
+  animation: tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+@keyframes tooltip-open-bottom {
+  from {
+    top: 0px;
+    opacity: 0.5;
+  }
+  to {
+    top: 8px;
+    opacity: 1;
+  }
+}
+@keyframes tooltip-close-bottom {
+  from {
+    top: 8px;
+    opacity: 0.5;
+  }
+  to {
+    top: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-bottom {
+  animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-bottom {
+  animation: tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
+@keyframes tooltip-open-left {
+  from {
+    left: 0px;
+    opacity: 0.5;
+  }
+  to {
+    left: -8px;
+    opacity: 1;
+  }
+}
+@keyframes tooltip-close-left {
+  from {
+    left: -8px;
+    opacity: 0.5;
+  }
+  to {
+    left: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-left {
+  animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-left {
+  animation: tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
+@keyframes tooltip-open-right {
+  from {
+    left: 0px;
+    opacity: 0.5;
+  }
+  to {
+    left: 8px;
+    opacity: 1;
+  }
+}
+@keyframes tooltip-close-right {
+  from {
+    left: 8px;
+    opacity: 0.5;
+  }
+  to {
+    left: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-right {
+  animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-right {
+  animation: tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}

package/css/src/components/verticalNav.css

@@ -64,11 +64,13 @@
 
 .MenuItem:hover {
   background-color: var(--secondary-light);
+  box-shadow: var(--shadow-s);
 }
 
 .MenuItem--active,
 .MenuItem--active:hover {
   background: var(--primary-lightest);
+  box-shadow: none;
 }
 
 .MenuItem--rounded {

package/css/src/core/animation.css

@@ -23,3 +23,11 @@
 .fade-out {
   animation: fadeOut 120ms cubic-bezier(0.4, 0.14, 0.3, 1);
 }
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}

package/css/src/core/utilities.css

@@ -18,3 +18,14 @@
 .Overlay-container--close {
   animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
 }
+
+::-webkit-scrollbar {
+  width: var(--spacing-2);
+}
+
+::-webkit-scrollbar-thumb {
+  border: var(--spacing-s) solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: var(--spacing);
+  background-color: var(--secondary);
+}

package/css/src/utils/utility.css

@@ -26,3 +26,7 @@
 .cursor-pointer {
   cursor: pointer;
 }
+
+.white-space-nowrap {
+  white-space: nowrap;
+}

package/css/src/variables/index.css

@@ -185,4 +185,23 @@
 
   /* Transparancy (Opacity) */
   --transparent-58: 0.58;
+
+  /* Transition curve timing function */
+  /* Use standard-easing when an element is visible from the beginning to the end of a motion. Ex-Expanding cards. */
+  --standard-productive-curve: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --standard-expressive-curve: cubic-bezier(0.4, 0.14, 0.3, 1);
+  /* Use entrance-easing when an element quickly appears and slows down to a stop. Ex-when adding elements to the view, such as a modal appearing. */
+  --entrance-productive-curve: cubic-bezier(0, 0, 0.38, 0.9);
+  --entrance-expressive-curve: cubic-bezier(0, 0, 0.3, 1);
+  /* Use exit-easing when removing elements from view, such as closing a modal or toaster. */
+  --exit-productive-curve: cubic-bezier(0.2, 0, 1, 0.9);
+  --exit-expressive-curve: cubic-bezier(0.4, 0.14, 1, 1);
+
+  /* Transition duration */
+  --duration--fast-01: 80ms;
+  --duration--fast-02: 120ms;
+  --duration--moderate-01: 160ms;
+  --duration--moderate-02: 240ms;
+  --duration--slow-01: 400ms;
+  --duration--slow-02: 720ms;
 }

package/dist/core/components/atoms/avatarGroup/AvatarCount.d.ts

@@ -0,0 +1,2 @@
+declare const AvatarCount: (props: any) => JSX.Element;
+export default AvatarCount;

package/dist/core/components/atoms/avatarGroup/AvatarGroup.d.ts

@@ -5,7 +5,7 @@ interface AvatarData extends Record<string, any> {
     lastName?: string;
     appearance?: AvatarProps['appearance'];
 }
-interface AvatarPopperProps {
+interface AvatarPopoverProps {
     popperRenderer?: (names: AvatarData[]) => JSX.Element;
     appendToBody?: PopoverProps['appendToBody'];
     dark?: PopoverProps['dark'];
@@ -18,7 +18,7 @@ export interface AvatarGroupProps extends BaseProps {
     list: AvatarData[];
     max: number;
     borderColor: string;
-    popoverOptions: AvatarPopperProps;
+    popoverOptions: AvatarPopoverProps;
     tooltipPosition: PopoverProps['position'];
 }
 export declare const AvatarGroup: {

package/dist/core/components/atoms/avatarGroup/AvatarPopperBody.d.ts

@@ -0,0 +1,2 @@
+declare const AvatarPopperBody: (props: any) => any;
+export default AvatarPopperBody;

package/dist/core/components/atoms/avatarGroup/Avatars.d.ts

@@ -0,0 +1,2 @@
+declare const Avatars: (props: any) => any;
+export default Avatars;