@muonic/muon 0.0.2-beta.48 → 0.0.2-beta.49

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.49](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.47...v0.0.2-beta.49) (2023-11-27)
+
 ### [0.0.2-beta.48](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.41...v0.0.2-beta.48) (2023-10-17)
 
 

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

@@ -71,14 +71,14 @@ export class Image extends MuonElement {
   get standardTemplate() {
     const isBackground = this.background;
 
-    if (!this._ratios.includes(this.ratio)) {
-      this.ratio = IMAGE_CONFIG_RATIO; // @TODO: add fallback `|| this._ratios[0]`
-    }
-
     if (isBackground) {
       this.ratio = this.ratio?.length > 0 ? this.ratio : '16 / 9'; // without a default size background images won't show
     }
 
+    if (!this._ratios.includes(this.ratio)) {
+      this.ratio = IMAGE_CONFIG_RATIO; // @TODO: add fallback `|| this._ratios[0]`
+    }
+
     if (this.src && this.src.length > 0) {
       const imageObj = {
         src: this.src,

package/index.js

@@ -16,7 +16,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { cache } from 'lit/directives/cache.js';
 import { AsyncDirective } from 'lit/async-directive.js';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { literal, html as staticHTML, unsafeStatic } from 'lit/static-html.js';
 import { until } from 'lit/directives/until.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-beta.48",
+  "version": "0.0.2-beta.49",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -17,53 +17,53 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@open-wc/building-rollup": "2.2.3",
-    "@open-wc/scoped-elements": "2.2.0",
-    "@rollup/plugin-alias": "5.0.0",
-    "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "15.1.0",
-    "@rollup/plugin-replace": "5.0.2",
-    "@rollup/plugin-virtual": "3.0.1",
-    "@web/dev-server": "0.3.0",
-    "@web/dev-server-rollup": "0.5.2",
-    "@web/dev-server-storybook": "0.7.4",
+    "@open-wc/building-rollup": "3.0.2",
+    "@open-wc/scoped-elements": "3.0.2",
+    "@rollup/plugin-alias": "5.0.1",
+    "@rollup/plugin-json": "6.0.1",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-replace": "5.0.5",
+    "@rollup/plugin-virtual": "3.0.2",
+    "@web/dev-server": "0.4.1",
+    "@web/dev-server-rollup": "0.6.1",
+    "@web/dev-server-storybook": "2.0.1",
     "@web/storybook-prebuilt": "0.1.37",
     "app-root-path": "3.1.0",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.16",
     "chokidar": "3.5.3",
     "chroma-js": "2.4.2",
     "command-line-args": "5.2.1",
     "cssnano": "6.0.1",
     "deepmerge": "4.3.1",
     "element-internals-polyfill": "^1.3.8",
-    "glob": "10.2.2",
+    "glob": "10.3.10",
     "glob-to-regexp": "0.4.1",
-    "lit": "2.8.0",
+    "lit": "3.1.0",
     "lodash": "4.17.21",
     "path-is-inside": "1.0.2",
-    "postcss": "8.4.27",
+    "postcss": "8.4.31",
     "postcss-extend-rule": "4.0.0",
     "postcss-import": "15.1.0",
-    "postcss-preset-env": "9.1.0",
+    "postcss-preset-env": "9.3.0",
     "postcss-simple-vars": "7.0.1",
-    "rollup-plugin-import-css": "3.3.1",
+    "rollup-plugin-import-css": "3.3.5",
     "rollup-plugin-lit-css": "4.0.1",
     "rollup-plugin-minify-html-literals": "1.2.6",
     "rollup-plugin-styles": "4.0.0",
-    "style-dictionary": "3.8.0",
-    "typescript": "5.0.4",
+    "style-dictionary": "3.9.0",
+    "typescript": "5.3.2",
     "web-component-analyzer": "1.1.7"
   },
   "devDependencies": {
-    "@open-wc/testing": "3.1.8",
-    "@web/dev-server-esbuild": "0.4.1",
-    "@web/test-runner": "0.16.1",
-    "@web/test-runner-browserstack": "0.6.1",
-    "@web/test-runner-playwright": "0.10.0",
-    "ava": "5.2.0",
-    "c8": "7.13.0",
-    "esmock": "2.2.1",
-    "sinon": "15.0.4"
+    "@open-wc/testing": "4.0.0",
+    "@web/dev-server-esbuild": "1.0.1",
+    "@web/test-runner": "0.18.0",
+    "@web/test-runner-browserstack": "0.7.0",
+    "@web/test-runner-playwright": "0.11.0",
+    "ava": "5.3.1",
+    "c8": "8.0.1",
+    "esmock": "2.6.0",
+    "sinon": "17.0.1"
   },
   "engines": {
     "node": ">=16.13.0"

package/scripts/utils/index.mjs

@@ -101,6 +101,8 @@ const analyze = async () => {
     return { fileName: file, text: code.toString() };
   });
 
+  console.log('Analyzing files: ', files.map((file) => file.fileName));
+
   const { results } = analyzeText(files);
 
   return results.map((result) => {
@@ -212,7 +214,7 @@ const sourceFilesAnalyzer = async () => {
     config: {
       format: 'json',
       discoverNodeModules: true,
-      excludedDeclarationNames: ['ScopedElementsMixin']
+      excludedDeclarationNames: ['ScopedElementsMixin', 'ScopedElementsMixinImplementation']
     }
   }));
 

package/tests/components/form/form.test.js

@@ -307,6 +307,8 @@ describe('form', () => {
     resetBtn.click();
 
     expect(input.value).to.equal('foo', 'no reset input value');
+    expect(el._resetButton.loading).to.equal(true, 'reset input loading');
+    expect(el._reset()).to.equal(undefined, 'no reset form value');
   });
 
   it('form cta reset with inputter', async () => {

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

@@ -96,3 +96,12 @@ snapshots["icon broken caches"] =
 `;
 /* end snapshot icon broken caches */
 
+snapshots["icon implements icon size 48"] = 
+`<div
+  aria-hidden="true"
+  class="arrow-right icon"
+>
+</div>
+`;
+/* end snapshot icon implements icon size 48 */
+

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

@@ -128,10 +128,13 @@ snapshots["image implements placeholder image for background"] =
 /* end snapshot image implements placeholder image for background */
 
 snapshots["image implements placeholder image for chrome"] = 
-`<div
-  class="image"
-  style="--image-ratio:16 / 9;"
->
+`<div class="image">
+  <img
+    alt=""
+    class="blur image-lazy"
+    loading="lazy"
+    src="tests/components/image/images/15.png"
+  >
 </div>
 `;
 /* end snapshot image implements placeholder image for chrome */
@@ -164,3 +167,45 @@ snapshots["image fallback for ratio"] =
 `;
 /* end snapshot image fallback for ratio */
 
+snapshots["image implements background with empty ratio"] = 
+`<div class="image">
+  <img
+    alt=""
+    class="blur-out image-lazy"
+    src="tests/components/image/images/150.png"
+  >
+</div>
+`;
+/* end snapshot image implements background with empty ratio */
+
+snapshots["image implements placeholder image lazy loading"] = 
+`<div class="image">
+  <img
+    alt=""
+    class="blur image-lazy"
+    loading="lazy"
+    src="tests/components/image/images/15.png"
+  >
+</div>
+`;
+/* end snapshot image implements placeholder image lazy loading */
+
+snapshots["image implements placeholder image ratio fallback"] = 
+`<div class="image">
+  <img
+    alt=""
+    class="blur image-lazy"
+    src="tests/components/image/images/15.png"
+  >
+</div>
+`;
+/* end snapshot image implements placeholder image ratio fallback */
+
+snapshots["image implements background ratio fallback"] = 
+`<div class="image is-background">
+  <div class="blur-out image-holder">
+  </div>
+</div>
+`;
+/* end snapshot image implements background ratio fallback */
+

package/tests/components/image/image.test.js

@@ -4,8 +4,17 @@ import sinon from 'sinon';
 import { Image } from '@muonic/muon/components/image';
 import { defaultChecks } from '../../helpers';
 
+const NoRatioImage = class extends Image {
+  constructor() {
+    super();
+    this.ratio = undefined;
+  }
+};
+
 const tagName = defineCE(Image);
 const tag = unsafeStatic(tagName);
+const noRatioTagName = defineCE(NoRatioImage);
+const noRatioTag = unsafeStatic(noRatioTagName);
 const imageURL = 'tests/components/image/images/150.png';
 const thumbURL = 'tests/components/image/images/15.png';
 
@@ -21,6 +30,8 @@ const awaitFailed = () => {
   });
 };
 
+const itSkipSafari = /WebKit/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) ? it.skip : it;
+
 describe('image', () => {
 
   afterEach(() => {
@@ -106,6 +117,27 @@ describe('image', () => {
     expect(elementImage).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(img).to.be.null; // eslint-disable-line no-unused-expressions
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.ratio).to.equal('16 / 9', '`ratio` has default token value');
+    expect(Array.from(holder.classList)).to.deep.equal(['image-holder', 'blur-out']);
+    expect(getComputedStyle(holder).backgroundImage).to.include(imageURL, 'computed style value added for background image');
+    expect(holder.style.getPropertyValue('--background-image')).to.include(imageURL, 'image passed as custom css variable');
+  });
+
+  it('implements background ratio fallback', async () => {
+    const el = await fixture(html`<${noRatioTag} src="${imageURL}" background></${noRatioTag}>`);
+
+    await awaitLoading(el);
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const elementImage = shadowRoot.querySelector('.image');
+    const img = elementImage.querySelector('img');
+    const holder = elementImage.querySelector('.image-holder');
+
+    expect(elementImage).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(img).to.be.null; // eslint-disable-line no-unused-expressions
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.ratio).to.equal('16 / 9', '`ratio` has default token value');
     expect(Array.from(holder.classList)).to.deep.equal(['image-holder', 'blur-out']);
     expect(getComputedStyle(holder).backgroundImage).to.include(imageURL, 'computed style value added for background image');
     expect(holder.style.getPropertyValue('--background-image')).to.include(imageURL, 'image passed as custom css variable');
@@ -285,30 +317,33 @@ describe('image', () => {
     expect(consoleError.args[0]).to.deep.equal(['Image (this-is-not-an-image) failed to load']);
   });
 
-  it('implements placeholder image for chrome', async () => {
-    if (window.chrome === true) {
-      const el = await fixture(html`<${tag} src="https://via.placeholder.com/35000" placeholder="${thumbURL}"></${tag}>`);
-
-      await nextFrame();
-      await defaultChecks(el);
-
-      const shadowRoot = el.shadowRoot;
-      const elementImage = shadowRoot.querySelector('.image');
-      const img = elementImage.querySelector('img');
-
-      expect(elementImage).to.not.be.null; // eslint-disable-line no-unused-expressions
-      expect(el.type).to.equal('standard', '`type` property has default value `standard`');
-      expect(el.ratio).to.equal('16 / 9', '`ratio` has default token value');
-      expect(img.src).to.equal(thumbURL, 'has `src` value from el');
-      expect(img.alt).to.equal('', 'alt has not value');
-      expect(img.loading).to.equal('lazy', 'loading has a value');
-      expect(Array.from(img.classList)).to.deep.equal(['image-lazy', 'blur']);
-
-      if (CSS.supports('aspect-ratio', '1 / 1')) {
-        expect(elementImage.style.getPropertyValue('--image-ratio')).to.equal('16 / 9', 'ratio passed as custom css variable');
-        expect(getComputedStyle(elementImage).aspectRatio).to.equal('16 / 9', 'computed style value added for aspect-ratio');
-      }
+  itSkipSafari('implements placeholder image for chrome', async () => {
+    const windowChromeInitial = window?.chrome;
+    window.chrome = true;
+
+    const el = await fixture(html`<${tag} src="https://via.placeholder.com/35000" placeholder="${thumbURL}"></${tag}>`);
+
+    await nextFrame();
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const elementImage = shadowRoot.querySelector('.image');
+    const img = elementImage.querySelector('img');
+
+    expect(elementImage).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.ratio).to.equal('16 / 9', '`ratio` has default token value');
+    expect(img.src).to.include(thumbURL, 'has `src` value from el');
+    expect(img.alt).to.equal('', 'alt has not value');
+    expect(img.loading).to.equal('lazy', 'loading has a value');
+    expect(Array.from(img.classList)).to.deep.equal(['image-lazy', 'blur']);
+
+    if (CSS.supports('aspect-ratio', '1 / 1')) {
+      expect(elementImage.style.getPropertyValue('--image-ratio')).to.equal('16 / 9', 'ratio passed as custom css variable');
+      expect(getComputedStyle(elementImage).aspectRatio).to.equal('16 / 9', 'computed style value added for aspect-ratio');
     }
+
+    window.chrome = windowChromeInitial;
   });
 
 });

package/tests/helpers/index.js

@@ -2,7 +2,7 @@ import { expect } from '@open-wc/testing';
 import { executeServerCommand } from '@web/test-runner-commands';
 
 export const defaultChecks = async (el, options = {}) => {
-  const { ignoredRules, ignoredTags, ignoredAccessibilityTags } = options || {};
+  const { ignoredRules, ignoredTags, ignoredAccessibilityTags } = options;
   const ignoredAttributes = options.ignoredAttributes || [];
   const snapshotOptions = await executeServerCommand('run-snapshots');
   if (snapshotOptions?.run === true) {

package/tests/mixins/muon-element.test.js

@@ -25,12 +25,39 @@ const ParentMuonComponent = class extends ScopedElementsMixin(MuonElement) {
   }
 };
 
+const EmptyMuonComponent = class extends MuonElement {
+};
+
+const MultipleScopedStyles = class extends MuonElement {
+  get slottedStyles() {
+    return [
+      'light-dom{color:red}',
+      'light-dom{background:blue}'
+    ];
+  }
+};
+
+const BrokenScopedStyles = class extends MuonElement {
+  get slottedStyles() {
+    return [true];
+  }
+};
+
 const tagName = defineCE(MuonComponent);
 const tag = unsafeStatic(tagName);
 
 const parentTagName = defineCE(ParentMuonComponent);
 const parentTag = unsafeStatic(parentTagName);
 
+const emptyTagName = defineCE(EmptyMuonComponent);
+const emptyTag = unsafeStatic(emptyTagName);
+
+const multipleScopedStylesTagName = defineCE(MultipleScopedStyles);
+const multipleScopedStylesTag = unsafeStatic(multipleScopedStylesTagName);
+
+const brokenScopedStylesTagName = defineCE(BrokenScopedStyles);
+const brokenScopedStylesTag = unsafeStatic(brokenScopedStylesTagName);
+
 describe('muon-component', () => {
   it('standard', async () => {
     const element = await fixture(html`<${tag}>foo</${tag}>`);
@@ -46,4 +73,25 @@ describe('muon-component', () => {
 
     expect(getComputedStyle(childEl).color).to.equal('rgb(255, 0, 0)', 'computed style value added for child shadow component');
   });
+
+  it('empty', async () => {
+    const element = await fixture(html`<${emptyTag}></${emptyTag}>`);
+
+    expect(getComputedStyle(element).color).to.equal('rgb(0, 0, 0)', 'computed style value added for empty component');
+    expect(element.shadowRoot.textContent).to.equal('');
+  });
+
+  it('multiple scoped styles', async () => {
+    const element = await fixture(html`<${multipleScopedStylesTag}></${multipleScopedStylesTag}>`);
+
+    expect(getComputedStyle(element).color).to.include('rgb(255, 0, 0)', 'computed style value added for component');
+    expect(getComputedStyle(element).background).to.include('rgb(0, 0, 255)', 'computed style value added for component');
+  });
+
+  it('broken scoped styles', async () => {
+    const element = await fixture(html`<${brokenScopedStylesTag}></${brokenScopedStylesTag}>`);
+
+    expect(getComputedStyle(element).color).to.equal('rgb(0, 0, 0)', 'computed style value added for component');
+    expect(element.__addLightDOM()).to.equal(undefined, 'no styles added');
+  });
 });

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

@@ -210,8 +210,11 @@ testRunner('sourceFilesAnalyzer', async (t) => {
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
 
   components.forEach((component) => {
-    t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(
-      (property) => property.name), propertiesMap[component], component);
+    t.deepEqual(
+      jsonResult.tags
+        .filter((tag) => tag.name === component)[0].properties?.map(
+          (property) => property.name).sort(), propertiesMap[component].sort(), component
+    );
   });
   jsonResult.tags?.map((tag) => {
     t.true(tag.description !== undefined, `${tag.name} description is not present`);
@@ -237,8 +240,11 @@ testRunner('sourceFilesAnalyzer with prefix override', async (t) => {
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
 
   components.forEach((component) => {
-    t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(
-      (property) => property.name), propertiesMap[component], component);
+    t.deepEqual(
+      jsonResult.tags
+        .filter((tag) => tag.name === component)[0].properties?.map(
+          (property) => property.name).sort(), propertiesMap[component].sort(), component
+    );
   });
   jsonResult.tags?.map((tag) => {
     t.true(tag.description !== undefined, `${tag.name} description is not present`);
@@ -293,13 +299,16 @@ testRunner('sourceFilesAnalyzer single file', async (t) => {
 
   const components = ['muon-card'];
   const propertiesMap = {
-    'muon-card': ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
+    'muon-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], component);
+    t.deepEqual(
+      jsonResult.tags
+        .filter((tag) => tag.name === component)[0].properties?.map(
+          (property) => property.name).sort(), propertiesMap[component].sort(), component
+    );
   });
   jsonResult.tags?.map((tag) => {
     t.true(tag.description !== undefined, `${tag.name} description is not present`);