From 76956b9b628af18b40642b01c9e08af8f224027c Mon Sep 17 00:00:00 2001 From: Edgar Montes Date: Tue, 9 May 2023 11:10:59 -0400 Subject: [PATCH 1/5] Setting up Table component. --- src/components/organisms/Table/Table.js | 136 ++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 src/components/organisms/Table/Table.js diff --git a/src/components/organisms/Table/Table.js b/src/components/organisms/Table/Table.js new file mode 100644 index 00000000..9dd51e8f --- /dev/null +++ b/src/components/organisms/Table/Table.js @@ -0,0 +1,136 @@ +import styles from '!!raw-loader!./Table.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + + +export default class Table extends HTMLElement { + static get observedAttributes() { + return ['data-show']; + } + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableContainer = document.createElement('div'); + this.table = document.createElement('table'); + this.tableHeader = document.createElement('thead'); + this.tableBody = document.createElement('tbody'); + this.tableMobile = document.createElement('div'); + this.tableMobileHeader = document.createElement('div'); + this.tableMobileBody = document.createElement('div'); + this.table.appendChild(this.tableHeader); + this.table.appendChild(this.tableBody); + this.tableMobile.appendChild(this.tableMobileHeader); + this.tableMobile.appendChild(this.tableMobileBody); + this.tableContainer.appendChild(this.table); + this.tableContainer.appendChild(this.tableMobile); + + shadow.addEventListener('slotchange', e => { + let tempElements = Array.from(this.children); + tempElements.forEach((node) => { + switch (node.tagName) { + case 'COD-TABLE-HEADER': + (this.getAttribute('data-show') == 'true') ? node.setAttribute('data-show', true) : 0; + (this.getAttribute('data-button-dark') == 'true') ? node.setAttribute('data-button-dark', true) : 0; + this.modalHeader.appendChild(node); + this.modalContent.appendChild(this.modalHeader); + break; + + case 'COD-TABLE-BODY': + this.modalBody.appendChild(node); + this.modalContent.appendChild(this.modalBody); + break; + + default: + break; + } + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + attributeChangedCallback(name, oldValue, newValue) { + let tempClasses = this.modal.className.split(' '); + let popValue = tempClasses.pop(); + (popValue != 'show') ? tempClasses.push(popValue) : 0; + if(newValue == 'true'){ + tempClasses.push('show'); + this.modal.style.display = 'block'; + if(this.getAttribute('data-static') != 'true'){ + this.modal.addEventListener('click', this._onClick); + } + this.modal.className = tempClasses.join(' '); + }else{ + this.modal.className = tempClasses.join(' '); + setTimeout(() => { this.modal.style.display = 'none'; }, 500); + } + + } + + connectedCallback() { + // Table attributes + + let id = this.getAttribute('data-id'); + let stripedRow = this.getAttribute('data-striped-row'); + let stripedCol = this.getAttribute('data-striped-col'); + let size = this.getAttribute('data-size'); + let verticalAlign = this.getAttribute('data-vertical-align'); + let extraClasses = this.getAttribute('data-extra-classes'); + let tableClasses = ['table']; + let tableMobileClasses = ['table mobile']; + if(extraClasses != undefined && extraClasses != null) { + tableClasses.push(extraClasses); + tableMobileClasses.push(extraClasses); + } + (size != undefined && size != null) ? modalDialogClasses.push(`modal-${size}`) : 0; + (verticalCentered == 'true') ? modalDialogClasses.push('modal-dialog-centered') : 0; + if (fullScreen != undefined && fullScreen != null){ + (fullScreen == 'always') ? modalDialogClasses.push('modal-fullscreen') : modalDialogClasses.push(`modal-fullscreen-${fullScreen}-down`); + } + if (bStatic == 'true'){ + this.modal.setAttribute('data-bs-backdrop', 'static'); + this.modal.setAttribute('data-bs-keyboard', 'false'); + } + if (show == 'true') { + this.modalClasses.push('show'); + this.modal.setAttribute('aria-modal', `true`); + } else { + this.modal.setAttribute('aria-modal', `false`); + } + (id != undefined && id != null) ? this.modal.id = id : 0; + this.modal.setAttribute('tabindex', -1); + this.modal.className = modalClasses.join(' '); + this.modalDialog.className = modalDialogClasses.join(' '); + this.modalContent.className = modalContentClasses.join(' '); + if (!this.shadowRoot.querySelector('div')) { + this.shadowRoot.appendChild(this.modal); + } + } + + disconnectedCallback() { + this.removeEventListener('click', this._onClick.bind(this)); + } + + _onClick(e) { + this.getRootNode().host.setAttribute('data-show', 'false'); + } +}; \ No newline at end of file From 6984dcefea8fd3d6bafa8518ee8344294f256aca Mon Sep 17 00:00:00 2001 From: Edgar Montes Date: Thu, 11 May 2023 15:07:47 -0400 Subject: [PATCH 2/5] Getting basic table render. --- src/components/atoms/TableBody/TableBody.css | 0 src/components/atoms/TableBody/TableBody.js | 41 ++++++++ .../atoms/TableBody/cod-table-body.js | 2 + src/components/atoms/TableCell/TableCell.css | 6 ++ src/components/atoms/TableCell/TableCell.js | 53 +++++++++++ .../atoms/TableCell/cod-table-cell.js | 2 + .../atoms/TableCellHeader/TableCellHeader.css | 7 ++ .../atoms/TableCellHeader/TableCellHeader.js | 53 +++++++++++ .../TableCellHeader/cod-table-cell-header.js | 2 + .../atoms/TableHeader/TableHeader.css | 0 .../atoms/TableHeader/TableHeader.js | 41 ++++++++ .../atoms/TableHeader/cod-table-header.js | 2 + src/components/atoms/TableRow/TableRow.css | 26 +++++ src/components/atoms/TableRow/TableRow.js | 52 ++++++++++ .../atoms/TableRow/cod-table-row.js | 2 + src/components/organisms/Table/Table.css | 0 src/components/organisms/Table/Table.js | 94 +++++-------------- src/components/organisms/Table/cod-table.js | 2 + src/stories/table.stories.js | 43 +++++++++ 19 files changed, 356 insertions(+), 72 deletions(-) create mode 100644 src/components/atoms/TableBody/TableBody.css create mode 100644 src/components/atoms/TableBody/TableBody.js create mode 100644 src/components/atoms/TableBody/cod-table-body.js create mode 100644 src/components/atoms/TableCell/TableCell.css create mode 100644 src/components/atoms/TableCell/TableCell.js create mode 100644 src/components/atoms/TableCell/cod-table-cell.js create mode 100644 src/components/atoms/TableCellHeader/TableCellHeader.css create mode 100644 src/components/atoms/TableCellHeader/TableCellHeader.js create mode 100644 src/components/atoms/TableCellHeader/cod-table-cell-header.js create mode 100644 src/components/atoms/TableHeader/TableHeader.css create mode 100644 src/components/atoms/TableHeader/TableHeader.js create mode 100644 src/components/atoms/TableHeader/cod-table-header.js create mode 100644 src/components/atoms/TableRow/TableRow.css create mode 100644 src/components/atoms/TableRow/TableRow.js create mode 100644 src/components/atoms/TableRow/cod-table-row.js create mode 100644 src/components/organisms/Table/Table.css create mode 100644 src/components/organisms/Table/cod-table.js create mode 100644 src/stories/table.stories.js diff --git a/src/components/atoms/TableBody/TableBody.css b/src/components/atoms/TableBody/TableBody.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/atoms/TableBody/TableBody.js b/src/components/atoms/TableBody/TableBody.js new file mode 100644 index 00000000..b023b92f --- /dev/null +++ b/src/components/atoms/TableBody/TableBody.js @@ -0,0 +1,41 @@ +import styles from '!!raw-loader!./TableBody.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + + +export default class TableBody extends HTMLElement { + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableBody = document.createElement('div'); + shadow.addEventListener( 'slotchange', ev => { + let tempElements = Array.from(this.children); + tempElements.forEach((node)=>{ + this.tableBody.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableBody); + } +}; \ No newline at end of file diff --git a/src/components/atoms/TableBody/cod-table-body.js b/src/components/atoms/TableBody/cod-table-body.js new file mode 100644 index 00000000..09d6c762 --- /dev/null +++ b/src/components/atoms/TableBody/cod-table-body.js @@ -0,0 +1,2 @@ +import TableBody from './TableBody'; +customElements.define('cod-table-body', TableBody); \ No newline at end of file diff --git a/src/components/atoms/TableCell/TableCell.css b/src/components/atoms/TableCell/TableCell.css new file mode 100644 index 00000000..3f401db7 --- /dev/null +++ b/src/components/atoms/TableCell/TableCell.css @@ -0,0 +1,6 @@ +.table-cell{ + padding: 0.5rem 0.5rem; + background-color: var(--bs-table-bg); + border-bottom-width: var(--bs-border-width); + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); +} \ No newline at end of file diff --git a/src/components/atoms/TableCell/TableCell.js b/src/components/atoms/TableCell/TableCell.js new file mode 100644 index 00000000..b8d9ce29 --- /dev/null +++ b/src/components/atoms/TableCell/TableCell.js @@ -0,0 +1,53 @@ +import styles from '!!raw-loader!./TableCell.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + + +export default class TableCell extends HTMLElement { + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableCell = document.createElement('div'); + this.tableCell.role = 'cell'; + shadow.addEventListener( 'slotchange', ev => { + let tempElements = Array.from(this.childNodes); + console.log(this.childNodes); + tempElements.forEach((node)=>{ + this.tableCell.appendChild(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableCell); + } + + connectedCallback() { + // TableCell attributes + let stripedCol = this.getAttribute('data-striped-col'); + let extraClasses = this.getAttribute('data-extra-classes'); + let tableCellClasses = ['table-cell']; + (stripedCol == 'true') ? tableCellClasses.push('table-striped-columns') : 0; + (extraClasses != undefined && extraClasses != null) ? tableCellClasses.push(extraClasses) : 0; + this.tableCell.className = tableCellClasses.join(' '); + } +}; \ No newline at end of file diff --git a/src/components/atoms/TableCell/cod-table-cell.js b/src/components/atoms/TableCell/cod-table-cell.js new file mode 100644 index 00000000..a36ffaa8 --- /dev/null +++ b/src/components/atoms/TableCell/cod-table-cell.js @@ -0,0 +1,2 @@ +import TableCell from './TableCell'; +customElements.define('cod-table-cell', TableCell); \ No newline at end of file diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.css b/src/components/atoms/TableCellHeader/TableCellHeader.css new file mode 100644 index 00000000..d9caede2 --- /dev/null +++ b/src/components/atoms/TableCellHeader/TableCellHeader.css @@ -0,0 +1,7 @@ +.table-cell-header{ + padding: 0.5rem 0.5rem; + background-color: var(--bs-table-bg); + border-bottom-width: var(--bs-border-width); + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); + font-weight: bold; +} \ No newline at end of file diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.js b/src/components/atoms/TableCellHeader/TableCellHeader.js new file mode 100644 index 00000000..3e10dfad --- /dev/null +++ b/src/components/atoms/TableCellHeader/TableCellHeader.js @@ -0,0 +1,53 @@ +import styles from '!!raw-loader!./TableCellHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + + +export default class TableCellHeader extends HTMLElement { + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableCellHeader = document.createElement('div'); + this.tableCellHeader.role = 'columnheader'; + shadow.addEventListener( 'slotchange', ev => { + let tempElements = Array.from(this.childNodes); + console.log(this.childNodes); + tempElements.forEach((node)=>{ + this.tableCellHeader.appendChild(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableCellHeader); + } + + connectedCallback() { + // tableCellHeader attributes + let stripedCol = this.getAttribute('data-striped-col'); + let extraClasses = this.getAttribute('data-extra-classes'); + let tableCellHeaderClasses = ['table-cell-header']; + (stripedCol == 'true') ? tableCellHeaderClasses.push('table-striped-columns') : 0; + (extraClasses != undefined && extraClasses != null) ? tableCellHeaderClasses.push(extraClasses) : 0; + this.tableCellHeader.className = tableCellHeaderClasses.join(' '); + } +}; \ No newline at end of file diff --git a/src/components/atoms/TableCellHeader/cod-table-cell-header.js b/src/components/atoms/TableCellHeader/cod-table-cell-header.js new file mode 100644 index 00000000..ef6d46f0 --- /dev/null +++ b/src/components/atoms/TableCellHeader/cod-table-cell-header.js @@ -0,0 +1,2 @@ +import TableCellHeader from './TableCellHeader'; +customElements.define('cod-table-cell-header', TableCellHeader); \ No newline at end of file diff --git a/src/components/atoms/TableHeader/TableHeader.css b/src/components/atoms/TableHeader/TableHeader.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/atoms/TableHeader/TableHeader.js b/src/components/atoms/TableHeader/TableHeader.js new file mode 100644 index 00000000..8b183a21 --- /dev/null +++ b/src/components/atoms/TableHeader/TableHeader.js @@ -0,0 +1,41 @@ +import styles from '!!raw-loader!./TableHeader.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + + +export default class TableHeader extends HTMLElement { + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableHeader = document.createElement('div'); + shadow.addEventListener( 'slotchange', ev => { + let tempElements = Array.from(this.children); + tempElements.forEach((node)=>{ + this.tableHeader.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableHeader); + } +}; \ No newline at end of file diff --git a/src/components/atoms/TableHeader/cod-table-header.js b/src/components/atoms/TableHeader/cod-table-header.js new file mode 100644 index 00000000..52f031e5 --- /dev/null +++ b/src/components/atoms/TableHeader/cod-table-header.js @@ -0,0 +1,2 @@ +import TableHeader from './TableHeader'; +customElements.define('cod-table-header', TableHeader); \ No newline at end of file diff --git a/src/components/atoms/TableRow/TableRow.css b/src/components/atoms/TableRow/TableRow.css new file mode 100644 index 00000000..9464edaa --- /dev/null +++ b/src/components/atoms/TableRow/TableRow.css @@ -0,0 +1,26 @@ +.table-row{ + border-color: inherit; + border-style: solid; + border-width: 0; + display: flex; +} + +.table-row cod-table-cell, .table-row cod-table-cell-header{ + flex: 1; +} + +.table-row cod-table-cell[colspan="2"], .table-row cod-table-cell-header[colspan="2"]{ + flex: 2; +} + +.table-row cod-table-cell[colspan="3"], .table-row cod-table-cell-header[colspan="3"]{ + flex: 3; +} + +.table-row cod-table-cell[colspan="4"], .table-row cod-table-cell-header[colspan="4"]{ + flex: 4; +} + +.table-row cod-table-cell[colspan="5"], .table-row cod-table-cell-header[colspan="5"]{ + flex: 5; +} \ No newline at end of file diff --git a/src/components/atoms/TableRow/TableRow.js b/src/components/atoms/TableRow/TableRow.js new file mode 100644 index 00000000..16590dbd --- /dev/null +++ b/src/components/atoms/TableRow/TableRow.js @@ -0,0 +1,52 @@ +import styles from '!!raw-loader!./TableRow.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; + + +export default class TableBody extends HTMLElement { + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.tableRow = document.createElement('div'); + this.tableRow.role = 'row'; + shadow.addEventListener( 'slotchange', ev => { + let tempElements = Array.from(this.children); + tempElements.forEach((node)=>{ + this.tableRow.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + + shadow.appendChild(this.tableRow); + } + + connectedCallback() { + // TableRow attributes + let stripedRow = this.getAttribute('data-striped-row'); + let extraClasses = this.getAttribute('data-extra-classes'); + let tableRowClasses = ['table-row']; + (stripedRow == 'true') ? tableRowClasses.push('table-striped') : 0; + (extraClasses != undefined && extraClasses != null) ? tableRowClasses.push(extraClasses) : 0; + this.tableRow.className = tableRowClasses.join(' '); + } +}; \ No newline at end of file diff --git a/src/components/atoms/TableRow/cod-table-row.js b/src/components/atoms/TableRow/cod-table-row.js new file mode 100644 index 00000000..5a2bfa36 --- /dev/null +++ b/src/components/atoms/TableRow/cod-table-row.js @@ -0,0 +1,2 @@ +import TableRow from './TableRow'; +customElements.define('cod-table-row', TableRow); \ No newline at end of file diff --git a/src/components/organisms/Table/Table.css b/src/components/organisms/Table/Table.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/organisms/Table/Table.js b/src/components/organisms/Table/Table.js index 9dd51e8f..5aae951a 100644 --- a/src/components/organisms/Table/Table.js +++ b/src/components/organisms/Table/Table.js @@ -10,9 +10,6 @@ template.innerHTML = ` export default class Table extends HTMLElement { - static get observedAttributes() { - return ['data-show']; - } constructor() { // Always call super first in constructor @@ -21,33 +18,29 @@ export default class Table extends HTMLElement { const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); this.tableContainer = document.createElement('div'); - this.table = document.createElement('table'); - this.tableHeader = document.createElement('thead'); - this.tableBody = document.createElement('tbody'); - this.tableMobile = document.createElement('div'); - this.tableMobileHeader = document.createElement('div'); - this.tableMobileBody = document.createElement('div'); + this.table = document.createElement('div'); + this.table.role = 'table'; + this.tableHeader = document.createElement('div'); + this.tableHeader.role = 'rowgroup'; + this.tableHeader.className = 'table-header'; + this.tableBody = document.createElement('div'); + this.tableBody.role = 'rowgroup'; this.table.appendChild(this.tableHeader); this.table.appendChild(this.tableBody); - this.tableMobile.appendChild(this.tableMobileHeader); - this.tableMobile.appendChild(this.tableMobileBody); this.tableContainer.appendChild(this.table); - this.tableContainer.appendChild(this.tableMobile); shadow.addEventListener('slotchange', e => { let tempElements = Array.from(this.children); tempElements.forEach((node) => { switch (node.tagName) { - case 'COD-TABLE-HEADER': - (this.getAttribute('data-show') == 'true') ? node.setAttribute('data-show', true) : 0; - (this.getAttribute('data-button-dark') == 'true') ? node.setAttribute('data-button-dark', true) : 0; - this.modalHeader.appendChild(node); - this.modalContent.appendChild(this.modalHeader); + case 'COD-TABLE-HEAD': + this.tableHeader.appendChild(node); + this.table.appendChild(this.tableHeader); break; case 'COD-TABLE-BODY': - this.modalBody.appendChild(node); - this.modalContent.appendChild(this.modalBody); + this.tableBody.appendChild(node); + this.table.appendChild(this.tableBody); break; default: @@ -68,27 +61,9 @@ export default class Table extends HTMLElement { shadow.appendChild(itemStyles); } - attributeChangedCallback(name, oldValue, newValue) { - let tempClasses = this.modal.className.split(' '); - let popValue = tempClasses.pop(); - (popValue != 'show') ? tempClasses.push(popValue) : 0; - if(newValue == 'true'){ - tempClasses.push('show'); - this.modal.style.display = 'block'; - if(this.getAttribute('data-static') != 'true'){ - this.modal.addEventListener('click', this._onClick); - } - this.modal.className = tempClasses.join(' '); - }else{ - this.modal.className = tempClasses.join(' '); - setTimeout(() => { this.modal.style.display = 'none'; }, 500); - } - - } - connectedCallback() { // Table attributes - + let legacyResponsive = this.getAttribute('data-legacy-responsive'); let id = this.getAttribute('data-id'); let stripedRow = this.getAttribute('data-striped-row'); let stripedCol = this.getAttribute('data-striped-col'); @@ -96,41 +71,16 @@ export default class Table extends HTMLElement { let verticalAlign = this.getAttribute('data-vertical-align'); let extraClasses = this.getAttribute('data-extra-classes'); let tableClasses = ['table']; - let tableMobileClasses = ['table mobile']; - if(extraClasses != undefined && extraClasses != null) { - tableClasses.push(extraClasses); - tableMobileClasses.push(extraClasses); - } - (size != undefined && size != null) ? modalDialogClasses.push(`modal-${size}`) : 0; - (verticalCentered == 'true') ? modalDialogClasses.push('modal-dialog-centered') : 0; - if (fullScreen != undefined && fullScreen != null){ - (fullScreen == 'always') ? modalDialogClasses.push('modal-fullscreen') : modalDialogClasses.push(`modal-fullscreen-${fullScreen}-down`); - } - if (bStatic == 'true'){ - this.modal.setAttribute('data-bs-backdrop', 'static'); - this.modal.setAttribute('data-bs-keyboard', 'false'); - } - if (show == 'true') { - this.modalClasses.push('show'); - this.modal.setAttribute('aria-modal', `true`); - } else { - this.modal.setAttribute('aria-modal', `false`); - } - (id != undefined && id != null) ? this.modal.id = id : 0; - this.modal.setAttribute('tabindex', -1); - this.modal.className = modalClasses.join(' '); - this.modalDialog.className = modalDialogClasses.join(' '); - this.modalContent.className = modalContentClasses.join(' '); + (stripedRow == 'true') ? tableClasses.push('table-striped') : 0; + (stripedCol == 'true') ? tableClasses.push('table-striped-columns') : 0; + (extraClasses != undefined && extraClasses != null) ? tableClasses.push(extraClasses) : 0; + (size != undefined && size != null) ? tableClasses.push(`table-${size}`) : 0; + (verticalAlign != undefined && verticalAlign != null) ? tableClasses.push(verticalAlign) : 0; + (id != undefined && id != null) ? this.table.id = id : 0; + (legacyResponsive == 'true') ? this.tableContainer.className = 'table-responsive' : 0; + this.table.className = tableClasses.join(' '); if (!this.shadowRoot.querySelector('div')) { - this.shadowRoot.appendChild(this.modal); + this.shadowRoot.appendChild(this.tableContainer); } } - - disconnectedCallback() { - this.removeEventListener('click', this._onClick.bind(this)); - } - - _onClick(e) { - this.getRootNode().host.setAttribute('data-show', 'false'); - } }; \ No newline at end of file diff --git a/src/components/organisms/Table/cod-table.js b/src/components/organisms/Table/cod-table.js new file mode 100644 index 00000000..4f845578 --- /dev/null +++ b/src/components/organisms/Table/cod-table.js @@ -0,0 +1,2 @@ +import Table from './Table'; +customElements.define('cod-table', Table); \ No newline at end of file diff --git a/src/stories/table.stories.js b/src/stories/table.stories.js new file mode 100644 index 00000000..3d3f95f9 --- /dev/null +++ b/src/stories/table.stories.js @@ -0,0 +1,43 @@ +import { html } from 'lit-html'; +import '../components/atoms/TableHeader/cod-table-header'; +import '../components/atoms/TableBody/cod-table-body'; +import '../components/atoms/TableRow/cod-table-row'; +import '../components/atoms/TableCell/cod-table-cell'; +import '../components/atoms/TableCellHeader/cod-table-cell-header'; +import '../components/organisms/Table/cod-table'; + +export default { + title: 'COD/Organisms/Table', +}; + +export const Basic = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; \ No newline at end of file From 7b43ce781a53ac45ee3ac0773eb4b538191ea65f Mon Sep 17 00:00:00 2001 From: Edgar Montes Date: Thu, 11 May 2023 16:04:10 -0400 Subject: [PATCH 3/5] Fixed accessiblity errors. --- src/components/atoms/TableBody/TableBody.js | 1 + src/components/atoms/TableCell/TableCell.css | 2 +- .../atoms/TableCellHeader/TableCellHeader.css | 2 +- src/components/organisms/Table/Table.js | 15 +++------------ 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/src/components/atoms/TableBody/TableBody.js b/src/components/atoms/TableBody/TableBody.js index b023b92f..44101a6a 100644 --- a/src/components/atoms/TableBody/TableBody.js +++ b/src/components/atoms/TableBody/TableBody.js @@ -18,6 +18,7 @@ export default class TableBody extends HTMLElement { const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); this.tableBody = document.createElement('div'); + this.tableBody.role = 'rowgroup'; shadow.addEventListener( 'slotchange', ev => { let tempElements = Array.from(this.children); tempElements.forEach((node)=>{ diff --git a/src/components/atoms/TableCell/TableCell.css b/src/components/atoms/TableCell/TableCell.css index 3f401db7..aa69ff58 100644 --- a/src/components/atoms/TableCell/TableCell.css +++ b/src/components/atoms/TableCell/TableCell.css @@ -1,6 +1,6 @@ .table-cell{ padding: 0.5rem 0.5rem; background-color: var(--bs-table-bg); - border-bottom-width: var(--bs-border-width); + border-bottom: solid var(--bs-border-width) var(--bs-secondary); box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); } \ No newline at end of file diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.css b/src/components/atoms/TableCellHeader/TableCellHeader.css index d9caede2..8b39a9ec 100644 --- a/src/components/atoms/TableCellHeader/TableCellHeader.css +++ b/src/components/atoms/TableCellHeader/TableCellHeader.css @@ -1,7 +1,7 @@ .table-cell-header{ padding: 0.5rem 0.5rem; background-color: var(--bs-table-bg); - border-bottom-width: var(--bs-border-width); + border-bottom: solid var(--bs-border-width) var(--bs-secondary); box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); font-weight: bold; } \ No newline at end of file diff --git a/src/components/organisms/Table/Table.js b/src/components/organisms/Table/Table.js index 5aae951a..dd7e3fdb 100644 --- a/src/components/organisms/Table/Table.js +++ b/src/components/organisms/Table/Table.js @@ -20,27 +20,18 @@ export default class Table extends HTMLElement { this.tableContainer = document.createElement('div'); this.table = document.createElement('div'); this.table.role = 'table'; - this.tableHeader = document.createElement('div'); - this.tableHeader.role = 'rowgroup'; - this.tableHeader.className = 'table-header'; - this.tableBody = document.createElement('div'); - this.tableBody.role = 'rowgroup'; - this.table.appendChild(this.tableHeader); - this.table.appendChild(this.tableBody); this.tableContainer.appendChild(this.table); shadow.addEventListener('slotchange', e => { let tempElements = Array.from(this.children); tempElements.forEach((node) => { switch (node.tagName) { - case 'COD-TABLE-HEAD': - this.tableHeader.appendChild(node); - this.table.appendChild(this.tableHeader); + case 'COD-TABLE-HEADER': + this.table.appendChild(node); break; case 'COD-TABLE-BODY': - this.tableBody.appendChild(node); - this.table.appendChild(this.tableBody); + this.table.appendChild(node); break; default: From 5f6384f7ae824be726d2cf926e99cea1adaa7ace Mon Sep 17 00:00:00 2001 From: Edgar Montes Date: Fri, 12 May 2023 14:06:48 -0400 Subject: [PATCH 4/5] Setup striped row table. --- src/components/atoms/TableBody/TableBody.js | 7 ++-- src/components/atoms/TableCell/TableCell.css | 5 +++ src/components/atoms/TableCell/TableCell.js | 4 +++ .../atoms/TableCellHeader/TableCellHeader.js | 4 +++ .../atoms/TableHeader/TableHeader.js | 5 ++- src/components/atoms/TableRow/TableRow.js | 3 +- src/components/organisms/Table/Table.js | 5 +++ src/stories/table.stories.js | 32 +++++++++++++++++++ 8 files changed, 61 insertions(+), 4 deletions(-) diff --git a/src/components/atoms/TableBody/TableBody.js b/src/components/atoms/TableBody/TableBody.js index 44101a6a..e6e11e7c 100644 --- a/src/components/atoms/TableBody/TableBody.js +++ b/src/components/atoms/TableBody/TableBody.js @@ -21,8 +21,11 @@ export default class TableBody extends HTMLElement { this.tableBody.role = 'rowgroup'; shadow.addEventListener( 'slotchange', ev => { let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ - this.tableBody.append(node); + tempElements.forEach((node, index)=>{ + (this.getAttribute('data-striped-row') == 'true' && (index % 2 == 0)) ? node.setAttribute('data-striped-row', 'true') : 0; + (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; + (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; + this.tableBody.append(node); }); }); diff --git a/src/components/atoms/TableCell/TableCell.css b/src/components/atoms/TableCell/TableCell.css index aa69ff58..c0c24e45 100644 --- a/src/components/atoms/TableCell/TableCell.css +++ b/src/components/atoms/TableCell/TableCell.css @@ -3,4 +3,9 @@ background-color: var(--bs-table-bg); border-bottom: solid var(--bs-border-width) var(--bs-secondary); box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); +} + +.table-cell.table-striped{ + --bs-table-accent-bg: var(--bs-table-striped-bg); + color: var(--bs-table-striped-color); } \ No newline at end of file diff --git a/src/components/atoms/TableCell/TableCell.js b/src/components/atoms/TableCell/TableCell.js index b8d9ce29..9a6a3f4d 100644 --- a/src/components/atoms/TableCell/TableCell.js +++ b/src/components/atoms/TableCell/TableCell.js @@ -43,9 +43,13 @@ export default class TableCell extends HTMLElement { connectedCallback() { // TableCell attributes + let stripedRow = this.getAttribute('data-striped-row'); let stripedCol = this.getAttribute('data-striped-col'); + let verticalAlign = this.getAttribute('data-vertical-align'); let extraClasses = this.getAttribute('data-extra-classes'); let tableCellClasses = ['table-cell']; + (verticalAlign != undefined && verticalAlign != null) ? tableCellClasses.push(verticalAlign) : 0; + (stripedRow == 'true') ? tableCellClasses.push('table-striped') : 0; (stripedCol == 'true') ? tableCellClasses.push('table-striped-columns') : 0; (extraClasses != undefined && extraClasses != null) ? tableCellClasses.push(extraClasses) : 0; this.tableCell.className = tableCellClasses.join(' '); diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.js b/src/components/atoms/TableCellHeader/TableCellHeader.js index 3e10dfad..60f3508b 100644 --- a/src/components/atoms/TableCellHeader/TableCellHeader.js +++ b/src/components/atoms/TableCellHeader/TableCellHeader.js @@ -43,9 +43,13 @@ export default class TableCellHeader extends HTMLElement { connectedCallback() { // tableCellHeader attributes + let stripedRow = this.getAttribute('data-striped-row'); let stripedCol = this.getAttribute('data-striped-col'); + let verticalAlign = this.getAttribute('data-vertical-align'); let extraClasses = this.getAttribute('data-extra-classes'); let tableCellHeaderClasses = ['table-cell-header']; + (verticalAlign != undefined && verticalAlign != null) ? tableCellHeaderClasses.push(verticalAlign) : 0; + (stripedRow == 'true') ? tableCellHeaderClasses.push('table-striped') : 0; (stripedCol == 'true') ? tableCellHeaderClasses.push('table-striped-columns') : 0; (extraClasses != undefined && extraClasses != null) ? tableCellHeaderClasses.push(extraClasses) : 0; this.tableCellHeader.className = tableCellHeaderClasses.join(' '); diff --git a/src/components/atoms/TableHeader/TableHeader.js b/src/components/atoms/TableHeader/TableHeader.js index 8b183a21..4fc199c8 100644 --- a/src/components/atoms/TableHeader/TableHeader.js +++ b/src/components/atoms/TableHeader/TableHeader.js @@ -18,10 +18,13 @@ export default class TableHeader extends HTMLElement { const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); this.tableHeader = document.createElement('div'); + this.tableHeader.role="rowgroup"; shadow.addEventListener( 'slotchange', ev => { let tempElements = Array.from(this.children); tempElements.forEach((node)=>{ - this.tableHeader.append(node); + (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; + (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; + this.tableHeader.append(node); }); }); diff --git a/src/components/atoms/TableRow/TableRow.js b/src/components/atoms/TableRow/TableRow.js index 16590dbd..9d5db76b 100644 --- a/src/components/atoms/TableRow/TableRow.js +++ b/src/components/atoms/TableRow/TableRow.js @@ -22,7 +22,8 @@ export default class TableBody extends HTMLElement { shadow.addEventListener( 'slotchange', ev => { let tempElements = Array.from(this.children); tempElements.forEach((node)=>{ - this.tableRow.append(node); + (this.getAttribute('data-striped-row') == 'true') ? node.setAttribute('data-striped-row', 'true') : 0; + this.tableRow.append(node); }); }); diff --git a/src/components/organisms/Table/Table.js b/src/components/organisms/Table/Table.js index dd7e3fdb..c261fa2d 100644 --- a/src/components/organisms/Table/Table.js +++ b/src/components/organisms/Table/Table.js @@ -27,10 +27,15 @@ export default class Table extends HTMLElement { tempElements.forEach((node) => { switch (node.tagName) { case 'COD-TABLE-HEADER': + (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; + (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; this.table.appendChild(node); break; case 'COD-TABLE-BODY': + (this.getAttribute('data-striped-row') == 'true') ? node.setAttribute('data-striped-row', 'true') : 0; + (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; + (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; this.table.appendChild(node); break; diff --git a/src/stories/table.stories.js b/src/stories/table.stories.js index 3d3f95f9..a96560f0 100644 --- a/src/stories/table.stories.js +++ b/src/stories/table.stories.js @@ -40,4 +40,36 @@ export const Basic = () => html` +`; + +export const StripedRows = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + `; \ No newline at end of file From d53d58c91f6a5ab735fa907421e316f63e545872 Mon Sep 17 00:00:00 2001 From: Edgar Montes Date: Fri, 12 May 2023 16:58:33 -0400 Subject: [PATCH 5/5] Setting up legacy responsive layout, finish table component. --- src/components/atoms/TableBody/TableBody.js | 2 + src/components/atoms/TableCell/TableCell.css | 8 +- src/components/atoms/TableCell/TableCell.js | 3 +- .../atoms/TableCellHeader/TableCellHeader.css | 9 + .../atoms/TableCellHeader/TableCellHeader.js | 3 +- .../atoms/TableHeader/TableHeader.js | 1 + src/components/atoms/TableRow/TableRow.css | 5 + src/components/atoms/TableRow/TableRow.js | 9 +- src/components/organisms/Table/Table.js | 11 +- src/stories/table.stories.js | 227 ++++++++++++++++++ 10 files changed, 263 insertions(+), 15 deletions(-) diff --git a/src/components/atoms/TableBody/TableBody.js b/src/components/atoms/TableBody/TableBody.js index e6e11e7c..e91534a2 100644 --- a/src/components/atoms/TableBody/TableBody.js +++ b/src/components/atoms/TableBody/TableBody.js @@ -23,8 +23,10 @@ export default class TableBody extends HTMLElement { let tempElements = Array.from(this.children); tempElements.forEach((node, index)=>{ (this.getAttribute('data-striped-row') == 'true' && (index % 2 == 0)) ? node.setAttribute('data-striped-row', 'true') : 0; + (this.getAttribute('data-hover') == 'true') ? node.setAttribute('data-hover', 'true') : 0; (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; + (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; this.tableBody.append(node); }); }); diff --git a/src/components/atoms/TableCell/TableCell.css b/src/components/atoms/TableCell/TableCell.css index c0c24e45..62c0acaa 100644 --- a/src/components/atoms/TableCell/TableCell.css +++ b/src/components/atoms/TableCell/TableCell.css @@ -3,9 +3,13 @@ background-color: var(--bs-table-bg); border-bottom: solid var(--bs-border-width) var(--bs-secondary); box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); + height: 100%; } -.table-cell.table-striped{ +.table-cell.table-striped, .table-cell.table-striped-columns{ --bs-table-accent-bg: var(--bs-table-striped-bg); - color: var(--bs-table-striped-color); +} + +.table-cell.table-legacy-responsive{ + width: 5em; } \ No newline at end of file diff --git a/src/components/atoms/TableCell/TableCell.js b/src/components/atoms/TableCell/TableCell.js index 9a6a3f4d..481fe87a 100644 --- a/src/components/atoms/TableCell/TableCell.js +++ b/src/components/atoms/TableCell/TableCell.js @@ -21,7 +21,6 @@ export default class TableCell extends HTMLElement { this.tableCell.role = 'cell'; shadow.addEventListener( 'slotchange', ev => { let tempElements = Array.from(this.childNodes); - console.log(this.childNodes); tempElements.forEach((node)=>{ this.tableCell.appendChild(node); }); @@ -45,10 +44,12 @@ export default class TableCell extends HTMLElement { // TableCell attributes let stripedRow = this.getAttribute('data-striped-row'); let stripedCol = this.getAttribute('data-striped-col'); + let legacyResponsive = this.getAttribute('data-legacy-responsive'); let verticalAlign = this.getAttribute('data-vertical-align'); let extraClasses = this.getAttribute('data-extra-classes'); let tableCellClasses = ['table-cell']; (verticalAlign != undefined && verticalAlign != null) ? tableCellClasses.push(verticalAlign) : 0; + (legacyResponsive == 'true') ? tableCellClasses.push('table-legacy-responsive') : 0; (stripedRow == 'true') ? tableCellClasses.push('table-striped') : 0; (stripedCol == 'true') ? tableCellClasses.push('table-striped-columns') : 0; (extraClasses != undefined && extraClasses != null) ? tableCellClasses.push(extraClasses) : 0; diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.css b/src/components/atoms/TableCellHeader/TableCellHeader.css index 8b39a9ec..6e4bc0bb 100644 --- a/src/components/atoms/TableCellHeader/TableCellHeader.css +++ b/src/components/atoms/TableCellHeader/TableCellHeader.css @@ -4,4 +4,13 @@ border-bottom: solid var(--bs-border-width) var(--bs-secondary); box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); font-weight: bold; + height: 100%; +} + +.table-cell-header.table-striped-columns{ + --bs-table-accent-bg: var(--bs-table-striped-bg); +} + +.table-cell-header.table-legacy-responsive{ + width: 5em; } \ No newline at end of file diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.js b/src/components/atoms/TableCellHeader/TableCellHeader.js index 60f3508b..b7bf5e06 100644 --- a/src/components/atoms/TableCellHeader/TableCellHeader.js +++ b/src/components/atoms/TableCellHeader/TableCellHeader.js @@ -21,7 +21,6 @@ export default class TableCellHeader extends HTMLElement { this.tableCellHeader.role = 'columnheader'; shadow.addEventListener( 'slotchange', ev => { let tempElements = Array.from(this.childNodes); - console.log(this.childNodes); tempElements.forEach((node)=>{ this.tableCellHeader.appendChild(node); }); @@ -45,10 +44,12 @@ export default class TableCellHeader extends HTMLElement { // tableCellHeader attributes let stripedRow = this.getAttribute('data-striped-row'); let stripedCol = this.getAttribute('data-striped-col'); + let legacyResponsive = this.getAttribute('data-legacy-responsive'); let verticalAlign = this.getAttribute('data-vertical-align'); let extraClasses = this.getAttribute('data-extra-classes'); let tableCellHeaderClasses = ['table-cell-header']; (verticalAlign != undefined && verticalAlign != null) ? tableCellHeaderClasses.push(verticalAlign) : 0; + (legacyResponsive == 'true') ? tableCellHeaderClasses.push('table-legacy-responsive') : 0; (stripedRow == 'true') ? tableCellHeaderClasses.push('table-striped') : 0; (stripedCol == 'true') ? tableCellHeaderClasses.push('table-striped-columns') : 0; (extraClasses != undefined && extraClasses != null) ? tableCellHeaderClasses.push(extraClasses) : 0; diff --git a/src/components/atoms/TableHeader/TableHeader.js b/src/components/atoms/TableHeader/TableHeader.js index 4fc199c8..f4acc946 100644 --- a/src/components/atoms/TableHeader/TableHeader.js +++ b/src/components/atoms/TableHeader/TableHeader.js @@ -24,6 +24,7 @@ export default class TableHeader extends HTMLElement { tempElements.forEach((node)=>{ (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; + (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; this.tableHeader.append(node); }); }); diff --git a/src/components/atoms/TableRow/TableRow.css b/src/components/atoms/TableRow/TableRow.css index 9464edaa..f5cf6c7a 100644 --- a/src/components/atoms/TableRow/TableRow.css +++ b/src/components/atoms/TableRow/TableRow.css @@ -3,6 +3,7 @@ border-style: solid; border-width: 0; display: flex; + align-items: stretch; } .table-row cod-table-cell, .table-row cod-table-cell-header{ @@ -23,4 +24,8 @@ .table-row cod-table-cell[colspan="5"], .table-row cod-table-cell-header[colspan="5"]{ flex: 5; +} + +.table-row.table-hover:hover{ + --bs-table-accent-bg: var(--bs-table-hover-bg); } \ No newline at end of file diff --git a/src/components/atoms/TableRow/TableRow.js b/src/components/atoms/TableRow/TableRow.js index 9d5db76b..85785dc9 100644 --- a/src/components/atoms/TableRow/TableRow.js +++ b/src/components/atoms/TableRow/TableRow.js @@ -21,8 +21,11 @@ export default class TableBody extends HTMLElement { this.tableRow.role = 'row'; shadow.addEventListener( 'slotchange', ev => { let tempElements = Array.from(this.children); - tempElements.forEach((node)=>{ + tempElements.forEach((node, index)=>{ (this.getAttribute('data-striped-row') == 'true') ? node.setAttribute('data-striped-row', 'true') : 0; + (this.getAttribute('data-striped-col') == 'true' && (index % 2 != 0)) ? node.setAttribute('data-striped-col', 'true') : 0; + (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; + (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; this.tableRow.append(node); }); }); @@ -43,10 +46,10 @@ export default class TableBody extends HTMLElement { connectedCallback() { // TableRow attributes - let stripedRow = this.getAttribute('data-striped-row'); let extraClasses = this.getAttribute('data-extra-classes'); + let hover = this.getAttribute('data-hover'); let tableRowClasses = ['table-row']; - (stripedRow == 'true') ? tableRowClasses.push('table-striped') : 0; + (hover == 'true') ? tableRowClasses.push('table-hover') : 0; (extraClasses != undefined && extraClasses != null) ? tableRowClasses.push(extraClasses) : 0; this.tableRow.className = tableRowClasses.join(' '); } diff --git a/src/components/organisms/Table/Table.js b/src/components/organisms/Table/Table.js index c261fa2d..da7df3b7 100644 --- a/src/components/organisms/Table/Table.js +++ b/src/components/organisms/Table/Table.js @@ -29,13 +29,16 @@ export default class Table extends HTMLElement { case 'COD-TABLE-HEADER': (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; + (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; this.table.appendChild(node); break; case 'COD-TABLE-BODY': + (this.getAttribute('data-hover') == 'true') ? node.setAttribute('data-hover', 'true') : 0; (this.getAttribute('data-striped-row') == 'true') ? node.setAttribute('data-striped-row', 'true') : 0; (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0; (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0; + (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0; this.table.appendChild(node); break; @@ -61,17 +64,9 @@ export default class Table extends HTMLElement { // Table attributes let legacyResponsive = this.getAttribute('data-legacy-responsive'); let id = this.getAttribute('data-id'); - let stripedRow = this.getAttribute('data-striped-row'); - let stripedCol = this.getAttribute('data-striped-col'); - let size = this.getAttribute('data-size'); - let verticalAlign = this.getAttribute('data-vertical-align'); let extraClasses = this.getAttribute('data-extra-classes'); let tableClasses = ['table']; - (stripedRow == 'true') ? tableClasses.push('table-striped') : 0; - (stripedCol == 'true') ? tableClasses.push('table-striped-columns') : 0; (extraClasses != undefined && extraClasses != null) ? tableClasses.push(extraClasses) : 0; - (size != undefined && size != null) ? tableClasses.push(`table-${size}`) : 0; - (verticalAlign != undefined && verticalAlign != null) ? tableClasses.push(verticalAlign) : 0; (id != undefined && id != null) ? this.table.id = id : 0; (legacyResponsive == 'true') ? this.tableContainer.className = 'table-responsive' : 0; this.table.className = tableClasses.join(' '); diff --git a/src/stories/table.stories.js b/src/stories/table.stories.js index a96560f0..dc5922db 100644 --- a/src/stories/table.stories.js +++ b/src/stories/table.stories.js @@ -72,4 +72,231 @@ export const StripedRows = () => html` +`; + +export const StripedColumns = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Hover = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Dark = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Custom = () => html` + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + + + + + + # + First + Last + Handle + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + +`; + +export const Responsive = () => html` + + + + # + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + Table heading + + + + + 1 + Table cell 1 + Table cell 2 + Table cell 3 + Table cell 4 + Table cell 5 + Table cell 6 + Table cell 7 + Table cell 8 + Table cell 9 + Table cell 10 + Table cell 11 + Table cell 12 + + + 2 + Table cell 1 + Table cell 2 + Table cell 3 + Table cell 4 + Table cell 5 + Table cell 6 + Table cell 7 + Table cell 8 + Table cell 9 + Table cell 10 + Table cell 11 + Table cell 12 + + + 3 + Table cell 1 + Table cell 2 + Table cell 3 + Table cell 4 + Table cell 5 + Table cell 6 + Table cell 7 + Table cell 8 + Table cell 9 + Table cell 10 + Table cell 11 + Table cell 12 + + + `; \ No newline at end of file