@innovaccer/design-system 3.1.0 → 3.3.0

package/css/src/components/grid.css

@@ -1,12 +1,3 @@
-/** Grid **/
-
-.Grid-wrapper {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-}
-
 .Grid {
   display: flex;
   flex-direction: column;
@@ -16,20 +7,11 @@
   background: var(--white);
 }
 
-.Grid--resource .Grid-row--body:hover,
-.Grid--resource .Grid-row--body:hover .Grid-cellGroup {
-  cursor: pointer;
-  background: var(--secondary-lightest);
-}
-
-.Grid--resource .Grid-row--body:active,
-.Grid--resource .Grid-row--body:active .Grid-cellGroup {
-  background: var(--secondary-lighter);
-}
-
-.Grid--resource .Grid-row--body:focus {
-  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
-  outline: none;
+.Grid-wrapper {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
 }
 
 .Grid--pinned {
@@ -131,42 +113,6 @@
   border-bottom: var(--border);
 }
 
-.Grid-row {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  background: var(--white);
-  transition: var(--duration--fast-02) var(--standard-productive-curve);
-  transition-delay: var(--duration--fast-01);
-}
-
-.Grid-row--body {
-  border-color: var(--secondary-light);
-}
-
-.Grid-row--selected,
-.Grid-row--selected .Grid-cellGroup {
-  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
-  transition: var(--duration--fast-02) var(--standard-productive-curve);
-}
-
-.Grid-row--selected:hover,
-.Grid-row--selected .Grid-cellGroup:hover {
-  background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
-}
-
-.Grid-row--selected:active,
-.Grid-row--selected .Grid-cellGroup:active {
-  background: var(--primary-lighter) !important;
-}
-
-.Grid-row--selected:focus,
-.Grid-row--selected .Grid-cellGroup:focus {
-  outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
-}
-
 .Grid-rowWrapper:last-child .Grid-row--body {
   border-bottom: 0;
 }
@@ -238,15 +184,6 @@
   border-left: none;
 }
 
-/* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {
-    border-right: var(--border);
-} */
-
-.Grid-row--disabled {
-  opacity: var(--opacity-10);
-  pointer-events: none;
-}
-
 .Grid-cell--head.Grid-cell--selected {
   background: var(--primary-light);
 }
@@ -261,6 +198,15 @@
   overflow: visible !important;
 }
 
+.Grid-cell--separator {
+  border-left: var(--border);
+  border-color: var(--secondary-light);
+}
+
+.Grid-cell--selected {
+  background: var(--primary-lightest);
+}
+
 .Grid-sortingIcons {
   display: flex;
   align-items: center;
@@ -322,7 +268,6 @@
 .Grid-cellGroup {
   display: flex;
   box-sizing: border-box;
-  background: var(--white);
 }
 
 .Grid-cellGroup--pinned {
@@ -332,32 +277,10 @@
 
 .Grid-cellGroup--pinned-left {
   left: 0;
-  border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-right-width: 4px;
-  border-image: linear-gradient(
-      to right,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      color-mod(var(--secondary) a(0.1)) 25%,
-      color-mod(var(--secondary) a(0.1))
-    )
-    1 100%;
 }
 
 .Grid-cellGroup--pinned-right {
   right: 0;
-  border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-left-width: 4px;
-  border-image: linear-gradient(
-      to left,
-      var(--secondary-light),
-      var(--secondary-light) 25%,
-      color-mod(var(--secondary) a(0.1)) 25%,
-      color-mod(var(--secondary) a(0.1))
-    )
-    1 100%;
 }
 
 .Grid .Checkbox-wrapper {
@@ -374,13 +297,11 @@
 }
 
 .GridCell--align-left {
-  /* flex-direction: row; */
   justify-content: flex-start;
   text-align: left;
 }
 
 .GridCell--align-right {
-  /* flex-direction: row-reverse; */
   justify-content: flex-end;
   text-align: right;
 }
@@ -451,20 +372,6 @@
   margin-left: 0;
 }
 
-/* .GridCell-image {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: var(--spacing);
-}
-
-.Image {
-    z-index: 0;
-    height: 100%;
-    width: 100%;
-} */
-
 /** Header **/
 
 /** Table-header **/
@@ -531,3 +438,153 @@
   margin-left: auto;
   margin-bottom: var(--spacing-2);
 }
+
+/* Grid row */
+
+.Grid-row--disabled {
+  opacity: var(--opacity-10);
+  pointer-events: none;
+}
+
+.Grid-row {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background: var(--white);
+}
+
+.Grid-row--body {
+  border-color: var(--secondary-light);
+}
+
+.Grid--resource .Grid-row--body:hover {
+  cursor: pointer;
+  background: var(--secondary-lightest);
+}
+
+.Grid--resource .Grid-row--body:active {
+  background: var(--secondary-lighter);
+}
+
+.Grid--resource .Grid-row--body:focus {
+  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
+  outline: none;
+}
+
+/* Selected States */
+
+.Grid-row--selected {
+  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
+}
+
+.Grid-row--selected:hover {
+  background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
+}
+
+.Grid-row--selected:active {
+  background: var(--primary-lighter) !important;
+}
+
+.Grid-row--selected:focus {
+  outline: none;
+  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
+}
+
+/* Pinned Columns Default State */
+
+.Grid--resource .Grid-row--body:hover .Grid-cellWrapper--pinned {
+  cursor: pointer;
+  background: var(--secondary-lightest);
+}
+
+.Grid--resource .Grid-row--body:active .Grid-cellWrapper--pinned {
+  background: var(--secondary-lighter);
+}
+
+.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
+  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
+  outline: none;
+}
+
+/* Pinned Columns Selected State */
+
+.Grid-row--selected .Grid-cellWrapper--pinned {
+  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
+}
+
+.Grid-row--selected:hover .Grid-cellWrapper--pinned {
+  background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
+}
+
+.Grid-row--selected:active .Grid-cellWrapper--pinned {
+  background: var(--primary-lighter) !important;
+}
+
+.Grid-row--selected:focus .Grid-cellWrapper--pinned {
+  outline: none;
+  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
+}
+
+/* Grid header */
+.Grid-row--head .Grid-cellGroup--pinned {
+  background: var(--white);
+}
+
+.Grid-row--head .Grid-cellGroup--pinned-left {
+  border-style: inset;
+  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right-width: 4px;
+  border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      color-mod(var(--secondary) a(0.1)) 25%,
+      color-mod(var(--secondary) a(0.1))
+    )
+    1 100%;
+}
+
+.Grid-row--head .Grid-cellGroup--pinned-right {
+  border-style: inset;
+  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left-width: 4px;
+  border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      color-mod(var(--secondary) a(0.1)) 25%,
+      color-mod(var(--secondary) a(0.1))
+    )
+    1 100%;
+}
+
+/* Pinned Column Border */
+
+.Grid-cellWrapper--pinned-left {
+  border-style: inset;
+  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right-width: 4px;
+  border-image: linear-gradient(
+      to right,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      color-mod(var(--secondary) a(0.1)) 25%,
+      color-mod(var(--secondary) a(0.1))
+    )
+    1 100%;
+}
+
+.Grid-cellWrapper--pinned-right {
+  border-style: inset;
+  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left-width: 4px;
+  border-image: linear-gradient(
+      to left,
+      var(--secondary-light),
+      var(--secondary-light) 25%,
+      color-mod(var(--secondary) a(0.1)) 25%,
+      color-mod(var(--secondary) a(0.1))
+    )
+    1 100%;
+}

package/dist/.lib/tsconfig.type.tsbuildinfo

@@ -1722,7 +1722,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/organisms/grid/GridRow.tsx": {
-        "version": "50371d8993c998080f957d34f5cfe2131f363209b392b435b4ee5564b3b337ea",
+        "version": "668876aa2993d10c0519a68ee32e85c1ea4ea864504e1ef7e5755a72774d5d41",
         "signature": "e896c56db3e619dd4457355c752791be2e3f267ac73a43142d2481b1cea0a79d",
         "affectsGlobalScope": false
       },
@@ -3566,11 +3566,6 @@
         "signature": "b617398f019ba82a097256ca24979b66757355c5a665134acb94dc7350c39077",
         "affectsGlobalScope": false
       },
-      "../../node_modules/@types/js-beautify/index.d.ts": {
-        "version": "d1f1f5d242211b8fac9e851f81788804b5e70ccbc235f6b554c040d5b8189a9e",
-        "signature": "d1f1f5d242211b8fac9e851f81788804b5e70ccbc235f6b554c040d5b8189a9e",
-        "affectsGlobalScope": false
-      },
       "../../node_modules/@types/react-syntax-highlighter/index.d.ts": {
         "version": "cffd3848b7af4922d70028c805b7df5e8f0eac4a8d2410b0f55b47ca62c6c3a8",
         "signature": "cffd3848b7af4922d70028c805b7df5e8f0eac4a8d2410b0f55b47ca62c6c3a8",
@@ -3607,7 +3602,7 @@
         "affectsGlobalScope": false
       },
       "../../core/utils/docPage/index.tsx": {
-        "version": "a467a7547190d689b2ff26262d64647d26ab5d25ce27d39fcbeb9d3f30ac56b0",
+        "version": "9218b6dba460ef2e212bb6f9397f31f6424b099f4910ae84026f24e55659f13d",
         "signature": "d793df693e1f566f2a7fd586a5ba76f93009c359e9795372d49bb1dafa1d2c00",
         "affectsGlobalScope": false
       },
@@ -7902,7 +7897,6 @@
         "../../core/utils/docPage/generateImports.tsx",
         "../../core/utils/docPage/sandbox.tsx",
         "../../node_modules/@storybook/addon-docs/blocks.d.ts",
-        "../../node_modules/@types/js-beautify/index.d.ts",
         "../../node_modules/@types/node/util.d.ts",
         "../../node_modules/@types/react-dom/server/index.d.ts",
         "../../node_modules/@types/react-syntax-highlighter/index.d.ts",
@@ -9407,9 +9401,6 @@
         "../../node_modules/@types/node/util.d.ts",
         "../../node_modules/jest-diff/build/index.d.ts"
       ],
-      "../../node_modules/@types/js-beautify/index.d.ts": [
-        "../../node_modules/@types/node/util.d.ts"
-      ],
       "../../node_modules/@types/lz-string/index.d.ts": [
         "../../node_modules/@types/node/util.d.ts"
       ],
@@ -11230,9 +11221,6 @@
         "../../node_modules/@types/node/util.d.ts",
         "../../node_modules/jest-diff/build/index.d.ts"
       ],
-      "../../node_modules/@types/js-beautify/index.d.ts": [
-        "../../node_modules/@types/node/util.d.ts"
-      ],
       "../../node_modules/@types/lz-string/index.d.ts": [
         "../../node_modules/@types/node/util.d.ts"
       ],
@@ -12485,7 +12473,6 @@
       "../../node_modules/@types/aria-query/index.d.ts",
       "../../node_modules/@types/buble/index.d.ts",
       "../../node_modules/@types/jest/index.d.ts",
-      "../../node_modules/@types/js-beautify/index.d.ts",
       "../../node_modules/@types/lz-string/index.d.ts",
       "../../node_modules/@types/node/assert.d.ts",
       "../../node_modules/@types/node/assert/strict.d.ts",