[Button.js] Update API for HTML standard, simplify attribute naming, & migrate to named slots

src/components/atoms/Button/Button.js

@@ -12,23 +12,23 @@ export default class Button extends HTMLElement {
 
   connectedCallback() {
     // Button attributes
-    const close = this.getAttribute('data-close');
-    const link = this.getAttribute('data-link');
-    const btnID = this.getAttribute('data-id');
-    const ariaLabel = this.getAttribute('data-aria-label');
-    const primary = this.getAttribute('data-primary');
-    const backgroundColor = this.getAttribute('data-background-color');
-    const shape = this.getAttribute('data-shape');
-    const icon = this.getAttribute('data-icon');
-    const iconSize = this.getAttribute('data-icon-size');
-    const iconOrder = this.getAttribute('data-icon-order');
-    const hiddenLabel = this.getAttribute('data-hidden-label');
-    const imgSrc = this.getAttribute('data-img');
-    const imgAlt = this.getAttribute('data-img-alt');
-    const size = this.getAttribute('data-size');
-    const extraClasses = this.getAttribute('data-extra-classes');
-    const label = this.getAttribute('data-label');
-    const disableStatus = this.getAttribute('data-disable');
+    const close = this.hasAttribute('close');
+    const link = this.getAttribute('link');
+    const btnID = this.getAttribute('id');
+    const ariaLabel = this.getAttribute('aria-label');
+    const primary = this.hasAttribute('primary');
+    const backgroundColor = this.getAttribute('background-color');
+    const shape = this.getAttribute('shape');
+    const icon = this.getAttribute('icon');
+    const iconSize = this.getAttribute('icon-size');
+    const iconOrder = this.getAttribute('icon-order');
+    const hiddenLabel = this.getAttribute('hidden-label');
+    const imgSrc = this.getAttribute('img');
+    const imgAlt = this.getAttribute('img-alt');
+    const size = this.getAttribute('size');
+    const extraClasses = this.getAttribute('extra-classes');
+    const label = this.getAttribute('label');
+    const disableStatus = this.hasAttribute('disabled');
     // Building Button component
     const btn = document.createElement('button');
     const btnClasses = ['btn'];
@@ -38,9 +38,9 @@ export default class Button extends HTMLElement {
     }
     disableStatus === 'true' ? (btn.disabled = true) : (btn.disabled = false);
     btn.setAttribute('aria-label', `${ariaLabel || ''}`);
-    if (primary === 'true') {
+    if (primary) {
       btnClasses.push(`btn-${backgroundColor}`);
-    } else if (primary === 'false') {
+    } else {
       btnClasses.push(`btn-outline-${backgroundColor}`);
     }
     shape === 'square'
@@ -51,7 +51,9 @@ export default class Button extends HTMLElement {
     imgAlt
       ? btnClasses.push('cod-button--img')
       : btnClasses.push('cod-button--not-img');
-    close === 'true' ? btnClasses.push('btn-close') : 0;
+    if (close) {
+      btnClasses.push('btn-close');
+    }
     btn.className = btnClasses.join(' ');
 
     if (icon) {

src/components/atoms/ModalFooter/ModalFooter.js

@@ -46,9 +46,9 @@ export default class ModalFooter extends HTMLElement {
     const extraClasses = this.getAttribute('data-extra-classes');
 
     const modalFooterClasses = ['modal-footer'];
-    this.closeBtn.setAttribute('data-img-alt', '');
-    this.closeBtn.setAttribute('data-icon', '');
-    this.closeBtn.setAttribute('data-label', 'Close');
+    this.closeBtn.setAttribute('img-alt', '');
+    this.closeBtn.setAttribute('icon', '');
+    this.closeBtn.setAttribute('label', 'Close');
     this.closeBtn.setAttribute('data-bs-dismiss', 'modal');
 
     // TODO: Fix old ESLint errors - see issue #1099

src/components/atoms/ModalHeader/ModalHeader.js

@@ -52,9 +52,9 @@ export default class ModalHeader extends HTMLElement {
     const modalHeaderClasses = ['modal-header'];
     this.modalTitle.className = 'modal-title';
     this.modalTitle.id = `${parentID}-label`;
-    this.closeBtn.setAttribute('data-img-alt', '');
-    this.closeBtn.setAttribute('data-icon', '');
-    this.closeBtn.setAttribute('data-close', 'true');
+    this.closeBtn.setAttribute('img-alt', '');
+    this.closeBtn.setAttribute('icon', '');
+    this.closeBtn.setAttribute('close', 'true');
     this.closeBtn.setAttribute('data-bs-dismiss', 'modal');
 
     // TODO: Fix old ESLint errors - see issue #1099
@@ -66,7 +66,7 @@ export default class ModalHeader extends HTMLElement {
     // TODO: Fix old ESLint errors - see issue #1099
     // eslint-disable-next-line eqeqeq
     btnDark == 'true'
-      ? this.closeBtn.setAttribute('data-extra-classes', 'btn-close-white')
+      ? this.closeBtn.setAttribute('extra-classes', 'btn-close-white')
       : 0;
     this.modalHeader.className = modalHeaderClasses.join(' ');
     this.closeBtn.addEventListener('click', this._onClick);

src/components/atoms/OffcanvasHeader/OffcanvasHeader.js

@@ -47,9 +47,9 @@ export default class OffcanvasHeader extends HTMLElement {
     const offcanvasHeaderClasses = ['offcanvas-header'];
     this.offcanvasTitle.className = 'offcanvas-title';
     this.offcanvasTitle.id = `${parentID}-label`;
-    this.closeBtn.setAttribute('data-img-alt', '');
-    this.closeBtn.setAttribute('data-icon', '');
-    this.closeBtn.setAttribute('data-close', 'true');
+    this.closeBtn.setAttribute('img-alt', '');
+    this.closeBtn.setAttribute('icon', '');
+    this.closeBtn.setAttribute('close', 'true');
     this.closeBtn.setAttribute('data-bs-dismiss', parentID);
     extraClasses ? offcanvasHeaderClasses.push(extraClasses) : 0;
     btnDark === 'true'

src/components/organisms/Map/Map.js

@@ -214,16 +214,16 @@ export default class Map extends HTMLElement {
             closeMapBtn.addEventListener('click', () => {
               app[0] ? app[0].setAttribute('data-app-state', 'results') : 0;
             });
-            closeMapBtn.setAttribute('data-primary', true);
-            closeMapBtn.setAttribute('data-label', 'x');
-            closeMapBtn.setAttribute('data-size', 'large');
+            closeMapBtn.setAttribute('primary', true);
+            closeMapBtn.setAttribute('label', 'x');
+            closeMapBtn.setAttribute('size', 'large');
             closeMapBtn.setAttribute('data-hover', false);
-            closeMapBtn.setAttribute('data-background-color', 'warning');
-            closeMapBtn.setAttribute('data-img', '');
-            closeMapBtn.setAttribute('data-img-alt', '');
-            closeMapBtn.setAttribute('data-icon', '');
-            closeMapBtn.setAttribute('data-shape', 'square');
-            closeMapBtn.setAttribute('data-extra-classes', 'fw-bold');
+            closeMapBtn.setAttribute('background-color', 'warning');
+            closeMapBtn.setAttribute('img', '');
+            closeMapBtn.setAttribute('img-alt', '');
+            closeMapBtn.setAttribute('icon', '');
+            closeMapBtn.setAttribute('shape', 'square');
+            closeMapBtn.setAttribute('extra-classes', 'fw-bold');
             this.mapWrapper.appendChild(closeMapBtn);
             app[0] ? app[0].setAttribute('data-map-state', 'init') : 0;
             break;

src/stories/button.stories.js

@@ -8,7 +8,7 @@ export default {
     primary: {
       control: { type: 'boolean' },
     },
-    disable: COMMON_STORY_ARGS.disabled,
+    disabled: COMMON_STORY_ARGS.disabled,
     // TODO: Make this attr name and accepted
     // values consistent with other action button, progress bar,
     // etc. Issue #202.
@@ -35,36 +35,36 @@ const Template = (args) => {
   btn.addEventListener('click', (e) => {
     args.onclick(e);
   });
-  btn.setAttribute('data-primary', args.primary);
-  btn.setAttribute('data-disable', args.disable);
-  btn.setAttribute('data-label', args.label);
-  btn.setAttribute('data-img', args.img ? args.img : '');
-  btn.setAttribute('data-img-alt', args.imgAlt ? args.imgAlt : '');
-  btn.setAttribute('data-icon', args.icon ? args.icon : '');
-  btn.setAttribute('data-icon-order', args.iconOrder ? args.iconOrder : '');
-  btn.setAttribute('data-icon-size', args.iconSize ? args.iconSize : '');
-  btn.setAttribute('data-shape', args.shape);
-  btn.setAttribute('data-aria-label', args.ariaLabel ? args.ariaLabel : '');
+  btn.setAttribute('primary', args.primary);
+  btn.setAttribute('disabled', args.disabled);
+  btn.setAttribute('label', args.label);
+  btn.setAttribute('img', args.img ? args.img : '');
+  btn.setAttribute('img-alt', args.imgAlt ? args.imgAlt : '');
+  btn.setAttribute('icon', args.icon ? args.icon : '');
+  btn.setAttribute('icon-order', args.iconOrder ? args.iconOrder : '');
+  btn.setAttribute('icon-size', args.iconSize ? args.iconSize : '');
+  btn.setAttribute('shape', args.shape);
+  btn.setAttribute('aria-label', args.ariaLabel ? args.ariaLabel : '');
   args.backgroundColor
-    ? btn.setAttribute('data-background-color', args.backgroundColor)
-    : btn.setAttribute('data-background-color', 'primary');
+    ? btn.setAttribute('background-color', args.backgroundColor)
+    : btn.setAttribute('background-color', 'primary');
   if (args.close) {
-    btn.setAttribute('data-close', args.close);
+    btn.setAttribute('close', args.close);
   }
   if (args.hLabel) {
-    btn.setAttribute('data-hidden-label', args.hLabel);
+    btn.setAttribute('hidden-label', args.hLabel);
   }
   if (args.size) {
-    btn.setAttribute('data-size', args.size);
+    btn.setAttribute('size', args.size);
   }
   if (args.id) {
-    btn.setAttribute('data-id', args.id);
+    btn.setAttribute('id', args.id);
   }
   if (args.link) {
-    btn.setAttribute('data-link', args.link);
+    btn.setAttribute('link', args.link);
   }
   if (args.extraClasses) {
-    btn.setAttribute('data-extra-classes', args.extraClasses);
+    btn.setAttribute('extra-classes', args.extraClasses);
   }
   return btn;
 };

src/stories/buttongroup.stories.js

@@ -14,79 +14,25 @@ export const Basic = () => html`
       <button type="button" class="btn btn-primary">Middle</button>
       <button type="button" class="btn btn-primary">Right</button>
     </div>
-    <cod-button
-      data-label="Left"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Middle"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Right"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Left" background-color="primary" primary></cod-button>
+    <cod-button label="Middle" background-color="primary" primary></cod-button>
+    <cod-button label="Right" background-color="primary" primary></cod-button>
   </cod-button-group>
 `;
 
 export const Mixed = () => html`
   <cod-button-group data-type="group" data-label="basic example">
-    <cod-button
-      data-label="Left"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Middle"
-      data-background-color="warning"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Right"
-      data-background-color="danger"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Left" background-color="primary" primary></cod-button>
+    <cod-button label="Middle" background-color="warning" primary></cod-button>
+    <cod-button label="Right" background-color="danger" primary></cod-button>
   </cod-button-group>
 `;
 
 export const Outlined = () => html`
   <cod-button-group data-type="group" data-label="basic example">
-    <cod-button
-      data-label="Left"
-      data-background-color="primary"
-      data-primary="false"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Middle"
-      data-background-color="primary"
-      data-primary="false"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Right"
-      data-background-color="primary"
-      data-primary="false"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Left" background-color="primary" primary></cod-button>
+    <cod-button label="Middle" background-color="primary" primary></cod-button>
+    <cod-button label="Right" background-color="primary" primary></cod-button>
   </cod-button-group>
 `;
 
@@ -191,27 +137,9 @@ export const ButtonToolbar = () => html`
       data-label="group 1"
       data-extra-classes="me-2"
     >
-      <cod-button
-        data-label="1"
-        data-background-color="primary"
-        data-primary="false"
-        data-img-alt=""
-        data-icon=""
-      ></cod-button>
-      <cod-button
-        data-label="2"
-        data-background-color="primary"
-        data-primary="false"
-        data-img-alt=""
-        data-icon=""
-      ></cod-button>
-      <cod-button
-        data-label="3"
-        data-background-color="primary"
-        data-primary="false"
-        data-img-alt=""
-        data-icon=""
-      ></cod-button>
+      <cod-button label="1" background-color="primary" primary></cod-button>
+      <cod-button label="2" background-color="primary" primary></cod-button>
+      <cod-button label="3" background-color="primary" primary></cod-button>
     </cod-button-group>
     <cod-form-control
       data-tag="input"
@@ -234,40 +162,10 @@ export const Vertical = () => html`
     data-label="Vertical button group"
     data-vertical="true"
   >
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
   </cod-button-group>
 `;

src/stories/card.stories.js

@@ -35,18 +35,12 @@ export const Basic = () => html`
         of the card's content.
       </p>
       <cod-button
-        data-primary="true"
-        data-disable="false"
-        data-label="Link"
-        data-background-color="primary"
-        data-img=""
-        data-img-alt=""
-        data-icon=""
-        data-icon-order=""
-        data-icon-size=""
-        data-shape="fluid"
-        data-aria-label=""
-        data-link="https://detroitmi.gov"
+        primary
+        disabled="false"
+        label="Link"
+        background-color="primary"
+        shape="fluid"
+        link="https://detroitmi.gov"
       ></cod-button>
     </cod-card-body>
   </cod-card>