@muonic/muon 0.0.2-beta.50 → 0.0.2-beta.52

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.52](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.50...v0.0.2-beta.52) (2024-01-08)
+
+
+### Features
+
+* update background-size property name ([b51dead](https://github.com/centrica-engineering/muon/commit/b51deadbe7786111f93d4e8ac5f2716c150b868f))
+* update property name ([4fbaadd](https://github.com/centrica-engineering/muon/commit/4fbaadddcd722c9642710b50a35bc0daea6b45d9))
+
+
+### Bug Fixes
+
+* add full stop if not there ([894a7e5](https://github.com/centrica-engineering/muon/commit/894a7e528757ed6fde26025d1672a8be97eedc54))
+* update validation in date inputter ([c150172](https://github.com/centrica-engineering/muon/commit/c15017272b64130aa5e8e2a51cb083ad83795ac7))
+
+### [0.0.2-beta.51](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.49...v0.0.2-beta.51) (2023-12-06)
+
+
+### Bug Fixes
+
+* add full stop if not there ([894a7e5](https://github.com/centrica-engineering/muon/commit/894a7e528757ed6fde26025d1672a8be97eedc54))
+* remove console log ([e84aa7d](https://github.com/centrica-engineering/muon/commit/e84aa7dfb66b9ab5d760b190c6cbce8d3ac3839f))
+
 ### [0.0.2-beta.50](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.48...v0.0.2-beta.50) (2023-12-04)
 
 

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

@@ -18,16 +18,35 @@ export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonEle
     };
   }
 
+  static get styles() {
+    return styles;
+  }
+
+  /**
+   * Getter method to construct classes object.
+   * @protected
+   * @returns {object} - Classes object to be included in the template.
+   */
   get classes() {
     return {
       card: true
     };
   }
 
+  /**
+   * Getter method to construct styles object.
+   * @protected
+   * @returns {object} - Styles object to be included in the template.
+   */
   get inlineStyles() {
     return {};
   }
 
+  /**
+   * Getter method to construct card image template.
+   * @protected
+   * @returns {object} TemplateResult - Image template.
+   */
   get _addImage() {
     return this.image ? html`
     <div class="media">
@@ -35,6 +54,11 @@ export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonEle
     </div>` : undefined;
   }
 
+  /**
+   * Getter method to construct template for type `standard`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get standardTemplate() {
     return html`
       <div class="${classMap(this.classes)}" style="${styleMap(this.inlineStyles)}">
@@ -47,8 +71,4 @@ export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonEle
       </div>
     `;
   }
-
-  static get styles() {
-    return styles;
-  }
 }

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

@@ -49,6 +49,11 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
     this.icon = CTA_ICON_NAME;
   }
 
+  /**
+   * Getter method to construct classes object.
+   * @protected
+   * @returns {object} - Classes object to be included in the template.
+   */
   get classes() {
     const parentElement = this.parentElement;
     const isDisabled = parentElement?.getAttribute('disabled') || this.disabled;
@@ -61,6 +66,11 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
     };
   }
 
+  /**
+   * Getter method to construct styles object.
+   * @protected
+   * @returns {object} - Styles object to be included in the template.
+   */
   get inlineStyles() {
     return {};
   }
@@ -159,6 +169,11 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
     `;
   }
 
+  /**
+   * Getter method to construct template for type `standard`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get standardTemplate() {
     const isLoading = this.loading;
     const iconAdd = this._addIcon;
@@ -179,12 +194,22 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
     `;
   }
 
+  /**
+   * Getter method to construct template for type `submit`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get submitTemplate() {
     this.setAttribute('type', 'submit');
 
     return this.standardTemplate;
   }
 
+  /**
+   * Getter method to construct template for type `reset`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get resetTemplate() {
     this.setAttribute('type', 'reset');
 

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

@@ -10,16 +10,16 @@ import styles from './form-styles.css';
 
 export class Form extends MuonElement {
 
+  static get styles() {
+    return styles;
+  }
+
   constructor() {
     super();
     this._submit = this._submit.bind(this);
     this._reset = this._reset.bind(this);
   }
 
-  static get styles() {
-    return styles;
-  }
-
   connectedCallback() {
     super.connectedCallback();
 
@@ -201,6 +201,11 @@ export class Form extends MuonElement {
     };
   }
 
+  /**
+   * Getter method to construct template for type `standard`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get standardTemplate() {
     return html`
       <slot></slot>

package/components/form/story.js

@@ -61,7 +61,7 @@ Standard.args = {
     ...InputterStories.DateMask.args,
     name: 'dob',
     label: 'Date of birth',
-    validation: ['maxDate(\'031/12/2022\')']
+    validation: ['maxDate("31/12/2022")']
   },
   Submit: {
     ...SubmitCTA.args,

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

@@ -24,7 +24,8 @@ export class Icon extends MuonElement {
       describe: { type: String },
       size: { type: Number },
       category: { type: String },
-      _url: { type: String, state: true }
+      _url: { type: String, state: true },
+      _allSizes: { type: Array, state: true }
     };
   }
 
@@ -38,11 +39,16 @@ export class Icon extends MuonElement {
     this.type = ICON_CONFIG_TYPE;
     this.name = ICON_CONFIG_NAME;
     this.category = ICON_CONFIG_CATEGORY;
-    this.allSizes = ICON_CONFIG_SIZES;
+    this._allSizes = ICON_CONFIG_SIZES;
     this._url = ICON_CONFIG_URL;
     this.describe = '';
   }
 
+  /**
+   * Getter method to construct classes object.
+   * @protected
+   * @returns {object} - Classes object to be included in the template.
+   */
   get classes() {
     return {
       icon: true,
@@ -50,6 +56,11 @@ export class Icon extends MuonElement {
     };
   }
 
+  /**
+   * Getter method to construct styles object.
+   * @protected
+   * @returns {object} - Styles object to be included in the template.
+   */
   get inlineStyles() {
     return {
       '--icon-size': this.iconSize
@@ -57,17 +68,23 @@ export class Icon extends MuonElement {
   }
 
   /**
-   * A getter method to get size of image.
+   * A getter method to get size of icon.
    *
    * @returns {number | string} - Size at specific index or 100%.
+   * @protected
    * @readonly
    */
   get sizes() {
     const size = this.size - 1;
 
-    return this.allSizes[size] || '100%';
+    return this._allSizes[size] || '100%';
   }
 
+  /**
+   * Getter method to get size od icon in percentage or pixels.
+   * @protected
+   * @returns {string} - Icon size in percentage or pixels.
+   */
   get iconSize() {
     const computedSize = this.sizes;
     const size = computedSize === '100%' ? computedSize : `${computedSize}px`;
@@ -75,6 +92,11 @@ export class Icon extends MuonElement {
     return size;
   }
 
+  /**
+   * Getter method to construct template for type `standard`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get standardTemplate() {
     const hidden = this.describe?.length === 0 ? 'true' : undefined;
     const role = !hidden ? 'img' : undefined;

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

@@ -20,7 +20,7 @@ export class Image extends MuonElement {
   static get properties() {
     return {
       background: { type: Boolean },
-      backgroundsize: { type: String, attribute: 'background-size' },
+      backgroundSize: { type: String, attribute: 'background-size' },
       src: { type: String },
       alt: { type: String },
       ratio: { type: String },
@@ -39,7 +39,7 @@ export class Image extends MuonElement {
 
     this.type = IMAGE_CONFIG_TYPE;
     this.background = false;
-    this.backgroundsize = 'cover'; // cover, contain
+    this.backgroundSize = 'cover'; // cover, contain
     this.alt = '';
     this.ratio = IMAGE_CONFIG_RATIO;
     this.placeholder = IMAGE_CONFIG_PLACEHOLDER;
@@ -47,6 +47,11 @@ export class Image extends MuonElement {
     this._ratios = IMAGE_CONFIG_RATIOS;
   }
 
+  /**
+   * Getter method to construct classes object.
+   * @protected
+   * @returns {object} - Classes object to be included in the template.
+   */
   get classes() {
     return {
       image: true,
@@ -55,19 +60,34 @@ export class Image extends MuonElement {
     };
   }
 
+  /**
+   * Getter method to construct styles object.
+   * @protected
+   * @returns {object} - Styles object to be included in the template.
+   */
   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
+      '--background-size': this.background ? this.backgroundSize : undefined
     };
   }
 
+  /**
+   * Getter method to construct placeholder image file name.
+   * @protected
+   * @returns {string} - Placeholder image.
+   */
   get placeholderImage() {
     return this.placeholder.replace('(src)', this.src); // @TODO: test alternative ways for this
   }
 
+  /**
+   * Getter method to construct template for type `standard`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get standardTemplate() {
     const isBackground = this.background;
 

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

@@ -47,6 +47,11 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
     return styles;
   }
 
+  /**
+   * Getter method to construct classes object.
+   * @protected
+   * @returns {object} - Classes object to be included in the template.
+   */
   get classes() {
     const type = this._isSingle && this.querySelector('input')?.type;
     const autocomplete = this._isSingle && this.querySelector('input')?.autocomplete || undefined;
@@ -65,6 +70,11 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
     };
   }
 
+  /**
+   * Getter method to construct styles object.
+   * @protected
+   * @returns {object} - Styles object to be included in the template.
+   */
   get inlineStyles() {
     if (this.mask) {
       return {
@@ -199,6 +209,11 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
     return false;
   }
 
+  /**
+   * Getter method to construct template for type `standard`.
+   * @protected
+   * @returns {object} TemplateResult - Template to render.
+   */
   get standardTemplate() {
     return html`
       <div class="${classMap(this.classes)}" style="${styleMap(this.inlineStyles)}">

package/components/inputter/story.js

@@ -107,7 +107,7 @@ Date.args = {
   label: 'Date',
   value: '',
   placeholder: '',
-  validation: ['isRequired', 'minDate(\'01/01/2022\')']
+  validation: ['isRequired', 'minDate("01/01/2022")']
 };
 
 export const DateMask = InputterStandardTemplate.bind({});
@@ -118,7 +118,7 @@ DateMask.args = {
   placeholder: '',
   mask: 'dd/mm/yyyy',
   separator: '/',
-  validation: ['isRequired', 'minDate(\'01/01/2022\')']
+  validation: ['isRequired', 'minDate("01/01/2022")']
 };
 
 export const Mask = InputterStandardTemplate.bind({});

package/mixins/detail-mixin.js

@@ -50,6 +50,11 @@ export const DetailMixin = dedupeMixin((superClass) =>
       this._toggleEvent = 'detail-toggle';
     }
 
+    /**
+     * Getter method to construct classes object.
+     * @protected
+     * @returns {object} - Classes object to be included in the template.
+     */
     get classes() {
       return {
         details: true,
@@ -59,6 +64,11 @@ export const DetailMixin = dedupeMixin((superClass) =>
       };
     }
 
+    /**
+     * Getter method to construct styles object.
+     * @protected
+     * @returns {object} - Styles object to be included in the template.
+     */
     get inlineStyles() {
       return {};
     }
@@ -82,6 +92,11 @@ export const DetailMixin = dedupeMixin((superClass) =>
       }));
     }
 
+    /**
+     * Getter method to construct template for type `standard`.
+     * @protected
+     * @returns {object} TemplateResult - Template to render.
+     */
     get standardTemplate() {
       return html`
         <details class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)} ?open="${this.open}" @toggle="${this._onToggle}">

package/mixins/validation-mixin.js

@@ -52,6 +52,7 @@ export const ValidationMixin = dedupeMixin((superClass) =>
      *
      * @returns {boolean} - Pristine state.
      * @public
+     * @readonly
      */
     get isPristine() {
       return this._pristine;
@@ -62,6 +63,7 @@ export const ValidationMixin = dedupeMixin((superClass) =>
      *
      * @returns {boolean} - Dirty state.
      * @public
+     * @readonly
      */
     get isDirty() {
       return !this._pristine;
@@ -71,6 +73,11 @@ export const ValidationMixin = dedupeMixin((superClass) =>
       return this.validity;
     }
 
+    /**
+     * A getter method to get validity of the form element.
+     * @returns {ValidityState} - Validity state of the form element.
+     * @readonly
+     */
     get validity() {
       this._pristine = false;
       return this.validate();
@@ -206,6 +213,10 @@ export const ValidationMixin = dedupeMixin((superClass) =>
       return this._validationState?.filter((state) => {
         return state?.value;
       }).map((state) => {
+        if (state.value.charAt(state.value.length - 1) === '.') {
+          return state.value;
+        }
+
         return state.value + '.';
       }).join(' ');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-beta.50",
+  "version": "0.0.2-beta.52",
   "description": "",
   "main": "index.js",
   "scripts": {

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

@@ -198,14 +198,14 @@ testRunner('sourceFilesAnalyzer', async (t) => {
 
   const components = ['muon-card', 'muon-cta', 'muon-detail', 'muon-form', 'muon-icon', 'muon-image', 'muon-inputter', 'inputter-detail'];
   const propertiesMap = {
-    'muon-card': ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
-    'muon-cta': ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
-    'muon-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
-    'muon-form': ['standardTemplate', 'type'],
-    'muon-icon': ['size', 'classes', 'inlineStyles', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'describe', 'type'],
-    'muon-image': ['src', 'classes', 'inlineStyles', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
-    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'ignoreSeparator', 'type'],
-    'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type']
+    'muon-card': ['image', 'alt', 'background', 'type'],
+    'muon-cta': ['href', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
+    'muon-detail': ['icon', 'open', 'type'],
+    'muon-form': ['type'],
+    'muon-icon': ['size', 'name', 'category', 'describe', 'type'],
+    'muon-image': ['src', 'background', 'backgroundSize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
+    'muon-inputter': ['helper', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'ignoreSeparator', 'type'],
+    'inputter-detail': ['icon', 'open', 'type']
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
 
@@ -232,9 +232,9 @@ testRunner('sourceFilesAnalyzer with prefix override', async (t) => {
 
   const components = ['muon-cta', 'muon-inputter', 'inputter-detail', 'mnx-cta'];
   const propertiesMap = {
-    'muon-cta': ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
-    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'ignoreSeparator', 'type'],
-    'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
+    'muon-cta': ['href', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
+    'muon-inputter': ['helper', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'ignoreSeparator', 'type'],
+    'inputter-detail': ['icon', 'open', 'type'],
     'mnx-cta': ['enabled', 'type']
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
@@ -299,7 +299,7 @@ testRunner('sourceFilesAnalyzer single file', async (t) => {
 
   const components = ['muon-card'];
   const propertiesMap = {
-    'muon-card': ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type']
+    'muon-card': ['image', 'alt', 'background', 'type']
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name), components);