@muonic/muon 0.0.2-experimental-162-8df3e7e.0 → 0.0.2-experimental-163-66fa43f.0

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';
@@ -17,6 +17,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 +36,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, ifDefined } 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.
    *
@@ -123,18 +139,12 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
 
     // 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)} tabindex="${ifDefined(tabIndex)}" aria-label="${this.textContent}" class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
         ${content}
       </${elementTag}>
     `;

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

@@ -43,6 +43,19 @@ export class Icon extends MuonElement {
     this.describe = '';
   }
 
+  get classes() {
+    return {
+      icon: true,
+      [this.type]: true
+    };
+  }
+
+  get inlineStyles() {
+    return {
+      '--icon-size': this.iconSize
+    };
+  }
+
   /**
    * A getter method to get size of image.
    *
@@ -65,17 +78,9 @@ 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)}>
+      <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>
       `;

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

@@ -47,6 +47,29 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
     return styles;
   }
 
+  get classes() {
+    return {
+      inputter: true,
+      select: this._isSelect,
+      'has-mask': this.mask,
+      radio: this._inputType === this._inputTypes.RADIO,
+      checkbox: this._inputType === this._inputTypes.CHECKBOX,
+      search: this._inputType === this._inputTypes.SEARCH,
+      date: this._inputType === this._inputTypes.DATE,
+      'has-disabled': this._hasDisabled
+    };
+  }
+
+  get inlineStyles() {
+    if (this.mask) {
+      return {
+        '--maxlength': this.mask.length
+      };
+    }
+
+    return {};
+  }
+
   get slottedStyles() {
     return slottedStyles;
   }
@@ -172,26 +195,8 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
   }
 
   get standardTemplate() {
-    const classes = {
-      inputter: true,
-      select: this._isSelect,
-      'has-mask': this.mask,
-      radio: this._inputType === this._inputTypes.RADIO,
-      checkbox: this._inputType === this._inputTypes.CHECKBOX,
-      search: this._inputType === this._inputTypes.SEARCH,
-      date: this._inputType === this._inputTypes.DATE,
-      'has-disabled': this._hasDisabled
-    };
-
-    let styles = {};
-    if (this.mask) {
-      styles = {
-        '--maxlength': this.mask.length
-      };
-    }
-
     return html`
-      <div class="${classMap(classes)}" style="${styleMap(styles)}">
+      <div class="${classMap(this.classes)}" style="${styleMap(this.inlineStyles)}">
         ${this._isMultiple ? this._addHeading : this._addLabel}
         ${this._addHelper}
         <div class="wrapper">

package/mixins/detail-mixin.js

@@ -1,4 +1,4 @@
-import { html, classMap, ScopedElementsMixin, dedupeMixin } from '@muonic/muon';
+import { html, classMap, styleMap, ScopedElementsMixin, dedupeMixin } from '@muonic/muon';
 import { Icon } from '@muon/components/icon';
 
 /**.
@@ -50,6 +50,19 @@ export const DetailMixin = dedupeMixin((superClass) =>
       this._toggleEvent = 'detail-toggle';
     }
 
+    get classes() {
+      return {
+        details: true,
+        'toggle-start': this._togglePosition === 'start',
+        'toggle-end': this._togglePosition === 'end',
+        'has-icon': !!this.icon
+      };
+    }
+
+    get inlineStyles() {
+      return {};
+    }
+
     /**
      * A method to handle 'toggle' event from the html detail element.
      *
@@ -68,14 +81,8 @@ export const DetailMixin = dedupeMixin((superClass) =>
     }
 
     get standardTemplate() {
-      const classes = {
-        details: true,
-        'toggle-start': this._togglePosition === 'start',
-        'toggle-end': this._togglePosition === 'end',
-        'has-icon': !!this.icon
-      };
       return html`
-        <details class=${classMap(classes)} ?open="${this.open}" @toggle="${this._onToggle}">
+        <details class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)} ?open="${this.open}" @toggle="${this._onToggle}">
           ${this._addHeading}
           ${this._addContent}
         </details>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-162-8df3e7e.0",
+  "version": "0.0.2-experimental-163-66fa43f.0",
   "description": "",
   "main": "index.js",
   "scripts": {

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

@@ -2,7 +2,10 @@
 export const snapshots = {};
 
 snapshots["card default"] = 
-`<div class="card">
+`<div
+  class="card"
+  style=""
+>
   <div class="body">
     <div class="header">
       <slot name="header">
@@ -22,7 +25,10 @@ snapshots["card default"] =
 /* end snapshot card default */
 
 snapshots["card standard"] = 
-`<div class="card">
+`<div
+  class="card"
+  style=""
+>
   <div class="body">
     <div class="header">
       <slot name="header">
@@ -42,7 +48,10 @@ snapshots["card standard"] =
 /* end snapshot card standard */
 
 snapshots["card standard with image"] = 
-`<div class="card">
+`<div
+  class="card"
+  style=""
+>
   <div class="media">
     <card-image
       alt="image alt"

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

@@ -5,6 +5,7 @@ snapshots["cta implements standard self"] =
 `<div
   aria-label="Buy a doughnut"
   class="cta standard"
+  style=""
 >
   <span class="label-holder">
     <slot>
@@ -36,6 +37,7 @@ snapshots["cta implements with no icon"] =
 `<div
   aria-label="Click me please"
   class="cta standard"
+  style=""
 >
   <span class="label-holder">
     <slot>
@@ -56,6 +58,7 @@ snapshots["cta implements with loading"] =
 <div
   aria-label="This is a button"
   class="cta loading standard"
+  style=""
 >
   <span class="label-holder">
     Loading...
@@ -73,6 +76,7 @@ snapshots["cta implements with icon at start"] =
 `<div
   aria-label="Something something...danger zone"
   class="cta standard"
+  style=""
 >
   <cta-icon
     class="icon"
@@ -92,6 +96,7 @@ snapshots["cta implements with a href"] =
   aria-label="This is a button"
   class="cta standard"
   href="https://example.com"
+  style=""
   tabindex="0"
 >
   <span class="label-holder">
@@ -111,6 +116,7 @@ snapshots["cta implements cta within an anchor element"] =
 `<div
   aria-label="This is a button"
   class="cta standard"
+  style=""
   tabindex="-1"
 >
   <span class="label-holder">
@@ -130,6 +136,7 @@ snapshots["cta implements within a form"] =
 `<button
   aria-label="This is a button"
   class="cta standard"
+  style=""
   tabindex="0"
 >
   <span class="label-holder">
@@ -149,6 +156,7 @@ snapshots["cta implements with triggering button"] =
 `<button
   aria-label="This is a button"
   class="cta standard"
+  style=""
   tabindex="0"
 >
   <span class="label-holder">
@@ -176,6 +184,7 @@ snapshots["cta implements loading as a button"] =
   aria-label="This is a button"
   class="cta loading standard"
   disabled=""
+  style=""
   tabindex="0"
 >
   <span class="label-holder">
@@ -194,6 +203,7 @@ snapshots["cta implements with disabled"] =
 `<div
   aria-label="This is a button"
   class="cta disabled standard"
+  style=""
 >
   <span class="label-holder">
     <slot>
@@ -212,6 +222,7 @@ snapshots["cta implements template `submit`"] =
 `<div
   aria-label="This is a button"
   class="cta submit"
+  style=""
 >
   <span class="label-holder">
     <slot>
@@ -230,6 +241,7 @@ snapshots["cta implements template `reset`"] =
 `<div
   aria-label="This is a button"
   class="cta reset"
+  style=""
 >
   <span class="label-holder">
     <slot>

package/tests/mixins/__snapshots__/detail.test.snap.js

@@ -2,7 +2,10 @@
 export const snapshots = {};
 
 snapshots["detail standard"] = 
-`<details class="details">
+`<details
+  class="details"
+  style=""
+>
   <summary class="heading">
     <slot name="heading">
     </slot>
@@ -24,6 +27,7 @@ snapshots["detail standard open"] =
 `<details
   class="details"
   open=""
+  style=""
 >
   <summary class="heading">
     <slot name="heading">
@@ -69,7 +73,10 @@ snapshots["detail standard heading"] =
 /* end snapshot detail standard heading */
 
 snapshots["detail standard slotted content"] = 
-`<details class="details">
+`<details
+  class="details"
+  style=""
+>
   <summary class="heading">
     <slot name="heading">
     </slot>
@@ -114,7 +121,10 @@ snapshots["detail standard toggle event"] =
 /* end snapshot detail standard toggle event */
 
 snapshots["detail standard toggle event true"] = 
-`<details class="details">
+`<details
+  class="details"
+  style=""
+>
   <summary class="heading">
     <slot name="heading">
     </slot>
@@ -136,6 +146,7 @@ snapshots["detail standard toggle event false"] =
 `<details
   class="details toggle-start"
   open=""
+  style=""
 >
   <summary class="heading">
     <detail-icon
@@ -155,7 +166,10 @@ snapshots["detail standard toggle event false"] =
 /* end snapshot detail standard toggle event false */
 
 snapshots["detail standard icon"] = 
-`<details class="details has-icon">
+`<details
+  class="details has-icon"
+  style=""
+>
   <summary class="heading">
     <detail-icon
       class="icon"
@@ -198,7 +212,10 @@ snapshots["detail standard icon end"] =
 /* end snapshot detail standard icon end */
 
 snapshots["detail standard toggle"] = 
-`<details class="details toggle-start">
+`<details
+  class="details toggle-start"
+  style=""
+>
   <summary class="heading">
     <detail-icon
       class="toggle"
@@ -217,7 +234,10 @@ snapshots["detail standard toggle"] =
 /* end snapshot detail standard toggle */
 
 snapshots["detail standard toggle end"] = 
-`<details class="details toggle-end">
+`<details
+  class="details toggle-end"
+  style=""
+>
   <summary class="heading">
     <slot name="heading">
     </slot>

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

@@ -181,20 +181,20 @@ testRunner('sourceFilesAnalyzer', async (t) => {
 
   const components = ['card', 'cta', 'detail', 'form', 'icon', 'image', 'inputter', 'inputter-detail'];
   const propertiesMap = {
-    card: ['standardTemplate', 'image', 'alt', 'background', 'type'],
-    cta: ['href', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
-    detail: ['icon', 'standardTemplate', 'open', 'type'],
+    card: ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
+    cta: ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
+    detail: ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
     form: ['standardTemplate', 'type'],
-    icon: ['size', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'url', 'describe', 'type'],
-    image: ['src', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
-    inputter: ['helper', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
-    'inputter-detail': ['icon', 'standardTemplate', 'open', 'type']
+    icon: ['size', 'classes', 'inlineStyles', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'url', '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']
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name), components);
 
   components.forEach((component) => {
     t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(
-      (property) => property.name), propertiesMap[component]);
+      (property) => property.name), propertiesMap[component], component);
   });
   jsonResult.tags?.map((tag) => {
     t.true(tag.description !== undefined, `${tag.name} description is not present`);
@@ -225,13 +225,13 @@ testRunner('sourceFilesAnalyzer single file', async (t) => {
 
   const components = ['card'];
   const propertiesMap = {
-    card: ['standardTemplate', 'image', 'alt', 'background', 'type'],
+    card: ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name), components);
 
   components.forEach((component) => {
     t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(
-      (property) => property.name), propertiesMap[component]);
+      (property) => property.name), propertiesMap[component], component);
   });
   jsonResult.tags?.map((tag) => {
     t.true(tag.description !== undefined, `${tag.name} description is not present`);