[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/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

@@ -8,85 +8,31 @@ export default {
 };
 
 export const Basic = () => html`
-  <cod-button-group data-type="group" data-label="basic example">
+  <cod-button-group data-type="group" label="basic example">
     <div class="no-wc btn-group" role="group" aria-label="Basic example">
       <button type="button" class="btn btn-primary">Left</button>
       <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>
 `;
 
@@ -136,7 +82,7 @@ export const CheckboxButtonGroup = () => html`
     ></cod-form-check>
   </cod-button-group>
   <br /><br />
-  <cod-button-group data-type="group" data-label="basic example">
+  <cod-button-group data-type="group" label="basic example">
     <cod-form-check-group data-type="radio" class="d-flex">
       <cod-form-check
         data-id="radio-button-1"
@@ -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
+        disable="false"
+        label="Link"
+        background-color="primary"
+        shape="fluid"
+        link="https://detroitmi.gov"
       ></cod-button>
     </cod-card-body>
   </cod-card>