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": [