@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/pagination/Pagination.ts

@@ -0,0 +1,211 @@
+import reset from "@/wc_scss/reset.scss";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, LitElement, property } from "lit-element";
+import { nothing } from "lit-html";
+import styles from "./scss/module.scss";
+
+export namespace Pagination {
+  @customElementWithCheck("md-pagination")
+  export class ELEMENT extends LitElement {
+    private _currentPage = 1;
+
+    @property({ type: Boolean, attribute: "dots" }) hasDots = false;
+    @property({ type: Boolean, reflect: true, attribute: "only-dots" }) onlyDots = false;
+    @property({ type: Boolean, reflect: true, attribute: "no-navigation" }) noNavigation = false;
+    @property({ type: Number, reflect: true, attribute: "total-page" }) totalPage = 0;
+    @property({ type: Number, reflect: true, attribute: "visible-page" }) visiblePage = 3;
+    @property({ type: Number, reflect: true, attribute: "current-page" })
+    get currentPage() {
+      return this._currentPage;
+    }
+
+    set currentPage(newPage: number) {
+      const oldPage = this._currentPage;
+      this._currentPage = newPage;
+      this.notifyPageChange(oldPage, newPage);
+      this.requestUpdate("currentPage", oldPage);
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    private computePrevious(page: number) {
+      if (page !== 1 && page !== this.currentPage) {
+        this.currentPage -= 1;
+      }
+    }
+
+    private computeNext(page: number) {
+      if (page <= this.totalPage && page !== this.currentPage) {
+        this.currentPage += 1;
+      }
+    }
+
+    private computeFirst() {
+      if (this.currentPage >= 1) {
+        this.currentPage = 1;
+      }
+    }
+
+    private computeLast() {
+      if (this.currentPage >= 1) {
+        this.currentPage = this.totalPage;
+      }
+    }
+
+    private computeCurrent(page: number) {
+      this.currentPage = page;
+    }
+
+    private notifyPageChange(oldPage: number, newPage: number) {
+      this.dispatchEvent(
+        new CustomEvent<{ oldPage: number; newPage: number }>("page-change", {
+          composed: true,
+          bubbles: true,
+          detail: { oldPage, newPage }
+        })
+      );
+    }
+
+    get hasPreviousPage() {
+      return this.currentPage <= 1;
+    }
+
+    get hasNextPage() {
+      return this.currentPage >= this.totalPage;
+    }
+
+    private computePageList(shouldCompute: boolean) {
+      if (this.totalPage > this.visiblePage && shouldCompute) {
+        const [previous, current, next] = [this.currentPage - 1, this.currentPage, this.currentPage + 1];
+        let newPageList: (string | number)[] = [];
+
+        if (current <= this.visiblePage - 1) {
+          newPageList = [...Array(this.visiblePage)].map((_, index) => 1 + index);
+          newPageList.push("...");
+          newPageList.push(this.totalPage);
+          return newPageList;
+        }
+
+        if (this.totalPage - current <= this.visiblePage - 2) {
+          newPageList = [];
+          newPageList.push(1);
+          newPageList.push("...");
+          const newPageListRemain = [...Array(this.visiblePage)].map(
+            (_, index) => this.totalPage - this.visiblePage + 1 + index
+          );
+          return newPageList.concat(newPageListRemain);
+        }
+
+        return [1, "...", previous, current, next, "...", this.totalPage];
+      }
+      return [...Array(this.totalPage)].map((_, index) => 1 + index);
+    }
+
+    private pagesTemplate(shouldCompute: boolean) {
+      return this.computePageList(shouldCompute).map(page =>
+        page === "..."
+          ? html`
+              <li class="page-ellipsis">${page}</li>
+            `
+          : html`
+              <li @click=${() => this.computeCurrent(page as number)} aria-current=${page === this.currentPage}>
+                ${page}
+              </li>
+            `
+      );
+    }
+
+    private dotsTemplate(shouldCompute: boolean) {
+      return this.computePageList(shouldCompute).map(page =>
+        page === "..."
+          ? nothing
+          : html`
+              <li @click=${() => this.computeCurrent(page as number)} aria-current=${page === this.currentPage}></li>
+            `
+      );
+    }
+
+    render() {
+      return html`
+        <nav class="md-pagination" role="navigation" part="pagination">
+          ${this.noNavigation
+            ? nothing
+            : html`
+                <button
+                  class="md-pagination-nav"
+                  aria-label="First Page"
+                  ?disabled=${this.hasPreviousPage}
+                  aria-disabled=${this.hasPreviousPage}
+                  @click=${this.computeFirst}
+                  part="pagination-first"
+                >
+                  <md-icon name="icon-overflow-left_16"></md-icon>
+                </button>
+                <button
+                  class="md-pagination-nav"
+                  aria-label="Next Page"
+                  ?disabled=${this.hasPreviousPage}
+                  aria-disabled=${this.hasPreviousPage}
+                  @click=${() => this.computePrevious(this.currentPage - 1)}
+                  part="pagination-prev"
+                >
+                  <md-icon name="icon-arrow-left_16"></md-icon>
+                </button>
+              `}
+          <div class="md-pagination-container">
+            ${this.onlyDots
+              ? html`
+                  <ul class="md-pagination-dots" part="pagination-only-dots">
+                    ${this.dotsTemplate(false)}
+                  </ul>
+                `
+              : html`
+                  <ul class="md-pagination-list" part=pagination-list">
+                    ${this.pagesTemplate(true)}
+                  </ul>
+                `}
+            ${this.hasDots && !this.onlyDots
+              ? html`
+                  <ul class="md-pagination-dots" part="pagination-dots">
+                    ${this.dotsTemplate(true)}
+                  </ul>
+                `
+              : nothing}
+          </div>
+          ${this.noNavigation
+            ? nothing
+            : html`
+                <button
+                  class="md-pagination-nav"
+                  aria-label="Previous Page"
+                  ?disabled=${this.hasNextPage}
+                  aria-disabled=${this.hasNextPage}
+                  @click=${() => this.computeNext(this.currentPage + 1)}
+                  part="pagination-next"
+                >
+                  <md-icon name="icon-arrow-right_16"></md-icon>
+                </button>
+                <button
+                  class="md-pagination-nav"
+                  aria-label="Last Page"
+                  ?disabled=${this.hasNextPage}
+                  aria-disabled=${this.hasNextPage}
+                  @click=${this.computeLast}
+                  part="pagination-last"
+                >
+                  <md-icon name="icon-overflow-right_16"></md-icon>
+                </button>
+              `}
+        </nav>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-pagination": Pagination.ELEMENT;
+  }
+}

package/src/components/pagination/scss/mixins.scss

@@ -0,0 +1,11 @@
+@mixin list-style() {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin text-overflow() {
+  display: block;
+  overflow: hidden;
+  text-indent: -9999px;
+}

package/src/components/pagination/scss/module.scss

@@ -0,0 +1,18 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+@import "@/wc_scss/tools/mixins/flex";
+@import "@/wc_scss/tools/mixins/easing";
+
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/colors/settings-transparencies";
+@import "@/wc_scss/settings/core";
+@import "@/wc_scss/settings/media";
+
+@import "@/wc_scss/typography/settings";
+
+@import "./vars/md-pagination-settings";
+
+@import "./settings";
+@import "./mixins";
+@import "./pagination";

package/src/components/pagination/scss/pagination.scss

@@ -0,0 +1,101 @@
+:host(:focus) {
+  box-shadow: none;
+  outline: none !important;
+}
+
+:host(md-pagination) {
+  .md-pagination {
+    color: var(--pagination-nav-color, $md-pagination-nav-color-light);
+    display: flex;
+    padding: 0;
+    position: relative;
+
+    &-container {
+      @include flex($fd: column);
+      flex: 0 1 100%;
+    }
+
+    &-list {
+      @include list-style();
+      @include flex();
+      font-size: $pagination-font-size;
+      line-height: $pagination-line-height;
+      color: var(--pagination-color, $md-pagination-color-light);
+
+      li:not(.page-ellipsis) {
+        @include flex();
+        border-radius: $pagination-border-radius;
+        cursor: pointer;
+        height: $pagination-size;
+        margin: $pagination-indent;
+        min-width: $pagination-size;
+        padding: $pagination-item-indent;
+
+        &:hover {
+          background: var(--pagination-bg-hover, $md-pagination-bg-hover-light);
+          color: var(--pagination-color-current, $md-pagination-color-current-light);
+        }
+
+        &:focus {
+          box-shadow: $pagination-nav-focus var(--md-default-focus-outline-color, $md-blue-70);
+        }
+
+        &[aria-current="true"] {
+          background: var(--pagination-bg-current, $md-pagination-bg-current-light);
+          color: var(--pagination-color-current, $md-pagination-color-current-light);
+          cursor: default;
+          pointer-events: none;
+        }
+      }
+    }
+
+    &-nav {
+      @include flex;
+      background: none;
+      border: 0;
+      border-radius: $pagination-nav-border-radius;
+      color: var(--pagination-nav-color, $md-pagination-nav-color-light);
+      cursor: pointer;
+      flex: 0 0 $pagination-arrow-size;
+      outline: none;
+      padding: 0;
+
+      &:hover {
+        color: var(--pagination-nav-hover, $md-pagination-nav-hover-light);
+      }
+
+      &:disabled {
+        color: var(--pagination-nav-disabled, $md-pagination-nav-disabled-light);
+        cursor: default;
+      }
+
+      &:focus {
+        box-shadow: $pagination-nav-focus var(--md-default-focus-outline-color, $md-blue-70);
+      }
+    }
+
+    &-dots {
+      @include list-style();
+      @include flex;
+
+      li {
+        @include text-overflow();
+        background: var(--pagination-dots-color, $md-pagination-dots-color-light);
+        border-radius: 50%;
+        cursor: pointer;
+        height: $pagination-dots-size;
+        margin: $pagination-dots-margin;
+        width: $pagination-dots-size;
+
+        &[aria-current="true"],
+        &:hover {
+          background: var(--pagination-dots-color-current, $md-pagination-dots-color-current-light);
+        }
+      }
+    }
+  }
+}
+
+:host([focus-visible]) {
+  box-shadow: $pagination-nav-focus var(--md-default-focus-outline-color, $md-blue-70);
+}

package/src/components/pagination/scss/settings.scss

@@ -0,0 +1,11 @@
+$pagination-size: rem-calc(20);
+$pagination-font-size: rem-calc(14);
+$pagination-line-height: 1;
+$pagination-item-indent: rem-calc(4);
+$pagination-indent: rem-calc(0 2);
+$pagination-border-radius: rem-calc(14);
+$pagination-nav-border-radius: rem-calc(4);
+$pagination-arrow-size: rem-calc(20);
+$pagination-dots-size: rem-calc(8);
+$pagination-dots-margin: rem-calc(4);
+$pagination-nav-focus: 0 0 0 rem-calc(2);

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

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const pagination = {
+  prefix: "lm",
+  component: "pagination",
+  color: {
+    light: colors.gray[50].name,
+    dark: colors.gray[60].name,
+    current: {
+      light: colors.white[100].name,
+      dark: colors.white[100].name
+    }
+  },
+  "bg-current": {
+    light: colors.blue[50].name,
+    dark: colors.blue[60].name
+  },
+
+  "bg-hover": {
+    light: colors.gray[20].name,
+    dark: colors.gray[10].name
+  },
+  nav: {
+    color: {
+      light: colors.gray[90].name,
+      dark: colors.gray[40].name
+    },
+    hover: {
+      light: colors.gray[100].name,
+      dark: colors.gray[60].name
+    },
+    disabled: {
+      light: colors.gray[30].name,
+      dark: colors.gray[30].name
+    }
+  },
+  "dots-color": {
+    light: colors.gray[30].name,
+    dark: colors.gray[30].name,
+    current: {
+      light: colors.gray[100].name,
+      dark: colors.gray[60].name
+    }
+  }
+};
+
+module.exports = pagination;

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

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const pagination = {
+  prefix: "md",
+  component: "pagination",
+  color: {
+    light: colors.gray[50].name,
+    dark: colors.gray[60].name,
+    current: {
+      light: colors.white[100].name,
+      dark: colors.white[100].name
+    }
+  },
+  "bg-current": {
+    light: colors.blue[50].name,
+    dark: colors.blue[60].name
+  },
+
+  "bg-hover": {
+    light: colors.blue[60].name,
+    dark: colors.blue[70].name
+  },
+  nav: {
+    color: {
+      light: colors.gray[70].name,
+      dark: colors.gray[70].name
+    },
+    hover: {
+      light: colors.blue[60].name,
+      dark: colors.blue[70].name
+    },
+    disabled: {
+      light: colors.gray[30].name,
+      dark: colors.gray[30].name
+    }
+  },
+  "dots-color": {
+    light: colors.gray[30].name,
+    dark: colors.gray[40].name,
+    current: {
+      light: colors.blue[50].name,
+      dark: colors.blue[60].name
+    }
+  }
+};
+
+module.exports = pagination;

package/src/components/phone-input/PhoneInput.stories.ts

@@ -0,0 +1,47 @@
+import "@/components/phone-input/PhoneInput";
+import { withA11y } from "@storybook/addon-a11y";
+import { boolean, text, withKnobs } from "@storybook/addon-knobs";
+import { html } from "lit-element";
+import "../theme/Theme";
+
+export default {
+  title: "Components/Phone Input",
+  component: "md-phone-input",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-phone-input"
+    }
+  }
+};
+
+export const PhoneInput = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+
+  const pill = boolean("pill", false);
+  const disabled = boolean("disabled", false);
+  const showFlags = boolean("showFlags", false);
+
+  const codePlaceholder = text("codePlaceholder", "+1");
+  const numberPlaceholder = text("numberPlaceholder", "Enter Phone Number");
+  const countryCallingCode = text("country-calling-code", "Enter Phone Number");
+  const value = text("value", "");
+  const errorMessage = text("errorMessage", "");
+
+  return html`
+    <md-theme class="theme-toggle" id="datetimepicker" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-phone-input
+        ?pill=${pill}
+        ?disabled=${disabled}
+        ?show-flags=${showFlags}
+        value=${value}
+        codePlaceholder=${codePlaceholder}
+        numberPlaceholder=${numberPlaceholder}
+        country-calling-code=${countryCallingCode}
+        errorMessage=${errorMessage}
+      >
+      </md-phone-input>
+    </md-theme>
+  `;
+};

package/src/components/phone-input/PhoneInput.test.ts

@@ -0,0 +1,193 @@
+import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import countryCodesList, { customArray } from "country-codes-list";
+import "libphonenumber-js";
+import "./PhoneInput";
+import { PhoneInput } from "./PhoneInput";
+
+const countryData = [
+  { name: "Andorra", value: "376", code: "AD" },
+  { name: "Afghanistan", value: "93", code: "AF" },
+  { name: "Antigua and Barbuda", value: "1268", code: "AG" }
+];
+
+describe("PhoneInput Component", () => {
+  afterEach(() => {
+    fixtureCleanup();
+    jest.restoreAllMocks();
+  });
+
+  let customArraySpy: jest.SpyInstance<unknown, unknown[]>;
+  beforeEach(() => {
+    customArraySpy = jest.spyOn(countryCodesList, "customArray").mockReturnValueOnce(countryData);
+  });
+
+  test("should get country code list", async () => {
+    const codeList = customArray({
+      name: "{countryNameEn}",
+      value: "{countryCallingCode}",
+      code: "{countryCode}"
+    });
+    expect(codeList).not.toBeNull;
+  });
+
+  test("should render phone input", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+    expect(customArraySpy).toHaveBeenCalled();
+    expect(element).not.toBeNull();
+  });
+
+  test("should render a Pill shape", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input pill></md-phone-input>
+      `
+    );
+    expect(element.hasAttribute("pill")).toBeTruthy();
+    expect(element.shadowRoot!.querySelector("md-combobox")?.shape).toEqual("pill");
+    expect(element.shadowRoot!.querySelector("md-input")?.shape).toEqual("pill");
+  });
+  test("should trigger a Country Change", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+    const event: CustomEvent = new CustomEvent("change-selected", {
+      composed: true,
+      bubbles: true,
+      detail: {
+        value: {
+          id: "+1268,AntiguaandBarbuda,AG",
+          value: "+1268"
+        }
+      }
+    });
+    element.handleCountryChange(event);
+
+    expect(element.countryCallingCode).toEqual("+1268,AntiguaandBarbuda,AG");
+  });
+
+  test("should not trigger a Country Change if the field is exited without a value", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+    const event: CustomEvent = new CustomEvent("change-selected", {
+      composed: true,
+      bubbles: true,
+      detail: {
+        value: undefined
+      }
+    });
+    element.handleCountryChange(event);
+
+    expect(element.countryCallingCode).toEqual("");
+  });
+  test("should emit a custom event on input blur", async () => {
+    const parentElement = await fixture(
+      html`
+        <div class="parent"></div>
+      `
+    );
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+
+    const mockFunc = jest.fn();
+    parentElement.appendChild(element);
+    parentElement.addEventListener("phoneinput-blur", mockFunc);
+
+    const event: Event = new Event("input-blur");
+    element.handleBlur(event);
+
+    expect(mockFunc).toHaveBeenCalled();
+    expect(element.value).toBeFalsy();
+  });
+  test("should verify phone number on input blur", async () => {
+    const parentElement = await fixture(
+      html`
+        <div class="parent"></div>
+      `
+    );
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input value="(773)-777-6002"></md-phone-input>
+      `
+    );
+
+    parentElement.appendChild(element);
+
+    const event: Event = new Event("input-blur");
+    element.handleBlur(event);
+
+    expect(element.value).toBeTruthy();
+  });
+
+  test("should trigger a Phone Change event", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+    const phoneChangeSpy = jest.spyOn(element, "handlePhoneChange");
+    const phoneInput = element.shadowRoot?.querySelector("md-input");
+    const event: CustomEvent = new CustomEvent("input-change", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: "a"
+      }
+    });
+    phoneInput?.dispatchEvent(event);
+    expect(phoneChangeSpy).toHaveBeenCalled();
+  });
+  test("should register a KeyDown event", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+    const keyDownSpy = jest.spyOn(element, "handleKeydown");
+    const phoneInput = element.shadowRoot?.querySelector("md-input");
+    const event: CustomEvent = new CustomEvent("input-keydown", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: "a"
+      }
+    });
+    phoneInput?.dispatchEvent(event);
+    expect(keyDownSpy).toHaveBeenCalled();
+  });
+
+  test("Should render a flag image when show-flags is true", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input show-flags></md-phone-input>
+      `
+    );
+    const getFlagOperation = jest.spyOn(element, "getCountryFlag");
+    const event: CustomEvent = new CustomEvent("change-selected", {
+      composed: true,
+      bubbles: true,
+      detail: {
+        value: {
+          id: "+1,United States of America,US",
+          value: "+1"
+        }
+      }
+    });
+    element.handleCountryChange(event);
+    await elementUpdated(element);
+    const flag = element.shadowRoot?.querySelector("span.flag-box");
+    expect(getFlagOperation).toHaveBeenCalled();
+    expect(flag?.querySelector("img")).not.toBeNull();
+  });
+});