@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

package/src/modules/dx/toc/toc.html

@@ -0,0 +1,28 @@
+<template>
+    <div class={contentClassName} role="directory">
+        <dx-button
+            aria-label={toggleButtonAriaLabel}
+            class={toggleButtonClass}
+            onclick={toggleShowContent}
+            icon-symbol="open_panel"
+            variant="custom"
+        ></dx-button>
+        <div if:true={showContent} class="toc toc_content">
+            <h2 class={titleClassName}>{title}</h2>
+            <template for:each={options} for:item="option">
+                <a
+                    href={option.anchor}
+                    class={option.className}
+                    onclick={onClick}
+                    contentid={option.id}
+                    key={option.id}
+                >
+                    {option.label}
+                </a>
+            </template>
+        </div>
+    </div>
+    <div if:true={showContent}>
+        <slot name="view-pdf"></slot>
+    </div>
+</template>

package/src/modules/dx/toc/toc.stories.ts

@@ -0,0 +1,26 @@
+import { html } from "lit-html";
+import mockProps from "./__tests__/mockProps";
+
+export default {
+    title: "dx/dx-toc",
+    component: "dx-toc"
+};
+
+const options = JSON.stringify(mockProps.options);
+// prettier-ignore
+export const Base = () => html`
+    <dx-toc
+        title="In this guide"
+        options="${options}"
+        value="intro"
+    >
+        <dx-button
+            slot="view-pdf"
+            href="http://www.google.com"
+            target="_blank"
+            variant="inline"
+            icon-symbol="new_window"
+        >
+            View PDF
+        </dx-button>
+    </dx-toc>`;

package/src/modules/dx/toc/toc.ts

@@ -0,0 +1,77 @@
+import { LightningElement, api, track } from "lwc";
+import cx from "classnames";
+import { ContentElement } from "typings/custom";
+import { toJson } from "utils/normalizers";
+
+export default class Toc extends LightningElement {
+    @api title!: string;
+
+    @api
+    get value() {
+        return this._value!;
+    }
+    set value(value: string) {
+        this._value = value;
+    }
+
+    @api
+    get options() {
+        const actualValue =
+            this.value ||
+            (this._options && this._options.length > 0 && this._options[0].id);
+        return this._options.map((option) => {
+            return {
+                ...option,
+                className: cx(
+                    "content-button",
+                    option.id === actualValue && "selected"
+                )
+            };
+        });
+    }
+    set options(value: any) {
+        this._options = toJson(value);
+    }
+
+    private _value?: string = undefined;
+    private showContent: boolean = true;
+
+    @track _options!: Array<ContentElement>;
+
+    private get toggleButtonIconSymbol() {
+        return this.showContent ? "forward" : "back";
+    }
+
+    private get toggleButtonAriaLabel() {
+        return this.showContent
+            ? "Hide table of contents"
+            : "Show table of contents";
+    }
+
+    private get contentClassName() {
+        return cx("toc", !this.showContent && "toc_collapsed");
+    }
+    private get toggleButtonClass() {
+        return cx("toggle-button", !this.showContent && "collapsed");
+    }
+
+    private get titleClassName() {
+        return cx(
+            "dx-text-heading-5 toc_title",
+            !this.showContent && "state-hide-content"
+        );
+    }
+
+    private onClick(e: Event) {
+        const target = e.currentTarget as HTMLElement;
+        const id = target.getAttribute("contentid");
+        this.dispatchEvent(
+            new CustomEvent("selectedcontent", { detail: { name: id } })
+        );
+        this._value = id!;
+    }
+
+    private toggleShowContent() {
+        this.showContent = !this.showContent;
+    }
+}

package/src/modules/dx/tooltip/__tests__/tooltip.test.ts

@@ -0,0 +1,22 @@
+import Tooltip from "dx/tooltip";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-tooltip";
+const render = createRenderComponent(TAG, Tooltip);
+
+describe(TAG, () => {
+    it("calls tippy constructor with correct parameters", () => {
+        const element = render({ label: "First Label", placement: "top" });
+
+        const slotContainer: HTMLElement =
+            element.shadowRoot.querySelector("div");
+
+        expect(slotContainer).not.toBeNull();
+        expect(slotContainer.getAttribute("data-microtip-position")).toEqual(
+            "top"
+        );
+        expect(slotContainer.getAttribute("aria-label")).toEqual("First Label");
+
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/tooltip/microtip.css

@@ -0,0 +1,269 @@
+/* Code generated by scripts/postinstall.js DO NOT EDIT*/
+
+
+/* -------------------------------------------------------------------
+  Microtip
+
+  Modern, lightweight css-only tooltips
+  Just 1kb minified and gzipped
+
+  @author Ghosh
+  @package Microtip
+
+----------------------------------------------------------------------
+  1. Base Styles
+  2. Direction Modifiers
+  3. Position Modifiers
+--------------------------------------------------------------------*/
+
+
+/* ------------------------------------------------
+  [1] Base Styles
+-------------------------------------------------*/
+
+[aria-label][role~="tooltip"] {
+  position: relative;
+}
+
+[aria-label][role~="tooltip"]::before,
+[aria-label][role~="tooltip"]::after {
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  pointer-events: none;
+  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
+}
+
+[aria-label][role~="tooltip"]::before {
+  background-size: 100% auto !important;
+  content: "";
+}
+
+[aria-label][role~="tooltip"]::after {
+  background: rgba(17, 17, 17, .9);
+  border-radius: 4px;
+  color: #ffffff;
+  content: attr(aria-label);
+  font-size: var(--microtip-font-size, 13px);
+  font-weight: var(--microtip-font-weight, normal);
+  text-transform: var(--microtip-text-transform, none);
+  padding: .5em 1em;
+  white-space: nowrap;
+  box-sizing: content-box;
+}
+
+[aria-label][role~="tooltip"]:hover::before,
+[aria-label][role~="tooltip"]:hover::after,
+[aria-label][role~="tooltip"]:focus::before,
+[aria-label][role~="tooltip"]:focus::after {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+
+
+/* ------------------------------------------------
+  [2] Position Modifiers
+-------------------------------------------------*/
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-bottom: 5px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  margin-bottom: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]:hover::before {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="top"]:hover::after {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+/* ------------------------------------------------
+  [2.1] Top Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-left"]::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.2] Top Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-right"]::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.3] Bottom
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  margin-top: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  transform: translate3d(-50%, -10px, 0);
+  bottom: auto;
+  left: 50%;
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+  transform: translate3d(-50%, 0, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  transform: translate3d(-50%, -10px, 0);
+  top: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
+  transform: translate3d(-50%, 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.4] Bottom Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+  transform: translate3d(calc(-100% + 16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.5] Bottom Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+  transform: translate3d(calc(0% + -16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.6] Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="left"]::before,
+[role~="tooltip"][data-microtip-position="left"]::after {
+  bottom: auto;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  transform: translate3d(10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="left"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-right: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position="left"]::after {
+  margin-right: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="left"]:hover::before,
+[role~="tooltip"][data-microtip-position="left"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.7] Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="right"]::before,
+[role~="tooltip"][data-microtip-position="right"]::after {
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translate3d(-10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="right"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]::after {
+  margin-left: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]:hover::before,
+[role~="tooltip"][data-microtip-position="right"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+/* ------------------------------------------------
+  [3] Size
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-size="small"]::after {
+  white-space: initial;
+  width: 80px;
+}
+
+[role~="tooltip"][data-microtip-size="medium"]::after {
+  white-space: initial;
+  width: 150px;
+}
+
+[role~="tooltip"][data-microtip-size="large"]::after {
+  white-space: initial;
+  width: 260px;
+}

package/src/modules/dx/tooltip/tooltip.css

@@ -0,0 +1,36 @@
+@import "./microtip.css";
+
+:host {
+    display: inline-block;
+}
+
+.slot-container {
+    display: inherit;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="left"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="right"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[aria-label][role~="tooltip"]::after {
+    background-color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    color: white;
+}

package/src/modules/dx/tooltip/tooltip.html

@@ -0,0 +1,5 @@
+<template>
+    <div data-microtip-position={placement} role="tooltip" aria-label={label}>
+        <slot></slot>
+    </div>
+</template>

package/src/modules/dx/tooltip/tooltip.stories.ts

@@ -0,0 +1,46 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-tooltip",
+    component: "dx-tooltip",
+    argTypes: {
+        placement: {
+            defaultValue: "top",
+            control: {
+                type: "select",
+                options: [
+                    "top",
+                    "top-left",
+                    "top-right",
+                    "bottom",
+                    "bottom-left",
+                    "bottom-right",
+                    "left",
+                    "right"
+                ]
+            }
+        },
+        label: {
+            defaultValue: "Hello, world!",
+            control: {
+                type: "text"
+            }
+        }
+    }
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        .story-container {
+            margin: 100px;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Default = (args: any) => html `${createStyles()}
+    <div class="story-container">
+        <dx-tooltip label="${args.label}" placement="${args.placement}">
+            <button>Hover</button>
+        </dx-tooltip>
+    </div>`;

package/src/modules/dx/tooltip/tooltip.ts

@@ -0,0 +1,6 @@
+import { LightningElement, api } from "lwc";
+
+export default class Tooltip extends LightningElement {
+    @api placement?: String = "top";
+    @api label: string = "";
+}

package/src/modules/dx/topics/__tests__/mockProps.ts

@@ -0,0 +1,3 @@
+export default {
+    topics: ["mobile", "performance"]
+};

package/src/modules/dx/topics/__tests__/topics.test.ts

@@ -0,0 +1,31 @@
+import Topics from "dx/topics";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-topics";
+const render = createRenderComponent(TAG, Topics);
+describe(TAG, () => {
+    it("renders", () => {
+        const component = render(mockProps);
+        expect(component.topics).toEqual(mockProps.topics);
+
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(3);
+
+        const [expectedFirst, expectedSecond] = mockProps.topics;
+        const [first, dot, second] = spans;
+        expect(first.textContent).toBe(expectedFirst);
+        expect(second.textContent).toBe(expectedSecond);
+        expect(dot.classList).toContain("dot-separator");
+
+        return expect(component).toBeAccessible();
+    });
+
+    it("doesn't render any span if list is empty", () => {
+        const component = render();
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(0);
+    });
+});

package/src/modules/dx/topics/topics.css

@@ -0,0 +1,25 @@
+:host {
+    display: block;
+}
+
+.container {
+    align-items: center;
+    color: var(--dx-g-blue-vibrant-20);
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    display: flex;
+    gap: var(--dx-g-spacing-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.dot-separator {
+    --size: 4px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-blue-vibrant-20);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}

package/src/modules/dx/topics/topics.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="container dx-text-label-1-dark">
+        <template for:each={normalizedTopics} for:item="topic">
+            <span key={topic.id}>{topic.label}</span>
+            <span
+                key={topic.id}
+                if:false={topic.isLast}
+                class="dot-separator"
+            ></span>
+        </template>
+    </div>
+</template>

package/src/modules/dx/topics/topics.ts

@@ -0,0 +1,25 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "utils/normalizers";
+
+export default class Topics extends LightningElement {
+    private _topics: Array<string> = [];
+
+    @api
+    get topics() {
+        return this._topics;
+    }
+
+    set topics(value) {
+        this._topics = normalizeToArray(value);
+    }
+
+    get normalizedTopics() {
+        const { length } = this._topics;
+
+        return this._topics?.map((topic, index) => ({
+            id: topic,
+            label: topic,
+            isLast: index === length - 1
+        }));
+    }
+}