Cleanup.Spinner

CHANGELOG.md

@@ -1,3 +1,21 @@
+# v1.0.21 (Tues May 14 2024)
+
+#### 🚀 Enhancement
+
+- Add Close Button to Alert Component [by @sreidthomas](https://github.com/CityOfDetroit/COD-Design-System/pull/208)
+- Encapsulate SCSS-generated CSS with each component [by @sreidthomas](https://github.com/CityOfDetroit/COD-Design-System/pull/136)
+- Create table v2 to resolve performance issues [by @maxatdetroit](https://github.com/CityOfDetroit/COD-Design-System/pull/207)
+
+#### 🏠 Internal
+
+- Resolve more ESLint errors [by @maxatdetroit](https://github.com/CityOfDetroit/COD-Design-System/pull/206)
+- Use common story arguments [by @maxatdetroit](https://github.com/CityOfDetroit/COD-Design-System/pull/210)
+
+#### Authors: 2
+
+- Shakira Reid-Thomas ([@sreidthomas](https://github.com/sreidthomas))
+- Max Morgan ([@maxatdetroit](https://github.com/maxatdetroit))
+
 # v1.0.20 (Mon Apr 22 2024)
 
 #### 🐛 Bug Fix

src/components/atoms/Alert/Alert.js

@@ -41,6 +41,7 @@ export default class Alert extends HTMLElement {
     this.shadowRoot.appendChild(bootStyles);
     this.shadowRoot.appendChild(variableStyles);
     this.shadowRoot.appendChild(alertStyles);
+
     // alert attributes
 
     const icon = this.getAttribute('data-icon');
@@ -92,5 +93,16 @@ export default class Alert extends HTMLElement {
       iconClass,
     ].join(' ');
     this.shadowRoot.appendChild(this.alert);
+
+    // Check if the alert is closeable
+    const isCloseable = this.hasAttribute('closeable');
+
+    if (isCloseable) {
+      // Add close button
+      const closeButton = document.createElement('cod-button');
+      closeButton.className = 'btn-close';
+      closeButton.addEventListener('click', () => this.remove());
+      this.alert.appendChild(closeButton);
+    }
   }
 }

src/components/atoms/Spinner/Spinner.js

@@ -22,13 +22,13 @@ export default class Image extends HTMLElement {
     this.shadowRoot.appendChild(spinnerStyles);
     // image attributes
 
-    const spinnerType = this.getAttribute('data-type');
+    const spinnerType = this.getAttribute('type');
 
-    const spinnerSize = this.getAttribute('data-size');
+    const spinnerSize = this.getAttribute('size');
 
-    const backgroundColor = this.getAttribute('data-background-color');
+    const backgroundColor = this.getAttribute('background-color');
 
-    const displayType = this.getAttribute('data-display-type');
+    const displayType = this.getAttribute('display-type');
     let spinnerSizeClass;
 
     // TODO: Fix old ESLint errors - see issue #1099

src/components/organisms/TableV2/TableV2.js

@@ -0,0 +1,64 @@
+import styles from '!!raw-loader!./TableV2.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+class TableV2 extends HTMLElement {
+  static observedAttributes = [];
+
+  constructor() {
+    // Always call super first in constructor
+    super();
+    // Create a shadow root
+    const shadow = this.attachShadow({ mode: 'open' });
+    // 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);
+  }
+
+  connectedCallback() {
+    // TODO: Add support for: scrollable,
+    // custom extra classes, dark, hover, and
+    // striped columns/rows.
+    this.shadowRoot.append(...this.childNodes);
+    this._addTableClasses();
+    this._slotCells();
+  }
+
+  _addTableClasses() {
+    const table = this.shadowRoot.querySelector('table');
+    table.classList.add('table');
+
+    const isStacked = this.hasAttribute('table-stacked');
+    if (isStacked) {
+      table.classList.add('table-stacked');
+    }
+  }
+
+  _slotCells() {
+    const cells = this.shadowRoot.querySelectorAll('td');
+    const cellHeaders = this.shadowRoot.querySelectorAll('th');
+    [...cells, ...cellHeaders].forEach((cellNode, idx) => {
+      const children = cellNode.childNodes;
+      const contentDiv = document.createElement('div');
+      contentDiv.classList.add('content');
+      const slotName = `slot-${idx}`;
+      contentDiv.setAttribute('slot', slotName);
+      contentDiv.append(...children);
+
+      const slot = document.createElement('slot');
+      slot.setAttribute('name', slotName);
+      cellNode.appendChild(slot);
+
+      this.appendChild(contentDiv);
+    });
+  }
+}
+
+export { TableV2 as default };

src/components/organisms/TableV2/TableV2.scss

@@ -0,0 +1,65 @@
+@use '../../../scss/mixins/table';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/breakpoints';
+
+@include media-breakpoint-down(lg) {
+  table.table-stacked {
+    & slot {
+      display: block;
+      flex: 1 1 0px;
+      padding: 0.5em 0.5em;
+    }
+
+    // Header & body styles.
+    & thead {
+      // Move table header off the screen to hide from
+      // sited viewers but remain enabled for screen readers
+      // and other AT.
+      position: absolute;
+      left: -10000px;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+    }
+
+    // Row styles.
+    & tr {
+      display: block;
+      border-top-width: 0;
+      width: 100%;
+      border-bottom: 2px solid var(--bs-black);
+
+      &:nth-child(1) {
+        border-top: 2px solid var(--bs-black);
+      }
+    }
+
+    // Cell header styles.
+    & th {
+      @include table.th-td-stacked-inline-styles;
+
+      & div.content {
+        @include table.cell-content-stacked-inline-styles;
+      }
+    }
+
+    & th[data-label] {
+      @include table.th-td-labeled-stacked-inline-styles;
+    }
+
+    // Cell styles.
+    & td {
+      @include table.th-td-stacked-inline-styles;
+
+      & div.content {
+        @include table.cell-content-stacked-inline-styles;
+      }
+    }
+
+    & td[data-label] {
+      @include table.th-td-labeled-stacked-inline-styles;
+    }
+  }
+}

src/components/organisms/TableV2/cod-table-v2.js

@@ -0,0 +1,2 @@
+import TableV2 from './TableV2';
+customElements.define('cod-table-v2', TableV2);

src/shared/js/storybook/args-utils.js

@@ -0,0 +1,112 @@
+const COMMON_STORY_ARGS = {
+  disabled: {
+    control: { type: 'boolean' },
+  },
+  required: {
+    control: { type: 'boolean' },
+  },
+  checked: {
+    control: { type: 'boolean' },
+  },
+  readOnly: {
+    control: { type: 'boolean' },
+  },
+  bootstrapColor: {
+    control: { type: 'select' },
+    options: [
+      'primary',
+      'secondary',
+      'success',
+      'info',
+      'warning',
+      'danger',
+      'light',
+      'dark',
+      'accent-primary',
+      'accent-secondary',
+    ],
+  },
+  // TODO: Use bootstrap color names. Issue #202.
+  numberColor: {
+    control: { type: 'select' },
+    options: [
+      'color-1',
+      'color-2',
+      'color-3',
+      'color-4',
+      'color-5',
+      'color-light',
+      'color-dark',
+    ],
+  },
+  order: {
+    control: { type: 'select' },
+    options: ['left', 'right'],
+  },
+  // TODO: Make the following two size attr names/values
+  // consistent. Issue #202.
+  size: {
+    control: { type: 'select' },
+    options: ['sm', 'md', 'lg', 'xl'],
+  },
+  longSize: {
+    control: { type: 'select' },
+    options: ['small', 'medium', 'large', 'x-large'],
+  },
+  icon: {
+    control: { type: 'select' },
+    options: [
+      'bicycle',
+      'bounding-box',
+      'bounding-box-circle',
+      'building',
+      'building-fill',
+      'buildings',
+      'buildings-fill',
+      'bus-front',
+      'bus-front-fill',
+      'calendar',
+      'calendar-fill',
+      'calendar-date',
+      'calendar-date-fill',
+      'cash',
+      'check-circle',
+      'check-circle-fill',
+      'chevron-right',
+      'chevron-right-circle',
+      'chevron-right-circle-fill',
+      'chevron-left',
+      'chevron-left-circle',
+      'chevron-left-circle-fill',
+      'chevron-up',
+      'chevron-up-circle',
+      'chevron-up-circle-fill',
+      'chevron-down',
+      'chevron-down-circle',
+      'chevron-down-circle-fill',
+      'currency-dollar',
+      'exclamation-circle',
+      'exclamation-circle-fill',
+      'exclamation-triangle',
+      'file-earmark',
+      'funnel',
+      'funnel-fill',
+      'house',
+      'house-fill',
+      'list-task',
+      'newspaper',
+      'no-parking',
+      'no-parking-fill',
+      'journals',
+      'p-circle',
+      'p-circle-fill',
+      'toilet',
+      'universal-access',
+      'universal-access-circle',
+      'wifi',
+      'wifi-off',
+    ].sort(),
+  },
+};
+
+export { COMMON_STORY_ARGS };