fix(table): auto-collapse expanded row upon clicking another expandab…

…le row (#793) * feat: add possibility to auto collapse rows in table * test(table): added unit and UI tests for autoCollapse * fix(table): make auto collapsed row table uniqe * feat: add possibility to auto collapse rows in table * test(table): added unit and UI tests for autoCollapse * fix(table): make auto collapsed row table uniqe * feat: add possibility to auto collapse rows in table * fix: chaining modeVariant for possible undefined * fix: modify screenshot to be strict when comparing * refactor(table): remove autoCollapse control from storybook * feat: add possibility to auto collapse rows in table * test(table): added unit and UI tests for autoCollapse * fix(table): make auto collapsed row table uniqe * feat: add possibility to auto collapse rows in table * fix: chaining modeVariant for possible undefined * fix: modify screenshot to be strict when comparing * fix(table): simplify auto-collapse attribute usage in expandable rows * fix(table): bug in table stories control update * fix(table-component): update row IDs and improve event logging for expandable rows * fix(table-component): wrap event listener setup in an IIFE for better scope management * fix(table-component): update storybook controls and default values for expandable rows * fix(table-component): update default value for expandable rows from 'scroll' to 'auto' * Update packages/core/src/components/table/table-component-expandable-rows.stories.tsx Co-authored-by: Nathalie Lindqvist <nathalie.lindqvist@scania.com> --------- Co-authored-by: Nathalie Lindqvist <nathalie.lindqvist@scania.com>
scania-digital-design-system · Oct 28, 2024 · 11e389c · 11e389c
1 parent 30a710e
commit 11e389c
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/packages/core/src/components/table/table-component-expandable-rows.stories.tsx b/packages/core/src/components/table/table-component-expandable-rows.stories.tsx
@@ -58,6 +58,9 @@ export default {
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     responsiveDesign: {
       name: 'Responsive Table',
@@ -87,6 +90,9 @@ export default {
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     column1Width: {
       name: 'Column 1 width',
@@ -134,6 +140,7 @@ export default {
       table: {
         defaultValue: { summary: 'auto' },
       },
+
     },
     autoCollapse: {
       name: 'Auto Collapse',
@@ -145,6 +152,7 @@ export default {
         defaultValue: { summary: false },
       },
     },
+
   },
 
   args: {
@@ -215,14 +223,14 @@ const ExpandableRowTemplate = ({
           <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
           <div slot="expand-row">Hello to you too</div>
         </tds-table-body-row-expandable>
-        <tds-table-body-row-expandable auto-collapse="${autoCollapse}">
+        <tds-table-body-row-expandable auto-collapse="${autoCollapse}" row-id="3">
           <tds-body-cell cell-value="Test value 9" cell-key="truck"></tds-body-cell>
           <tds-body-cell cell-value="Test value 10" cell-key="driver"></tds-body-cell>
           <tds-body-cell cell-value="Test value 11" cell-key="country"></tds-body-cell>
           <tds-body-cell cell-value="Test value 12" cell-key="mileage"></tds-body-cell>
           <div slot="expand-row"><tds-button type="primary" text="Call to action"></tds-button></div>
         </tds-table-body-row-expandable>
-        <tds-table-body-row-expandable expanded="${expanded}" overflow="${overflow}" auto-collapse="${autoCollapse}" row-id="1">
+        <tds-table-body-row-expandable expanded="${expanded}" overflow="${overflow}" auto-collapse="${autoCollapse}" row-id="4">
           <tds-body-cell cell-value="Demo overflow 1" cell-key="truck"></tds-body-cell>
           <tds-body-cell cell-value="Demo overflow 2" cell-key="driver"></tds-body-cell>
           <tds-body-cell cell-value="Demo overflow 3" cell-key="country"></tds-body-cell>
@@ -240,16 +248,18 @@ const ExpandableRowTemplate = ({
 
   <!-- Script for demo purposes. -->
   <script>
+      (function(){
+        let tableRowElements = document.querySelectorAll("tds-table-body-row-expandable");
 
-  tableRowElementAll = document.querySelectorAll("tds-table-body-row-expandable");
-
-  for (let i = 0; i < tableRowElementAll.length; i++) {
-    tableRowElementAll[i].addEventListener("tdsChange", (event) => {
-      console.log("Row with id: ", event.detail.rowId, " is ", event.detail.isExpanded);
-    });
-  }
-
-</script>
+        for (let i = 0; i < tableRowElements.length; i++) {
+          tableRowElements[i].addEventListener("tdsChange", (event) => {
+            if (event.detail.isExpanded) {
+              console.log("Row with id:", event.detail.rowId, "is", event.detail.isExpanded);
+            }
+          });
+        }
+      })();
+    </script>
 `);
 
 export const ExpandableRows = ExpandableRowTemplate.bind({});