@muonic/muon 0.0.2-beta.1 → 0.0.2-beta.11

package/CHANGELOG.md

@@ -2,6 +2,73 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* rename package to alias ([a9e41bc](https://github.com/centrica-engineering/muon/commit/a9e41bccb73188ba931bec65f9f51ff74b27169c))
+
 ### [0.0.2-beta.1](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.0...v0.0.2-beta.1) (2022-10-31)
 
 

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/card/story.js

@@ -1,7 +1,7 @@
-import { Card } from '@muonic/muon/components/card';
-import setup from '@muonic/muon/storybook/stories';
-import { StandardLink as CTALink } from '../cta/story';
 import { staticHTML, unsafeStatic } from '@muonic/muon';
+import setup from '@muonic/muon/storybook/stories';
+import { Card } from '@muon/components/card';
+import { StandardLink as CTALink } from '@muon/components/cta/story';
 
 const details = setup('card', Card);
 

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/story.js

@@ -1,6 +1,6 @@
-import { Cta } from '@muonic/muon/components/cta';
-import setup from '@muonic/muon/storybook/stories';
 import { staticHTML } from '@muonic/muon';
+import setup from '@muonic/muon/storybook/stories';
+import { Cta } from '@muon/components/cta';
 
 const details = setup('cta', Cta);
 const tag = details.getTagEl();

package/components/detail/story.js

@@ -1,6 +1,6 @@
-import { Detail } from '@muonic/muon/components/detail';
-import setup from '@muonic/muon/storybook/stories';
 import { staticHTML, unsafeStatic } from '@muonic/muon';
+import setup from '@muonic/muon/storybook/stories';
+import { Detail } from '@muon/components/detail';
 
 const details = setup('detail', Detail);
 

package/components/form/story.js

@@ -1,8 +1,8 @@
-import { Form } from '@muonic/muon/components/form';
-import setup from '@muonic/muon/storybook/stories';
-import * as InputterStories from '../inputter/story';
-import { Standard as SubmitCTA } from '../cta/story';
 import { staticHTML } from '@muonic/muon';
+import setup from '@muonic/muon/storybook/stories';
+import { Form } from '@muon/components/form';
+import * as InputterStories from '@muon/components/inputter/story';
+import { Standard as SubmitCTA } from '@muon/components/cta/story';
 
 const details = setup('form', Form);
 

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.type]: 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/icon/story.js

@@ -1,5 +1,5 @@
-import { Icon } from '@muonic/muon/components/icon';
 import setup from '@muonic/muon/storybook/stories';
+import { Icon } from '@muon/components/icon';
 import {
   ICON_CONFIG_SIZES
 } from '@muonic/muon/build/tokens/es6/muon-tokens.mjs';

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/image/story.js

@@ -1,5 +1,5 @@
-import { Image } from '@muonic/muon/components/image';
 import setup from '@muonic/muon/storybook/stories';
+import { Image } from '@muon/components/image';
 import { IMAGE_CONFIG_RATIOS } from '@muonic/muon/build/tokens/es6/muon-tokens.mjs';
 
 const details = setup('image', Image);

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

@@ -23,24 +23,42 @@
       },
       "padding": {
         "block": {
-          "description": "Padding space above and below the field text. Equal values in the block axis.",
-          "value": "{ theme.spacer.sm.value }"
+          "start": {
+            "description": "Padding space above the field text.",
+            "value": "{ theme.spacer.sm.value }"
+          },
+          "end": {
+            "description": "Padding space below the field text.",
+            "value": "{ theme.spacer.sm.value }"
+          }
         },
         "inline": {
-          "description": "Padding space left and right of the field text. Equal values in the inline axis.",
-          "value": "{ inputter.field.padding.block.value }"
-        }
-      },
-      "margin": {
-        "block": {
-          "description": "Margin space between the label and the field.",
-          "value": "{ theme.spacer.sm.value }"
+          "start": {
+            "description": "Padding space left of the field text. Equal values in the inline axis.",
+            "value": "{ theme.spacer.sm.value }"
+          },
+          "end": {
+            "description": "Padding space right of the field text. Equal values in the inline axis.",
+            "value": "{ theme.spacer.sm.value }"
+          }
         }
       },
       "border": {
         "color": {
           "description": "Border color of the field.",
           "value": "{ inputter.field.color.value }"
+        },
+        "radius": {
+          "description": "Border radius of the field.",
+          "value": 0
+        },
+        "style": {
+          "description": "Border style of the field.",
+          "value": "solid"
+        },
+        "width": {
+          "description": "Border width of the field.",
+          "value": "2px"
         }
       },
       "icon": {
@@ -50,7 +68,7 @@
         },
         "spacer": {
           "description": "Padding space used if an icon exists at the start or end of the field.",
-          "value": "calc({ inputter.field.padding.block.value } + { inputter.field.icon.size.value } + { inputter.field.padding.block.value })"
+          "value": "calc({ inputter.field.padding.block.start.value } + { inputter.field.icon.size.value } + { inputter.field.padding.block.end.value })"
         }
       },
       "date": {
@@ -98,6 +116,18 @@
       "color": {
         "description": "Label text color of field.",
         "value": "{ inputter.field.color.value }"
+      },
+      "margin": {
+        "block": {
+          "start": {
+            "description": "Margin space above the label.",
+            "value": 0
+          },
+          "end": {
+            "description": "Margin space below the label.",
+            "value": "{ theme.spacer.sm.value }"
+          }
+        }
       }
     },
     "placeholder": {
@@ -109,10 +139,12 @@
     "mask": {
       "__private_color": {
         "value": "{ theme.color.darkest.value }",
-        "modify": [{
-          "type": "brighten",
-          "amount": 2.75
-        }]
+        "modify": [
+          {
+            "type": "brighten",
+            "amount": 2.75
+          }
+        ]
       },
       "color": {
         "description": "Text color for the mask of the inputter. Defaults to brightened version of the darkest color.",
@@ -132,10 +164,12 @@
     "hover": {
       "__private_color": {
         "value": "{ inputter.field.color.value }",
-        "modify": [{
-          "type": "darken",
-          "amount": 1.5
-        }]
+        "modify": [
+          {
+            "type": "darken",
+            "amount": 1.5
+          }
+        ]
       },
       "color": {
         "description": "Color of the field on `hover` state. Defaults to a darkened version of the color.",
@@ -163,6 +197,18 @@
         "color": {
           "description": "Outline color for `keyboard focus` state. Defaults to theme's focus color.",
           "value": "{ theme.color.focus.value }"
+        },
+        "offset": {
+          "description": "Outline offset for `keyboard focus` state. Defaults to theme's focus color.",
+          "value": 0
+        },
+        "style": {
+          "description": "Outline style for `keyboard focus` state. Defaults to theme's focus color.",
+          "value": "solid"
+        },
+        "width": {
+          "description": "Outline width for `keyboard focus` state. Defaults to theme's focus color.",
+          "value": "3px"
         }
       }
     },
@@ -180,10 +226,12 @@
       "background": {
         "__private_color": {
           "value": "{ inputter.disabled.color.value }",
-          "modify": [{
-            "type": "brighten",
-            "amount": 1
-          }]
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 1
+            }
+          ]
         },
         "color": {
           "description": "Disabled background color. Defaults to a brightened version of theme's disabled color.",
@@ -198,6 +246,12 @@
       }
     },
     "validation": {
+      "font": {
+        "size": {
+          "description": "Font size for the validation.",
+          "value": "14px"
+        }
+      },
       "margin": {
         "block": {
           "description": "Margin space above and below the validation message. Equal values in the block axis.",
@@ -226,6 +280,12 @@
       }
     },
     "detail": {
+      "font": {
+        "size": {
+          "description": "Font size for the detail.",
+          "value": "12px"
+        }
+      },
       "color": {
         "description": "Text color for the detail.",
         "value": "{ inputter.field.color.value }"
@@ -237,10 +297,21 @@
         }
       },
       "heading": {
+        "font": {
+          "size": {
+            "value": "14px"
+          }
+        },
         "margin": {
           "block": {
-            "description": "Margin space between the detail heading and the field.",
-            "value": "{ theme.spacer.sm.value }"
+            "start": {
+              "description": "Margin space above the detail heading.",
+              "value": 0
+            },
+            "end": {
+              "description": "Margin space below the detail heading.",
+              "value": "{ theme.spacer.sm.value }"
+            }
           }
         },
         "gap": {
@@ -251,8 +322,14 @@
       "content": {
         "margin": {
           "block": {
-            "description": "Margin space between the detail's heading and content.",
-            "value": "{ theme.spacer.sm.value }"
+            "start": {
+              "description": "Margin space above the detail content.",
+              "value": 0
+            },
+            "end": {
+              "description": "Margin space below the detail content.",
+              "value": "{ theme.spacer.sm.value }"
+            }
           }
         },
         "padding": {
@@ -285,22 +362,42 @@
       "focus": {
         "outline": {
           "color": {
-            "description": "Outline color of the detail on `keyboard focus` state.",
+            "description": "Outline color for `keyboard focus` state. Defaults to theme's focus color.",
             "value": "{ inputter.focus.outline.color.value }"
+          },
+          "offset": {
+            "description": "Outline offset for `keyboard focus` state. Defaults to theme's focus color.",
+            "value": "{ inputter.focus.outline.offset.value }"
+          },
+          "style": {
+            "description": "Outline style for `keyboard focus` state. Defaults to theme's focus color.",
+            "value": "{ inputter.focus.outline.style.value }"
+          },
+          "width": {
+            "description": "Outline width for `keyboard focus` state. Defaults to theme's focus color.",
+            "value": "{ inputter.focus.outline.width.value }"
           }
         }
       },
       "border": {
         "__private_color": {
           "value": "{ inputter.field.color.value }",
-          "modify": [{
-            "type": "brighten",
-            "amount": 3
-          }]
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 3
+            }
+          ]
         },
         "color": {
           "description": "Border color of the detail. Defaults to a brightened version of the field color.",
           "value": "{ inputter.detail.border.__private_color.value }"
+        },
+        "style": {
+          "value": "solid"
+        },
+        "width": {
+          "value": "3px"
         }
       }
     }