Merge branch 'main' of https://github.com/WWWPiramalFinanceCOM/pirama…

…lfinance into feature/optimization
WWWPiramalFinanceCOM · Oct 9, 2024 · 167137c · 167137c
2 parents a954c37 + d518da1
commit 167137c
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 64 deletions.
diff --git a/blocks/board/board.css b/blocks/board/board.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/board/board.js b/blocks/board/board.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
@@ -106,21 +106,6 @@
             }
           }
         },
-        {
-          "title": "Table",
-          "id": "table",
-          "plugins": {
-            "xwalk": {
-              "page": {
-                "resourceType": "core/franklin/components/block/v1/block",
-                "template": {
-                  "name": "Table",
-                  "model": "table"
-                }
-              }
-            }
-          }
-        },
         {
           "title": "Cards",
           "id": "cards",
@@ -166,6 +151,52 @@
             }
           }
         },
+        {
+          "title": "Board",
+          "id": "board",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block",
+                "template": {
+                  "name": "Board",
+                  "filter": "board",
+                  "model": "board"
+                }
+              }
+            }
+          }
+        },
+        {
+          "title": "Board Item",
+          "id": "board-item",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Board Item",
+                  "model": "board-item"
+                }
+              }
+            }
+          }
+        },
+        {
+          "title": "Board Item 2",
+          "id": "board-item-2",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block/item",
+                "template": {
+                  "name": "Board Item 2",
+                  "model": "board-item-2"
+                }
+              }
+            }
+          }
+        },
         {
           "title": "RTE",
           "id": "rte",

diff --git a/component-filters.json b/component-filters.json
@@ -51,10 +51,10 @@
       "button",
       "title",
       "hero",
-      "table",
       "cards",
       "columns",
       "breadcrumb",
+      "board",
       "rte",
       "city-list",
       "imgwithlink",
@@ -115,6 +115,10 @@
     "id": "cards",
     "components": ["card"]
   },
+  {
+    "id": "board",
+    "components": ["board-item", "board-item-2"]
+  },
   {
     "id": "carousel",
     "components": [

diff --git a/component-models.json b/component-models.json
@@ -207,7 +207,51 @@
     ]
   },
   {
-    "id": "table",
+    "id": "breadcrumb",
+    "fields": [
+      {
+        "component": "boolean",
+        "valueType": "boolean",
+        "label": "Hide Breadcrumb",
+        "name": "hideBreadcrumb"
+      },
+      {
+        "component": "text-input",
+        "valueType": "number",
+        "label": "Navigation Start Level",
+        "name": "navigationStartLevel",
+        "value": ""
+      },
+      {
+        "component": "boolean",
+        "valueType": "boolean",
+        "label": "Hide Current Page",
+        "name": "hideCurrentPage"
+      },
+      {
+        "component": "text",
+        "name": "breadcrumb-class",
+        "label": "Breadcrumb Class",
+        "valueType": "string"
+      },
+      {
+        "component": "text",
+        "name": "breadcrumb-text",
+        "label": "Breadcrumb Text",
+        "valueType": "string",
+        "multi": true
+      },
+      {
+        "component": "text",
+        "name": "breadcrumb-url",
+        "label": "Breadcrumb URL",
+        "valueType": "string",
+        "multi": true
+      }
+    ]
+  },
+  {
+    "id": "board",
     "fields": [
       {
         "component": "multiselect",
@@ -244,64 +288,37 @@
             ]
           }
         ]
-      },
-      {
-        "component": "text",
-        "valueType": "number",
-        "label": "Rows",
-        "name": "rows",
-        "value": ""
-      },
-      {
-        "component": "text",
-        "valueType": "number",
-        "label": "Columns",
-        "name": "columns",
-        "value": ""
       }
     ]
   },
   {
-    "id": "breadcrumb",
+    "id": "board-item",
     "fields": [
       {
-        "component": "boolean",
-        "valueType": "boolean",
-        "label": "Hide Breadcrumb",
-        "name": "hideBreadcrumb"
-      },
-      {
-        "component": "text-input",
-        "valueType": "number",
-        "label": "Navigation Start Level",
-        "name": "navigationStartLevel",
-        "value": ""
-      },
-      {
-        "component": "boolean",
-        "valueType": "boolean",
-        "label": "Hide Current Page",
-        "name": "hideCurrentPage"
-      },
-      {
-        "component": "text",
-        "name": "breadcrumb-class",
-        "label": "Breadcrumb Class",
-        "valueType": "string"
-      },
+        "component": "richtext",
+        "name": "rte",
+        "label": "Board Item",
+        "valueType": "string",
+        "raw": true
+      }
+    ]
+  },
+  {
+    "id": "board-item-2",
+    "fields": [
       {
-        "component": "text",
-        "name": "breadcrumb-text",
-        "label": "Breadcrumb Text",
+        "component": "richtext",
+        "name": "rte",
+        "label": "Board Item 1",
         "valueType": "string",
-        "multi": true
+        "raw": true
       },
       {
-        "component": "text",
-        "name": "breadcrumb-url",
-        "label": "Breadcrumb URL",
+        "component": "richtext",
+        "name": "rte2",
+        "label": "Board Item 2",
         "valueType": "string",
-        "multi": true
+        "raw": true
       }
     ]
   },