@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -0,0 +1,98 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { track } from "dxUtils/analytics";
+
+export default class MainContentHeader extends LightningElement {
+    @api header!: string;
+    @api subtitle?: string;
+    @api body!: string;
+    @api footNote?: string;
+    @api footNoteImage?: string;
+    @api footNoteImageAlt?: string;
+    @api footNoteImageHeight?: string;
+    @api footNoteImageWidth?: string;
+    @api ctaLabel!: string;
+    @api ctaLabelSecondary?: string;
+    @api ctaHref!: string;
+    @api ctaHrefSecondary?: string;
+    @api imgSrc?: string;
+    @api imgSrcMobile?: string;
+    @api ctaTarget?: string | null = null;
+    @api ctaTargetSecondary?: string | null = null;
+    @api backgroundGradientColor?: string;
+    @api backgroundImage?: string;
+    @api backgroundGradientDark = false;
+    @api hasSwoop = false;
+    @api multipleImages = false;
+    @api imgSrcOne?: string;
+    @api imgSrcTwo?: string;
+
+    private get style() {
+        return cx(
+            this.backgroundGradientColor &&
+                !this.backgroundGradientDark &&
+                `background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
+            this.backgroundGradientDark &&
+                `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`,
+            this.backgroundImage &&
+                `background: #260F8F url('${this.backgroundImage}') no-repeat bottom; background-size: cover;`
+        );
+    }
+
+    private get textStyle() {
+        return cx(
+            "text-container",
+            this.backgroundGradientDark && "light-text"
+        );
+    }
+
+    private get footNoteStyle() {
+        return cx(this.backgroundGradientDark && "color: white;");
+    }
+
+    private onCtaClick(e: Event) {
+        if (e.currentTarget) {
+            track(e.currentTarget, "custEv_ctaButtonClick", {
+                click_text: this.ctaLabel,
+                click_url: this.ctaHref.includes("http")
+                    ? this.ctaHref
+                    : `${window.location.origin}${this.ctaHref}`,
+                element_type: "button",
+                element_title: this.header,
+                content_category: "cta"
+            });
+            track(e.currentTarget!, "custEv_linkClick", {
+                click_text: this.ctaLabel,
+                element_title: this.header,
+                click_url: this.ctaHref.includes("http")
+                    ? this.ctaHref
+                    : `${window.location.origin}${this.ctaHref}`,
+                element_type: "link",
+                content_category: "cta"
+            });
+        }
+    }
+
+    private onCtaClickSecondary(e: Event) {
+        if (e.currentTarget) {
+            track(e.currentTarget, "custEv_ctaButtonClick", {
+                click_text: this.ctaLabelSecondary,
+                click_url: this.ctaHrefSecondary!.includes("http")
+                    ? this.ctaHrefSecondary
+                    : `${window.location.origin}${this.ctaHrefSecondary}`,
+                element_type: "button",
+                element_title: this.header,
+                content_category: "cta"
+            });
+            track(e.currentTarget!, "custEv_linkClick", {
+                click_text: this.ctaLabelSecondary,
+                element_title: this.header,
+                click_url: this.ctaHrefSecondary!.includes("http")
+                    ? this.ctaHrefSecondary
+                    : `${window.location.origin}${this.ctaHrefSecondary}`,
+                element_type: "link",
+                content_category: "cta"
+            });
+        }
+    }
+}

package/src/modules/dx/metadataBadge/metadataBadge.css

@@ -0,0 +1,41 @@
+@import "dxHelpers/reset";
+
+.badge {
+    --background: var(--dx-g-cloud-blue-natural-90);
+    --border-radius: var(--dx-g-spacing-xs);
+    --color: var(--dx-g-blue-vibrant-20);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    color: var(--dx-c-metadata-badge-color, var(--color));
+    background: var(--dx-c-metadata-badge-background, var(--background));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    padding: 0 var(--horizontal-spacing);
+    border-radius: var(--border-radius);
+    font-family: var(--dx-g-font-display);
+    font-size: 10px;
+    text-align: center;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.badge.size-small {
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-xs);
+
+    font-size: 8px;
+    letter-spacing: 0.5px;
+}
+
+@media screen and (max-width: 768px) {
+    .badge:not(.size-small) {
+        height: var(--dx-g-spacing-lg);
+        padding: 0 var(--dx-g-spacing-sm);
+        font-size: var(--dx-g-text-2xs);
+    }
+}

package/src/modules/dx/metadataBadge/metadataBadge.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style}>
+        <span>{value}</span>
+    </div>
+</template>

package/src/modules/dx/metadataBadge/metadataBadge.ts

@@ -0,0 +1,24 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Color, TypeBadgeSize } from "typings/custom";
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+
+export default class MetadataBadge extends LightningElement {
+    @api size: TypeBadgeSize = "default";
+    @api color?: Color;
+    @api value!: string;
+
+    private get className(): string {
+        return cx("badge", `size-${this.size}`);
+    }
+
+    private get style(): string {
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            if (variables) {
+                return buildStyleColorVariables(variables);
+            }
+        }
+        return "";
+    }
+}

package/src/modules/dx/modal/modal.css

@@ -0,0 +1,7 @@
+.dx-modal-drawer_container {
+    display: none !important;
+}
+
+.dx-modal-drawer_overlay {
+    display: none !important;
+}

package/src/modules/dx/modal/modal.html

@@ -0,0 +1,13 @@
+<template>
+    <div
+        class={containerClass}
+        onclick={onClickModal}
+        tabindex="0"
+        role="dialog"
+    >
+        <div style="pointer-events: all">
+            <slot onslotchange={onSlotChange}></slot>
+        </div>
+    </div>
+    <div class={overlayClass} onclick={onClickModal}></div>
+</template>

package/src/modules/dx/modal/modal.ts

@@ -0,0 +1,98 @@
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+import { LightningSlotElement } from "typings/custom";
+
+const CONTAINER_CLASS = "dx-modal-drawer_container";
+const OVERLAY_CLASS = "dx-modal-drawer_overlay";
+
+const modalStyle =
+    "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-content: center; align-items: center; z-index: 5000; height: 100%; width: 100%; pointer-events: none;";
+const overlayStyle =
+    "background-color: #195594; bottom: 0; height: 100%; left: 0; opacity: 0.62; position: fixed; right: 0; top: 0; width: 100%; z-index: calc(5000 - 1);";
+
+export default class Modal extends LightningElement {
+    private _open = false;
+    @api get open() {
+        return this._open;
+    }
+    set open(value) {
+        this._open = normalizeBoolean(value);
+        if (this._open) {
+            this.openModal();
+        } else {
+            this.closeModal();
+        }
+    }
+
+    private overlayClass = OVERLAY_CLASS;
+    private modal: HTMLElement | null = null;
+    private overlay: HTMLElement | null = null;
+    private root: HTMLElement | null = null;
+    private modalContent: HTMLElement | null = null;
+    private keydownListener: Event | null = null;
+
+    get containerClass(): string {
+        return CONTAINER_CLASS;
+    }
+
+    private onSlotChange = (e: LightningSlotElement) => {
+        // @ts-ignore
+        this.modalContent = e.target.assignedElements()[0];
+        if (!this.modal && !this.overlay) {
+            this.appendModalToHTML();
+        }
+    };
+
+    connectedCallback(): void {
+        document.addEventListener("keydown", this.handleKeyDown.bind(this));
+    }
+
+    disconnectedCallback(): void {
+        window.removeEventListener("keydown", this.handleKeyDown.bind(this));
+        this.modal?.remove();
+        this.overlay?.remove();
+    }
+
+    private handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.closeModal();
+        }
+    }
+
+    private appendModalToHTML = () => {
+        // @ts-ignore
+        this.root = document.querySelector("html");
+        this.modal = this.template.querySelector(`.${CONTAINER_CLASS}`);
+        this.overlay = this.template.querySelector(`.${OVERLAY_CLASS}`);
+        if (this.overlay && this.modal && this.modalContent && this.root) {
+            this.modal.setAttribute("style", modalStyle);
+            this.overlay.setAttribute("style", overlayStyle);
+            this.modal.querySelector("div")?.appendChild(this.modalContent);
+            if (this.open) {
+                this.openModal();
+            }
+        }
+    };
+
+    private onClickModal(e: any) {
+        if (e?.target?.className === OVERLAY_CLASS) {
+            this.closeModal();
+        }
+    }
+
+    private openModal() {
+        if (this.overlay && this.modal) {
+            this.root?.appendChild(this.modal);
+            this.root?.appendChild(this.overlay);
+            this.modal.querySelector("div")?.focus();
+        }
+    }
+
+    private closeModal = () => {
+        if (this.modal && this.overlay) {
+            this.modal.remove();
+            this.overlay.remove();
+            this.dispatchEvent(new CustomEvent("closemodal"));
+        }
+    };
+}

package/src/modules/dx/modalDrawer/modalDrawer.css

@@ -0,0 +1,41 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+    --dx-c-modal-padding-around: var(--dx-g-spacing-smd);
+    --dx-c-modal-height: calc(100vh - var(--dx-c-modal-padding-around) * 2);
+}
+
+dx-button {
+    display: block;
+    margin-left: auto;
+}
+
+.modal-drawer_container {
+    background-color: white;
+    height: var(--dx-c-modal-height);
+    left: 0;
+    padding: var(--dx-c-modal-padding-around);
+    position: fixed;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease;
+    top: 0;
+    width: inherit;
+    z-index: var(--dx-c-modal-drawer-z-index);
+    overflow-y: auto;
+}
+
+.modal-drawer_container.modal-drawer_active {
+    transform: translateX(0);
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -0,0 +1,11 @@
+<template>
+    <div class={containerClass}>
+        <slot></slot>
+        <dx-button onclick={handleToggleModal}>Done</dx-button>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleToggleModal}
+    ></div>
+</template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -0,0 +1,33 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class ModalDrawer extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleToggleModal();
+        }
+    }
+
+    handleToggleModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+}

package/src/modules/dx/pagination/pagination.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .dx-pagination {
     display: flex;
@@ -27,8 +27,7 @@
 }
 
 .dx-pagination-pages button {
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-md);
     border-radius: var(--dx-g-spacing-lg);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);

package/src/modules/dx/pagination/pagination.ts

@@ -1,5 +1,12 @@
 import classNames from "classnames";
 import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
+
+enum PaginationClickType {
+    Number,
+    Next,
+    Previous
+}
 
 export default class Pagination extends LightningElement {
     @api currentPage: string = "1";
@@ -76,18 +83,48 @@ export default class Pagination extends LightningElement {
     }
 
     private onPageChange(e: Event) {
+        const page = this.calculatePage(e);
+        const clickType = this.getPaginationClickType(e);
+
+        const clickText =
+            clickType === PaginationClickType.Number
+                ? page
+                : (e.target as HTMLElement).dataset.partId;
+
+        track(e.currentTarget!, "custEv_pagination", {
+            click_text: clickText,
+            click_url: window.location.href,
+            element_type: "button",
+            nav_type: "pagination",
+            nav_item: clickText
+        });
+
+        this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));
+    }
+
+    private getPaginationClickType(e: Event): PaginationClickType {
         const button = (e.target as HTMLElement).dataset.partId;
-        let page = this.returnPage(button);
-        if (page === 0) {
-            page = +(e.target as HTMLElement).dataset.pageId!;
+        if (button === "previous") {
+            return PaginationClickType.Previous;
+        } else if (button === "next") {
+            return PaginationClickType.Next;
         }
-        this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));
+
+        return PaginationClickType.Number;
     }
 
-    private returnPage(button: string) {
-        if (!button) {
-            return 0;
+    private calculatePage(e: Event) {
+        const clickType = this.getPaginationClickType(e);
+
+        let page = 0;
+        if (clickType === PaginationClickType.Previous) {
+            page = this._currentPage - 1;
+        } else if (clickType === PaginationClickType.Next) {
+            page = this._currentPage + 1;
+        } else {
+            page = +(e.target as HTMLElement).dataset.pageId!;
         }
-        return this._currentPage + (button === "previous" ? -1 : 1);
+
+        return page;
     }
 }

package/src/modules/dx/podcastHost/podcastHost.css

@@ -1,13 +1,19 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-host-img-width: 48px;
     --dx-c-host-img-margin-right: 16px;
 }
 
+dx-icon {
+    display: inline-block;
+    position: relative;
+    top: -1px;
+}
+
 .container {
-    background: white;
+    background: var(--dx-podcast-host-background-color);
     box-shadow: var(--dx-g-box-shadow-sm);
     border-radius: 16px;
     padding: 36px;
@@ -31,10 +37,11 @@
 
 .host-bio > p {
     margin: 16px 0;
+    color: var(--dx-g-text-body-color);
 }
 
 .dx-text-label-2 {
-    color: var(--dx-g-gray-30);
+    color: var(--dx-g-text-label-color);
 }
 
 @media (min-width: 640px) {

package/src/modules/dx/podcastHost/podcastHost.html

@@ -8,20 +8,19 @@
                 <h2>
                     <span class="dx-text-label-2">Hosted by</span>
                     <br />
-                    <span class="dx-text-heading-4">{fullName}</span>
+                    <span class="dx-text-display-6">{fullName}</span>
                 </h2>
             </div>
             <div class="host-bio">
                 <p>{bio}</p>
             </div>
-            <dx-button
-                href={twitterHref}
-                target="_blank"
-                variant="inline"
-                icon-symbol="twitter"
-                icon-sprite="brand"
-            >
-                Follow {firstName} on Twitter
+            <dx-button href={twitterHref} target="_blank" variant="inline">
+                Follow {firstName} on&nbsp;
+                <dx-icon
+                    size="xsmall"
+                    sprite="brand"
+                    symbol="twitter"
+                ></dx-icon>
             </dx-button>
         </div>
     </div>

package/src/modules/dx/popover/popover.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --popover-border-radius: var(
@@ -6,11 +6,14 @@
         var(--dx-g-spacing-sm)
     );
     --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
+    --popover-padding: var(--dx-c-popover-padding, --dx-g-spacing-sm);
 }
 
 .popover-container {
-    position: fixed;
-    z-index: var(--dx-g-z-index-max);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
     visibility: hidden;
     pointer-events: none;
 }
@@ -23,9 +26,9 @@
     width: 168px;
     max-width: calc(100vw - var(--dx-g-spacing-lg));
     max-height: 65vh;
-    padding: var(--dx-g-spacing-sm);
+    padding: var(--popover-padding);
     overflow-y: auto;
-    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition: var(--popover-transition);
     transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
@@ -38,7 +41,7 @@
 
 .popover-container_open .popover {
     opacity: 1;
-    transform: translateY(0);
+    transform: var(--popover-container-open-transform);
 }
 
 .popover-overridewidth {
@@ -61,3 +64,25 @@
 .popover-small {
     width: 136px;
 }
+
+.popover-arrow {
+    position: absolute;
+
+    /* Weird spacing here to satisfy our linter */
+    background: linear-gradient(
+        315deg,
+        transparent 4px,
+        white 4px
+    ); /* make only top half of rotated square visible */
+
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    border: var(--popover-border);
+    border-bottom: transparent;
+    border-right: transparent;
+    box-shadow: var(--dx-g-box-shadow-lg);
+    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition-delay: 0.02s;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
+}

package/src/modules/dx/popover/popover.html

@@ -1,10 +1,10 @@
 <template>
     <slot name="control" onslotchange={onSlotChange}></slot>
     <div class={containerClassName}>
+        <div class="popover-arrow" if:true={showArrow}></div>
         <div
             class={className}
             style={style}
-            aria-label={ariaLabel}
             part="content"
             onkeydown={onKeyDown}
         >