@momentum-ui/web-components 2.16.8 → 2.16.9

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

@@ -1,55 +0,0 @@
-/**
- * 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

@@ -1,26 +0,0 @@
-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

@@ -1,81 +0,0 @@
-/**
- * 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

@@ -1,44 +0,0 @@
-: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

@@ -1,25 +0,0 @@
-@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

@@ -1,17 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-$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

@@ -1,18 +0,0 @@
-/* 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

@@ -1,18 +0,0 @@
-/* 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

@@ -1,15 +0,0 @@
-/* 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

@@ -1,59 +0,0 @@
-/**
- * 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

@@ -1,98 +0,0 @@
-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

@@ -1,123 +0,0 @@
-/**
- * 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

@@ -1,43 +0,0 @@
-/** @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;
-      }
-    }
-  }
-}