diff --git a/src/components/organisms/Card/Card.js b/src/components/organisms/Card/Card.js index 5fe7a291..29eef75e 100644 --- a/src/components/organisms/Card/Card.js +++ b/src/components/organisms/Card/Card.js @@ -17,102 +17,65 @@ export default class Card extends HTMLElement { shadow.appendChild(template.content.cloneNode(true)); this.card = document.createElement('div'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-unused-vars - shadow.addEventListener('slotchange', (e) => { - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line prefer-const - let tempElements = Array.from(this.children); + shadow.addEventListener('slotchange', () => { + const tempElements = Array.from(this.children); tempElements.forEach((node) => { switch (node.tagName) { - case 'COD-CARD-HEADER': - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempHeader = document.createElement('div'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempHeaderClasses = ['card-header']; - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != undefined && - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != null + case 'COD-CARD-HEADER': { + const tempHeader = document.createElement('div'); + const tempHeaderClasses = ['card-header']; + node.getAttribute('data-extra-classes') !== null && + node.getAttribute('data-extra-classes') !== null ? tempHeaderClasses.push(node.getAttribute('data-extra-classes')) : 0; tempHeader.className = tempHeaderClasses.join(' '); tempHeader.appendChild(node); this.card.appendChild(tempHeader); break; - - case 'COD-CARD-BODY': - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempBody = document.createElement('div'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempBodyClasses = ['card-body']; - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != undefined && - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != null - ? tempHeaderClasses.push(node.getAttribute('data-extra-classes')) + } + case 'COD-CARD-BODY': { + const tempBody = document.createElement('div'); + const tempBodyClasses = ['card-body']; + node.getAttribute('data-extra-classes') !== null && + node.getAttribute('data-extra-classes') !== null + ? tempBodyClasses.push(node.getAttribute('data-extra-classes')) : 0; tempBody.className = tempBodyClasses.join(' '); tempBody.appendChild(node); this.card.appendChild(tempBody); break; - - case 'COD-CARD-FOOTER': - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempFooter = document.createElement('div'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempFooterClasses = ['card-footer']; - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != undefined && - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != null + } + case 'COD-CARD-FOOTER': { + const tempFooter = document.createElement('div'); + const tempFooterClasses = ['card-footer']; + node.getAttribute('data-extra-classes') !== null && + node.getAttribute('data-extra-classes') !== null ? tempFooterClasses.push(node.getAttribute('data-extra-classes')) : 0; tempFooter.className = tempFooterClasses.join(' '); tempFooter.appendChild(node); this.card.appendChild(tempFooter); break; - - case 'COD-CARD-OVERLAY': - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempOverlay = document.createElement('div'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let tempOverlayClasses = ['card-img-overlay']; - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != undefined && - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - node.getAttribute('data-extra-classes') != null + } + case 'COD-CARD-OVERLAY': { + const tempOverlay = document.createElement('div'); + const tempOverlayClasses = ['card-img-overlay']; + node.getAttribute('data-extra-classes') !== null && + node.getAttribute('data-extra-classes') !== null ? tempOverlayClasses.push(node.getAttribute('data-extra-classes')) : 0; tempOverlay.className = tempOverlayClasses.join(' '); tempOverlay.appendChild(node); this.card.appendChild(tempOverlay); break; - - default: - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line no-case-declarations, prefer-const - let nodeClasses = node.className.split(' '); + } + default: { + const nodeClasses = node.className.split(' '); nodeClasses.includes('no-wc') ? node.remove() : this.card.appendChild(node); break; + } } }); }); @@ -131,29 +94,13 @@ export default class Card extends HTMLElement { connectedCallback() { // Card attributes - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line prefer-const - let width = this.getAttribute('data-width'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line prefer-const - let id = this.getAttribute('data-id'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line prefer-const - let extraClasses = this.getAttribute('data-extra-classes'); - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line prefer-const - let cardClasses = ['card']; - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - extraClasses != undefined && extraClasses != null - ? cardClasses.push(extraClasses) - : 0; - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - width != undefined && width != null ? (this.card.style.width = width) : 0; - // TODO: See CityOfDetroit/detroitmi#1099 - // eslint-disable-next-line eqeqeq - id != undefined && id != null ? (this.card.id = id) : 0; + const width = this.getAttribute('data-width'); + const id = this.getAttribute('data-id'); + const extraClasses = this.getAttribute('data-extra-classes'); + const cardClasses = ['card']; + extraClasses !== null ? cardClasses.push(extraClasses) : 0; + width !== null ? (this.card.style.width = width) : 0; + id !== null ? (this.card.id = id) : 0; this.card.className = cardClasses.join(' '); if (!this.shadowRoot.querySelector('div')) { this.shadowRoot.appendChild(this.card);