@muonic/muon 0.0.2-beta.0

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

@@ -0,0 +1,83 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  display: block;
+
+  & summary {
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  & .heading {
+    display: flex;
+    align-items: center;
+    column-gap: $DETAIL_HEADING_GAP;
+    padding-block-start: $DETAIL_HEADING_PADDING_BLOCK;
+    padding-block-end: $DETAIL_HEADING_PADDING_BLOCK;
+    padding-inline-start: $DETAIL_HEADING_PADDING_INLINE;
+    padding-inline-end: $DETAIL_HEADING_PADDING_INLINE;
+    background-color: $DETAIL_HEADING_BACKGROUND_COLOR;
+    color: $DETAIL_HEADING_COLOR;
+    cursor: pointer;
+    font-size: 21px;
+
+    &:hover {
+      background-color: $DETAIL_HEADING_HOVER_BACKGROUND_COLOR;
+      color: $DETAIL_HEADING_HOVER_COLOR;
+      text-decoration: underline;
+    }
+
+    & :focus:not(:focus-visible) {
+      /*
+         https://matthiasott.com/notes/focus-visible-is-here and
+         https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+      */
+      outline-style: none;
+    }
+
+    &:focus-visible {
+      background-color: $DETAIL_HEADING_FOCUS_BACKGROUND_COLOR;
+      color: $DETAIL_HEADING_FOCUS_COLOR;
+      outline-color: $DETAIL_HEADING_FOCUS_OUTLINE_COLOR;
+      outline-style: solid;
+      outline-width: 3px;
+      outline-offset: 0;
+      text-decoration: underline;
+    }
+  }
+
+  & .content {
+    color: $DETAIL_CONTENT_COLOR;
+    padding-block-start: $DETAIL_CONTENT_PADDING_BLOCK;
+    padding-block-end: $DETAIL_CONTENT_PADDING_BLOCK;
+    padding-inline-start: $DETAIL_CONTENT_PADDING_INLINE;
+    padding-inline-end: $DETAIL_CONTENT_PADDING_INLINE;
+  }
+
+  & .has-icon,
+  & .toggle-start {
+    & .content {
+      padding-inline-start: $DETAIL_CONTENT_ICON_SPACER;
+    }
+  }
+
+  & .toggle,
+  & .icon {
+    width: $DETAIL_TOGGLE_ICON_SIZE;
+    height: $DETAIL_TOGGLE_ICON_SIZE;
+    flex-shrink: 0;
+  }
+
+  & .toggle-start {
+    & .icon {
+      margin-inline-start: auto; /* this aligns the icon to the opposite end */
+    }
+  }
+
+  & .toggle-end {
+    & .toggle {
+      margin-inline-start: auto; /* this aligns the toggle to the opposite end */
+    }
+  }
+}

package/components/detail/story.js

@@ -0,0 +1,33 @@
+import { Detail } from '@muonic/muon/components/detail';
+import setup from '@muonic/muon/storybook/stories';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
+
+const details = setup('detail', Detail);
+
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  }
+};
+
+const innerDetail = (args) => staticHTML`
+  <div slot="heading">${unsafeStatic(args.heading)}</div>
+  ${unsafeStatic(args.content)}
+`;
+
+const StandardTemplate = (args) => details.template(args, innerDetail);
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+  heading: 'Where can I buy an ice cream?',
+  content: 'We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!'
+};
+
+export const WithIcon = StandardTemplate.bind({});
+WithIcon.args = {
+  icon: 'dot-circle',
+  heading: 'Where can I buy an ice cream?',
+  content: 'We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!'
+};

package/components/form/index.js

@@ -0,0 +1 @@
+export { Form } from './src/form-component.js';

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

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

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

@@ -0,0 +1,9 @@
+{
+  "form": {
+    "row": {
+      "gap": {
+        "value": "{ theme.spacer.lg.value }"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,197 @@
+import { html, MuonElement, css, unsafeCSS } from '@muonic/muon';
+import scrollTo from '@muon/utils/scroll';
+import styles from './form-styles.css';
+
+/**
+ * A form.
+ *
+ * @element form
+ */
+
+export class Form extends MuonElement {
+
+  constructor() {
+    super();
+    this._submit = this._submit.bind(this);
+    this._reset = this._reset.bind(this);
+  }
+
+  static get styles() {
+    return css`${unsafeCSS(styles)}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    queueMicrotask(() => {
+      this.__checkForFormEl();
+      if (this._nativeForm) {
+        this.__registerEvents();
+        // hack to stop browser validation pop up
+        this._nativeForm.setAttribute('novalidate', true);
+        // hack to force implicit submission (https://github.com/WICG/webcomponents/issues/187)
+        const input = document.createElement('input');
+        input.type = 'submit';
+        input.hidden = true;
+        this._nativeForm.appendChild(input);
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.__teardownEvents();
+  }
+
+  __registerEvents() {
+    this._nativeForm?.addEventListener('submit', this._submit);
+    this._submitButton?.addEventListener('click', this._submit);
+    this._nativeForm?.addEventListener('reset', this._reset);
+    this._resetButton?.addEventListener('click', this._reset);
+  }
+
+  __teardownEvents() {
+    this._nativeForm?.removeEventListener('submit', this._submit);
+    this._submitButton?.removeEventListener('click', this._submit);
+    this._nativeForm?.removeEventListener('reset', this._reset);
+    this._resetButton?.removeEventListener('click', this._reset);
+  }
+
+  __checkForFormEl() {
+    if (!this._nativeForm) {
+      throw new Error(
+        'No form node found. Did you put a <form> element inside?'
+      );
+    }
+  }
+
+  _reset() {
+    this.__checkForFormEl();
+
+    if (
+      !this._resetButton.disabled ||
+      !this._resetButton.loading
+    ) {
+      this._nativeForm.reset();
+      Array.from(this._nativeForm.elements).forEach((element) => {
+        const componentElement = this._findInputElement(element);
+        if (componentElement !== element) {
+          componentElement.reset?.();
+        }
+      });
+    }
+  }
+
+  _submit(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.__checkForFormEl();
+
+    if (
+      !this._submitButton ||
+      this._submitButton.disabled ||
+      this._submitButton.loading
+    ) {
+      return undefined; // should this be false?
+    }
+
+    const validity = this.validate();
+
+    if (validity.isValid) {
+      this.dispatchEvent(new Event('submit', { cancelable: true }));
+    } else {
+      const invalidElements = validity.validationStates.filter((state) => {
+        return !state.isValid;
+      });
+
+      scrollTo({ element: invalidElements[0].formElement });
+    }
+
+    return validity.isValid;
+  }
+
+  get _nativeForm() {
+    return this.querySelector('form');
+  }
+
+  get _submitButton() {
+    return this.querySelector('button:not([hidden])[type="submit"]') ||
+      this.querySelector('input:not([hidden])[type="submit"]') ||
+      this.querySelector('*:not([hidden])[type="submit"]');
+  }
+
+  get _resetButton() {
+    return this.querySelector('button:not([hidden])[type="reset"]') ||
+      this.querySelector('input:not([hidden])[type="reset"]') ||
+      this.querySelector('*:not([hidden])[type="reset"]');
+  }
+
+  _findInputElement(element) {
+    if (element.parentElement._inputElement) {
+      return element.parentElement;
+    }
+    // Due to any layout container elements - @TODO - need better logic
+    if (element.parentElement.parentElement._inputElement) {
+      return element.parentElement.parentElement;
+    }
+
+    return element;
+  }
+
+  validate() {
+    let isValid = true;
+    // @TODO: Check how this works with form associated
+    const validationStates = Array.from(this._nativeForm.elements).reduce((acc, element) => {
+      element = this._findInputElement(element);
+      const { name } = element;
+      const hasBeenSet = acc.filter((el) => el.name === name).length > 0;
+
+      // For checkboxes and radio button - don't set multiple times (needs checking for native inputs)
+      // Ignore buttons (including hidden reset)
+      if (
+        hasBeenSet ||
+        element === this._submitButton ||
+        element === this._resetButton ||
+        element.type === 'submit'
+      ) {
+        return acc;
+      }
+
+      if (element.reportValidity) {
+        element.reportValidity();
+      }
+
+      const { validity } = element;
+
+      if (validity) {
+        const { value } = element;
+        const { valid, validationMessage } = validity;
+
+        isValid = Boolean(isValid & validity.valid);
+
+        acc.push({
+          name,
+          value,
+          isValid: valid,
+          error: validationMessage,
+          validity: validity,
+          formElement: element
+        });
+      }
+
+      return acc;
+    }, []);
+
+    return {
+      isValid,
+      validationStates
+    };
+  }
+
+  get standardTemplate() {
+    return html`
+      <slot></slot>
+    `;
+  }
+}

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

@@ -0,0 +1,10 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  display: block;
+
+  & ::slotted(.layout-row) {
+    display: grid;
+    row-gap: $FORM_ROW_GAP;
+  }
+}

package/components/form/story.js

@@ -0,0 +1,71 @@
+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';
+
+const details = setup('form', Form);
+
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'submit']
+    }
+  }
+};
+
+const innerDetail = (args) => staticHTML`
+  <form>
+    ${InputterStories.Select(args.Title)}
+    ${InputterStories.Text(args.Text)}
+    ${InputterStories.Email(args.Email)}
+
+    <label for="user-id">User ID</label>
+    <input type="text" id="user-id" name="user-id" required/>
+
+    ${InputterStories.DateMask(args.DOB)}
+
+    ${InputterStories.Checkbox(args.Checkbox)}
+
+    <input type="reset" />
+    ${SubmitCTA(args.Submit)}
+  <form>`;
+
+export const Standard = (args) => details.template(args, innerDetail);
+Standard.args = {
+  Title: {
+    ...InputterStories.Select.args,
+    name: 'title',
+    label: 'Title'
+  },
+  Text: {
+    ...InputterStories.Text.args,
+    name: 'username',
+    label: 'Name',
+    value: 'text'
+  },
+  Email: {
+    ...InputterStories.Email.args,
+    name: 'useremail'
+  },
+  Checkbox: {
+    ...InputterStories.Checkbox.args,
+    value: 'b',
+    options: [
+      { label: 'Option A', value: 'a' },
+      { label: 'Option B', value: 'b' }
+    ]
+  },
+  DOB: {
+    ...InputterStories.DateMask.args,
+    name: 'dob',
+    label: 'Date of birth',
+    validation: ['maxDate(\'031/12/2022\')']
+  },
+  Submit: {
+    ...SubmitCTA.args,
+    type: 'submit',
+    text: 'Submit'
+  }
+};

package/components/icon/index.js

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

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

@@ -0,0 +1,31 @@
+{
+  "icon": {
+    "config": {
+      "type": {
+        "description": "Default value for `type` property which renders the template",
+        "value": "standard",
+        "type": "string"
+      },
+      "name": {
+        "description": "Default value for `name` property to load the icon. (name) required in URL token to load specific icon",
+        "value": "arrow-right",
+        "type": "string"
+      },
+      "category": {
+        "description": "Optional default value for category in URL. (category) required in URL token",
+        "value": "",
+        "type": "string"
+      },
+      "sizes": {
+        "description": "Array of set values for available icon sizes in px",
+        "value": [16, 32, 48, 64, 72],
+        "type": "array"
+      },
+      "url": {
+        "description": "CDN URL to fetch icons. (name) and (category) to replace in URL to get specific icon",
+        "value": "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/solid/(name).svg",
+        "type": "string"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+{
+  "icon": {
+    "fill": {
+      "description": "CSS fill value for the icon SVG",
+      "value": "{ theme.color.current.value }"
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+import { MuonElement, html, ifDefined, classMap, styleMap } from '@muonic/muon';
+import { svgLoader } from '@muon/directives/svg-loader-directive';
+import {
+  ICON_CONFIG_TYPE,
+  ICON_CONFIG_NAME,
+  ICON_CONFIG_CATEGORY,
+  ICON_CONFIG_SIZES,
+  ICON_CONFIG_URL
+} from '@muon/tokens';
+
+import styles from './icon-styles.css';
+
+/**
+ * Icons are visual symbols that are used to represent objects or actions to reduce cognitive load to a user.
+ *
+ * @element icon
+ */
+
+export class Icon extends MuonElement {
+
+  static get properties() {
+    return {
+      name: { type: String, attribute: true },
+      describe: { type: String },
+      size: { type: Number },
+      category: { type: String },
+      url: { type: String, state: true }
+    };
+  }
+
+  static get styles() {
+    return styles;
+  }
+
+  constructor() {
+    super();
+
+    this.type = ICON_CONFIG_TYPE;
+    this.name = ICON_CONFIG_NAME;
+    this.category = ICON_CONFIG_CATEGORY;
+    this.allSizes = ICON_CONFIG_SIZES;
+    this.url = ICON_CONFIG_URL;
+    this.describe = '';
+  }
+
+  /**
+   * A getter method to get size of image.
+   *
+   * @returns {number | string} - Size at specific index or 100%.
+   * @readonly
+   */
+  get sizes() {
+    const size = this.size - 1;
+
+    return this.allSizes[size] || '100%';
+  }
+
+  get iconSize() {
+    const computedSize = this.sizes;
+    const size = computedSize === '100%' ? computedSize : `${computedSize}px`;
+
+    return size;
+  }
+
+  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>
+    `;
+  }
+
+  render() {
+    if (!this.name?.length > 0) {
+      return undefined;
+    }
+
+    return super.render();
+  }
+}

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

@@ -0,0 +1,26 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  display: inline-block;
+  min-width: 10px; /* to give a minimum size to be observable */
+  min-height: 10px; /* to give a minimum size to be observable */
+
+  &,
+  & svg,
+  & .icon {
+    width: var(--icon-size, 100%);
+    height: var(--icon-size, 100%);
+  }
+
+  & svg {
+    display: block;
+    fill: $ICON_FILL;
+  }
+
+  @media (-ms-high-contrast: active), (forced-colors: active) {
+    & svg {
+      forced-color-adjust: none;
+      fill: canvastext;
+    }
+  }
+}

package/components/icon/story.js

@@ -0,0 +1,26 @@
+import { Icon } from '@muonic/muon/components/icon';
+import setup from '@muonic/muon/storybook/stories';
+import {
+  ICON_CONFIG_SIZES
+} from '@muonic/muon/build/tokens/es6/muon-tokens.mjs';
+
+const details = setup('icon', Icon);
+
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'sizes', 'iconSize', 'allSizes']
+    }
+  },
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    size: {
+      control:
+      { type: 'range', min: 1, max: ICON_CONFIG_SIZES.length, step: 1 }
+    }
+  }
+};
+
+export const Standard = (args) => details.template(args);
+Standard.args = { name: 'arrow-right' };

package/components/image/index.js

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

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

@@ -0,0 +1,26 @@
+{
+  "image": {
+    "config": {
+      "type": {
+        "description": "Default value for `type` property which renders the template",
+        "value": "standard",
+        "type": "string"
+      },
+      "ratios": {
+        "description": "Default value for `ratios` available for ratio",
+        "value": ["1 / 1", "4 / 3", "16 / 9"],
+        "type": "array"
+      },
+      "ratio": {
+        "description": "Default value for `ratio` property which decides the ratio size for the image",
+        "value": "16 / 9",
+        "type": "string"
+      },
+      "placeholder": {
+        "description": "Default value for `placeholder` property which creates the thumbnail placeholder image. (src) can be used to bring in the src property",
+        "value": "",
+        "type": "string"
+      }
+    }
+  }
+}