@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/button/Button.stories.ts

@@ -1,115 +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/button/Button";
-import "@/components/icon/Icon";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, withKnobs, text } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import { action } from "@storybook/addon-actions";
-import { buttonColor, buttonSize, buttonTag, buttonType, buttonVariant, buttonRoles } from "./Button"; // Keep type import as a relative path
-import mdx from "./Button.mdx";
-import { ifDefined } from "lit-html/directives/if-defined";
-
-export default {
-  title: "Components/Button",
-  component: "md-button",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    renderWidth: { table: { disable: true } },
-    renderMaxWidth: { table: { disable: true } },
-    buttonClassMap: { table: { disable: true } },
-    iconTemplate: { table: { disable: true } },
-    textTemplate: { table: { disable: true } },
-    slottedText: { table: { disable: true } },
-    getStyles: { table: { disable: true } },
-    keyboardKey: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-button"
-    },
-    docs: {
-      page: mdx,
-      description: {
-        component: "Button Documentation"
-      }
-    }
-  }
-};
-
-export const Button = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const variant = select("Variant", buttonVariant, "secondary");
-  const color = select("Color", buttonColor, "");
-  const disabled = boolean("Disabled Mode", false);
-  const circle = boolean("Circle", false);
-  const loading = boolean("Loading State", false);
-  const size = select("Size", buttonSize, 32);
-  const tag = select("Tag", buttonTag, "button");
-  const type = select("type", buttonType, "button");
-  const ariaLabel = text("AriaLabel", "Button Storybook");
-  const ariaLabelledBy = text("AriaLabelledBy", "");
-  const ariaExpanded = boolean("AriaExpanded", false);
-  const ariaHaspopup = boolean("AriaHaspopup", false);
-  const ariaPressed = boolean("AriaPressed", false);
-  const containerLarge = boolean("Container Large", false);
-  const href = text("href", "");
-  const label = text("label", "");
-  const value = text("value", "");
-  const outline = boolean("outline", false);
-  const hasRemoveStyle = boolean("hasRemoveStyle", false);
-  const role = select("role", buttonRoles, "button");
-
-  return html`
-    <md-theme class="theme-toggle" id="button" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-button
-        @button-click=${action("ditail")}
-        variant=${variant}
-        .color=${color}
-        .disabled=${disabled}
-        .circle=${circle}
-        .loading=${loading}
-        .size=${size}
-        .tag=${tag}
-        .type=${type}
-        .ariaLabel=${ariaLabel}
-        .ariaLabelledBy=${ariaLabelledBy}
-        .ariaExpanded=${ariaExpanded}
-        .ariaHaspopup=${ariaHaspopup}
-        .ariaPressed=${ariaPressed}
-        .containerLarge=${containerLarge}
-        .href=${href}
-        .label=${label}
-        .value=${value}
-        .outline=${outline}
-        .hasRemoveStyle=${hasRemoveStyle}
-        role=${role}
-      >
-        ${circle
-          ? html`
-              <md-icon slot="icon" name="icon-search_12"></md-icon>
-            `
-          : html`
-              <span slot="text">Button</span>
-            `}
-      </md-button>
-    </md-theme>
-  `;
-};
-
-Button.parameters = {
-  backgrounds: {
-    values: [
-      { name: "Light", value: "#fff" },
-      { name: "Dark", value: "#000" }
-    ]
-  }
-};

package/src/components/button/Button.test.ts

@@ -1,207 +0,0 @@
-import "./Button";
-import { Button } from "./Button";
-import { Key } from "@/constants";
-import { fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
-
-describe("Button Component", () => {
-  afterEach(fixtureCleanup);
-
-  test("should render one Button", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button></md-button>
-      `
-    );
-    expect(element).not.toBeNull();
-  });
-
-  test("should render input if passed tag input", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button tag="input"><span slot="text">Test</span></md-button>
-      `
-    );
-    const input = element.shadowRoot!.querySelectorAll("input");
-    expect(input).toBeDefined;
-  });
-
-  test("should render link if passed tag a", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button tag="a"><span slot="text">Test</span></md-button>
-      `
-    );
-    const link = element.shadowRoot!.querySelectorAll("a");
-    expect(link).toBeDefined;
-  });
-
-  test("should render Loading component is pass loading props", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button loading></md-button>
-      `
-    );
-    expect(element.loading).toBeTruthy;
-    const spinner = element.shadowRoot!.querySelector(".md-button md-spinner");
-    expect(spinner).toBeDefined;
-    expect(spinner?.getAttribute("size")).toEqual("16");
-  });
-
-  test("should not render Loading component is loading props absent", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button></md-button>
-      `
-    );
-    expect(element.shadowRoot!.querySelectorAll("md-loading").length).toEqual(0);
-  });
-
-  test("should remove all styles from component if hasRemoveStyle props exist", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button hasRemoveStyle color="blue" size="52"></md-button>
-      `
-    );
-    expect(element.shadowRoot!.querySelectorAll(".md-button--blue").length).toEqual(0);
-    expect(element.shadowRoot!.querySelectorAll(".md-button--none").length).toEqual(1);
-    expect(element.shadowRoot!.querySelectorAll(".md-button--52").length).toEqual(0);
-  });
-
-  test("should apply correct class for color name", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button color="color-none"></md-button>
-      `
-    );
-    expect(element.shadowRoot!.querySelectorAll(".md-button--color-none").length).toEqual(1);
-  });
-
-  test("should render wrapped button if label passed", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button label="buttonComponent" ariaLabel="buttonComponent"></md-button>
-      `
-    );
-    expect(element.shadowRoot!.querySelectorAll(".md-button__container--small").length).toEqual(1);
-    expect(element.shadowRoot!.querySelectorAll(".md-button__label").length).toEqual(1);
-  });
-
-  test("should render wrapped button in large container if label and containerLarge passed", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button label="Button Component" containerLarge></md-button>
-      `
-    );
-    expect(element.shadowRoot!.querySelectorAll(".md-button__container").length).toEqual(1);
-  });
-
-  test("should show active class when passed active prop", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button label="Button Component" active></md-button>
-      `
-    );
-    const btn = element.shadowRoot!.querySelector(".md-button");
-    expect(btn?.getAttribute("class")).toContain("md-button active md-button--32");
-  });
-
-  test("should show type if passed one", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button type="submit"></md-button>
-      `
-    );
-    expect(element.getAttribute("type")).toEqual("submit");
-  });
-
-  test("should have tab-index attribute if defined", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button tab-index="1"></md-button>
-      `
-    );
-    expect(element.getAttribute("tab-index")).toEqual("1");
-
-    const button = element.shadowRoot!.querySelector("button");
-    expect(button!.getAttribute("tabindex")).toContain("1");
-    expect(element.disabled).toBeFalsy();
-  });
-
-  test("should have tab-index of -1 if disabled", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button tab-index="1" disabled></md-button>
-      `
-    );
-    const button = element.shadowRoot!.querySelector("button");
-    expect(button!.getAttribute("tabindex")).toContain("-1");
-    expect(element.disabled).toBeTruthy();
-  });
-
-  test("should handle disabled state", async () => {
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button disabled></md-button>
-      `
-    );
-    expect(element.disabled).toEqual(true);
-  });
-
-  test("should set width successfulyl", async () => {
-    const customWidth = "260px";
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button width=${customWidth}></md-button>
-      `
-    );
-    expect(element.width).toEqual(customWidth);
-
-    const styles = element["getStyles"]();
-    const hasStyle = styles?.values.includes(`width: ${customWidth};`);
-    expect(hasStyle).toBeTruthy();
-  });
-
-  test("should set maxWidth successfulyl", async () => {
-    const customMaxWidth = "100px";
-    const element: Button.ELEMENT = await fixture(
-      html`
-        <md-button maxWidth=${customMaxWidth}></md-button>
-      `
-    );
-    expect(element.maxWidth).toEqual(customMaxWidth);
-
-    const styles = element["getStyles"]();
-    const hasStyle = styles?.values.includes(`max-width: ${customMaxWidth};`);
-    expect(hasStyle).toBeTruthy();
-  });
-
-  test("should handle click event", async () => {
-    jest.spyOn(Button.ELEMENT.prototype, "blur");
-    const element = await fixture<Button.ELEMENT>(`<md-button label="Button Component"></md-button>`);
-    const evt = new MouseEvent("click");
-    setTimeout(() => element.handleClick(evt));
-    const { detail } = await oneEvent(element, "button-click");
-    expect(detail).toBeDefined();
-    expect(detail.srcEvent.type).toBe("click");
-  });
-
-  test("should handle keydown event", async () => {
-    const element = await fixture<Button.ELEMENT>(
-      html`
-        <md-button label="Button Component"></md-button>
-      `
-    );
-    const spyKeyDown = jest.spyOn(element, "handleKeyDown");
-    const keyEvent = new KeyboardEvent("keydown", { code: Key.Enter });
-    const keyEvent2 = new KeyboardEvent("keydown", { code: Key.Space });
-    element.handleKeyDown(keyEvent);
-    element.handleKeyDown(keyEvent2);
-    expect(spyKeyDown).toHaveBeenCalledTimes(2);
-    spyKeyDown.mockRestore();
-  });
-
-  test("should render nothing if correct tag is not provided", async () => {
-    const buttonElement = await fixture(`<md-button label="Button Component" tag="p"></md-button>`);
-    expect(buttonElement.shadowRoot!.querySelector("button")).toBeNull();
-  });
-});

package/src/components/button/Button.ts

@@ -1,360 +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 activityButtonStyles from "@/components/activity-button/scss/module.scss";
-import "@/components/spinner/Spinner";
-import { Key } from "@/constants";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property, query } from "lit-element";
-import { nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import styles from "./scss/module.scss";
-
-export const buttonSize = [
-  "20",
-  "28",
-  "32",
-  "36",
-  "40",
-  "44",
-  "52",
-  "56",
-  "72",
-  "68",
-  "84",
-  "size-none",
-  20,
-  28,
-  32,
-  36,
-  40,
-  44,
-  52,
-  56,
-  68,
-  72,
-  68,
-  84
-] as const;
-export const buttonTag = ["button", "input", "a"] as const;
-export const buttonType = ["button", "reset", "submit"] as const;
-export const buttonRoles = [
-  "button",
-  "checkbox",
-  "link",
-  "menuitem",
-  "menuitemcheckbox",
-  "menuitemradio",
-  "option",
-  "radio",
-  "switch",
-  "tab"
-] as const;
-export const buttonVariant = ["primary", "secondary", "red", "green", "white", "darkGrey"] as const;
-export const buttonColor = [
-  "blue",
-  "red",
-  "green",
-  "orange",
-  "yellow",
-  "mint",
-  "purple",
-  "pink",
-  "cyan",
-  "white",
-  "dark-gray",
-  "duck-egg",
-  "violet",
-  "color-none",
-  ""
-] as const;
-
-export namespace Button {
-  export type Tag = typeof buttonTag[number];
-  export type Type = typeof buttonType[number];
-  export type Role = typeof buttonRoles[number];
-  export type variant = typeof buttonVariant[number];
-  export type color = typeof buttonColor[number];
-  export type Attributes = {
-    id?: string;
-    disabled: boolean;
-    alt?: string;
-    href?: string;
-    type: Type;
-    ariaLabel?: string;
-    ariaLabelledBy?: string;
-    ariaExpanded?: boolean;
-    ariaHaspopup?: boolean;
-    ariaPressed?: boolean;
-    ariaCurrent?: boolean;
-    tag: Tag;
-    loading: boolean;
-    role?: string;
-    value: string;
-  };
-  export type Size = typeof buttonSize[number];
-
-  @customElementWithCheck("md-button")
-  export class ELEMENT extends LitElement {
-    _active = false;
-    @property({ type: Boolean, reflect: true })
-    get active() {
-      return this._active;
-    }
-    set active(value) {
-      const oldValue = this._active;
-      this._active = value;
-      this.requestUpdate("active", oldValue);
-    }
-
-    private _tabIndex = 0;
-    @property({ type: Number, attribute: "tab-index", reflect: true })
-    get tabIndex() {
-      if (this.disabled) {
-        return -1;
-      }
-      return this._tabIndex;
-    }
-    set tabIndex(newValue: number) {
-      const oldValue = this._tabIndex;
-      this._tabIndex = newValue;
-      this.requestUpdate("tabIndex", oldValue);
-    }
-
-    @property({ type: String }) ariaLabel = "";
-    @property({ type: String }) ariaLabelledBy = "";
-    @property({ type: Boolean }) ariaExpanded = false;
-    @property({ type: Boolean }) ariaHaspopup = false;
-    @property({ type: Boolean }) ariaPressed = false;
-    @property({ type: Boolean }) circle = false;
-    @property({ type: String }) color: Button.color = "";
-    @property({ type: Boolean }) containerLarge = false;
-    @property({ type: Boolean }) disabled = false;
-    @property({ type: String }) href = "";
-    @property({ type: String }) id = "";
-    @property({ type: String }) value = "";
-    @property({ type: String }) keyboardKey = "";
-    @property({ type: String }) label = "";
-    @property({ type: Boolean }) loading = false;
-    @property({ type: Boolean }) outline = false;
-    @property({ type: Boolean }) hasRemoveStyle = false;
-    @property({ type: String }) size: Button.Size = "32";
-    @property({ type: String }) tag: Button.Tag = "button";
-    @property({ type: String }) type: Button.Type = "button";
-    @property({ type: String }) role: Button.Role = "button";
-    @property({ type: String }) variant: Button.variant = "secondary";
-    @property({ type: String }) width = "";
-    @property({ type: String }) maxWidth = "";
-    @property({ type: String }) activityType = "";
-    @property({ type: Boolean }) iconActive = false;
-    @property({ attribute: false }) clickFunction: Function | null = null;
-
-    @query(".md-button") button!: HTMLButtonElement;
-
-    renderWidth = () => {
-      return this.width ? `width: ${this.width};` : nothing;
-    };
-
-    renderMaxWidth = () => {
-      return this.maxWidth ? `max-width: ${this.maxWidth};` : nothing;
-    };
-
-    getStyles = () => {
-      if (this.width || this.maxWidth) {
-        return html`
-          <style>
-            :host .md-button--${this.size} {
-              ${this.renderWidth()};
-              ${this.renderMaxWidth()};
-            }
-          </style>
-        `;
-      }
-    };
-
-    handleKeyDown(event: KeyboardEvent) {
-      if (this.disabled) {
-        return;
-      }
-      const { code } = event;
-      if (code === Key.Enter || code === Key.Space) {
-        this.dispatchEvent(
-          new CustomEvent("button-keydown", {
-            composed: true,
-            bubbles: true,
-            detail: {
-              srcEvent: event
-            }
-          })
-        );
-      }
-    }
-
-    handleClick(event: MouseEvent) {
-      if (this.disabled) {
-        return;
-      }
-      this.clickFunction && this.clickFunction();
-      this.dispatchEvent(
-        new CustomEvent("button-click", {
-          composed: true,
-          bubbles: true,
-          detail: {
-            srcEvent: event
-          }
-        })
-      );
-    }
-
-    static get styles() {
-      return [reset, styles, activityButtonStyles];
-    }
-
-    get buttonClassMap() {
-      return {
-        "md-button--circle": this.circle,
-        "md-button--none": this.hasRemoveStyle,
-        "md-button--outline": this.outline,
-        active: this.active && !this.disabled,
-        [`md-button--${this.size}`]: !this.hasRemoveStyle,
-        [`md-button--${this.color}`]: !this.hasRemoveStyle && !!this.color,
-        [`md-activity__${this.activityType}`]: !!this.activityType,
-        "md-activity": !!this.activityType,
-        "md-button--icon": this.iconActive,
-        "md-button--onlyicon": this.hasIcon && !this.slottedText
-      };
-    }
-
-    get slottedText() {
-      return this.querySelector("[slot=text]")?.textContent;
-    }
-
-    get hasIcon() {
-      return this.querySelector("[slot=icon]") !== null || this.loading;
-    }
-
-    iconTemplate = () => {
-      if (this.loading) {
-        return html`
-          <md-spinner size="16"></md-spinner>
-        `;
-      } else {
-        return html`
-          <slot name="icon"></slot>
-        `;
-      }
-    };
-
-    textTemplate = () => {
-      if (this.circle && this.hasIcon) {
-        return nothing;
-      } else {
-        return html`
-          <slot name="text"></slot>
-        `;
-      }
-    };
-
-    childrenTemplate() {
-      return html`
-        <span part="button-children" class="md-button__children">
-          ${this.iconTemplate()} ${this.textTemplate()}
-          <slot></slot>
-        </span>
-      `;
-    }
-
-    buttonTemplate(tag: Button.Tag) {
-      if (tag === "button") {
-        return html`
-          <button
-            part="button"
-            id=${this.id}
-            class="md-button ${classMap(this.buttonClassMap)}"
-            @click=${(e: MouseEvent) => this.handleClick(e)}
-            @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
-            tabindex=${this.tabIndex}
-            aria-label=${ifDefined(this.ariaLabel || undefined)}
-            aria-labelledby=${ifDefined(this.ariaLabelledBy || undefined)}
-            aria-expanded=${this.ariaExpanded}
-            aria-haspopup=${this.ariaHaspopup}
-            type=${this.type}
-            role=${this.role}
-            ?disabled=${this.disabled || this.loading}
-          >
-            ${this.childrenTemplate()}
-          </button>
-        `;
-      } else if (tag === "input") {
-        return html`
-          <input
-            part="button"
-            id=${this.id}
-            class="md-button ${classMap(this.buttonClassMap)}"
-            @click=${(e: MouseEvent) => this.handleClick(e)}
-            @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
-            role=${this.role}
-            tabindex=${this.tabIndex}
-            aria-pressed=${this.ariaPressed}
-            aria-label=${ifDefined(this.ariaLabel || undefined)}
-            aria-labelledby=${ifDefined(this.ariaLabelledBy || undefined)}
-            type=${this.type}
-            alt=${this.label}
-            value=${this.value}
-            ?disabled=${this.disabled || this.loading}
-          />
-        `;
-      } else if (tag === "a") {
-        return html`
-          <a
-            part="button"
-            id=${this.id}
-            class="md-button ${classMap(this.buttonClassMap)}"
-            @click=${(e: MouseEvent) => this.handleClick(e)}
-            @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
-            role=${this.role}
-            tabindex=${this.tabIndex}
-            aria-pressed=${this.ariaPressed}
-            aria-label=${ifDefined(this.ariaLabel || undefined)}
-            aria-labelledby=${ifDefined(this.ariaLabelledBy || undefined)}
-            href=${this.href}
-          >
-            ${this.childrenTemplate()}
-          </a>
-        `;
-      }
-      return nothing;
-    }
-
-    render() {
-      return html`
-        ${this.getStyles()}
-        ${this.label
-          ? html`
-              <div part="button-container" class=${`md-button__container${this.containerLarge ? "" : "--small"}`}>
-                ${this.buttonTemplate(this.tag)}
-                <div part="button-label" class="md-button__label">
-                  ${this.label}
-                </div>
-              </div>
-            `
-          : html`
-              ${this.buttonTemplate(this.tag)}
-            `}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-button": Button.ELEMENT;
-  }
-}