@muonic/muon 0.0.2-beta.34 → 0.0.2-beta.35

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.35](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.34...v0.0.2-beta.35) (2023-08-03)
+
 ### [0.0.2-beta.34](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.33...v0.0.2-beta.34) (2023-08-02)
 
 

package/muon-element/index.js

@@ -106,7 +106,11 @@ export const MuonElementMixin = (superClass) => class extends superClass {
   }
 
   render() {
-    return html`${this[`${this.type}Template`]}`;
+    if (this[`${this.type}Template`]) {
+      return html`${this[`${this.type}Template`]}`;
+    }
+
+    return html`${this.standardTemplate}` || html``;
   }
 };
 

package/package.json

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

package/storybook/stories.js

@@ -45,7 +45,7 @@ export default (name, el, prefix = process.env.MUON_PREFIX) => {
 
   const dynamicArgs = (args) => {
     const dArgs = args && Object.keys(args).map((arg) => {
-      if (arg === 'text') {
+      if (!el.observedAttributes?.includes(arg)) {
         return undefined;
       }
 

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

@@ -68,3 +68,23 @@ snapshots["card standard with image"] =
 `;
 /* end snapshot card standard with image */
 
+snapshots["card standard fallback"] = 
+`<div class="card">
+  <div class="body">
+    <div class="header">
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="content">
+      <slot>
+      </slot>
+    </div>
+    <div class="footer">
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot card standard fallback */
+

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

@@ -46,6 +46,35 @@ describe('card', async () => {
     expect(shadowRoot.querySelector('.media')).to.be.null; // eslint-disable-line no-unused-expressions
   });
 
+  it('standard fallback', async () => {
+    const cardElement = await fixture(html`
+      <${tag} type="unknown-type-does-not-exist">
+        <h2 slot="header">Heating services</h2>
+        <p>Product and services we offer for energy in your home</p>
+        <div slot="footer">Footnote</div>
+      </${tag}>`);
+    await defaultChecks(cardElement);
+
+    const shadowRoot = cardElement.shadowRoot;
+
+    const headerSelector = shadowRoot.querySelector('.header');
+    expect(headerSelector).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const header = headerSelector.querySelector('slot[name="header"]');
+    expect(header.assignedElements()[0].textContent).to.equal('Heating services', 'Heading slot value matches');
+
+    const content = shadowRoot.querySelector('.content');
+    expect(shadowRoot.querySelector('.content')).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const paragraph = content.querySelector('slot');
+    expect(paragraph.assignedElements()[0].textContent).to.equal('Product and services we offer for energy in your home', 'Content slot value matches');
+
+    const footerSelector = shadowRoot.querySelector('.footer');
+    expect(footerSelector).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const footer = footerSelector.querySelector('slot[name="footer"]');
+    expect(footer.assignedElements()[0].textContent).to.equal('Footnote', 'Footer slot value matches');
+
+    expect(shadowRoot.querySelector('.media')).to.be.null; // eslint-disable-line no-unused-expressions
+  });
+
   it('standard with image', async () => {
     const cardElement = await fixture(html`
       <${tag} image="tests/components/image/images/150.png" alt="image alt">