@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/spinner/spinner.html

@@ -0,0 +1,6 @@
+<template>
+    <div role="status" class={containerClass}>
+        <div class="spinner_dot-a"></div>
+        <div class="spinner_dot-b"></div>
+    </div>
+</template>

package/src/modules/dx/spinner/spinner.ts

@@ -0,0 +1,20 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import type { SpinnerSize, SpinnerVariant } from "typings/custom";
+
+export default class Spinner extends LightningElement {
+    @api size: SpinnerSize = "medium";
+    @api variant: SpinnerVariant = "base";
+
+    connectedCallback() {
+        this.classList.add("spinner_container");
+    }
+
+    get containerClass(): string {
+        return cx(
+            "spinner",
+            this.size && `spinner_${this.size}`,
+            this.variant && this.variant !== "base" && `spinner_${this.variant}`
+        );
+    }
+}

package/src/modules/dx/tab/tab.css

@@ -0,0 +1,106 @@
+@import "helpers/reset";
+
+a {
+    text-decoration: none;
+}
+
+.nav-list-item {
+    --horizontal-spacing: var(
+        --dx-c-tab-horizontal-spacing,
+        var(--dx-g-spacing-md)
+    );
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: var(--dx-g-spacing-xl);
+    font-family: var(--dx-g-font-display);
+    white-space: nowrap;
+    color: var(--dx-g-blue-vibrant-20);
+    transition: var(--dx-g-transition-hue-1x);
+    cursor: pointer;
+    outline-offset: -1px;
+}
+
+.nav-list-item_default {
+    border: 0;
+    border-radius: var(--dx-g-spacing-md);
+    font-size: var(--dx-g-text-sm);
+    padding: 0 var(--horizontal-spacing);
+}
+
+.nav-list-item_small {
+    --border-color: transparent;
+
+    border-bottom: 2px solid var(--border-color);
+    font-size: var(--dx-g-text-xs);
+    height: calc(var(--dx-g-spacing-xl) - 2px);
+    margin: 0 var(--horizontal-spacing);
+}
+
+.nav-list-item > span {
+    margin-top: var(--dx-g-spacing-xs);
+}
+
+button.nav-list-item_default > dx-icon {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+button.nav-list-item_small > dx-icon {
+    margin-left: var(--dx-g-spacing-xs);
+}
+
+.nav-list-item_default:hover,
+.nav-list-item_default:active,
+:host([aria-expanded="true"]) button.nav-list-item_default {
+    background: var(
+        --dx-g-brand-current-button-color-background-inactive,
+        var(--dx-g-brand-default-button-color-background-inactive)
+    );
+}
+
+button.nav-list-item:hover > dx-icon,
+button.nav-list-item:active > dx-icon,
+:host([aria-expanded="true"]) button.nav-list-item > dx-icon {
+    transform: rotateX(180deg);
+}
+
+.nav-list-item_small:hover,
+.nav-list-item_small:active,
+:host([aria-expanded="true"]) button.nav-list-item_small {
+    --border-color: var(--dx-g-blue-vibrant-40);
+
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.nav-list-item_small.state-active {
+    --border-color: var(--dx-g-blue-vibrant-50);
+
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.nav-list-item_default.state-active {
+    background: var(
+        --dx-g-brand-current-button-color-background-active,
+        var(--dx-g-brand-default-button-color-background-active)
+    );
+    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
+}
+
+@media (max-width: 1160px) {
+    .nav-list-item_small {
+        --horizontal-spacing: var(
+            --dx-c-tab-horizontal-spacing,
+            var(--dx-g-spacing-smd)
+        );
+    }
+}
+
+@media (max-width: 1090px) {
+    .nav-list-item_small {
+        --horizontal-spacing: var(
+            --dx-c-tab-horizontal-spacing,
+            var(--dx-g-spacing-sm)
+        );
+    }
+}

package/src/modules/dx/tab/tab.html

@@ -0,0 +1,13 @@
+<template>
+    <a if:true={href} class={className} href={href} onclick={sendGtm}>
+        <span>{label}</span>
+    </a>
+    <button if:false={href} class={className}>
+        <span>{label}</span>
+        <dx-icon
+            if:true={useIcon}
+            symbol="chevrondown"
+            size={iconSize}
+        ></dx-icon>
+    </button>
+</template>

package/src/modules/dx/tab/tab.ts

@@ -0,0 +1,52 @@
+import { LightningElement, api } from "lwc";
+import { track } from "dx/instrumentation";
+import cx from "classnames";
+import { TabVariant } from "typings/custom";
+import { normalizeBoolean } from "utils/normalizers";
+
+export default class Tab extends LightningElement {
+    @api label: string | null = null;
+    @api href: string | null = null;
+    @api variant: TabVariant = "default";
+
+    @api
+    get isActive() {
+        return this._isActive;
+    }
+
+    set isActive(value) {
+        this._isActive = normalizeBoolean(value);
+    }
+
+    @api
+    get useIcon() {
+        return this._useIcon;
+    }
+
+    set useIcon(value) {
+        this._useIcon = normalizeBoolean(value);
+    }
+
+    _useIcon = false;
+    _isActive = false;
+
+    private sendGtm(e: PointerEvent) {
+        track(e.currentTarget!, "custEv_topNavLinkClick", {
+            navHeading: this.label || undefined,
+            clickText: this.href || undefined,
+            pageLocation: window.location.pathname
+        });
+    }
+
+    get className() {
+        return cx(
+            "nav-list-item",
+            this.isActive && "state-active",
+            `nav-list-item_${this.variant}`
+        );
+    }
+
+    get iconSize() {
+        return this.variant === "small" ? "xsmall" : "small";
+    }
+}

package/src/modules/dx/toc/toc.css

@@ -0,0 +1,94 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-toc-width: 284px;
+}
+
+.toc {
+    display: flex;
+    flex-direction: row-reverse;
+    width: var(--dx-c-toc-width);
+    word-break: break-word;
+}
+
+.toc_collapsed {
+    width: var(--dx-g-spacing-xl);
+    margin-left: var(--dx-g-spacing-xl);
+}
+
+.toc_content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    transition: var(--dx-g-transition-hue-1x);
+    padding-bottom: var(--dx-g-spacing-smd);
+}
+
+.state-hide-content {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.toc_title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.dx-text-heading-5 {
+    padding-top: var(--dx-g-spacing-sm);
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.toggle-button.collapsed {
+    --dx-c-button-opacity: 1;
+
+    transform: rotate(180deg);
+}
+
+.toggle-button {
+    width: var(--dx-g-icon-size-xl);
+    height: var(--dx-g-icon-size-xl);
+
+    --dx-c-button-opacity: 0;
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background: white;
+    --dx-c-button-custom-border: white;
+    --dx-c-button-custom-color-hover: white;
+    --dx-c-button-custom-background-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-border-hover: var(--dx-g-blue-vibrant-50);
+}
+
+.toggle-button:hover {
+    --dx-c-button-opacity: 1;
+}
+
+.content-button {
+    line-height: var(--dx-g-text-lg);
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    text-align: left;
+    padding: var(--dx-g-spacing-xs);
+    padding-left: 11px;
+    border-left: 3px solid transparent;
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.content-button.selected {
+    border-color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-g-blue-vibrant-50);
+    font-weight: bold;
+}
+
+.content-button:not(.selected):hover {
+    color: var(--dx-g-blue-vibrant-40);
+    border-color: var(--dx-g-blue-vibrant-40);
+}
+
+.toc:hover .toggle-button {
+    --dx-c-button-opacity: 1;
+}

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.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/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;
+}