Merge branch 'dev' into feature.button.100

CityOfDetroit · Nov 14, 2023 · c45c414 · c45c414
2 parents 30dc009 + df9a0f8
commit c45c414
Show file tree

Hide file tree

Showing 23 changed files with 648 additions and 152 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -3,7 +3,7 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-a12y',
+    '@storybook/addon-a11y',
     '@storybook/addon-coverage',
     '@storybook/addon-interactions',
     '@storybook/addon-mdx-gfm',

diff --git a/src/components/atoms/Icon/Icon.js b/src/components/atoms/Icon/Icon.js
@@ -2,7 +2,6 @@ export default class Icon extends HTMLElement {
   constructor() {
     // Always call super first in constructor
     super();
-
     // Create a shadow root.
     this.attachShadow({ mode: 'open' });
   }
@@ -13,9 +12,7 @@ export default class Icon extends HTMLElement {
     }
 
     // Icon attributes
-    // TODO: See CityOfDetroit/detroitmi#1099
-    // eslint-disable-next-line prefer-const
-    let icon = this.getAttribute('data-icon');
+    const icon = this.getAttribute('data-icon');
     let size = this.getAttribute('data-size');
     switch (size) {
       case 'small':
@@ -73,106 +70,62 @@ export default class Icon extends HTMLElement {
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
                     <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'house-fill':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
                     <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
                     <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'exclamation-circle':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                     <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'exclamation-circle-fill':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
                     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'exclamation-triangle':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                     <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                     <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'check-circle':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
                     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                     <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'check-circle-fill':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'calendar':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                     <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'calendar-fill':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar-fill" viewBox="0 0 16 16">
                     <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'calendar-date':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar-date" viewBox="0 0 16 16">
                     <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
                 <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       case 'calendar-date-fill':
         return `
                 <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar-date-fill" viewBox="0 0 16 16">
                     <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4V.5zm5.402 9.746c.625 0 1.184-.484 1.184-1.18 0-.832-.527-1.23-1.16-1.23-.586 0-1.168.387-1.168 1.21 0 .817.543 1.2 1.144 1.2z"/>
                 <path d="M16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zm-6.664-1.21c-1.11 0-1.656-.767-1.703-1.407h.683c.043.37.387.82 1.051.82.844 0 1.301-.848 1.305-2.164h-.027c-.153.414-.637.79-1.383.79-.852 0-1.676-.61-1.676-1.77 0-1.137.871-1.809 1.797-1.809 1.172 0 1.953.734 1.953 2.668 0 1.805-.742 2.871-2 2.871zm-2.89-5.435v5.332H5.77V8.079h-.012c-.29.156-.883.52-1.258.777V8.16a12.6 12.6 0 0 1 1.313-.805h.632z"/>
                 </svg>`;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line no-unreachable
-        break;
-
       default:
         break;
     }

diff --git a/src/components/atoms/TableBody/TableBody.css b/src/components/atoms/TableBody/TableBody.css
@@ -0,0 +1,3 @@
+tbody {
+  display: block;
+}
diff --git a/src/components/atoms/TableBody/TableBody.js b/src/components/atoms/TableBody/TableBody.js
@@ -1,6 +1,10 @@
 import styles from '!!raw-loader!./TableBody.css';
 import varStyles from '!!raw-loader!../../../shared/variables.css';
 import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+import {
+  cellHeaderBlockClass,
+  stackedTableClass,
+} from '../../../shared/js/utilities';
 
 const template = document.createElement('template');
 
@@ -15,15 +19,19 @@ export default class TableBody extends HTMLElement {
     // Create a shadow root
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
-    this.tableBody = document.createElement('div');
-    this.tableBody.role = 'rowgroup';
+    this.tableBody = document.createElement('tbody');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {
       // TODO: See CityOfDetroit/detroitmi#1099
       // eslint-disable-next-line prefer-const
       let tempElements = Array.from(this.children);
       tempElements.forEach((node, index) => {
+        if (index === 0) {
+          node.setIsFirst();
+        } else if (index % 2 !== 0) {
+          node.setIsOdd();
+        }
         // TODO: See CityOfDetroit/detroitmi#1099
         // eslint-disable-next-line eqeqeq
         this.getAttribute('data-striped-row') == 'true' && index % 2 == 0
@@ -44,11 +52,14 @@ export default class TableBody extends HTMLElement {
         this.getAttribute('data-vertical-align') == 'true'
           ? node.setAttribute('data-vertical-align', 'true')
           : 0;
-        // TODO: See CityOfDetroit/detroitmi#1099
-        // eslint-disable-next-line eqeqeq
-        this.getAttribute('data-legacy-responsive') == 'true'
-          ? node.setAttribute('data-legacy-responsive', 'true')
+        this.getAttribute('data-scrollable') === 'true'
+          ? node.setAttribute('data-scrollable', 'true')
           : 0;
+
+        if (this.isStacked()) {
+          node.setIsStacked(true /* isStacked */, this.isCellHeaderBlock());
+        }
+
         this.tableBody.append(node);
       });
     });
@@ -66,4 +77,26 @@ export default class TableBody extends HTMLElement {
 
     shadow.appendChild(this.tableBody);
   }
+
+  setIsStacked(isStacked, isCellHeaderBlock) {
+    if (isStacked) {
+      this.tableBody.classList.add(stackedTableClass);
+    } else {
+      this.tableBody.classList.remove(stackedTableClass);
+    }
+
+    if (isCellHeaderBlock) {
+      this.tableBody.classList.add(cellHeaderBlockClass);
+    } else {
+      this.tableBody.classList.remove(cellHeaderBlockClass);
+    }
+  }
+
+  isStacked() {
+    return this.tableBody.classList.contains(stackedTableClass);
+  }
+
+  isCellHeaderBlock() {
+    return this.tableBody.classList.contains(cellHeaderBlockClass);
+  }
 }
diff --git a/src/components/atoms/TableCell/TableCell.css b/src/components/atoms/TableCell/TableCell.css
@@ -1,16 +1,17 @@
-.table-cell {
+td {
+  display: block;
   padding: 0.5rem 0.5rem;
   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-columns {
+td.table-striped,
+td.table-striped-columns {
   --bs-table-accent-bg: var(--bs-table-striped-bg);
 }
 
-.table-cell.table-legacy-responsive {
+td.table-scrollable {
   width: 5em;
 }
diff --git a/src/components/atoms/TableCell/TableCell.js b/src/components/atoms/TableCell/TableCell.js
@@ -1,6 +1,10 @@
 import styles from '!!raw-loader!./TableCell.css';
 import varStyles from '!!raw-loader!../../../shared/variables.css';
 import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+import {
+  cellHeaderBlockClass,
+  stackedTableClass,
+} from '../../../shared/js/utilities';
 
 const template = document.createElement('template');
 
@@ -15,16 +19,22 @@ export default class TableCell extends HTMLElement {
     // 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';
+    this.tableCell = document.createElement('td');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {
-      // TODO: See CityOfDetroit/detroitmi#1099
-      // eslint-disable-next-line prefer-const
-      let tempElements = Array.from(this.childNodes);
+      const tempElements = ev.target.assignedNodes();
       tempElements.forEach((node) => {
-        this.tableCell.appendChild(node);
+        // Only accept HTMLElements or non-empty text nodes.
+        if (
+          node.nodeType !== Node.TEXT_NODE ||
+          !/^\s*$/.test(node.textContent)
+        ) {
+          const contentDiv = document.createElement('div');
+          contentDiv.classList.add('content');
+          contentDiv.appendChild(node);
+          this.tableCell.appendChild(contentDiv);
+        }
       });
     });
 
@@ -52,37 +62,53 @@ export default class TableCell extends HTMLElement {
     let stripedCol = this.getAttribute('data-striped-col');
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line prefer-const
-    let legacyResponsive = this.getAttribute('data-legacy-responsive');
-    // TODO: See CityOfDetroit/detroitmi#1099
-    // eslint-disable-next-line prefer-const
     let verticalAlign = this.getAttribute('data-vertical-align');
     // 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 tableCellClasses = ['table-cell'];
-    // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
     verticalAlign != undefined && verticalAlign != null
-      ? tableCellClasses.push(verticalAlign)
+      ? this.tableCell.classList.add(verticalAlign)
       : 0;
-    // TODO: See CityOfDetroit/detroitmi#1099
-    // eslint-disable-next-line eqeqeq
-    legacyResponsive == 'true'
-      ? tableCellClasses.push('table-legacy-responsive')
+    this.getAttribute('data-scrollable') === 'true'
+      ? this.tableCell.classList.add('table-scrollable')
       : 0;
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
-    stripedRow == 'true' ? tableCellClasses.push('table-striped') : 0;
+    stripedRow == 'true' ? this.tableCell.classList.add('table-striped') : 0;
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
-    stripedCol == 'true' ? tableCellClasses.push('table-striped-columns') : 0;
+    stripedCol == 'true'
+      ? this.tableCell.classList.add('table-striped-columns')
+      : 0;
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
     extraClasses != undefined && extraClasses != null
-      ? tableCellClasses.push(extraClasses)
+      ? this.tableCell.classList.add(extraClasses)
       : 0;
-    this.tableCell.className = tableCellClasses.join(' ');
+
+    const dataLabel = this.getAttribute('data-label');
+    if (dataLabel) {
+      this.tableCell.setAttribute('data-label', dataLabel);
+    }
+  }
+
+  setIsStacked(isStacked, isCellHeaderBlock) {
+    if (isStacked) {
+      this.tableCell.classList.add(stackedTableClass);
+    } else {
+      this.tableCell.classList.remove(stackedTableClass);
+    }
+
+    if (isCellHeaderBlock) {
+      this.tableCell.classList.add(cellHeaderBlockClass);
+    } else {
+      this.tableCell.classList.remove(cellHeaderBlockClass);
+    }
+  }
+
+  isStacked() {
+    return this.tableCell.classList.contains(stackedTableClass);
   }
 }
diff --git a/src/components/atoms/TableCell/_table-cell.scss b/src/components/atoms/TableCell/_table-cell.scss
@@ -0,0 +1,27 @@
+@use '../../../scss/mixins/table';
+@import '../../../../node_modules/bootstrap/scss/mixins/breakpoints';
+@import '../../../../node_modules/bootstrap/scss/variables';
+
+@include media-breakpoint-down(lg) {
+  td.table-stacked.cell-header-block {
+    @include table.th-td-stacked-block-styles;
+  }
+
+  td.table-stacked:not(.cell-header-block) {
+    @include table.th-td-stacked-inline-styles;
+
+    & div.content {
+      @include table.cell-content-stacked-inline-styles;
+    }
+  }
+
+  td[data-label].table-stacked {
+    &.cell-header-block {
+      @include table.th-td-labeled-stacked-block-styles;
+    }
+
+    &:not(.cell-header-block) {
+      @include table.th-td-labeled-stacked-inline-styles;
+    }
+  }
+}
diff --git a/src/components/atoms/TableCellHeader/TableCellHeader.css b/src/components/atoms/TableCellHeader/TableCellHeader.css
@@ -1,4 +1,5 @@
-.table-cell-header {
+th {
+  display: block;
   padding: 0.5rem 0.5rem;
   background-color: var(--bs-table-bg);
   border-bottom: solid var(--bs-border-width) var(--bs-secondary);
@@ -7,10 +8,10 @@
   height: 100%;
 }
 
-.table-cell-header.table-striped-columns {
+th.table-striped-columns {
   --bs-table-accent-bg: var(--bs-table-striped-bg);
 }
 
-.table-cell-header.table-legacy-responsive {
+th.table-scrollable {
   width: 5em;
 }