From 37b39baba47335b979aab6ea7cf8c77a42b0f415 Mon Sep 17 00:00:00 2001
From: snowiewdev <snowiewongdev@gmail.com>
Date: Tue, 27 Jun 2023 11:04:09 -0700
Subject: [PATCH] [#311] patch fix for table fragment not loading as block,
 restyling table block

---
 blocks/header/header.css |  6 ++++++
 blocks/table/table.css   | 34 +++++++++++++++++++++++++++++++++-
 blocks/table/table.js    |  1 +
 scripts/scripts.js       | 16 ++++++++++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index c9915598..806b371a 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -11,6 +11,12 @@
   }
 }
 
+/* fix for fragment rendering main twice causing extra div
+* can be removed if the fragement bug is fixed */
+.header-wrapper > .header:not(.block) {
+  display: none;
+}
+
 .gnav-wrapper {
   position: relative;
   background: #FFF;
diff --git a/blocks/table/table.css b/blocks/table/table.css
index d0bbac48..985e8bbc 100644
--- a/blocks/table/table.css
+++ b/blocks/table/table.css
@@ -1,5 +1,37 @@
+.table {
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--bg-color-grey);
+  padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xs);
+}
+
+.table tbody {
+  width: 100%;
+}
+
+.table td,
+body main .table td p {
+  font-size: var(--type-body-s-size);
+  line-height: var(--type-body-s-lh);
+  color: var(--color-light-grey-600);
+}
+
 .table td {
-  color: #768390;
+  padding: var(--spacing-xxs) var(--spacing-xxs) 0 var(--spacing-xxs);
+}
+
+body main .table td p {
+  padding-left: 0; 
+}
+
+.table tr:first-of-type {
+  border-bottom: 1px solid var(--bg-color-grey);
+}
+
+.table tr:first-of-type td {
+  text-transform: uppercase;
+  padding-top: var(--spacing-xxs);
+  padding-bottom: var(--spacing-xxs);
 }
 
 .table td:first-child {
diff --git a/blocks/table/table.js b/blocks/table/table.js
index 87a0284f..7bb73334 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -1,3 +1,4 @@
 export default function decorate() {
   // nothing to do here
+  // ?? console.log here for block by fragment will have no effect
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 492f0615..ae58a9cd 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -740,6 +740,20 @@ export async function decorateGuideTemplateCodeBlock() {
   });
 }
 
+// patch fix for table not being rendered as block in fragment
+export function decorateFragmentTable(main) {
+  if (!main) return;
+  const tables = main.querySelectorAll('table');
+  if (tables) {
+    tables.forEach((table) => {
+      if (table.classList.contains('block')) return;
+      const tableWrapper = createTag('div', { class: 'table' });
+      table.parentNode.insertBefore(tableWrapper, table);
+      tableWrapper.appendChild(table);
+    });
+  }
+}
+
 export function decorateGuideTemplate(main) {
   if (!document.body.classList.contains('guides-template') || !main) return;
   addMessageBoxOnGuideTemplate(main);
@@ -747,6 +761,7 @@ export function decorateGuideTemplate(main) {
   decorateGuideTemplateHero(main);
   decorateGuideTemplateLinks(main);
   decorateGuideTemplateCodeBlock();
+  decorateFragmentTable(main); // ususally only use fragment in doc detail
 }
 
 /**
@@ -823,6 +838,7 @@ export function decorateMain(main) {
   decorateGuideTemplate(main);
   decorateBlocks(main);
   decorateTitleSection(main);
+  // decorateTableBlock(main);
 }
 
 /**