[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.getAttribute('close');
+    const link = this.getAttribute('link');
+    const btnID = this.getAttribute('id');
+    const ariaLabel = this.getAttribute('aria-label');
+    const primary = this.getAttribute('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.getAttribute('disabled');
     // Building Button component
     const btn = document.createElement('button');
     const btnClasses = ['btn'];
@@ -58,8 +58,8 @@ export default class Button extends HTMLElement {
       // Loading icon
       const iconContainer = document.createElement('span');
       const activeIcon = document.createElement('cod-icon');
-      activeIcon.setAttribute('data-icon', icon);
-      activeIcon.setAttribute('data-size', iconSize);
+      activeIcon.setAttribute('icon', icon);
+      activeIcon.setAttribute('size', iconSize);
       iconContainer.appendChild(activeIcon);
       btn.innerText = label;
       if (iconOrder === 'left') {

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;
 };