@momentum-ui/web-components 2.5.6 → 2.5.7

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

@@ -0,0 +1,130 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const coachmark = {
+  prefix: "md",
+  component: "coachmark",
+  default: {
+    "bg-color": {
+      light: colors.gray[50].name,
+      dark: colors.gray[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray["05"].name
+    }
+  },
+  blue: {
+    "bg-color": {
+      light: colors.cobalt[50].name,
+      dark: colors.cobalt[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.cobalt[20].name
+    }
+  },
+  green: {
+    "bg-color": {
+      light: colors.green[50].name,
+      dark: colors.green[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.green[20].name
+    }
+  },
+  purple: {
+    "bg-color": {
+      light: colors.purple[50].name,
+      dark: colors.purple[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.purple[20].name
+    }
+  },
+  violet: {
+    "bg-color": {
+      light: colors.violet[50].name,
+      dark: colors.violet[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.violet[20].name
+    }
+  },
+  mint: {
+    "bg-color": {
+      light: colors.mint[50].name,
+      dark: colors.mint[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.mint[20].name
+    }
+  },
+  yellow: {
+    "bg-color": {
+      light: colors.yellow[50].name,
+      dark: colors.yellow[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.yellow[20].name
+    }
+  },
+  red: {
+    "bg-color": {
+      light: colors.red[50].name,
+      dark: colors.red[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.red[20].name
+    }
+  },
+  darkred: {
+    "bg-color": {
+      light: colors.red[60].name,
+      dark: colors.red[70].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray[10].name
+    }
+  },
+  orange: {
+    "bg-color": {
+      light: colors.orange[50].name,
+      dark: colors.orange[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.orange[20].name
+    }
+  },
+  cyan: {
+    "bg-color": {
+      light: colors.cyan[50].name,
+      dark: colors.cyan[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.cyan[20].name
+    }
+  },
+  outline: {
+    color: {
+      light: colors.gray[50].name,
+      dark: colors.gray[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray["05"].name
+    }
+  }
+};
+
+module.exports = coachmark;

package/src/components/code-editor/CodeEditor.stories.ts

@@ -0,0 +1,32 @@
+import "./CodeEditor";
+import { withA11y } from "@storybook/addon-a11y";
+import { html } from "lit-element";
+import { text, object, withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: "Components/Code Editor",
+  component: "md-code-editor",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-code-editor"
+    }
+  }
+};
+
+export const CodeEditor = () => {
+  const url = text("Url", "v1/contactCenter/agents/statistics");
+  const method = text("Method", "post");
+  const code = object(
+    "Code",
+    'module.exports = { presets: [["@babel/preset-env", { targets: { node: "current" } }]] };'
+  );
+  return html`
+    <md-code-editor>
+      <span slot="method">${method}</span>
+      <span slot="code-url">${url}</span>
+      <code class="javascript" slot="code-block">
+        ${code}
+    </md-code-editor>
+  `;
+};

package/src/components/code-editor/CodeEditor.test.ts

@@ -0,0 +1,48 @@
+import { Button } from "@/index";
+import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
+import { html } from "lit-element";
+import "./CodeEditor";
+import { CodeEditor } from "./CodeEditor";
+// import { Button } from "../button/Button"; // Keep type import as a relative path
+
+describe("CodeEditor component", () => {
+  let element: CodeEditor.ELEMENT;
+
+  afterEach(fixtureCleanup);
+
+  beforeEach(async () => {
+    element = await fixture<CodeEditor.ELEMENT>(
+      html`
+        <md-code-editor>
+          <span slot="method">post</span>
+          <span slot="code-url">v1/contactCenter/agents/statistics</span>
+          <code class="javascript" slot="code-block">
+            module.exports = { presets: [["@babel/preset-env", { targets: { node: "current" } }]] };
+          </code>
+        </md-code-editor>
+      `
+    );
+  });
+
+  test("should render code editor", async () => {
+    expect(element).toBeDefined();
+  });
+
+  test("", async () => {
+    await elementUpdated(element);
+    expect(element["disableCopyButton"]).toBeFalsy();
+  });
+
+  test("should copy to clipboard", async () => {
+    await elementUpdated(element);
+
+    const mdButton = element.shadowRoot!.querySelector(".md-code-editor-copy-btn") as Button.ELEMENT;
+    const button = mdButton.shadowRoot!.querySelector("button");
+
+    document.execCommand = jest.fn();
+
+    button!.click();
+
+    expect(document.execCommand).toHaveBeenCalledWith("copy");
+  });
+});

package/src/components/code-editor/CodeEditor.ts

@@ -0,0 +1,183 @@
+import "@/components/badge/Badge";
+import "@/components/button/Button";
+import { customElementWithCheck } from "@/mixins";
+import reset from "@/wc_scss/reset.scss";
+import hljs from "highlight.js/lib/core";
+import { html, internalProperty, LitElement, property, PropertyValues, query, queryAssignedNodes } from "lit-element";
+import styles from "./scss/module.scss";
+
+export type Method = "get" | "post";
+
+export namespace CodeEditor {
+  @customElementWithCheck("md-code-editor")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) copyLocalization = "cURL";
+    @property({ type: String }) copiedLocalization = "Copied";
+    @property({ type: String }) method: Method = "get";
+    @property({ type: String, attribute: "accept-language" }) acceptLanguage = "javascript";
+    @property({ type: String }) url = "javascript";
+
+    @query("input[type='file']") input!: HTMLInputElement;
+    @query(".md-code-editor-code-block") codeBlock!: HTMLPreElement;
+    @query(".md-code-editor-url") codeUrl!: HTMLSpanElement;
+
+    @internalProperty() private disableCopyButton = true;
+    @internalProperty() private acceptTypes = "";
+    @internalProperty() private copied = false;
+
+    @queryAssignedNodes("code-block") slotNodes!: Node[];
+    @queryAssignedNodes("code-url") slotUrl!: Node[];
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    handleSlotChange() {
+      if (this.slotNodes && this.slotNodes.length) {
+        const codeBlock = this.slotNodes.find(node => (node as Element).tagName === "CODE");
+        if (codeBlock) {
+          const codeBlockText = codeBlock.textContent;
+          if (codeBlockText) {
+            this.highlightBlock(codeBlockText);
+          }
+        }
+      }
+    }
+
+    handleUrlSlotChange() {
+      this.copied = false;
+      if (this.slotUrl && this.slotUrl.length) {
+        const codeUrl = this.slotUrl.find(node => node as HTMLSpanElement);
+        if (codeUrl) {
+          const codeUrlText = codeUrl.textContent;
+          if (codeUrlText) {
+            this.copyUrl(codeUrlText);
+          }
+        }
+      }
+    }
+
+    private highlightBlock(text?: string) {
+      if (text) {
+        this.codeBlock.innerText = text;
+      }
+      hljs.highlightBlock(this.codeBlock);
+    }
+
+    private copyUrl(copyUrl: string) {
+      this.codeUrl.innerText = copyUrl;
+      this.disableCopyButton = false;
+    }
+
+    copyClipboard() {
+      if (!this.disableCopyButton) {
+        this.codeUrl.innerText;
+        this.selectTarget(this.codeUrl);
+      }
+    }
+
+    private copyText() {
+      try {
+        document.execCommand("copy");
+        this.copied = true;
+      } catch (err) {
+        console.warn("Copy text failed");
+        this.copied = false;
+      }
+    }
+
+    private select(element: HTMLElement) {
+      const selection = window.getSelection();
+      const range = document.createRange();
+
+      range.selectNodeContents(element);
+
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }
+
+    private selectTarget(target: HTMLElement) {
+      this.select(target);
+      this.copyText();
+    }
+
+    private async importLanguage(language: string) {
+      try {
+        const { default: importLanguage } = await import(`highlight.js/lib/languages/${language}`);
+        hljs.registerLanguage(`${language}`, importLanguage);
+        this.setAcceptTypes();
+      } catch {
+        console.warn("Please set correct language name");
+      }
+    }
+
+    private getAllAcceptTypes() {
+      const listLanguages = hljs.listLanguages();
+      if (listLanguages.length) {
+        return listLanguages
+          .map((language: string) => hljs.getLanguage(`${language}`).aliases)
+          .map((aliases: string[]) => aliases.map((alias: string) => `.${alias}`))
+          .join(",");
+      }
+      return "";
+    }
+
+    private setAcceptTypes() {
+      this.acceptTypes = this.getAllAcceptTypes();
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("acceptLanguage")) {
+        this.importLanguage(this.acceptLanguage);
+      }
+      if (changedProperties.has("acceptTypes")) {
+        this.highlightBlock();
+      }
+    }
+
+    render() {
+      return html`
+        <div class="md-code-editor" part="code-editor">
+          <div class="md-code-editor-header">
+            <div class="md-code-editor-name">
+              <md-badge color="blue">
+                <slot name="method" method=${this.method}></slot>
+              </md-badge>
+              <span class="md-code-editor-url">
+                <slot name="code-url" @slotchange=${this.handleUrlSlotChange}>${this.url}</slot>
+              </span>
+            </div>
+            <div class="md-code-editor-copy">
+              <span>${this.copied ? this.copiedLocalization.trim() : this.copyLocalization.trim()}</span>
+              <md-button
+                circle
+                size="20"
+                ?disabled=${this.disableCopyButton}
+                @click=${this.copyClipboard}
+                class="md-code-editor-copy-btn"
+              >
+                <md-icon slot="icon" name="icon-copy_16"></md-icon>
+              </md-button>
+            </div>
+          </div>
+          <div class="md-code-editor-content">
+            <pre class="md-code-editor-code-block">
+            <slot name="code-block" @slotchange=${this.handleSlotChange}>
+              <code class=${this.acceptLanguage}>
+              </code>
+            </slot>
+          </pre>
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-code-editor": CodeEditor.ELEMENT;
+  }
+}

package/src/components/code-editor/scss/code-editor.scss

@@ -0,0 +1,144 @@
+:host(md-code-editor) {
+  .md-code-editor {
+    background: $md-code-editor-bg;
+    border-radius: $md-code-editor-border-radius;
+    color: $md-code-editor-color;
+    min-height: $md-code-editor-height;
+    overflow: hidden;
+
+    &-header {
+      @include flex($jc: space-between);
+      align-items: center;
+      background: $md-code-editor-header-bg;
+      flex: 0 0 auto;
+      font-size: $font-size-base;
+      padding: $md-code-editor-indent;
+    }
+
+    &-name {
+      @include flex;
+    }
+
+    md-badge::part(badge) {
+      border-radius: $md-code-editor-border-radius;
+      height: $md-code-editor-badge-size;
+      margin-right: $md-code-editor-indent;
+      padding: $md-code-editor-badge-indent;
+      text-transform: capitalize;
+    }
+
+    &-copy {
+      @include flex();
+      line-height: 1;
+
+      &-btn {
+        &::part(button) {
+          background: none;
+          color: $md-code-editor-copy-color;
+          margin-left: $md-code-editor-indent;
+
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: $md-yellow-10;
+  }
+
+  /* Red */
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: $md-orange-40;
+  }
+
+  /* Orange */
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: $md-yellow-40;
+  }
+
+  /* Yellow */
+  .hljs-attribute {
+    color: $md-gold-30;
+  }
+
+  /* Green */
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: $md-lime-40;
+  }
+
+  /* Blue */
+  .hljs-title,
+  .hljs-section {
+    color: $md-cyan-40;
+  }
+
+  /* Purple */
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: $md-violet-20;
+  }
+
+  .hljs {
+    background: transparent;
+    color: $md-gray-20;
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-bullet,
+    .hljs-comment,
+    .hljs-link,
+    .hljs-literal,
+    .hljs-meta,
+    .hljs-number,
+    .hljs-params,
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-type,
+    .hljs-quote {
+      color: highlight;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      font-weight: bold;
+    }
+  }
+}

package/src/components/code-editor/scss/module.scss

@@ -0,0 +1,12 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/core";
+
+@import "@/wc_scss/typography/settings";
+@import "@/wc_scss/tools/mixins/flex";
+
+@import "./settings";
+@import "./code-editor";

package/src/components/code-editor/scss/settings.scss

@@ -0,0 +1,10 @@
+$md-code-editor-height: rem-calc(300);
+$md-code-editor-indent: rem-calc(10);
+$md-code-editor-color: $md-white-100;
+$md-code-editor-bg: $md-blue-95;
+$md-code-editor-header-bg: $md-blue-90;
+$md-code-editor-badge-size: rem-calc(20);
+$md-code-editor-badge-indent: rem-calc(4 6);
+$md-code-editor-indent: rem-calc(10);
+$md-code-editor-copy-color: $md-blue-50;
+$md-code-editor-border-radius: rem-calc(4);