fix(GovAlta#1466): apply padding when variant=relaxed

syedszeeshan · Apr 18, 2024 · d91fb85 · d91fb85
1 parent 3b1a46a
commit d91fb85
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/libs/web-components/src/assets/css/components.css b/libs/web-components/src/assets/css/components.css
@@ -95,6 +95,10 @@ goa-table td {
   border-bottom: 1px solid var(--goa-color-greyscale-200);
 }
 
+goa-table td.relaxed {
+  padding: 2rem;
+}
+
 goa-table thead th {
   background-color: var(--goa-color-greyscale-white);
   color: var(--goa-color-text-secondary);

diff --git a/libs/web-components/src/components/table/Table.svelte b/libs/web-components/src/components/table/Table.svelte
@@ -51,6 +51,15 @@
 
     // React has everything nested in a table to prevent invalid DOM errors
     _isTableRoot = slot.assignedElements()[0].tagName === "TABLE";
+
+    if(slot) {
+      addClassRelaxedTds(slot);
+
+      slot.addEventListener("slotchange", () => {
+        addClassRelaxedTds(slot);
+      });
+    }
+
   });
 
   // Functions
@@ -113,6 +122,27 @@
       }),
     );
   }
+
+  function parentHasRelaxedClass(slot: HTMLSlotElement): boolean {
+    const parentNode = slot.parentNode;
+    if (parentNode instanceof HTMLElement) {
+      return parentNode.classList.contains('relaxed');
+    }
+    return false;
+  }
+
+  function addClassRelaxedTds(slot: HTMLSlotElement) {
+    if(parentHasRelaxedClass(slot)) {
+      const tds = slot
+                  ?.assignedElements()
+                  .find((el) => el.tagName === "TBODY" || el.tagName === "TABLE")
+                  ?.getElementsByTagName("TD") || [];
+
+      for (let i = 0; i < tds?.length; i++) {
+        tds[i].classList.add('relaxed');
+      }
+    }
+  }
 </script>
 
 <div
@@ -127,7 +157,7 @@
   {#if _isTableRoot}
     <slot />
   {:else}
-    <table style={width && "width: 100%;"}>
+    <table style={width && "width: 100%;"} class="{variant}">
       <slot />
     </table>
   {/if}
@@ -145,4 +175,4 @@
   table {
     border-collapse: collapse;
   }
-</style>
+</style>