@muonic/muon 0.0.2-beta.0

package/components/cta/index.js

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

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

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

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

@@ -0,0 +1,174 @@
+import { MuonElement, html, classMap, ScopedElementsMixin, literal, staticHTML, ifDefined } from '@muonic/muon';
+import { Icon } from '@muon/components/icon';
+import {
+  CTA_CONFIG_TYPE,
+  CTA_LOADING_MESSAGE,
+  CTA_LOADING_ICON_NAME,
+  CTA_ICON_NAME,
+  CTA_ICON_POSITION
+} from '@muon/tokens';
+import styles from './cta-styles.css';
+
+/**
+ * A call-to-action allows users to take action once they are ready for it.
+ *
+ * @element cta
+ */
+
+export class Cta extends ScopedElementsMixin(MuonElement) {
+
+  static get scopedElements() {
+    return {
+      'cta-icon': Icon
+    };
+  }
+
+  static get properties() {
+    return {
+      loading: { type: Boolean },
+      loadingMessage: { type: String, attribute: 'loading-message' },
+      disabled: { type: Boolean },
+      icon: { type: String },
+      href: { type: String },
+      _iconPosition: { type: String, state: true },
+      _isButton: { type: Boolean, state: true }
+    };
+  }
+
+  static get styles() {
+    return styles;
+  }
+
+  constructor() {
+    super();
+    this.type = CTA_CONFIG_TYPE;
+    this.loading = false;
+    this.loadingMessage = CTA_LOADING_MESSAGE;
+    this.disabled = false;
+    this._iconPosition = CTA_ICON_POSITION;
+    this.icon = CTA_ICON_NAME;
+  }
+
+  /**
+   * Adds icon html.
+   *
+   * @returns {object} TemplateResult - Icon html.
+   * @protected
+   */
+  get _addIcon() {
+    let icon = this.loading ? CTA_LOADING_ICON_NAME : this.icon;
+
+    if (!icon) {
+      return undefined;
+    }
+
+    if (this.loading) {
+      icon = CTA_LOADING_ICON_NAME;
+    }
+
+    return html`
+      <cta-icon class="icon" name="${icon}"></cta-icon>
+    `;
+  }
+
+  /**
+   * A method to wrap the cta content with button / a / div.
+   *
+   * @param {string | HTMLSlotElement} content - Text content or slot element.
+   * @returns {object} TemplateResult - Cta shadow html.
+   * @protected
+   */
+  _wrapperElement(content) {
+    const parentElement = this.parentElement;
+    const parentName = parentElement?.nodeName;
+    const isInLink = parentName === 'A';
+    const isInBtn = parentName === 'BUTTON';
+    const isInNativeForm = parentName === 'FORM';
+    const isDisabled = parentElement.getAttribute('disabled') || this.disabled;
+    let element = this.href?.length > 0 ? 'a' : 'div';
+
+    if (
+      element !== 'a' &&
+      !isInNativeForm &&
+      !isInLink &&
+      !isInBtn &&
+      !isDisabled &&
+      !this._isButton
+    ) {
+      if (!this.getAttribute('role')) {
+        this.setAttribute('role', 'button');
+      }
+
+      if (!this.getAttribute('tabindex')) {
+        this.setAttribute('tabindex', '0');
+      }
+    }
+
+    if (isDisabled) {
+      if (!this.getAttribute('aria-disabled')) {
+        this.setAttribute('aria-disabled', 'true');
+      }
+    } else {
+      this.removeAttribute('aria-disabled');
+    }
+
+    if (isInNativeForm || this._isButton) {
+      element = 'button';
+    }
+
+    if (isInNativeForm || this._isButton || isInBtn) {
+      this.removeAttribute('role'); // isButton might be called after the first render of the cta
+      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)}>
+        ${content}
+      </${elementTag}>
+    `;
+  }
+
+  get standardTemplate() {
+    const isLoading = this.loading;
+    const iconAdd = this._addIcon;
+    const hasIconStart = this._iconPosition === 'start';
+    const hasIconEnd = this._iconPosition === 'end';
+
+    const internal = html`
+      ${hasIconStart ? iconAdd : undefined}
+      <span class="label-holder">
+        ${isLoading ? this.loadingMessage : html`<slot></slot>`}
+      </span>
+      ${hasIconEnd ? iconAdd : undefined}
+    `;
+
+    return html`
+      ${isLoading ? html`<span role="alert" aria-live="assertive" class="sr-only">${this.loadingMessage}</span>` : ``}
+      ${this._wrapperElement(internal)}
+    `;
+  }
+
+  get submitTemplate() {
+    this.setAttribute('type', 'submit');
+
+    return this.standardTemplate;
+  }
+
+  get resetTemplate() {
+    this.setAttribute('type', 'reset');
+
+    return this.standardTemplate;
+  }
+}

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

@@ -0,0 +1,105 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  display: inline-block;
+  user-select: none;
+  font-family: $CTA_FONT_FAMILY;
+
+  /**
+  * Styles specifically for the `<a>` element.
+  * Retain the order `:link`, `:visited`, `:hover`, `:active`
+  */
+  & a {
+    &:link {
+      text-decoration: none;
+    }
+  }
+
+  /**
+  * Styles specifically for the `<button>` element.
+  * The `<button>` element does not inherit font-family, font-size, font-weight or line-height.
+  */
+  & button {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+
+  & .cta {
+    display: flex;
+    align-items: center;
+    column-gap: $CTA_GAP;
+    padding-block-start: $CTA_PADDING_BLOCK;
+    padding-block-end: $CTA_PADDING_BLOCK;
+    padding-inline-start: $CTA_PADDING_INLINE;
+    padding-inline-end: $CTA_PADDING_INLINE;
+    background-color: $CTA_BACKGROUND_COLOR;
+    color: $CTA_COLOR;
+    border-color: $CTA_BORDER_COLOR;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 10px;
+
+    &:hover {
+      background-color: $CTA_HOVER_BACKGROUND_COLOR;
+      border-color: $CTA_HOVER_BORDER_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 {
+      outline-color: $CTA_FOCUS_OUTLINE_COLOR;
+      outline-style: solid;
+      outline-width: 3px;
+      outline-offset: 0;
+      text-decoration: underline;
+    }
+
+    &:active {
+      background-color: $CTA_ACTIVE_BACKGROUND_COLOR;
+      border-color: $CTA_ACTIVE_BORDER_COLOR;
+    }
+
+    &[disabled],
+    &.disabled {
+      background-color: $CTA_DISABLED_BACKGROUND_COLOR;
+      border-color: $CTA_DISABLED_BORDER_COLOR;
+      pointer-events: none;
+    }
+
+    &.loading {
+      background-color: $CTA_LOADING_BACKGROUND_COLOR;
+      border-color: $CTA_LOADING_BORDER_COLOR;
+      pointer-events: none;
+    }
+
+    & .label-holder {
+      min-inline-size: 10em;
+      max-inline-size: 32em;
+    }
+
+    & .icon {
+      width: $CTA_ICON_SIZE;
+      height: $CTA_ICON_SIZE;
+      flex-shrink: 0;
+    }
+  }
+}
+
+/* TODO: move these `[disabled]` and `[loading]` styles to default.css */
+
+/* stylelint-disable no-descending-specificity */
+:host([disabled]),
+:host([loading]) {
+  cursor: auto;
+  pointer-events: none;
+}
+/* stylelint-enable no-descending-specificity */

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

@@ -0,0 +1,132 @@
+{
+  "cta": {
+    "color": {
+      "description": "Text color. Defaults to the lightest theme color.",
+      "value": "{ theme.color.lightest.value }"
+    },
+    "background": {
+      "color": {
+        "description": "Background color. Defaults to the primary theme color.",
+        "value": "{ theme.color.primary.value }"
+      }
+    },
+    "gap": {
+      "description": "Space between the text and the icon.",
+      "value": "{ theme.spacer.md.value }"
+    },
+    "padding": {
+      "block": {
+        "description": "Padding space above and below. Equal values in the block axis.",
+        "value": "{ theme.spacer.sm.value }"
+      },
+      "inline": {
+        "description": "Padding space left and right. Equal values in the inline axis.",
+        "value": "{ theme.spacer.md.value }"
+      }
+    },
+    "border": {
+      "color": {
+        "description": "Border color. Inherits the background color.",
+        "value": "{ cta.background.color.value }"
+      }
+    },
+    "loading": {
+      "message": {
+        "description": "Value for the `loading` attribute. Default is `Loading...`.",
+        "value": "Loading...",
+        "type": "string"
+      },
+      "icon": {
+        "name": {
+          "description": "Name for the icon displayed during the `loading` state.",
+          "value": "spinner",
+          "type": "string"
+        }
+      },
+      "background": {
+        "color": {
+          "description": "Background color during the `loading` state.",
+          "value": "{ cta.background.color.value }"
+        }
+      },
+      "border": {
+        "color": {
+          "description": "Border color during the `loading` state.",
+          "value": "{ cta.loading.background.color.value }"
+        }
+      }
+    },
+    "icon": {
+      "name": {
+        "description": "Icon to indicate progress.",
+        "value": "arrow-right",
+        "type": "string"
+      },
+      "position": {
+        "description": "Position of the icon. Valid values: `start`, `end`.",
+        "value": "end",
+        "type": "string"
+      },
+      "size": {
+        "description": "Size of the icon.",
+        "value": "{ theme.size.md.value }"
+      }
+    },
+    "font": {
+      "family": {
+        "description": "Font family which defaults to sans-serif.",
+        "value": "{ theme.font.family.default.value }"
+      }
+    },
+    "hover": {
+      "background": {
+        "color": {
+          "description": "Background color during the `hover` state.",
+          "value": "{ theme.color.primary.value }"
+        }
+      },
+      "border": {
+        "color": {
+          "description": "Border color during the `hover` state.",
+          "value": "{ cta.hover.background.color.value }"
+        }
+      }
+    },
+    "focus": {
+      "outline": {
+        "color": {
+          "description": "Outline color during the `focus` state.",
+          "value": "{ theme.color.focus.value }"
+        }
+      }
+    },
+    "active": {
+      "background": {
+        "color": {
+          "description": "Background color during the `active` state.",
+          "value": "{ theme.color.primary.value }"
+        }
+      },
+      "border": {
+        "color": {
+          "description": "Border color during the `active` state.",
+          "value": "{ cta.active.background.color.value }"
+        }
+      }
+    },
+    "disabled": {
+      "background": {
+        "color": {
+          "description": "Background color for the `disabled` state.",
+          "value": "{ theme.color.disabled.value }"
+        }
+      },
+      "border": {
+        "color": {
+          "description": "Border color for the `disabled` state.",
+          "value": "{ cta.disabled.background.color.value }"
+        }
+      }
+    }
+  }
+}

package/components/cta/story.js

@@ -0,0 +1,99 @@
+import { Cta } from '@muonic/muon/components/cta';
+import setup from '@muonic/muon/storybook/stories';
+import { staticHTML } from '@muonic/muon';
+
+const details = setup('cta', Cta);
+const tag = details.getTagEl();
+
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'submitTemplate', 'resetTemplate', 'loading-message']
+    }
+  }
+};
+
+const StandardTemplate = (args) => staticHTML`${details.template(args, (args) => args.text)}`;
+const ButtonTemplate = (args) => {
+  const dArgs = details.dynamicArgs(args);
+
+  return staticHTML`<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
+};
+
+const FormTemplate = (args) => staticHTML`<form>${StandardTemplate(args)}</form>`;
+const WithinLinkTemplate = (args) => staticHTML`<a href="${args.link}">${StandardTemplate(args)}</a>`;
+const WithinButtonTemplate = (args) => staticHTML`<button>${StandardTemplate(args)}</button>`;
+const WithinDisabledButtonTemplate = (args) => staticHTML`<button disabled>${StandardTemplate(args)}</button>`;
+
+export const Standard = StandardTemplate.bind({});
+Standard.args = { text: 'Highpoint' };
+
+export const Disabled = StandardTemplate.bind({});
+Disabled.args = { text: 'Highpoint', disabled: true };
+
+export const Hidden = StandardTemplate.bind({});
+Hidden.args = { text: 'Highpoint', hidden: true };
+
+export const Loading = StandardTemplate.bind({});
+Loading.args = { text: 'Highpoint', loading: true };
+
+export const StandardLink = StandardTemplate.bind({});
+StandardLink.storyName = 'Standard [link]';
+StandardLink.args = { text: 'Highpoint', href: '#!' };
+
+export const DisabledLink = StandardTemplate.bind({});
+DisabledLink.storyName = 'Disabled [link]';
+DisabledLink.args = { text: 'Highpoint', disabled: true, href: '#!' };
+
+export const LoadingLink = StandardTemplate.bind({});
+LoadingLink.storyName = 'Loading [link]';
+LoadingLink.args = { text: 'Highpoint', loading: true, href: '#!' };
+
+export const StandardButton = ButtonTemplate.bind({});
+StandardButton.storyName = 'Standard [button]';
+StandardButton.args = { text: 'Highpoint' };
+
+export const DisabledButton = ButtonTemplate.bind({});
+DisabledButton.storyName = 'Disabled [button]';
+DisabledButton.args = { text: 'Highpoint', disabled: true };
+
+export const LoadingButton = ButtonTemplate.bind({});
+LoadingButton.storyName = 'Loading [button]';
+LoadingButton.args = { text: 'Highpoint', loading: true };
+
+export const StandardForm = FormTemplate.bind({});
+StandardForm.storyName = 'Standard [within form]';
+StandardForm.args = { text: 'Highpoint' };
+
+export const DisabledForm = FormTemplate.bind({});
+DisabledForm.storyName = 'Disabled [within form]';
+DisabledForm.args = { text: 'Highpoint', disabled: true };
+
+export const LoadingForm = FormTemplate.bind({});
+LoadingForm.storyName = 'Loading [within form]';
+LoadingForm.args = { text: 'Highpoint', loading: true };
+
+export const StandardWithinLink = WithinLinkTemplate.bind({});
+StandardWithinLink.storyName = 'Standard [within link]';
+StandardWithinLink.args = { text: 'Highpoint', link: '#!' };
+
+export const DisabledWithinLink = WithinLinkTemplate.bind({});
+DisabledWithinLink.storyName = 'Disabled [within link]';
+DisabledWithinLink.args = { text: 'Highpoint', disabled: true, link: '#!' };
+
+export const LoadingWithinLink = WithinLinkTemplate.bind({});
+LoadingWithinLink.storyName = 'Loading [within link]';
+LoadingWithinLink.args = { text: 'Highpoint', loading: true, link: '#!' };
+
+export const StandardWithinButton = WithinButtonTemplate.bind({});
+StandardWithinButton.storyName = 'Standard [within button]';
+StandardWithinButton.args = { text: 'Highpoint', link: '#!' };
+
+export const DisabledWithinButton = WithinDisabledButtonTemplate.bind({});
+DisabledWithinButton.storyName = 'Disabled [within button]';
+DisabledWithinButton.args = { text: 'Highpoint', disabled: true, link: '#!' };
+
+export const LoadingWithinButton = WithinButtonTemplate.bind({});
+LoadingWithinButton.storyName = 'Loading [within button]';
+LoadingWithinButton.args = { text: 'Highpoint', loading: true, link: '#!' };

package/components/detail/index.js

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

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

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

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

@@ -0,0 +1,102 @@
+{
+  "detail": {
+    "toggle": {
+      "open": {
+        "description": "Icon to indicate the open action.",
+        "value": "chevron-circle-down"
+      },
+      "close": {
+        "description": "Icon to indicate the close action.",
+        "value": "chevron-circle-up"
+      },
+      "position": {
+        "description": "Position of the toggle icon. Valid values: `start`, `end`.",
+        "value": "end"
+      },
+      "icon": {
+        "size": {
+          "description": "Size of the toggle icon.",
+          "value": "{ theme.size.lg.value }"
+        }
+      }
+    },
+    "heading": {
+      "color": {
+        "description": "Text color for the heading.",
+        "value": "{ theme.color.neutral.dark.200.value }"
+      },
+      "background": {
+        "color": {
+          "description": "Background color for the heading. Defaults to the base background color.",
+          "value": "{ theme.color.base.background.value }"
+        }
+      },
+      "gap": {
+        "description": "Gap between the icon and the heading.",
+        "value": "{ theme.spacer.md.value }"
+      },
+      "padding": {
+        "block": {
+          "description": "Padding space above and below the heading. Equal values in the block axis.",
+          "value": "{ theme.spacer.sm.value }"
+        },
+        "inline": {
+          "description": "Padding space left and right of the heading. Equal values in the inline axis.",
+          "value": "{ theme.spacer.md.value }"
+        }
+      },
+      "hover": {
+        "color": {
+          "description": "Text color for the heading in `hover` state.",
+          "value": "{ theme.color.darkest.value }"
+        },
+        "background": {
+          "color": {
+            "description": "Background color for the heading in `hover` state. Defaults to the heading background color.",
+            "value": "{ detail.heading.background.color.value }"
+          }
+        }
+      },
+      "focus": {
+        "color": {
+          "description": "Text color for the heading in `focus` state.",
+          "value": "{ detail.heading.hover.color.value }"
+        },
+        "background": {
+          "color": {
+            "description": "Background color for the heading in `focus` state. Defaults to the heading background color.",
+            "value": "{ detail.heading.background.color.value }"
+          }
+        },
+        "outline": {
+          "color": {
+            "description": "Color of the keyboard focus outline. Defaults to the focus color.",
+            "value": "{ theme.color.focus.value }"
+          }
+        }
+      }
+    },
+    "content": {
+      "color": {
+        "description": "Text color for the content.",
+        "value": "{ detail.heading.color.value }"
+      },
+      "padding": {
+        "block": {
+          "description": "Padding space above and below the content. Equal values in the block axis.",
+          "value": "{ theme.spacer.sm.value }"
+        },
+        "inline": {
+          "description": "Padding space left and right of the content. Equal values in the inline axis.",
+          "value": "{ theme.spacer.md.value }"
+        }
+      },
+      "icon": {
+        "spacer": {
+          "description": "Space at the start of the content if an icon exists at the start of the heading.",
+          "value": "calc({ detail.heading.padding.inline.value } + { detail.toggle.icon.size.value } + { detail.heading.gap.value })"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import { MuonElement, css, unsafeCSS } from '@muonic/muon';
+import { DetailMixin } from '@muon/mixins/detail-mixin';
+import styles from './detail-styles.css';
+import {
+  DETAIL_TOGGLE_OPEN,
+  DETAIL_TOGGLE_CLOSE,
+  DETAIL_TOGGLE_POSITION
+} from '@muon/tokens';
+
+/**
+ * A component to show and hide content related to a heading.
+ *
+ * @element detail
+ */
+export class Detail extends DetailMixin(MuonElement) {
+
+  constructor() {
+    super();
+    this._toggleOpen = DETAIL_TOGGLE_OPEN;
+    this._toggleClose = DETAIL_TOGGLE_CLOSE;
+    this._togglePosition = DETAIL_TOGGLE_POSITION;
+  }
+
+  static get styles() {
+    return css`${unsafeCSS(styles)}`;
+  }
+}