@muonic/muon 0.0.2-beta.0

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

@@ -0,0 +1,96 @@
+import { MuonElement, html, styleMap, classMap } from '@muonic/muon';
+import { imageInlineLoader, imageBackgroundLoader } from '@muon/directives/image-loader-directive';
+import {
+  IMAGE_CONFIG_TYPE,
+  IMAGE_CONFIG_RATIOS,
+  IMAGE_CONFIG_RATIO,
+  IMAGE_CONFIG_PLACEHOLDER
+} from '@muon/tokens';
+
+import styles from './image-styles.css';
+
+/**
+ * Loading images with default lazy loading.
+ *
+ * @element image
+ */
+
+export class Image extends MuonElement {
+
+  static get properties() {
+    return {
+      background: { type: Boolean },
+      backgroundsize: { type: String, attribute: 'background-size' },
+      src: { type: String },
+      alt: { type: String },
+      ratio: { type: String },
+      placeholder: { type: String },
+      loading: { type: String },
+      _ratios: { type: Array, state: true }
+    };
+  }
+
+  static get styles() {
+    return styles;
+  }
+
+  constructor() {
+    super();
+
+    this.type = IMAGE_CONFIG_TYPE;
+    this.background = false;
+    this.backgroundsize = 'cover'; // cover, contain
+    this.alt = '';
+    this.ratio = IMAGE_CONFIG_RATIO;
+    this.placeholder = IMAGE_CONFIG_PLACEHOLDER;
+    this.loading = 'lazy'; // eager|lazy
+    this._ratios = IMAGE_CONFIG_RATIOS;
+
+  }
+
+  get placeholderImage() {
+    return this.placeholder.replace('(src)', this.src); // @TODO: test alternative ways for this
+  }
+
+  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
+    }
+
+    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,
+        alt: this.alt,
+        placeholder: this.placeholderImage,
+        loading: this.loading
+      };
+
+      return html`
+        <div class=${classMap(classes)} style=${styleMap(styles)}>
+          ${isBackground ? imageBackgroundLoader(imageObj) : imageInlineLoader(imageObj)}
+        </div>
+      `;
+    } else {
+      return html`<div class="image"></div>`;
+    }
+  }
+}

package/components/image/src/image-styles.css

@@ -0,0 +1,71 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  display: block;
+
+  &,
+  & .image .image-holder,
+  & .image .image-lazy {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    min-width: 1px; /* Enforces a size to be observable */
+    min-height: 1px; /* Enforces a size to be observable */
+  }
+
+  & .image {
+    position: relative;
+    aspect-ratio: var(--image-ratio);
+
+    @supports not (aspect-ratio: 1/1) {
+      padding-top: var(--image-padding);
+    }
+
+    & .blur {
+      filter: blur(0.7em);
+      transform: scale(1.03);
+      transition-timing-function: ease-out;
+    }
+
+    & .blur-out {
+      animation: blur-out 0.5s ease-out;
+    }
+
+    & .image-holder,
+    & .image-lazy {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    &.is-background {
+      & .image-holder {
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-image: var(--background-image);
+        background-size: var(--background-size);
+      }
+    }
+
+    &.no-ratio {
+      padding: 0;
+
+      & .image-lazy {
+        position: static;
+      }
+    }
+  }
+}
+
+@keyframes blur-out {
+  0% {
+    filter: blur(0.7em);
+  }
+
+  100% {
+    filter: blur(0);
+  }
+}

package/components/image/story.js

@@ -0,0 +1,31 @@
+import { Image } from '@muonic/muon/components/image';
+import setup from '@muonic/muon/storybook/stories';
+import { IMAGE_CONFIG_RATIOS } from '@muonic/muon/build/tokens/es6/muon-tokens.mjs';
+
+const details = setup('image', Image);
+
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'placeholderImage']
+    }
+  },
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    ratio: {
+      options: IMAGE_CONFIG_RATIOS,
+      control: {
+        type: 'inline-radio'
+      }
+    }
+  }
+};
+
+const StandardTemplate = (args) => details.template(args, (args) => args.text);
+
+export const Standard = StandardTemplate.bind({});
+Standard.args = { src: 'https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg', placeholder: '(src).thumb.48.48.png' };
+
+export const Background = StandardTemplate.bind({});
+Background.args = { src: 'https://blog.nucleus.design/multi-branding/Multibrand.jpg', placeholder: '(src).thumb.48.48.png', background: true };

package/components/inputter/index.js

@@ -0,0 +1 @@
+export { Inputter } from './src/inputter-component';

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

@@ -0,0 +1,14 @@
+{
+  "inputter": {
+    "config": {
+      "type": {
+        "description": "Default value for `type` property which renders the template.",
+        "value": "standard",
+        "type": "string"
+      },
+      "disabled": {
+        "value": true
+      }
+    }
+  }
+}

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

@@ -0,0 +1,308 @@
+{
+  "inputter": {
+    "field": {
+      "color": {
+        "description": "Text color for the field. Inherits the theme's text dark color.",
+        "value": "{ theme.color.text.dark.value }"
+      },
+      "background": {
+        "color": {
+          "description": "Background color for the field. Inherits the theme's base background color.",
+          "value": "{ theme.color.base.background.value }"
+        }
+      },
+      "font": {
+        "family": {
+          "description": "Font family used for field. Inherits the theme's default font.",
+          "value": "{ theme.font.family.default.value }"
+        },
+        "size": {
+          "description": "Font size used for field.",
+          "value": "{ theme.font.size.default.value }"
+        }
+      },
+      "padding": {
+        "block": {
+          "description": "Padding space above and below the field text. Equal values in the block axis.",
+          "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 }"
+        }
+      },
+      "border": {
+        "color": {
+          "description": "Border color of the field.",
+          "value": "{ inputter.field.color.value }"
+        }
+      },
+      "icon": {
+        "size": {
+          "description": "Size of the icon used within the field.",
+          "value": "{ theme.size.sm.value }"
+        },
+        "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 })"
+        }
+      },
+      "date": {
+        "icon": {
+          "description": "Icon used to open a calendar from the field.",
+          "value": "calendar"
+        }
+      },
+      "select": {
+        "icon": {
+          "description": "Icon used to open a drop-down selection from the field.",
+          "value": "chevron-circle-down"
+        }
+      },
+      "search": {
+        "icon": {
+          "description": "Icon used to indicate that a search term is expected to be entered in the field.",
+          "value": "search"
+        }
+      }
+    },
+    "multiple": {
+      "background": {
+        "color": {
+          "description": "Background color for radio button and checkbox.",
+          "value": "{ inputter.field.background.color.value }"
+        }
+      },
+      "gap": {
+        "description": "Gap between radio button, checkbox and their label.",
+        "value": "0.5em"
+      },
+      "size": {
+        "description": "Size of the radio button and checkbox. Use an `em` unit to scale with label.",
+        "value": "1em"
+      },
+      "border": {
+        "color": {
+          "description": "Border color for the radio button and checkbox.",
+          "value": "{ inputter.field.color.value }"
+        }
+      }
+    },
+    "label": {
+      "color": {
+        "description": "Label text color of field.",
+        "value": "{ inputter.field.color.value }"
+      }
+    },
+    "placeholder": {
+      "color": {
+        "description": "Placeholder text color of the inputter.",
+        "value": "{ theme.color.placeholder.value }"
+      }
+    },
+    "mask": {
+      "__private_color": {
+        "value": "{ theme.color.darkest.value }",
+        "modify": [{
+          "type": "brighten",
+          "amount": 2.75
+        }]
+      },
+      "color": {
+        "description": "Text color for the mask of the inputter. Defaults to brightened version of the darkest color.",
+        "value": "{ inputter.mask.__private_color.value }"
+      },
+      "font": {
+        "family": {
+          "description": "Font family used for a masked inputter. Defaults to monospaced Courier New or Courier.",
+          "value": "Courier New, Courier, { theme.font.family.monospace.value }"
+        },
+        "weight": {
+          "description": "Weight of the font used for a masked inputter.",
+          "value": "{ theme.font.weight.heading.value }"
+        }
+      }
+    },
+    "hover": {
+      "__private_color": {
+        "value": "{ inputter.field.color.value }",
+        "modify": [{
+          "type": "darken",
+          "amount": 1.5
+        }]
+      },
+      "color": {
+        "description": "Color of the field on `hover` state. Defaults to a darkened version of the color.",
+        "value": "{ inputter.hover.__private_color.value }"
+      },
+      "border": {
+        "color": {
+          "description": "Border color of the field on `hover` state.",
+          "value": "{ inputter.hover.color.value }"
+        }
+      }
+    },
+    "focus": {
+      "color": {
+        "description": "Color of the field on `focus` state.",
+        "value": "{ inputter.hover.color.value }"
+      },
+      "border": {
+        "color": {
+          "description": "Border color of the field on `focus` state.",
+          "value": "{ inputter.focus.color.value }"
+        }
+      },
+      "outline": {
+        "color": {
+          "description": "Outline color for `keyboard focus` state. Defaults to theme's focus color.",
+          "value": "{ theme.color.focus.value }"
+        }
+      }
+    },
+    "disabled": {
+      "color": {
+        "description": "Disabled text color. Defaults to theme's disabled color.",
+        "value": "{ theme.color.disabled.value }"
+      },
+      "border": {
+        "color": {
+          "description": "Disabled border color. Defaults to theme's disabled color.",
+          "value": "{ inputter.disabled.color.value }"
+        }
+      },
+      "background": {
+        "__private_color": {
+          "value": "{ inputter.disabled.color.value }",
+          "modify": [{
+            "type": "brighten",
+            "amount": 1
+          }]
+        },
+        "color": {
+          "description": "Disabled background color. Defaults to a brightened version of theme's disabled color.",
+          "value": "{ inputter.disabled.background.__private_color.value }"
+        }
+      },
+      "placeholder": {
+        "color": {
+          "description": "Disabled placeholder color. Defaults to theme's disabled color.",
+          "value": "{ inputter.disabled.color.value }"
+        }
+      }
+    },
+    "validation": {
+      "margin": {
+        "block": {
+          "description": "Margin space above and below the validation message. Equal values in the block axis.",
+          "value": "{ theme.spacer.sm.value }"
+        }
+      },
+      "gap": {
+        "description": "Gap between the validation message and icon.",
+        "value": "{ theme.spacer.sm.value }"
+      },
+      "icon": {
+        "size": {
+          "description": "Icon size for the validation.",
+          "value": "{ theme.size.sm.value }"
+        }
+      },
+      "warning": {
+        "color": {
+          "description": "Color indicative of a validation warning.",
+          "value": "{ theme.color.warning.@.value }"
+        },
+        "icon": {
+          "description": "Icon indicative of a validation warning.",
+          "value": "exclamation-circle"
+        }
+      }
+    },
+    "detail": {
+      "color": {
+        "description": "Text color for the detail.",
+        "value": "{ inputter.field.color.value }"
+      },
+      "hover": {
+        "color": {
+          "description": "Text color for the `hover` state of the detail.",
+          "value": "{ inputter.hover.color.value }"
+        }
+      },
+      "heading": {
+        "margin": {
+          "block": {
+            "description": "Margin space between the detail heading and the field.",
+            "value": "{ theme.spacer.sm.value }"
+          }
+        },
+        "gap": {
+          "description": "Gap between the detail icon and heading.",
+          "value": "{ theme.spacer.sm.value }"
+        }
+      },
+      "content": {
+        "margin": {
+          "block": {
+            "description": "Margin space between the detail's heading and content.",
+            "value": "{ theme.spacer.sm.value }"
+          }
+        },
+        "padding": {
+          "inline": {
+            "description": "Padding space at the start of the detail's content.",
+            "value": "{ theme.spacer.sm.value }"
+          }
+        }
+      },
+      "icon": {
+        "size": {
+          "description": "Size of the icon used within the detail.",
+          "value": "{ theme.size.sm.value }"
+        }
+      },
+      "toggle": {
+        "open": {
+          "description": "Icon used to open the detail's content.",
+          "value": "chevron-circle-down"
+        },
+        "close": {
+          "description": "Icon used to close the detail's content.",
+          "value": "chevron-circle-up"
+        },
+        "position": {
+          "description": "Position of the detail's toggle icon. Valid values: `start`, `end`.",
+          "value": "start"
+        }
+      },
+      "focus": {
+        "outline": {
+          "color": {
+            "description": "Outline color of the detail on `keyboard focus` state.",
+            "value": "{ inputter.focus.outline.color.value }"
+          }
+        }
+      },
+      "border": {
+        "__private_color": {
+          "value": "{ inputter.field.color.value }",
+          "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 }"
+        }
+      }
+    }
+  }
+}