columns2 block added

WWWPiramalFinanceCOM · Oct 9, 2024 · 0c9a40f · 0c9a40f
1 parent a81e7d6
commit 0c9a40f
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 1 deletion.
diff --git a/blocks/table/table.css b/blocks/table/table.css
@@ -0,0 +1,67 @@
+.table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  font-size: var(--body-font-size-xs);
+}
+
+@media (width >= 600px) {
+  .table table {
+    font-size: var(--body-font-size-s);
+  }
+}
+
+@media (width >= 900px) {
+  .table table {
+    font-size: var(--body-font-size-m);
+  }
+}
+
+.table table thead tr {
+  border-top: 2px solid #dadada;
+  border-bottom: 2px solid #dadada;
+}
+
+.table table tbody tr {
+  border-bottom: 1px solid #dadada;
+}
+
+.table table th {
+  font-weight: 700;
+}
+
+.table table th,
+.table table td {
+  padding: 0.5em;
+  text-align: left;
+}
+
+.table table th p,
+.table table td p {
+  margin: 0;
+}
+
+.table table td p + p {
+  margin-top: 0.25em;
+}
+
+/* no header variant */
+.table.no-header table tbody tr {
+  border-top: 1px solid #dadada;
+}
+
+/* striped variant */
+.table.striped tbody tr:nth-child(odd) {
+  background-color: var(--light-color);
+}
+
+/* bordered variant */
+.table.bordered table th,
+.table.bordered table td {
+  border: 1px solid #dadada;
+}
diff --git a/blocks/table/table.js b/blocks/table/table.js
@@ -0,0 +1,34 @@
+/*
+ * Table Block
+ * Recreate a table
+ * https://www.hlx.live/developer/block-collection/table
+ */
+
+function buildCell(rowIndex) {
+  const cell = rowIndex ? document.createElement('td') : document.createElement('th');
+  if (!rowIndex) cell.setAttribute('scope', 'col');
+  return cell;
+}
+
+export default async function decorate(block) {
+  const table = document.createElement('table');
+  const thead = document.createElement('thead');
+  const tbody = document.createElement('tbody');
+
+  const header = !block.classList.contains('no-header');
+  if (header) table.append(thead);
+  table.append(tbody);
+
+  [...block.children].forEach((child, i) => {
+    const row = document.createElement('tr');
+    if (header && i === 0) thead.append(row);
+    else tbody.append(row);
+    [...child.children].forEach((col) => {
+      const cell = buildCell(header ? i : i + 1);
+      cell.innerHTML = col.innerHTML;
+      row.append(cell);
+    });
+  });
+  block.innerHTML = '';
+  block.append(table);
+}
diff --git a/component-definition.json b/component-definition.json
@@ -137,6 +137,96 @@
             }
           }
         },
+        {
+          "title": "Columns 2",
+          "id": "columns2",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Columns 2",
+                  "model": "columns2"
+                }
+              }
+            }
+          }
+        },
+        {
+          "title": "Columns 3",
+          "id": "columns3",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Columns 3",
+                  "model": "columns3"
+                }
+              }
+            }
+          }
+        },
+        {
+          "title": "Columns 4",
+          "id": "columns4",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Columns 4",
+                  "model": "columns4"
+                }
+              }
+            }
+          }
+        },
+        {
+          "title": "Columns 5",
+          "id": "columns5",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Columns 5",
+                  "model": "columns5"
+                }
+              }
+            }
+          }
+        },
+        {
+          "title": "Columns 6",
+          "id": "columns6",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Columns 6",
+                  "model": "columns6"
+                }
+              }
+            }
+          }
+        },
+        {
+          "title": "Columns 7",
+          "id": "columns7",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Columns 7",
+                  "model": "columns7"
+                }
+              }
+            }
+          }
+        },
         {
           "title": "Cards",
           "id": "cards",

diff --git a/component-filters.json b/component-filters.json
@@ -117,7 +117,16 @@
   },
   {
     "id": "table",
-    "components": ["row"]
+    "components": [
+      "row",
+      "columns1",
+      "columns2",
+      "columns3",
+      "columns4",
+      "columns5",
+      "columns6",
+      "columns7"
+    ]
   },
   {
     "id": "carousel",

diff --git a/component-models.json b/component-models.json
@@ -273,6 +273,25 @@
       }
     ]
   },
+  {
+    "id": "columns2",
+    "fields": [
+      {
+        "component": "richtext",
+        "valueType": "string",
+        "label": "Column 1",
+        "name": "column1",
+        "value": ""
+      },
+      {
+        "component": "richtext",
+        "valueType": "string",
+        "label": "Column 2",
+        "name": "column2",
+        "value": ""
+      }
+    ]
+  },
   {
     "id": "breadcrumb",
     "fields": [