From 4a0845cbc02d884a495bbcb86d7386ba64838268 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 10:58:58 +0530 Subject: [PATCH 1/9] row block added for table --- component-definition.json | 18 +++++++++++++++++- component-filters.json | 4 ++++ component-models.json | 19 +++++++++++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/component-definition.json b/component-definition.json index 75022c93ef..a2a9022062 100644 --- a/component-definition.json +++ b/component-definition.json @@ -115,7 +115,23 @@ "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Table", - "model": "table" + "model": "table", + "filter": "table" + } + } + } + } + }, + { + "title": "Row", + "id": "row", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/franklin/components/block/v1/block/item", + "template": { + "name": "Row", + "model": "row" } } } diff --git a/component-filters.json b/component-filters.json index 5091020955..d4c3698f26 100644 --- a/component-filters.json +++ b/component-filters.json @@ -115,6 +115,10 @@ "id": "cards", "components": ["card"] }, + { + "id": "table", + "components": ["row"] + }, { "id": "carousel", "components": [ diff --git a/component-models.json b/component-models.json index 62962cd2a4..506e6c4875 100644 --- a/component-models.json +++ b/component-models.json @@ -261,6 +261,25 @@ } ] }, + { + "id": "row", + "fields": [ + { + "component": "text", + "valueType": "number", + "label": "Rows", + "name": "rows", + "value": "" + }, + { + "component": "text", + "valueType": "number", + "label": "Columns", + "name": "columns", + "value": "" + } + ] + }, { "id": "breadcrumb", "fields": [ From a81e7d657c918287b558b8564fbda21f37e4a5d3 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 11:12:31 +0530 Subject: [PATCH 2/9] Row Modify --- component-models.json | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/component-models.json b/component-models.json index 506e6c4875..038126d51e 100644 --- a/component-models.json +++ b/component-models.json @@ -244,20 +244,6 @@ ] } ] - }, - { - "component": "text", - "valueType": "number", - "label": "Rows", - "name": "rows", - "value": "" - }, - { - "component": "text", - "valueType": "number", - "label": "Columns", - "name": "columns", - "value": "" } ] }, @@ -266,16 +252,23 @@ "fields": [ { "component": "text", - "valueType": "number", - "label": "Rows", - "name": "rows", + "valueType": "string", + "label": "Column 0", + "name": "column0", "value": "" }, { - "component": "text", - "valueType": "number", - "label": "Columns", - "name": "columns", + "component": "richtext", + "valueType": "string", + "label": "Column 1", + "name": "column1", + "value": "" + }, + { + "component": "richtext", + "valueType": "string", + "label": "Column 2", + "name": "column2", "value": "" } ] From 0c9a40fb504870430b2617aee9166d6e4d25fc99 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 11:34:17 +0530 Subject: [PATCH 3/9] columns2 block added --- blocks/table/table.css | 67 +++++++++++++++++++++++++++++ blocks/table/table.js | 34 +++++++++++++++ component-definition.json | 90 +++++++++++++++++++++++++++++++++++++++ component-filters.json | 11 ++++- component-models.json | 19 +++++++++ 5 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 blocks/table/table.css create mode 100644 blocks/table/table.js diff --git a/blocks/table/table.css b/blocks/table/table.css new file mode 100644 index 0000000000..22bacd710b --- /dev/null +++ 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 new file mode 100644 index 0000000000..9dfc55dfbd --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/component-definition.json b/component-definition.json index a2a9022062..3fd43f6d36 100644 --- 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 index d4c3698f26..cefa058233 100644 --- 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 index 038126d51e..4784747e9d 100644 --- 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": [ From a85df8d4cc6d16868572666c63160bc710cb7d5f Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 11:39:50 +0530 Subject: [PATCH 4/9] cloumns added --- component-models.json | 95 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/component-models.json b/component-models.json index 4784747e9d..4a93ed0d90 100644 --- a/component-models.json +++ b/component-models.json @@ -292,6 +292,101 @@ } ] }, + { + "id": "columns3", + "fields": [ + { + "component": "richtext", + "valueType": "string", + "label": "Column 1", + "name": "column1", + "value": "" + }, + { + "component": "richtext", + "valueType": "string", + "label": "Column 2", + "name": "column2", + "value": "" + } + ] + }, + { + "id": "columns4", + "fields": [ + { + "component": "richtext", + "valueType": "string", + "label": "Column 1", + "name": "column1", + "value": "" + }, + { + "component": "richtext", + "valueType": "string", + "label": "Column 2", + "name": "column2", + "value": "" + } + ] + }, + { + "id": "columns5", + "fields": [ + { + "component": "richtext", + "valueType": "string", + "label": "Column 1", + "name": "column1", + "value": "" + }, + { + "component": "richtext", + "valueType": "string", + "label": "Column 2", + "name": "column2", + "value": "" + } + ] + }, + { + "id": "columns6", + "fields": [ + { + "component": "richtext", + "valueType": "string", + "label": "Column 1", + "name": "column1", + "value": "" + }, + { + "component": "richtext", + "valueType": "string", + "label": "Column 2", + "name": "column2", + "value": "" + } + ] + }, + { + "id": "columns7", + "fields": [ + { + "component": "richtext", + "valueType": "string", + "label": "Column 1", + "name": "column1", + "value": "" + }, + { + "component": "richtext", + "valueType": "string", + "label": "Column 2", + "name": "column2", + "value": "" + } + ] + }, { "id": "breadcrumb", "fields": [ From 0e974c5b4e6c966400320b21e7ef6032d1e05109 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 11:43:34 +0530 Subject: [PATCH 5/9] cloumns added --- component-filters.json | 1 - 1 file changed, 1 deletion(-) diff --git a/component-filters.json b/component-filters.json index cefa058233..e55e8cba7b 100644 --- a/component-filters.json +++ b/component-filters.json @@ -119,7 +119,6 @@ "id": "table", "components": [ "row", - "columns1", "columns2", "columns3", "columns4", From cbafd71d43b57174add2fdb4c7eee7955fefcc98 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 11:49:17 +0530 Subject: [PATCH 6/9] cloumns added --- component-definition.json | 90 ------------------------------ component-filters.json | 10 +--- component-models.json | 114 -------------------------------------- 3 files changed, 1 insertion(+), 213 deletions(-) diff --git a/component-definition.json b/component-definition.json index 3fd43f6d36..a2a9022062 100644 --- a/component-definition.json +++ b/component-definition.json @@ -137,96 +137,6 @@ } } }, - { - "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 index e55e8cba7b..d4c3698f26 100644 --- a/component-filters.json +++ b/component-filters.json @@ -117,15 +117,7 @@ }, { "id": "table", - "components": [ - "row", - "columns2", - "columns3", - "columns4", - "columns5", - "columns6", - "columns7" - ] + "components": ["row"] }, { "id": "carousel", diff --git a/component-models.json b/component-models.json index 4a93ed0d90..038126d51e 100644 --- a/component-models.json +++ b/component-models.json @@ -273,120 +273,6 @@ } ] }, - { - "id": "columns2", - "fields": [ - { - "component": "richtext", - "valueType": "string", - "label": "Column 1", - "name": "column1", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 2", - "name": "column2", - "value": "" - } - ] - }, - { - "id": "columns3", - "fields": [ - { - "component": "richtext", - "valueType": "string", - "label": "Column 1", - "name": "column1", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 2", - "name": "column2", - "value": "" - } - ] - }, - { - "id": "columns4", - "fields": [ - { - "component": "richtext", - "valueType": "string", - "label": "Column 1", - "name": "column1", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 2", - "name": "column2", - "value": "" - } - ] - }, - { - "id": "columns5", - "fields": [ - { - "component": "richtext", - "valueType": "string", - "label": "Column 1", - "name": "column1", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 2", - "name": "column2", - "value": "" - } - ] - }, - { - "id": "columns6", - "fields": [ - { - "component": "richtext", - "valueType": "string", - "label": "Column 1", - "name": "column1", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 2", - "name": "column2", - "value": "" - } - ] - }, - { - "id": "columns7", - "fields": [ - { - "component": "richtext", - "valueType": "string", - "label": "Column 1", - "name": "column1", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 2", - "name": "column2", - "value": "" - } - ] - }, { "id": "breadcrumb", "fields": [ From da3b079de3b0a1b310083e0505e69c7339f939c1 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 12:52:29 +0530 Subject: [PATCH 7/9] Code revret --- component-definition.json | 31 ------------------ component-filters.json | 5 --- component-models.json | 67 --------------------------------------- 3 files changed, 103 deletions(-) diff --git a/component-definition.json b/component-definition.json index a2a9022062..be03d35f9d 100644 --- a/component-definition.json +++ b/component-definition.json @@ -106,37 +106,6 @@ } } }, - { - "title": "Table", - "id": "table", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/franklin/components/block/v1/block", - "template": { - "name": "Table", - "model": "table", - "filter": "table" - } - } - } - } - }, - { - "title": "Row", - "id": "row", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/franklin/components/block/v1/block/item", - "template": { - "name": "Row", - "model": "row" - } - } - } - } - }, { "title": "Cards", "id": "cards", diff --git a/component-filters.json b/component-filters.json index d4c3698f26..07ffcadb93 100644 --- a/component-filters.json +++ b/component-filters.json @@ -51,7 +51,6 @@ "button", "title", "hero", - "table", "cards", "columns", "breadcrumb", @@ -115,10 +114,6 @@ "id": "cards", "components": ["card"] }, - { - "id": "table", - "components": ["row"] - }, { "id": "carousel", "components": [ diff --git a/component-models.json b/component-models.json index 038126d51e..02676108df 100644 --- a/component-models.json +++ b/component-models.json @@ -206,73 +206,6 @@ } ] }, - { - "id": "table", - "fields": [ - { - "component": "multiselect", - "name": "classes", - "label": "Style", - "valueType": "string", - "required": true, - "maxSize": 2, - "options": [ - { - "name": "Theme", - "children": [ - { - "name": "Light", - "value": "light" - }, - { - "name": "Dark", - "value": "dark" - } - ] - }, - { - "name": "Alignment", - "children": [ - { - "name": "Left", - "value": "left" - }, - { - "name": "Right", - "value": "right" - } - ] - } - ] - } - ] - }, - { - "id": "row", - "fields": [ - { - "component": "text", - "valueType": "string", - "label": "Column 0", - "name": "column0", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 1", - "name": "column1", - "value": "" - }, - { - "component": "richtext", - "valueType": "string", - "label": "Column 2", - "name": "column2", - "value": "" - } - ] - }, { "id": "breadcrumb", "fields": [ From 3e1de0a5a26c1842c3f560599b37ab037f65c545 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 12:58:41 +0530 Subject: [PATCH 8/9] board-item block added --- component-definition.json | 31 +++++++++++++++++++++++ component-filters.json | 5 ++++ component-models.json | 53 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 89 insertions(+) diff --git a/component-definition.json b/component-definition.json index be03d35f9d..e3e5603e16 100644 --- a/component-definition.json +++ b/component-definition.json @@ -151,6 +151,37 @@ } } }, + { + "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": "RTE", "id": "rte", diff --git a/component-filters.json b/component-filters.json index 07ffcadb93..7ba91cfc2c 100644 --- a/component-filters.json +++ b/component-filters.json @@ -54,6 +54,7 @@ "cards", "columns", "breadcrumb", + "board", "rte", "city-list", "imgwithlink", @@ -114,6 +115,10 @@ "id": "cards", "components": ["card"] }, + { + "id": "board", + "components": ["board-item"] + }, { "id": "carousel", "components": [ diff --git a/component-models.json b/component-models.json index 02676108df..c715915a8b 100644 --- a/component-models.json +++ b/component-models.json @@ -250,6 +250,59 @@ } ] }, + { + "id": "board", + "fields": [ + { + "component": "multiselect", + "name": "classes", + "label": "Style", + "valueType": "string", + "required": true, + "maxSize": 2, + "options": [ + { + "name": "Theme", + "children": [ + { + "name": "Light", + "value": "light" + }, + { + "name": "Dark", + "value": "dark" + } + ] + }, + { + "name": "Alignment", + "children": [ + { + "name": "Left", + "value": "left" + }, + { + "name": "Right", + "value": "right" + } + ] + } + ] + } + ] + }, + { + "id": "board-item", + "fields": [ + { + "component": "richtext", + "name": "rte", + "label": "Board Item", + "valueType": "string", + "raw": true + } + ] + }, { "id": "rte", "fields": [ From d518da13b92ef0ab2d346b135187bd41559c2e39 Mon Sep 17 00:00:00 2001 From: Om Gupta Date: Wed, 9 Oct 2024 13:10:54 +0530 Subject: [PATCH 9/9] board-item block added --- blocks/{table/table.css => board/board.css} | 0 blocks/{table/table.js => board/board.js} | 0 component-definition.json | 15 +++++++++++++++ component-filters.json | 2 +- component-models.json | 19 +++++++++++++++++++ 5 files changed, 35 insertions(+), 1 deletion(-) rename blocks/{table/table.css => board/board.css} (100%) rename blocks/{table/table.js => board/board.js} (100%) diff --git a/blocks/table/table.css b/blocks/board/board.css similarity index 100% rename from blocks/table/table.css rename to blocks/board/board.css diff --git a/blocks/table/table.js b/blocks/board/board.js similarity index 100% rename from blocks/table/table.js rename to blocks/board/board.js diff --git a/component-definition.json b/component-definition.json index e3e5603e16..5c81cdaa82 100644 --- a/component-definition.json +++ b/component-definition.json @@ -182,6 +182,21 @@ } } }, + { + "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 index 7ba91cfc2c..873a068642 100644 --- a/component-filters.json +++ b/component-filters.json @@ -117,7 +117,7 @@ }, { "id": "board", - "components": ["board-item"] + "components": ["board-item", "board-item-2"] }, { "id": "carousel", diff --git a/component-models.json b/component-models.json index c715915a8b..5bcd9836fe 100644 --- a/component-models.json +++ b/component-models.json @@ -303,6 +303,25 @@ } ] }, + { + "id": "board-item-2", + "fields": [ + { + "component": "richtext", + "name": "rte", + "label": "Board Item 1", + "valueType": "string", + "raw": true + }, + { + "component": "richtext", + "name": "rte2", + "label": "Board Item 2", + "valueType": "string", + "raw": true + } + ] + }, { "id": "rte", "fields": [