@momentum-ui/web-components 2.16.5 → 2.16.8

package/src/components/label/Label.stories.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "@/components/input/Input";
+import "@/components/label/Label";
+import { action } from "@storybook/addon-actions";
+import { Args, StoryObj } from "@storybook/web-components";
+import { html } from "lit-html";
+
+export default {
+  title: "Components/Label",
+  component: "md-label",
+  argTypes: {
+    radioLabel: { table: { disable: true } },
+    checkboxLabel: { table: { disable: true } },
+    toggleSwitchLabel: { table: { disable: true } },
+    active: { table: { disable: true } },
+    indeterminate: { table: { disable: true } },
+    labelClassMap: { table: { disable: true } },
+    withInput: { control: { type: "boolean" } }
+  },
+  parameters: {
+    a11y: {
+      element: "md-label"
+    }
+  }
+};
+
+export const Label: StoryObj = {
+  args: {
+    label: "Label",
+    withInput: false,
+    secondaryLabel: false
+  },
+  render: (args: Args) => {
+    if (args.withInput) {
+      return html`
+        <md-input
+          @label-click=${action("click")}
+          .label=${args.label}
+          placeholder="placeholder text"
+          .secondaryLabel=${args.secondaryLabel}
+        >
+        </md-input>
+      `;
+    } else {
+      return html` <md-label htmlFor="#">${args.label}</md-label> `;
+    }
+  }
+};

package/src/components/label/Label.test.ts

@@ -0,0 +1,26 @@
+import { fixture, fixtureCleanup, oneEvent } from "@open-wc/testing-helpers";
+import "./Label";
+import { Label } from "./Label";
+
+describe("Label", () => {
+  afterEach(fixtureCleanup);
+  test("should render one Label", async () => {
+    const element = await fixture(`<md-label label="Test Label Text"></md-label>`);
+    expect(element).not.toBeNull();
+  });
+  test("should dispatch click", async () => {
+    const element = await fixture<Label.ELEMENT>(`<md-label label="Test Label Text" htmlFor="firstValue"></md-label>`);
+    setTimeout(() => element.handleClick());
+    const { detail } = await oneEvent(element, "label-click");
+    expect(detail).toBeDefined();
+    expect(detail.htmlFor).toBe("firstValue");
+  });
+  test("should render slot if label not initialize in markup", async () => {
+    const element = await fixture(`<md-label></md-label>`);
+    expect(element.shadowRoot!.querySelectorAll("slot").length).toBe(1);
+  });
+  test("should render secondary Label", async () => {
+    const element = await fixture(`<md-label label="Label" secondaryLabel="Secondary Label"></md-label>`);
+    expect(element.getAttribute("secondaryLabel")).not.toBeNull();
+  });
+});

package/src/components/label/Label.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property } from "lit-element";
+import { classMap } from "lit-html/directives/class-map.js";
+import styles from "./scss/module.scss";
+
+export namespace Label {
+  export type LabelEventDetail = { htmlFor: string };
+
+  @customElementWithCheck("md-label")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) label = "";
+    @property({ type: String }) theme = "";
+    @property({ type: Boolean }) radioLabel = false;
+    @property({ type: Boolean }) checkboxLabel = false;
+    @property({ type: Boolean }) toggleSwitchLabel = false;
+    @property({ type: String }) htmlFor = "";
+    @property({ type: Boolean }) active = false;
+    @property({ type: Boolean }) disabled = false;
+    @property({ type: Boolean }) indeterminate = false;
+    @property({ type: Boolean }) secondaryLabel = false;
+
+    static get styles() {
+      return [reset, styles];
+    }
+    setFocus() {
+      this.dispatchEvent(new CustomEvent("setFocus"));
+    }
+
+    get labelClassMap() {
+      return {
+        [`md-label--${this.theme}`]: !!this.theme,
+        "md-radio__label": this.radioLabel,
+        "md-checkbox__label": this.checkboxLabel,
+        "md-secondary-label": this.secondaryLabel,
+        active: this.active,
+        disabled: this.disabled,
+        indeterminate: this.indeterminate
+      };
+    }
+
+    handleClick() {
+      this.setFocus();
+      this.dispatchEvent(
+        new CustomEvent<LabelEventDetail>("label-click", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            htmlFor: this.htmlFor
+          }
+        })
+      );
+    }
+
+    render() {
+      return html`
+        <label
+          @click="${() => this.handleClick()}"
+          class="md-label ${classMap(this.labelClassMap)}"
+          for="${this.htmlFor}"
+        >
+          ${this.label ? html` <span>${this.label}</span> ` : html` <slot></slot> `}
+        </label>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-label": Label.ELEMENT;
+  }
+}

package/src/components/label/scss/label.scss

@@ -0,0 +1,44 @@
+:host(md-label) {
+  .md-label {
+    @include form-label;
+    display: flex;
+    align-items: center;
+
+    &.right {
+      @include form-label(right, false);
+    }
+
+    &.inline {
+      @include form-label(inline, false);
+    }
+
+    small {
+      text-transform: capitalize;
+    }
+
+    span {
+      font-size: inherit;
+    }
+  }
+  .md-secondary-label {
+    @include secondary-label;
+  }
+}
+
+
+:host(.md-input__label.disabled),
+:host(.md-input__secondary-label.disabled) {
+  label {
+    cursor: not-allowed;
+  }
+}
+
+:host(.md-input__label.disabled.newMomentum),
+:host(.md-input__secondary-label.disabled.newMomentum) {
+  label {
+    color: var(--input-default-new-disabled-color) !important;
+  }
+}
+
+
+

package/src/components/label/scss/mixins.scss

@@ -0,0 +1,25 @@
+@mixin form-label($alignment: false, $base-style: true) {
+  @if $base-style {
+    color: var(--label-color, $lm-label-color-light);
+    font-family: $label__font-family;
+    font-size: $label__font-size;
+    line-height: $label__line-height;
+  }
+
+  @if $alignment==right {
+    float: none !important;
+    text-align: right;
+  } @else if $alignment==inline {
+    margin: 0 0 $label__spacing 0;
+    padding: $label__spacing * 0.5 + rem-calc($input__border-width) 0;
+  }
+}
+
+@mixin secondary-label {
+  color: var(--label-secondary, $lm-label-secondary-light);
+  display: flex;
+  flex-grow: 1;
+  font-size: $secondary-label__font-size;
+  line-height: $secondary-label__line-height;
+  padding: $secondary-label__indent;
+}

package/src/components/label/scss/module.scss

@@ -0,0 +1,17 @@
+@import "@/wc_scss/tools/functions/core";
+
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/core";
+@import "@/wc_scss/typography/settings";
+@import "@/wc_scss/settings/input";
+
+@import "./vars/lm-label-settings";
+@import "./vars/md-label-settings";
+
+// Component Specific
+@import "./settings";
+@import "./mixins";
+@import "@/components/checkbox/scss/module.scss";
+@import "@/components/radio/scss/module.scss";
+@import "./label";
+

package/src/components/label/scss/settings.scss

@@ -0,0 +1,8 @@
+$label__font-family: $brand-font-regular !default;
+$label__font-size: var(--body-secondary-font-size, rem-calc(14)) !default;
+$label__line-height: rem-calc(20) !default;
+$label__spacing: rem-calc(16) !default;
+
+$secondary-label__font-size: var(--body-secondary-font-size, rem-calc(14)) !default;
+$secondary-label__line-height: rem-calc(18) !default;
+$secondary-label__indent: rem-calc(4 16 0) !default;

package/src/components/label/tokens/lm-label-tokens.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const label = {
+  prefix: "lm",
+  component: "label",
+  color: {
+    light: colors.black[100].name,
+    dark: colors.gray[30].name
+  },
+  secondary: {
+    light: colors.gray[70].name,
+    dark: colors.gray[40].name
+  }
+};
+
+module.exports = label;

package/src/components/label/tokens/md-label-tokens.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const label = {
+  prefix: "md",
+  component: "label",
+  color: {
+    light: colors.black[100].name,
+    dark: colors.gray[30].name
+  },
+  secondary: {
+    light: colors.gray[70].name,
+    dark: colors.gray[40].name
+  }
+};
+
+module.exports = label;

package/src/components/label/tokens/mdv2-label-tokens.js

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const label = {
+  prefix: "mdv2",
+  component: "label",
+  color: {
+    common: "$mds-color-theme-text-primary-normal"
+  },
+  secondary: {
+    common: "$mds-color-theme-text-secondary-normal"
+  }
+};
+
+module.exports = label;

package/src/components/link/Link.stories.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import "@/components/link/Link";
+import { Args, Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit-html";
+import { linkColor, linkRole, linkTag } from "./Link"; // Keep type import as a relative path
+
+const render = (args: Args) => html`
+  <md-link
+    .href=${args.href}
+    .ariaLabel=${args.ariaLabel}
+    .ariaRole=${args.role as any}
+    .tag=${args.tag as any}
+    .target="${args.target}"
+    .color="${args.color}"
+    ?disabled=${args.disabled}
+    ?inline=${args.inline}
+    >Default Link</md-link
+  >
+`;
+
+export const Link: StoryObj = {
+  args: {
+    href: "http://google.com",
+    tag: "a",
+    disabled: false,
+    inline: false,
+    target: "_self",
+    color: "blue",
+    ariaLabel: "Link Storybook",
+    role: "link"
+  },
+  render: render
+};
+
+const meta: Meta = {
+  title: "Components/Link",
+  component: "md-link",
+  argTypes: {
+    tag: { control: { type: "select" }, options: linkTag },
+    color: { control: { type: "select" }, options: linkColor },
+    role: { control: { type: "select" }, options: linkRole }
+  },
+  parameters: {
+    a11y: {
+      element: "md-link"
+    }
+  }
+};
+
+export default meta;

package/src/components/link/Link.test.ts

@@ -0,0 +1,98 @@
+import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./Link";
+import { Link } from "./Link";
+
+describe("Link component", () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+
+  //tag
+  test("should create correct tag", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(`<md-link tag="span"></md-link>`);
+    expect(component.tag).toMatch("span");
+  });
+
+  //tag div
+  test("should create correct tag", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(`<md-link tag="div"></md-link>`);
+    expect(component.tag).toMatch("div");
+  });
+
+  // href
+  test("should provide link href", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(` <md-link href="#"></md-link> `);
+    expect(component.href).not.toBeNull();
+  });
+
+  // color
+  test("should set link color", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(` <md-link class="md-link--yellow"></md-link> `);
+    expect(component.className).toContain("md-link--yellow");
+  });
+
+  // role
+  test("should set role when passed", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(` <md-link ariaRole="button"></md-link> `);
+    const linkComponent = component.shadowRoot?.querySelector("a");
+    expect(linkComponent?.getAttribute("role")).toContain("button");
+  });
+
+  // role
+  test("should set role as link when not passed", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(` <md-link></md-link> `);
+    const linkComponent = component.shadowRoot?.querySelector("a");
+    expect(linkComponent?.getAttribute("role")).toContain("link");
+  });
+
+  test("should render correct aria label", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(`<md-link ariaLabel="Link Component"></md-link>`);
+    const linkComponent = component.shadowRoot?.querySelector("a");
+    expect(linkComponent?.getAttribute("aria-label")).toMatch("Link Component");
+  });
+
+  test("should not set aria label when not passed", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(`<md-link class="md-link--yellow"></md-link>`);
+    const linkComponent = component.shadowRoot?.querySelector("a");
+    expect(linkComponent?.getAttribute("aria-label")).toBeNull();
+  });
+
+  test("should set link tab-index", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(` <md-link tab-index="1"></md-link> `);
+    expect(component.getAttribute("tab-index")).toEqual("1");
+
+    const linkShadow = component!.shadowRoot!.querySelector(".md-link");
+    expect(linkShadow!.getAttribute("tabindex")).toContain("1");
+  });
+
+  test("should set link tab-index correctly when disabled", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture<Link.ELEMENT>(` <md-link tab-index="1" disabled></md-link> `);
+    expect(component.disabled).toBeTruthy();
+
+    const linkShadow = component!.shadowRoot!.querySelector(".md-link");
+    expect(linkShadow!.getAttribute("aria-disabled")).toBeTruthy;
+  });
+
+  // disabled
+  test("should check if link disabled", async () => {
+    expect.hasAssertions();
+    const component: Link.ELEMENT = await fixture(html` <md-link disabled></md-link> `);
+    expect(component.disabled).toBeTruthy();
+  });
+
+  // inline
+  test("should make link inline", async () => {
+    const component: Link.ELEMENT = await fixture(`<md-link class="md-link--inline"></md-link>`);
+    expect(component.className).toContain("md-link--inline");
+  });
+});

package/src/components/link/Link.ts

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import reset from "@/wc_scss/reset.scss";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, LitElement, property } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { ifDefined } from "lit-html/directives/if-defined";
+import styles from "./scss/module.scss";
+
+export const linkTag = ["a", "div", "span"] as const;
+export const linkColor = ["", "blue", "red", "green", "yellow", "orange"] as const;
+export const linkRole = [
+  "button",
+  "checkbox",
+  "link",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "radio",
+  "switch",
+  "tab"
+] as const;
+
+export namespace Link {
+  export type Tag = (typeof linkTag)[number];
+  export type Color = (typeof linkColor)[number];
+  export type Role = (typeof linkRole)[number];
+
+  @customElementWithCheck("md-link")
+  export class ELEMENT extends LitElement {
+    @property({ type: String, attribute: false }) color: Color = "";
+    @property({ type: String }) ariaLabel = "";
+    @property({ type: String }) ariaRole: Role = "link";
+    @property({ type: Boolean }) disabled = false;
+    @property({ type: Boolean }) inline = false;
+    @property({ type: String }) href = "";
+    @property({ type: String }) tag: Tag = "a";
+    @property({ type: String }) target = "_self";
+    private _tabIndex = 0;
+    @property({ type: Number, attribute: "tab-index", reflect: true })
+    get tabIndex() {
+      return this._tabIndex;
+    }
+    set tabIndex(newValue: number) {
+      const oldValue = this._tabIndex;
+      this._tabIndex = newValue;
+      this.requestUpdate("tabIndex", oldValue);
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      const linkClassNamesInfo = {
+        [`md-link--${this.color}`]: this.color,
+        [`md-link--inline`]: this.inline,
+        disabled: this.disabled
+      };
+
+      const linkElement = () => {
+        switch (this.tag) {
+          case "div":
+            return html`
+              <div
+                class="md-link ${classMap(linkClassNamesInfo)}"
+                tabindex=${this.tabIndex}
+                aria-label=${ifDefined(this.ariaLabel || undefined)}
+                aria-disabled=${ifDefined(this.disabled || undefined)}
+                role=${this.ariaRole}
+                part="link"
+              >
+                <slot></slot>
+              </div>
+            `;
+          case "span":
+            return html`
+              <span
+                class="md-link ${classMap(linkClassNamesInfo)}"
+                tabindex=${this.tabIndex}
+                aria-label=${ifDefined(this.ariaLabel || undefined)}
+                aria-disabled=${ifDefined(this.disabled || undefined)}
+                role=${this.ariaRole}
+                part="link"
+              >
+                <slot></slot>
+              </span>
+            `;
+
+          default:
+            return html`
+              <a
+                class="md-link ${classMap(linkClassNamesInfo)}"
+                .target="${this.target}"
+                href=${ifDefined(!this.disabled ? this.href : undefined)}
+                tabindex=${this.tabIndex}
+                aria-label=${ifDefined(this.ariaLabel || undefined)}
+                aria-disabled=${ifDefined(this.disabled || undefined)}
+                role=${this.ariaRole}
+                part="link"
+              >
+                <slot></slot>
+              </a>
+            `;
+        }
+      };
+      return html` ${linkElement()} `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-link": Link.ELEMENT;
+  }
+}

package/src/components/link/scss/link.scss

@@ -0,0 +1,43 @@
+/** @component link */
+
+@include exports("md-link") {
+  .md-link {
+    border-radius: rem-calc(4);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: $link__font-size;
+    line-height: $link__line-height;
+    width: fit-content;
+
+    // Declarations before nested rules
+    @include link-color();
+    &:focus {
+      outline: none;
+    }
+
+    &.disabled {
+      pointer-events: none;
+    }
+
+    &--inline {
+      font-size: $link-inline__font-size;
+      line-height: $link-inline__line-height;
+      text-decoration: underline;
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  @include exports("md-link") {
+    .md-link {
+      &:focus {
+        box-shadow: none;
+        outline: 2px solid Highlight;
+      }
+
+      &.disabled {
+        color: GrayText !important;
+      }
+    }
+  }
+}