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

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

@@ -1,28 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,269 +0,0 @@
-/* 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

@@ -1,36 +0,0 @@
-@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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,31 +0,0 @@
-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

@@ -1,25 +0,0 @@
-: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

@@ -1,12 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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
-        }));
-    }
-}