@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/modal/scss/modal.scss

@@ -0,0 +1,405 @@
+/** @component modal */
+
+.md-modal {
+  @include modal-base;
+  @include modal-size($radius: true);
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &__header {
+    @include modal-header-size;
+    flex-shrink: 0;
+    padding-bottom: $modal-main__padding;
+    padding-left: calc(#{$modal-main__padding} / 2);
+    padding-right: calc(#{$modal-main__padding} / 2);
+
+    .md-modal__title {
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    .md-modal__message {
+      @include modal-header-size(
+        $font-family: $brand-font-regular,
+        $font-size: rem-calc(14),
+        $line-height: rem-calc(24)
+      ) {
+        color: var(--modal-main-text-color, $lm-modal-main-text-color-light);
+        flex-flow: row wrap;
+        text-align: center;
+      }
+    }
+
+    .md-modal__close {
+      @include flex;
+
+      border: 0;
+      position: absolute;
+    }
+  }
+
+  &__content {
+    @include modal-color($bg: $modal__background, $box-shadow: $modal-dialog__box-shadow);
+    border: $modal-dialog__border;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__flex-container {
+    @include modal-flex-container;
+  }
+
+  &__body {
+    align-items: stretch; // IE fix
+    align-self: stretch;
+    background: var(--modal-main-bg-color, $lm-modal-main-bg-color-light);
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-left: calc(#{$modal-main__padding} / 2);
+    padding-right: calc(#{$modal-main__padding} / 2);
+
+    &--padding {
+      padding: $modal__padding--body;
+    }
+  }
+
+  &__footer {
+    @include flex($jc: flex-end);
+    flex-shrink: 0;
+    padding-left: calc(#{$modal-main__padding} / 2);
+    padding-right: calc(#{$modal-main__padding} / 2);
+    padding-top: $modal-main__padding;
+    width: 100%;
+
+    md-button:not(:first-of-type) {
+      margin-left: rem-calc(12);
+    }
+
+    ::slotted(md-button) {
+      margin-left: rem-calc(12);
+    }
+  }
+
+  &.md-modal--full {
+    @include modal-size($width: $modal__width--full-screen, $height: $modal__height--full-screen, $radius: 0);
+
+    .md-modal__header {
+      @include modal-header-size(
+        $font-size: $modal-header__font-size--full-screen,
+        $line-height: $modal-header__line-height--full-screen,
+        $font-family: $brand-font-regular
+      );
+
+      .md-modal__message {
+        font-size: rem-calc(20);
+        line-height: rem-calc(32);
+        padding-top: rem-calc(20);
+      }
+
+      .md-modal__close {
+        @include modal-close-button(
+          $size: rem-calc(20),
+          $font-size: rem-calc(20),
+          $top-offset: rem-calc(24),
+          $right-offset: rem-calc(24)
+        );
+      }
+    }
+
+    .md-modal__footer {
+      padding-bottom: $modal__padding--full-screen;
+      padding-top: $modal__padding--full-screen;
+    }
+  }
+
+  &.md-modal--large {
+    @include modal-size(
+      $top-offset: $modal__top--large,
+      $width: $modal__width--large,
+      $min-height: $modal__height--large,
+      $radius: true
+    );
+
+    .md-modal__header {
+      @include modal-header-size(
+        $font-size: $modal-header__font-size--large,
+        $line-height: $modal-header__line-height--large,
+        $font-family: $brand-font-regular
+      );
+
+      .md-modal__message {
+        font-size: rem-calc(16);
+        line-height: rem-calc(24);
+        text-align: left;
+      }
+
+      .md-modal__close {
+        @include modal-close-button(
+          $size: rem-calc(16),
+          $font-size: rem-calc(16),
+          $top-offset: rem-calc(16),
+          $right-offset: rem-calc(16)
+        );
+      }
+    }
+
+    @media #{$medium-only} {
+      @include modal-size(
+        $top-offset: $modal__top--tablet-medium,
+        $width: $modal__width--medium,
+        $min-height: $modal__height--medium
+      );
+
+      .md-modal__header {
+        @include modal-header-size;
+
+        .md-modal__message {
+          font-size: rem-calc(14);
+          line-height: rem-calc(24);
+          text-align: center;
+        }
+
+        .md-modal__close {
+          @include modal-close-button(
+            $size: rem-calc(14),
+            $font-size: rem-calc(14),
+            $top-offset: rem-calc(12),
+            $right-offset: rem-calc(12)
+          );
+        }
+      }
+    }
+
+    @media #{$v-medium-down} {
+      .md-modal__content {
+        min-height: auto;
+      }
+    }
+  }
+
+  &.md-modal--medium,
+  &.md-modal--default {
+    @include modal-size(
+      $top-offset: $modal__top--medium,
+      $width: $modal__width--medium,
+      $min-height: $modal__height--medium
+    );
+
+    .md-modal__close {
+      @include modal-close-button(
+        $size: rem-calc(14),
+        $font-size: rem-calc(14),
+        $top-offset: rem-calc(12),
+        $right-offset: rem-calc(12)
+      );
+    }
+
+    @media #{$medium-only} {
+      @include modal-size(
+        $top-offset: $modal__top--tablet-medium,
+        $width: $modal__width--medium,
+        $min-height: $modal__height--medium
+      );
+    }
+
+    @media #{$v-medium-down} {
+      .md-modal__content {
+        min-height: auto;
+      }
+    }
+  }
+
+  &.md-modal--small {
+    @include modal-size(
+      $top-offset: $modal__top--small,
+      $width: $modal__width--small,
+      $min-height: $modal__height--small
+    );
+
+    .md-modal__close {
+      @include modal-close-button(
+        $size: rem-calc(14),
+        $font-size: rem-calc(14),
+        $top-offset: rem-calc(12),
+        $right-offset: rem-calc(12)
+      );
+    }
+
+    // Media Query for Tablet
+    @media #{$medium-only} {
+      @include modal-size(
+        $top-offset: $modal__top--tablet-small,
+        $width: $modal__width--small,
+        $min-height: $modal__height--small
+      );
+    }
+  }
+
+  &.md-modal--dialog {
+    @include modal-size($width: $modal__width--small, $radius: true, $top-offset: $modal-dialog__top);
+
+    .md-modal__close {
+      @include modal-close-button(
+        $size: rem-calc(14),
+        $font-size: rem-calc(14),
+        $top-offset: rem-calc(12),
+        $right-offset: rem-calc(12)
+      );
+    }
+
+    .md-modal__content {
+      flex-direction: row;
+
+      .md-modal__header {
+        align-items: flex-start;
+        padding: $modal-header__padding--dialog;
+      }
+
+      .md-modal__title {
+        font-family: $brand-font-bold;
+        font-size: $font-size-large;
+        line-height: rem-calc(24);
+      }
+
+      .md-modal__body {
+        margin-bottom: rem-calc(24);
+        text-align: left;
+
+        > * {
+          font-family: $brand-font-regular;
+          font-size: $font-size-base;
+          line-height: rem-calc(22);
+        }
+      }
+
+      .md-modal__footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 0;
+      }
+    }
+  }
+
+  &.md-modal--small,
+  &.md-modal--medium,
+  &.md-modal--large,
+  &.md-modal--full,
+  &.md-modal--default,
+  &.md-modal--dialog {
+    &.md-modal--dialog {
+      @media #{$small-only} {
+        .md-modal__flex-container {
+          min-height: calc(100vh - (#{$modal-dialog__padding} * 2));
+        }
+      }
+    }
+    //Media Query for Mobile
+    @media #{$small-only} {
+      @include modal-size($radius: 0, $height: 100vh);
+
+      .md-modal__flex-container {
+        min-height: 100vh;
+      }
+
+      .md-modal__header {
+        @include modal-header-size($font-size: $modal-header__font-size--mobile);
+
+        .md-modal__message {
+          font-size: rem-calc(14);
+          line-height: rem-calc(24);
+          padding-top: rem-calc(12);
+        }
+
+        .md-modal__close {
+          @include modal-close-button(
+            $size: rem-calc(14),
+            $font-size: rem-calc(14),
+            $top-offset: rem-calc(12),
+            $right-offset: rem-calc(12)
+          );
+        }
+      }
+
+      .md-modal__footer {
+        padding: $modal__padding;
+        padding-right: rem-calc(24);
+
+        md-button:not(:first-of-type) {
+          margin-left: rem-calc(16);
+        }
+      }
+    }
+  }
+}
+
+.md-modal__backdrop {
+  background: $modal-overlay-background;
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1040;
+
+  .md-modal_overlay {
+    bottom: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+/** @component close */
+
+.md-close {
+  color: $close__font-color;
+  float: right;
+  font-size: ($font-size-base * 1.5);
+  font-weight: bold;
+  line-height: 1;
+  text-shadow: 0 1px 0 $md-white-100;
+
+  &:hover,
+  &:focus {
+    color: $close__font-color--focus;
+    cursor: pointer;
+    text-decoration: none;
+  }
+}
+
+.md-close {
+  background: transparent;
+  border-radius: 0;
+  cursor: pointer;
+  font-weight: normal;
+  min-width: initial;
+  padding: 0;
+
+  &::before {
+    font-family: $icon-font-name;
+    vertical-align: middle;
+  }
+
+  &:hover {
+    color: $close__font-color--hover;
+  }
+}
+
+.fade {
+  opacity: 0;
+  transition: opacity 0.15s linear;
+
+  &.in {
+    opacity: 1;
+  }
+}

package/src/components/modal/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/lm-modal-settings";
+
+@import "./settings";
+@import "./mixins";
+@import "./modal";

package/src/components/modal/scss/settings.scss

@@ -0,0 +1,59 @@
+$modal-overlay-background: rgba($md-black-100, 0.45) !default;
+
+// We use these to control the style of the modal itself.
+$modal__background: var(--modal-main-bg-color, $lm-modal-main-bg-color-light);
+
+// Modal Padding
+$modal__padding: var(--modal-main-padding, $lm-modal-main-padding-light);
+$modal__padding--full-screen: rem-calc(24);
+$modal__padding--body: 0 rem-calc(32);
+$modal-main__padding: rem-calc(16);
+
+// We use this to set the default radius used throughout the core.
+$modal__radius: var(--modal-main-radius, $lm-modal-main-radius-light);
+
+// Modal Dialog Settings
+$modal-dialog__top: rem-calc(100);
+$modal-dialog__padding: rem-calc(24);
+$modal-dialog__border: 1px solid var(--modal-main-border-color, $lm-modal-main-border-color-light);
+$modal-dialog__box-shadow: 0 8px 16px 0 $black-16;
+$modal-header__padding--dialog: 0 0 rem-calc(12) 0;
+
+// Modal Header Sizes
+$modal-header__padding: $modal__padding;
+$modal-header__font-size: rem-calc(16);
+$modal-header__line-height: rem-calc(24);
+
+$modal-header__padding--large: rem-calc(32) rem-calc(16) rem-calc(16) rem-calc(16);
+$modal-header__font-size--large: rem-calc(26);
+$modal-header__line-height--large: rem-calc(32);
+
+$modal-header__padding--full-screen: rem-calc(32) rem-calc(16) rem-calc(16) rem-calc(16);
+$modal-header__font-size--full-screen: rem-calc(36);
+$modal-header__line-height--full-screen: rem-calc(48);
+
+$modal-header__font-size--mobile: rem-calc(14);
+
+// Modal Size
+$modal__width--full-screen: 100vw;
+$modal__width--large: rem-calc(960);
+$modal__width--medium: rem-calc(640);
+$modal__width--small: rem-calc(440);
+
+$modal__height--full-screen: 100vh;
+$modal__height--large: rem-calc(720);
+$modal__height--medium: rem-calc(480);
+$modal__height--small: rem-calc(380);
+
+// Modal Offset
+$modal__top--large: rem-calc(43);
+$modal__top--medium: rem-calc(47);
+$modal__top--small: rem-calc(47);
+
+$modal__top--tablet-medium: rem-calc(57);
+$modal__top--tablet-small: rem-calc(53);
+
+// Close button
+$close__font-color: $md-gray-70 !default;
+$close__font-color--hover: $md-theme-70 !default;
+$close__font-color--focus: $md-theme-80 !default;

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

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const modal = {
+  prefix: "lm",
+  component: "modal",
+  main: {
+    "bg-color": {
+      light: colors.white[100].name,
+      dark: colors.gray[90].name
+    },
+    "text-color": {
+      light: colors.gray[70].name,
+      dark: colors.gray[40].name
+    },
+    "border-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[80].name
+    },
+    radius: {
+      light: "0.5rem",
+      dark: "0.5rem"
+    },
+    padding: {
+      light: "1.5rem 1rem",
+      dark: "1.5rem 1rem"
+    }
+  },
+  title: {
+    "text-color": {
+      light: colors.black[100].name,
+      dark: colors.gray["05"].name
+    }
+  },
+  backdrop: {
+    "bg-color": {
+      light: colors.black[100].name,
+      dark: colors.black[100].name
+    }
+  }
+};
+
+module.exports = modal;

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

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const modal = {
+  prefix: "md",
+  component: "modal",
+  main: {
+    "bg-color": {
+      light: colors.white[100].name,
+      dark: colors.gray[90].name
+    },
+    "text-color": {
+      light: colors.gray[80].name,
+      dark: colors.gray[30].name
+    },
+    radius: {
+      light: "0.25rem",
+      dark: "0.25rem"
+    },
+    padding: {
+      light: "1rem 0.5rem",
+      dark: "1rem 0.5rem"
+    },
+    "border-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray[80].name
+    }
+  },
+  title: {
+    "text-color": {
+      light: colors.black[100].name,
+      dark: colors.gray[10].name
+    }
+  },
+  backdrop: {
+    "bg-color": {
+      light: colors.black[100].name,
+      dark: colors.black[100].name
+    }
+  }
+};
+
+module.exports = modal;

package/src/components/pagination/Pagination.stories.ts

@@ -0,0 +1,37 @@
+import "./Pagination";
+import { withA11y } from "@storybook/addon-a11y";
+import { html } from "lit-element";
+import { withKnobs, number, boolean } from "@storybook/addon-knobs";
+
+export default {
+  title: "Components/Pagination",
+  component: "md-pagination",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-pagination"
+    }
+  }
+};
+
+export const Pagination = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+  const visiblePage = number("Limit", 10);
+  const dots = boolean("Add Dots", false);
+  const navigation = boolean("No Navigation", false);
+  const onlyDots = boolean("Only Dots", false);
+
+  return html`
+    <md-theme class="theme-toggle" id="pagination" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-pagination
+        total-page="20"
+        current-page="10"
+        .visible-page=${visiblePage}
+        ?dots=${dots}
+        ?no-navigation=${navigation}
+        ?only-dots=${onlyDots}
+      ></md-pagination>
+    </md-theme>
+  `;
+};

package/src/components/pagination/Pagination.test.ts

@@ -0,0 +1,76 @@
+import "./Pagination";
+import { Pagination } from "./Pagination";
+import { html } from "lit-element";
+import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
+
+describe("Pagination component", () => {
+  afterEach(fixtureCleanup);
+
+  let element: Pagination.ELEMENT;
+
+  beforeEach(async () => {
+    element = await fixture<Pagination.ELEMENT>(
+      html`
+        <md-pagination total-page="20" current-page="10" visible-page="3"></md-pagination>
+      `
+    );
+  });
+
+  test("should render pagination correctly", async () => {
+    expect(element).toBeDefined();
+  });
+
+  test("should handle click navigation", async () => {
+    const nav = Array.from(element.shadowRoot!.querySelectorAll(".md-pagination-nav")) as HTMLButtonElement[];
+
+    element.currentPage = 5;
+    await elementUpdated(element);
+    nav[0].click();
+    await elementUpdated(element);
+    expect(element.currentPage).toEqual(1);
+
+    element.currentPage = 5;
+    await elementUpdated(element);
+    nav[1].click();
+    await elementUpdated(element);
+    expect(element.currentPage).toEqual(4);
+
+    element.currentPage = 5;
+    await elementUpdated(element);
+    nav[2].click();
+    await elementUpdated(element);
+    expect(element.currentPage).toEqual(6);
+
+    element.currentPage = 5;
+    await elementUpdated(element);
+    nav[3].click();
+    await elementUpdated(element);
+    expect(element.currentPage).toEqual(20);
+  });
+
+  test("should set current page", async () => {
+    const link = Array.from(element.shadowRoot!.querySelectorAll(".md-pagination-list li")) as HTMLAnchorElement[];
+    element.currentPage = 1;
+    await elementUpdated(element);
+    link[2].click();
+    await elementUpdated(element);
+    expect(element.currentPage).toEqual(3);
+  });
+
+  test("should set total page attribute", async () => {
+    element.totalPage = 0;
+    await elementUpdated(element);
+    element.totalPage = 20;
+    expect(element.totalPage).toEqual(20);
+  });
+
+  test("should render dots pagination", async () => {
+    element.hasDots = true;
+    await elementUpdated(element);
+    expect(element.shadowRoot!.querySelector(".md-pagination-dots")).toBeDefined();
+
+    element.onlyDots = true;
+    await elementUpdated(element);
+    expect(element.shadowRoot!.querySelector(".md-pagination-dots")).toBeDefined();
+  });
+});