Add expanded-row class and styling to expando-row (#388)

- Feat: Add expanded-row class and styling to expando-row
minvws · Oct 3, 2023 · 15e6cfc · 15e6cfc
1 parent 8377b2e
commit 15e6cfc
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 0 deletions.
diff --git a/docs/documentation/components/table-expando-row.html b/docs/documentation/components/table-expando-row.html
@@ -367,6 +367,27 @@ <h2>Instelbare variabelen</h2>
                     <td>Subtitel binnen de openklapbare cel - h2</td>
                     <td>SASS</td>
                   </tr>
+                  <tr>
+                    <td>--expando-rows-row-background-color</td>
+                    <td><a href="../variables.html#background-color">background-color</a></td>
+                    <td>transparent</td>
+                    <td>De openklapbare rij</td>
+                    <td>CSS</td>
+                  </tr>
+                  <tr>
+                    <td>--expando-rows-row-striping-background-color</td>
+                    <td><a href="../variables.html#background-color">background-color</a></td>
+                    <td>var(--table-row-background-color-striping, initial)</td>
+                    <td>De openklapbare rij</td>
+                    <td>CSS</td>
+                  </tr>
+                  <tr>
+                    <td>--expando-rows-row-font-weight</td>
+                    <td><a href="../variables.html#font-weight">font-weight</a></td>
+                    <td>bold</td>
+                    <td>De openklapbare rij</td>
+                    <td>CSS</td>
+                  </tr>
                 </tbody>
               </table>
             </div>

diff --git a/manon/expando-rows.js b/manon/expando-rows.js
@@ -123,19 +123,22 @@ function initExpandoButton(button) {
 
   button.addEventListener("click", function () {
     var expand = button.getAttribute("aria-expanded") === "false";
+
     if (expand) {
       button.innerText = closeLabel;
 
       button.setAttribute("aria-expanded", "true");
       button.classList.remove.apply(button.classList, iconOpenClasses);
       button.classList.add.apply(button.classList, iconCloseClasses);
+      button.parentElement.parentElement.classList.add("expanded-row")
       row.removeAttribute("hidden");
     } else {
       button.innerText = openLabel;
 
       button.setAttribute("aria-expanded", "false");
       button.classList.remove.apply(button.classList, iconCloseClasses);
       button.classList.add.apply(button.classList, iconOpenClasses);
+      button.parentElement.parentElement.classList.remove("expanded-row")
       row.setAttribute("hidden", "");
     }
   });

diff --git a/manon/table-expando-rows-variables.scss b/manon/table-expando-rows-variables.scss
@@ -16,4 +16,12 @@
 
   /* After breakpoint */
   --expando-rows-table-cell-after-breakpoint-padding: 2rem 3rem;
+
+  /* Parent row styling when their content is expanded */
+  --expando-rows-row-background-color: transparent;
+  --expando-rows-row-striping-background-color: var(
+    --table-row-background-color-striping,
+    initial
+  );
+  --expando-rows-row-font-weight: bold;
 }
diff --git a/manon/table-expando-rows.scss b/manon/table-expando-rows.scss
@@ -43,3 +43,14 @@ table {
     }
   }
 }
+
+.expanded-row {
+  background-color: var(--expando-rows-row-background-color);
+  font-weight: var(--expando-rows-row-font-weight);
+
+  /* Zebra striping with opacity to keep background color. e.g for warnings or errors */
+  &:nth-child(even):not(.odd),
+  &:nth-child(odd).even {
+    background-color: var(--expando-rows-row-striping-background-color);
+  }
+}