@muonic/muon 0.0.2-beta.2 → 0.0.2-beta.20

package/CHANGELOG.md

@@ -2,6 +2,116 @@
 
 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.20](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.19...v0.0.2-beta.20) (2023-06-06)
+
+
+### Bug Fixes
+
+* pull back width and font default styles ([9afa041](https://github.com/centrica-engineering/muon/commit/9afa0419ebb9475d31506da795e12a8a123291a1))
+
+### [0.0.2-beta.19](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.18...v0.0.2-beta.19) (2023-06-05)
+
+
+### Features
+
+* nested import ([a5cb81c](https://github.com/centrica-engineering/muon/commit/a5cb81ca28b041af98728bce26726d3a214c4c28))
+
+### [0.0.2-beta.18](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.17...v0.0.2-beta.18) (2023-06-05)
+
+
+### Bug Fixes
+
+* finding all component files ([1216b2f](https://github.com/centrica-engineering/muon/commit/1216b2f45347220bd19c521c3dd5c196dba38200))
+
+### [0.0.2-beta.17](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.16...v0.0.2-beta.17) (2023-05-31)
+
+
+### Bug Fixes
+
+* switch to light-dom ([5e1c67b](https://github.com/centrica-engineering/muon/commit/5e1c67bbb9be239a0717103685be0a2e24e51990))
+
+### [0.0.2-beta.16](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.15...v0.0.2-beta.16) (2023-05-31)
+
+### [0.0.2-beta.15](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.14...v0.0.2-beta.15) (2023-05-24)
+
+### [0.0.2-beta.14](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.13...v0.0.2-beta.14) (2023-05-23)
+
+
+### Features
+
+* include lineLength token ([f5d00f9](https://github.com/centrica-engineering/muon/commit/f5d00f94078e7f49d055c9b42da041fa95c788ee))
+
+
+### Bug Fixes
+
+* commands ([351c59e](https://github.com/centrica-engineering/muon/commit/351c59e3e98d1aa2181ae3a6e498ee6fcb3ea891))
+* default ([c766154](https://github.com/centrica-engineering/muon/commit/c766154159d7c4c8fcca59ed2d096bdbcf5d94c2))
+* snapshots ([444b5ba](https://github.com/centrica-engineering/muon/commit/444b5bae280c962909088d2abc24b10b18170193))
+
+### [0.0.2-beta.13](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.12...v0.0.2-beta.13) (2023-05-15)
+
+### [0.0.2-beta.12](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.11...v0.0.2-beta.12) (2023-05-09)
+
+### [0.0.2-beta.11](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.10...v0.0.2-beta.11) (2023-05-05)
+
+
+### Bug Fixes
+
+* revert dev-storybook ([1b7d07b](https://github.com/centrica-engineering/muon/commit/1b7d07b97456efcbb774ea15da3ae7e3dac52aa2))
+
+### [0.0.2-beta.10](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.9...v0.0.2-beta.10) (2023-05-04)
+
+
+### Bug Fixes
+
+* move adding lightdom on perform ([41e7843](https://github.com/centrica-engineering/muon/commit/41e7843f57342e84d719a86a34de0ce1862081dc))
+
+### [0.0.2-beta.9](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.8...v0.0.2-beta.9) (2023-04-21)
+
+### [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)
+
+
+### Features
+
+* postcss extend ([7608e26](https://github.com/centrica-engineering/muon/commit/7608e26e1f1876abacbca562fb6724bebc0cbf50))
+
+### [0.0.2-beta.5](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.4...v0.0.2-beta.5) (2023-02-27)
+
+
+### Features
+
+* global styles ([6705c22](https://github.com/centrica-engineering/muon/commit/6705c224f7664e1ab6ad9d7261921474de1bf0fc))
+
+### [0.0.2-beta.4](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.3...v0.0.2-beta.4) (2023-02-23)
+
+
+### Features
+
+* config extend style dictionary ([70bbdc7](https://github.com/centrica-engineering/muon/commit/70bbdc7d7cae3e103da8420d1699c6143d833c07))
+
+
+### Bug Fixes
+
+* enable style dictionary extension ([d718dd9](https://github.com/centrica-engineering/muon/commit/d718dd93676976d0b4fcb25acb7572b15c5d05c5))
+
+### [0.0.2-beta.3](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.2...v0.0.2-beta.3) (2023-02-21)
+
+
+### Features
+
+* getters for style and class ([e486ea2](https://github.com/centrica-engineering/muon/commit/e486ea2d25c5a6eb0ce5acb1701cc33e1443bc56))
+
 ### [0.0.2-beta.2](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.1...v0.0.2-beta.2) (2023-02-16)
 
 

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

@@ -1,4 +1,4 @@
-import { MuonElement, html, ScopedElementsMixin } from '@muonic/muon';
+import { MuonElement, classMap, styleMap, html, ScopedElementsMixin } from '@muonic/muon';
 import { CardMixin } from '@muon/mixins/card-mixin';
 import { ImageHolderMixin } from '@muon/mixins/image-holder-mixin';
 import { Image } from '@muon/components/image';
@@ -9,6 +9,7 @@ import styles from './card-styles.css';
  *
  * @element card
  */
+
 export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonElement))) {
 
   static get scopedElements() {
@@ -17,6 +18,16 @@ export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonEle
     };
   }
 
+  get classes() {
+    return {
+      card: true
+    };
+  }
+
+  get inlineStyles() {
+    return {};
+  }
+
   get _addImage() {
     return this.image ? html`
     <div class="media">
@@ -26,7 +37,7 @@ export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonEle
 
   get standardTemplate() {
     return html`
-      <div class="card">
+      <div class="${classMap(this.classes)}" style="${styleMap(this.inlineStyles)}">
         ${this._addImage}
         <div class="body">
           ${this._addHeader}

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

@@ -1,4 +1,4 @@
-import { MuonElement, html, classMap, 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,
@@ -49,6 +49,22 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
     this.icon = CTA_ICON_NAME;
   }
 
+  get classes() {
+    const parentElement = this.parentElement;
+    const isDisabled = parentElement?.getAttribute('disabled') || this.disabled;
+
+    return {
+      cta: true,
+      [this.type]: true,
+      loading: this.loading,
+      disabled: isDisabled
+    };
+  }
+
+  get inlineStyles() {
+    return {};
+  }
+
   /**
    * Adds icon html.
    *
@@ -84,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 (
@@ -93,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) {
@@ -121,20 +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;
-    const classes = {
-      cta: true,
-      [this.type]: true,
-      loading: this.loading,
-      disabled: isDisabled
-    };
-
     // 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(classes)}>
+      <${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/cta/src/cta-styles.css

@@ -82,8 +82,8 @@
     }
 
     & .label-holder {
-      min-inline-size: 10em;
-      max-inline-size: 32em;
+      min-inline-size: $CTA_LABEL_MIN_WIDTH;
+      max-inline-size: $CTA_LABEL_MAX_WIDTH;
     }
 
     & .icon {

package/components/cta/src/design-tokens.json

@@ -72,6 +72,16 @@
         "value": "{ theme.size.md.value }"
       }
     },
+    "label": {
+      "minWidth": {
+        "description": "The minimum width of the label.",
+        "value": "15ch"
+      },
+      "maxWidth": {
+        "description": "The maximum width of the label.",
+        "value": "{ theme.font.lineLength.value }"
+      }
+    },
     "font": {
       "family": {
         "description": "Font family which defaults to sans-serif.",

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,10 +39,23 @@ 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 = '';
   }
 
+  get classes() {
+    return {
+      icon: true,
+      [this.name]: true
+    };
+  }
+
+  get inlineStyles() {
+    return {
+      '--icon-size': this.iconSize
+    };
+  }
+
   /**
    * A getter method to get size of image.
    *
@@ -65,18 +78,10 @@ export class Icon extends MuonElement {
   get standardTemplate() {
     const hidden = this.describe?.length === 0 ? 'true' : undefined;
     const role = !hidden ? 'img' : undefined;
-    const classes = {
-      icon: true,
-      [this.type]: true
-    };
-
-    const styles = {
-      '--icon-size': this.iconSize
-    };
 
     return html`
-      <div aria-hidden=${ifDefined(hidden)} role=${ifDefined(role)} aria-label=${ifDefined(role && this.describe)} class=${classMap(classes)} style=${styleMap(styles)}>
-        ${svgLoader({ name: this.name, category: this.category, path: this.url })}
+      <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 })}
       </div>
     `;
   }

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

@@ -45,7 +45,23 @@ export class Image extends MuonElement {
     this.placeholder = IMAGE_CONFIG_PLACEHOLDER;
     this.loading = 'lazy'; // eager|lazy
     this._ratios = IMAGE_CONFIG_RATIOS;
+  }
 
+  get classes() {
+    return {
+      image: true,
+      'no-ratio': !this.ratio || this.ratio?.length < 1,
+      'is-background': this.background
+    };
+  }
+
+  get inlineStyles() {
+    const [x, y] = this.ratio.split(' / ');
+    return {
+      '--image-ratio': CSS?.supports('aspect-ratio', '1 / 1') && this.ratio ? this.ratio : undefined,
+      '--image-padding': CSS?.supports('aspect-ratio', '1 / 1') || !x && !y ? undefined : `${y / x * 100}%`,
+      '--background-size': this.background ? this.backgroundsize : undefined
+    };
   }
 
   get placeholderImage() {
@@ -63,19 +79,6 @@ export class Image extends MuonElement {
       this.ratio = this.ratio?.length > 0 ? this.ratio : '16 / 9'; // without a default size background images won't show
     }
 
-    const [x, y] = this.ratio.split(' / ');
-    const styles = {
-      '--image-ratio': CSS?.supports('aspect-ratio', '1 / 1') && this.ratio ? this.ratio : undefined,
-      '--image-padding': CSS?.supports('aspect-ratio', '1 / 1') || !x && !y ? undefined : `${y / x * 100}%`,
-      '--background-size': isBackground ? this.backgroundsize : undefined
-    };
-
-    const classes = {
-      image: true,
-      'no-ratio': !this.ratio || this.ratio?.length < 1,
-      'is-background': isBackground
-    };
-
     if (this.src && this.src.length > 0) {
       const imageObj = {
         src: this.src,
@@ -85,7 +88,7 @@ export class Image extends MuonElement {
       };
 
       return html`
-        <div class=${classMap(classes)} style=${styleMap(styles)}>
+        <div class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
           ${isBackground ? imageBackgroundLoader(imageObj) : imageInlineLoader(imageObj)}
         </div>
       `;