Merge pull request #90 from maxatdetroit/Feature.1086.1

Add Accordion list style option
CityOfDetroit · Sep 14, 2023 · 9273e55 · 9273e55
2 parents bcb5049 + 89a7491
commit 9273e55
Show file tree

Hide file tree

Showing 12 changed files with 1,426 additions and 1,106 deletions.
diff --git a/src/components/atoms/AccordionBody/AccordionBody.css b/src/components/atoms/AccordionBody/AccordionBody.css
@@ -0,0 +1,4 @@
+.accordion-body.data-li {
+  border-left: 3px solid;
+  border-color: var(--color-1);
+}
diff --git a/src/components/atoms/AccordionBody/AccordionBody.js b/src/components/atoms/AccordionBody/AccordionBody.js
@@ -37,8 +37,12 @@ export default class AccordionBody extends HTMLElement {
 
   connectedCallback() {
     // Nav attributes
+    // TODO: Refactor attribute and class handling.
     let extraClasses = this.getAttribute('data-extra-classes');
     let accordionBodyClasses = ['accordion-body'];
+    if (this.getAttribute('data-li') !== null) {
+      accordionBodyClasses.push('data-li');
+    }
     extraClasses != undefined && extraClasses != null
       ? accordionBodyClasses.push(extraClasses)
       : 0;

diff --git a/src/components/atoms/AccordionHeader/AccordionHeader.css b/src/components/atoms/AccordionHeader/AccordionHeader.css
@@ -0,0 +1,14 @@
+.li-num-box {
+  /* TODO: Dynamically update list numbers to match accordion
+    header text styles */
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 2rem;
+}
+
+.accordion-button.data-li {
+  padding-right: 1rem;
+}
diff --git a/src/components/atoms/AccordionHeader/AccordionHeader.js b/src/components/atoms/AccordionHeader/AccordionHeader.js
@@ -23,7 +23,7 @@ export default class AccordionHeader extends HTMLElement {
     this.accordionBtn = document.createElement('button');
     this.accordionHeader.appendChild(this.accordionBtn);
     this.shadowRoot.addEventListener('slotchange', (ev) => {
-      let tempElements = Array.from(this.children);
+      let tempElements = ev.target.assignedElements();
       tempElements.forEach((node) => {
         this.accordionBtn.append(node);
       });
@@ -54,10 +54,15 @@ export default class AccordionHeader extends HTMLElement {
 
   connectedCallback() {
     // Nav attributes
+    // TODO: Refactor attribute and class handling.
     let parentID = this.getAttribute('data-parent-id');
     let expanded = this.getAttribute('data-expanded');
     let extraClasses = this.getAttribute('data-extra-classes');
+    const isListItem = this.getAttribute('data-li');
     let accordionBtnClasses = ['accordion-button'];
+    if (isListItem !== null) {
+      accordionBtnClasses.push('data-li');
+    }
     this.accordionBtn.setAttribute('type', 'button');
     this.accordionBtn.setAttribute('data-bs-toggle', 'collapse');
     this.accordionBtn.setAttribute('aria-controls', parentID);
@@ -76,4 +81,12 @@ export default class AccordionHeader extends HTMLElement {
       this.shadowRoot.appendChild(this.accordionHeader);
     }
   }
+
+  addListNumber(index, extraClasses) {
+    const numberBox = document.createElement('div');
+    numberBox.innerText = `${index + 1}`;
+    extraClasses.push('li-num-box');
+    numberBox.className = extraClasses.join(' ');
+    this.accordionBtn.prepend(numberBox);
+  }
 }
diff --git a/src/components/atoms/AccordionItem/AccordionItem.js b/src/components/atoms/AccordionItem/AccordionItem.js
@@ -22,8 +22,9 @@ export default class AccordionItem extends HTMLElement {
     this.accordionHeader = document.createElement('div');
     this.accordionBody = document.createElement('div');
     this.shadowRoot.addEventListener('slotchange', (ev) => {
-      let tempElements = Array.from(this.children);
+      let tempElements = ev.target.assignedElements();
       tempElements.forEach((node) => {
+        // TODO: Refactor attribute and class handling.
         node.setAttribute(
           'data-parent-id',
           `${this.getAttribute('data-parent-id')}-${this.getAttribute(
@@ -34,6 +35,14 @@ export default class AccordionItem extends HTMLElement {
           ? node.setAttribute('data-expanded', true)
           : 0;
         if (node.tagName == 'COD-ACCORDION-HEADER') {
+          if (this.getAttribute('data-li') !== null) {
+            node.setAttribute('data-li', '');
+            const extraClasses = this.getHeaderListItemClasses();
+            node.addListNumber(
+              Number(this.getAttribute('data-index')),
+              extraClasses,
+            );
+          }
           this.accordionHeader.append(node);
         } else {
           this.accordionBody.append(node);
@@ -71,21 +80,18 @@ export default class AccordionItem extends HTMLElement {
 
   connectedCallback() {
     // Nav attributes
+    // TODO: Refactor attribute and class handling.
     let parentID = this.getAttribute('data-parent-id');
     let index = this.getAttribute('data-index');
     let expanded = this.getAttribute('data-expanded');
-    let alwaysOpen = this.getAttribute('data-always-open');
-    let headerExtraClasses = this.getAttribute('data-header-extra-classes');
-    let bodyExtraClasses = this.getAttribute('data-body-extra-classes');
     let accordionHeaderClasses = ['accordion-header'];
     let accordionBodyClasses = ['accordion-collapse collapse'];
     expanded == 'true' ? accordionBodyClasses.push('show') : 0;
-    headerExtraClasses != undefined && headerExtraClasses != null
-      ? accordionHeaderClasses.push(headerExtraClasses)
-      : 0;
-    bodyExtraClasses != undefined && bodyExtraClasses != null
-      ? accordionBodyClasses.push(bodyExtraClasses)
-      : 0;
+    if (this.getAttribute('data-li') !== null) {
+      accordionBodyClasses = accordionBodyClasses.concat(
+        this.getBodyListItemClasses(),
+      );
+    }
     this.accordionBody.id = `${parentID}-${index}`;
     this.accordionHeader.className = accordionHeaderClasses.join(' ');
     this.accordionBody.className = accordionBodyClasses.join(' ');
@@ -105,6 +111,27 @@ export default class AccordionItem extends HTMLElement {
     this.removeEventListener('click', this._onClick.bind(this));
   }
 
+  getListItemBackgroundColor() {
+    const customColor = this.getAttribute('data-li-bg');
+    return customColor !== null ? customColor : 'primary';
+  }
+
+  getListItemTextColor() {
+    const customColor = this.getAttribute('data-li-text');
+    return customColor !== null ? customColor : 'light';
+  }
+
+  getHeaderListItemClasses() {
+    const bgColor = this.getListItemBackgroundColor();
+    const textColor = this.getListItemTextColor();
+    return ['li-bg-' + bgColor, 'text-' + textColor];
+  }
+
+  getBodyListItemClasses() {
+    const bgColor = this.getListItemBackgroundColor();
+    return ['border-start', 'border-' + bgColor];
+  }
+
   _onClick(e) {
     if (e.target.getAttribute('data-expanded') == 'true') {
       this.getRootNode().host.setAttribute('data-expanded', 'false');

diff --git a/src/components/molecules/Accordion/Accordion.css b/src/components/molecules/Accordion/Accordion.css
@@ -0,0 +1,4 @@
+.accordion-ol {
+  --bs-accordion-btn-padding-x: 0rem;
+  --bs-accordion-btn-padding-y: 0rem;
+}
diff --git a/src/components/molecules/Accordion/Accordion.js b/src/components/molecules/Accordion/Accordion.js
@@ -17,14 +17,18 @@ export default class Accordion extends HTMLElement {
     shadow.appendChild(template.content.cloneNode(true));
     this.accordion = document.createElement('div');
     this.shadowRoot.addEventListener('slotchange', (ev) => {
-      let tempElements = Array.from(this.children);
+      let tempElements = ev.target.assignedElements();
       tempElements.forEach((node, index) => {
+        // TODO: Refactor attribute and class handling for children.
         switch (node.tagName) {
           case 'COD-ACCORDION-ITEM':
             let accordionItem = document.createElement('div');
             accordionItem.className = 'accordion-item';
             node.setAttribute('data-parent-id', this.getAttribute('data-id'));
             node.setAttribute('data-index', index);
+            if (this.getAttribute('data-ol') !== null) {
+              node.setAttribute('data-li', '');
+            }
             accordionItem.appendChild(node);
             this.accordion.append(accordionItem);
             break;
@@ -53,11 +57,14 @@ export default class Accordion extends HTMLElement {
 
   connectedCallback() {
     // Nav attributes
+    // TODO: Refactor attribute and class handling.
     let flush = this.getAttribute('data-flush');
+    const isOrderedList = this.getAttribute('data-ol');
     let id = this.getAttribute('data-id');
     let extraClasses = this.getAttribute('data-extra-classes');
     let accordionClasses = ['accordion'];
     flush == 'true' ? accordionClasses.push('accordion-flush') : 0;
+    isOrderedList !== null ? accordionClasses.push('accordion-ol') : 0;
     extraClasses != undefined && extraClasses != null
       ? accordionClasses.push(extraClasses)
       : 0;

diff --git a/src/scss/_host.scss b/src/scss/_host.scss
@@ -1,3 +1,5 @@
+// Redefine the root bootstrap SASS so it's attached to the
+// Shadow DOM root (using :host), instead of the DOM root.
 :host,
 [data-bs-theme='light'] {
   // Note: Custom variable values only support SassScript inside `#{}`.

diff --git a/src/scss/themed-bootstrap.scss b/src/scss/themed-bootstrap.scss
@@ -1,5 +1,3 @@
-// Custom.scss
-// Option A: Include all of Bootstrap
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap');
 $primary: #004445 !default;
 $secondary: #e6e6e6 !default;
@@ -12,7 +10,53 @@ $dark: #000 !default;
 $font-family-sans-serif: 'Montserrat', sans-serif;
 $font-family-monospace: 'Montserrat', sans-serif;
 
+@import '../../node_modules/bootstrap/scss/functions';
+@import '../../node_modules/bootstrap/scss/variables';
+@import '../../node_modules/bootstrap/scss/variables-dark';
+@import '../../node_modules/bootstrap/scss/maps';
+@import '../../node_modules/bootstrap/scss/mixins';
+@import '../../node_modules/bootstrap/scss/utilities';
+
+// See: https://getbootstrap.com/docs/5.0/utilities/api/
+$utilities: map-merge(
+  $utilities,
+  (
+    // Create specific bg classes for stylized list items.
+    'li-background-color':
+      (
+        property: background-color,
+        class: li-bg,
+        local-vars: (
+          'bg-opacity': 1,
+        ),
+        values:
+          map-merge(
+            $utilities-bg-colors,
+            (
+              'transparent': transparent,
+              'body-secondary':
+                rgba(
+                  var(--#{$prefix}secondary-bg-rgb),
+                  var(--#{$prefix}bg-opacity)
+                ),
+              'body-tertiary':
+                rgba(
+                  var(--#{$prefix}tertiary-bg-rgb),
+                  var(--#{$prefix}bg-opacity)
+                ),
+            )
+          ),
+      ),
+    // Create specific subtle bg classes for stylized list items.
+    'li-subtle-background-color':
+      (
+        property: background-color,
+        class: li-bg,
+        values: $utilities-bg-subtle,
+      )
+  )
+);
+
 @import '../../node_modules/bootstrap/scss/bootstrap';
+// Override bootstrap _root.scss.
 @import './host';
-
-// Then add additional custom code here