@muonic/muon 0.0.2-experimental-173-ae546db.0 → 0.0.2-experimental-175-121b4aa.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.8](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.7...v0.0.2-beta.8) (2023-04-20)
+
+
+### Bug Fixes
+
+* check if parentElement exists ([2055f37](https://github.com/centrica-engineering/muon/commit/2055f377a03194ebd28fa74f38597dca8e612507))
+* loading and disabled cta ([0569563](https://github.com/centrica-engineering/muon/commit/056956309c202557ac708e17ad4ed5a5760c3887))
+* url state ([023fb86](https://github.com/centrica-engineering/muon/commit/023fb86886cf9d0dbe432fbae1b97e3cb220d5d8))
+
 ### [0.0.2-beta.7](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.6...v0.0.2-beta.7) (2023-04-04)
 
 ### [0.0.2-beta.6](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.5...v0.0.2-beta.6) (2023-03-28)

package/components/cta/src/cta-component.js

@@ -1,4 +1,4 @@
-import { MuonElement, html, classMap, styleMap, ScopedElementsMixin, literal, staticHTML, ifDefined } from '@muonic/muon';
+import { MuonElement, html, classMap, styleMap, ScopedElementsMixin, literal, staticHTML } from '@muonic/muon';
 import { Icon } from '@muon/components/icon';
 import {
   CTA_CONFIG_TYPE,
@@ -51,7 +51,7 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
 
   get classes() {
     const parentElement = this.parentElement;
-    const isDisabled = parentElement.getAttribute('disabled') || this.disabled;
+    const isDisabled = parentElement?.getAttribute('disabled') || this.disabled;
 
     return {
       cta: true,
@@ -100,7 +100,7 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
     const isInLink = parentName === 'A';
     const isInBtn = parentName === 'BUTTON';
     const isInNativeForm = parentName === 'FORM';
-    const isDisabled = parentElement.getAttribute('disabled') || this.disabled;
+    const isDisabled = parentElement?.getAttribute('disabled') || this.disabled;
     let element = this.href?.length > 0 ? 'a' : 'div';
 
     if (
@@ -109,23 +109,35 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
       !isInLink &&
       !isInBtn &&
       !isDisabled &&
+      !this.loading &&
       !this._isButton
     ) {
       if (!this.getAttribute('role')) {
         this.setAttribute('role', 'button');
       }
 
-      if (!this.getAttribute('tabindex')) {
-        this.setAttribute('tabindex', '0');
-      }
+      this.setAttribute('tabindex', '0');
     }
 
-    if (isDisabled) {
+    if (isDisabled || this.loading) {
       if (!this.getAttribute('aria-disabled')) {
         this.setAttribute('aria-disabled', 'true');
       }
+
+      this.setAttribute('tabindex', '-1');
     } else {
       this.removeAttribute('aria-disabled');
+
+      if (
+        this.getAttribute('tabindex') === '-1' &&
+        (this._isButton ||
+        isInBtn ||
+        isInNativeForm ||
+        isInLink ||
+        element === 'a')
+      ) {
+        this.removeAttribute('tabindex');
+      }
     }
 
     if (isInNativeForm || this._isButton) {
@@ -137,14 +149,11 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
       this.removeAttribute('tabindex');
     }
 
-    // eslint-disable-next-line no-nested-ternary
-    const tabIndex = isInLink ? -1 : element !== 'div' ? 0 : undefined;
-
     // eslint-disable-next-line no-nested-ternary
     const elementTag = element === 'button' ? literal`button` : element === 'a' ? literal`a` : literal`div`;
 
     return staticHTML`
-      <${elementTag} .href=${element === 'a' && this.href} ?disabled=${element === 'button' && (this.loading || this.disabled)} tabindex="${ifDefined(tabIndex)}" aria-label="${this.textContent}" class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
+      <${elementTag} .href=${element === 'a' && this.href} ?disabled=${element === 'button' && (this.loading || this.disabled)} aria-label="${this.textContent}" class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
         ${content}
       </${elementTag}>
     `;

package/components/icon/src/icon-component.js

@@ -24,7 +24,7 @@ export class Icon extends MuonElement {
       describe: { type: String },
       size: { type: Number },
       category: { type: String },
-      url: { type: String, state: true }
+      _url: { type: String, state: true }
     };
   }
 
@@ -39,7 +39,7 @@ export class Icon extends MuonElement {
     this.name = ICON_CONFIG_NAME;
     this.category = ICON_CONFIG_CATEGORY;
     this.allSizes = ICON_CONFIG_SIZES;
-    this.url = ICON_CONFIG_URL;
+    this._url = ICON_CONFIG_URL;
     this.describe = '';
   }
 
@@ -81,7 +81,7 @@ export class Icon extends MuonElement {
 
     return html`
       <div aria-hidden=${ifDefined(hidden)} role=${ifDefined(role)} aria-label=${ifDefined(role && this.describe)} class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
-        ${svgLoader({ name: this.name, category: this.category, path: this.url })}
+        ${svgLoader({ name: this.name, category: this.category, path: this._url })}
       </div>
     `;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-173-ae546db.0",
+  "version": "0.0.2-experimental-175-121b4aa.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/tests/components/cta/__snapshots__/cta.test.snap.js

@@ -97,7 +97,6 @@ snapshots["cta implements with a href"] =
   class="cta standard"
   href="https://example.com"
   style=""
-  tabindex="0"
 >
   <span class="label-holder">
     <slot>
@@ -117,7 +116,6 @@ snapshots["cta implements cta within an anchor element"] =
   aria-label="This is a button"
   class="cta standard"
   style=""
-  tabindex="-1"
 >
   <span class="label-holder">
     <slot>
@@ -137,7 +135,6 @@ snapshots["cta implements within a form"] =
   aria-label="This is a button"
   class="cta standard"
   style=""
-  tabindex="0"
 >
   <span class="label-holder">
     <slot>
@@ -157,7 +154,6 @@ snapshots["cta implements with triggering button"] =
   aria-label="This is a button"
   class="cta standard"
   style=""
-  tabindex="0"
 >
   <span class="label-holder">
     <slot>
@@ -185,7 +181,6 @@ snapshots["cta implements loading as a button"] =
   class="cta loading standard"
   disabled=""
   style=""
-  tabindex="0"
 >
   <span class="label-holder">
     Loading...

package/tests/components/cta/cta.test.js

@@ -110,7 +110,6 @@ describe('cta', () => {
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(cta.nodeName).to.equal('A', 'cta is an anchor element');
     expect(cta.href).to.equal('https://example.com/', 'cta has the href');
-    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
     expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
   });
 
@@ -126,7 +125,6 @@ describe('cta', () => {
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(cta.nodeName).to.equal('DIV', 'cta is a `div` element');
     expect(cta.href).to.equal(false, 'cta has NO href');
-    expect(cta.getAttribute('tabindex')).to.equal('-1', 'has tab index');
     expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
   });
 
@@ -144,7 +142,6 @@ describe('cta', () => {
     expect(el.getAttribute('tabindex')).to.not.exist; // eslint-disable-line no-unused-expressions
     expect(cta.nodeName).to.equal('BUTTON', 'cta is a `div` element');
     expect(cta.href).to.equal(false, 'cta has NO href');
-    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
     expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
   });
 
@@ -162,7 +159,6 @@ describe('cta', () => {
     expect(el.getAttribute('tabindex')).to.not.exist; // eslint-disable-line no-unused-expressions
     expect(cta.nodeName).to.equal('BUTTON', 'cta is a `div` element');
     expect(cta.href).to.equal(false, 'cta has NO href');
-    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
     expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
   });
 
@@ -180,7 +176,6 @@ describe('cta', () => {
     expect(el.getAttribute('tabindex')).to.not.exist; // eslint-disable-line no-unused-expressions
     expect(cta.nodeName).to.equal('BUTTON', 'cta is a `button` element');
     expect(cta.href).to.equal(false, 'cta has NO href');
-    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
     expect(cta.getAttribute('disabled')).to.equal('', 'cta is disabled');
   });
 

package/tests/scripts/utils/utils-test.mjs

@@ -185,7 +185,7 @@ testRunner('sourceFilesAnalyzer', async (t) => {
     cta: ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
     detail: ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
     form: ['standardTemplate', 'type'],
-    icon: ['size', 'classes', 'inlineStyles', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'url', 'describe', 'type'],
+    icon: ['size', 'classes', 'inlineStyles', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'describe', 'type'],
     image: ['src', 'classes', 'inlineStyles', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
     inputter: ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
     'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type']