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

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

@@ -1,20 +1,14 @@
 <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>
+    <div class="toc" role="navigation">
+        <div class="toc toc_content">
+            <h2 class="dx-text-display-8 toc_title">{header}</h2>
             <template for:each={options} for:item="option">
                 <a
                     href={option.anchor}
                     class={option.className}
                     onclick={onClick}
                     contentid={option.id}
+                    data-text={option.label}
                     key={option.id}
                 >
                     {option.label}
@@ -22,7 +16,7 @@
             </template>
         </div>
     </div>
-    <div if:true={showContent}>
+    <div>
         <slot name="view-pdf"></slot>
     </div>
 </template>

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

@@ -1,10 +1,11 @@
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import { ContentElement } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
+import { track as sendGtm } from "dxUtils/analytics";
 
 export default class Toc extends LightningElement {
-    @api title!: string;
+    @api header!: string;
 
     @api
     get value() {
@@ -34,44 +35,32 @@ export default class Toc extends LightningElement {
     }
 
     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");
+        const text = target.getAttribute("data-text");
+        const href = target.getAttribute("href");
+
         this.dispatchEvent(
-            new CustomEvent("selectedcontent", { detail: { name: id } })
+            new CustomEvent("selectedcontent", {
+                detail: { name: id },
+                bubbles: true,
+                composed: true
+            })
         );
+
         this._value = id!;
-    }
 
-    private toggleShowContent() {
-        this.showContent = !this.showContent;
+        sendGtm(e.currentTarget!, "custEv_tableOfContents", {
+            click_text: text,
+            clickAction: "click",
+            click_url: `${window.location.href}${href}`,
+            element_title: this.header,
+            element_type: "link",
+            content_category: "cta"
+        });
     }
 }

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

@@ -33,4 +33,5 @@
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-xs);
     color: white;
+    line-height: var(--dx-g-text-xs);
 }

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

@@ -0,0 +1,26 @@
+: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;
+    flex-wrap: wrap;
+}
+
+.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 "dxUtils/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
+        }));
+    }
+}

package/src/modules/dx/trafficLabeler/trafficLabeler.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/trafficLabeler/trafficLabeler.ts

@@ -0,0 +1,58 @@
+import { logCoveoPageView } from "docUtils/utils";
+import { LightningElement, api } from "lwc";
+
+const REDUNDANT_INSTANCE_ERROR_MESSAGE =
+    "Multiple <dx-traffic-labeler>s detected, this should never be the case.";
+
+declare module globalThis {
+    let singletonTrafficLabelerConnected: boolean;
+}
+
+export default class TrafficLabeler extends LightningElement {
+    @api internalIps?: string;
+    @api coveoOrganizationId!: string;
+    @api coveoAnalyticsToken!: string;
+
+    connectedCallback(): void {
+        if (!globalThis.singletonTrafficLabelerConnected) {
+            globalThis.singletonTrafficLabelerConnected = true;
+            if (this.internalIps) {
+                this.evaluateVPNAddress();
+            }
+        } else {
+            console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
+        }
+
+        logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
+    }
+
+    async evaluateVPNAddress() {
+        try {
+            const ipifyResult = await fetch(
+                "https://api.ipify.org/?format=json"
+            );
+            const result = await ipifyResult.json();
+
+            const internalIps = this.internalIps?.split(",");
+
+            const isInternal = internalIps?.some((value) => {
+                const regex = new RegExp(value);
+                return regex.test(result.ip);
+            });
+
+            if (isInternal) {
+                this.setTrafficType("internal");
+            }
+        } catch (error) {
+            console.error("fetch failed ", error);
+        }
+    }
+
+    setTrafficType(trafficType: "internal" | "external") {
+        // @ts-ignore)
+        const dataLayer = (window.dataLayer = window.dataLayer || []);
+        dataLayer.push({
+            traffic_type: trafficType
+        });
+    }
+}

package/src/modules/dx/tree/tree.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

package/src/modules/dx/tree/tree.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { TreeNode, InternalTreeNode } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 import { TreeHandler } from "./treeHandler";
 
 export default class Tree extends LightningElement {
@@ -63,6 +63,14 @@ export default class Tree extends LightningElement {
         if (node) {
             node.isExpanded = !node.isExpanded;
         }
+        const { name, isSelectAction, isExpanded } = event.detail;
+        this.dispatchEvent(
+            new CustomEvent("expandcollapse", {
+                detail: { name, isSelectAction, isExpanded },
+                composed: true,
+                bubbles: true
+            })
+        );
     }
 
     onRegister(event: CustomEvent<{ key: string; setExpanded: Function }>) {

package/src/modules/dx/tree/treeHandler.ts

@@ -1,4 +1,5 @@
 import type { InternalTreeNode, TreeNode } from "typings/custom";
+import { normalizeBoolean } from "dxUtils/normalizers";
 type MapItem = {
     node: InternalTreeNode;
     parent?: MapItem;
@@ -62,8 +63,11 @@ export class TreeHandler {
             ),
             level: level,
             isExpanded: node.isExpanded || false,
+            isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
-            method: node.method
+            method: node.method,
+            isChanged: normalizeBoolean(node.isChanged),
+            isChildChanged: normalizeBoolean(node.isChildChanged)
         };
 
         const mapItem = { node: convertedNode, parent };

package/src/modules/dx/treeItem/treeItem.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;
@@ -12,3 +12,14 @@ button {
 button:focus {
     outline-offset: -1px;
 }
+
+.tree-children-loading {
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
+        var(--dx-g-global-header-padding-horizontal);
+}
+
+@media (max-width: 768px) {
+    .tree-children-loading {
+        width: 100%;
+    }
+}

package/src/modules/dx/treeItem/treeItem.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} target={target} onclick={onLinkClick}>
+    <a href={href} target={target} onclick={onLinkClick} tabindex="-1">
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -8,9 +8,17 @@
             has-children={hasChildren}
             is-selected={isSelected}
             oniconclick={onIconClick}
+            show-arrow={isParent}
+            target={target}
         ></dx-tree-tile>
     </a>
-    <template if:true={showChildren}>
+    <img
+        if:true={showChildrenLoading}
+        class="tree-children-loading"
+        src="https://a.sfdcstatic.com/developer-website/images/sidebar-item-loading.svg"
+        alt="childrenLoading"
+    />
+    <template if:true={showChildren} tabindex="0">
         <template for:each={treeNode.children} for:item="child">
             <dx-tree-item
                 key={child.key}

package/src/modules/dx/treeItem/treeItem.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
-import { track } from "dx/instrumentation";
-import { SidebarGtmAction } from "typings/custom";
+import { track } from "dxUtils/analytics";
+import { isInViewport } from "dxUtils/browser";
 
 const DEFAULT_TARGET = "_self";
 
@@ -17,10 +17,13 @@ export default class TreeItem extends LightningElement {
     public set treeNode(node) {
         this._treeNode = node;
         this.isExpanded = (node && node.isExpanded) || false;
+        this.isChildrenLoading = (node && node.isChildrenLoading) || false;
     }
 
     private _treeNode!: InternalTreeNode;
     private isExpanded: boolean = false;
+    private isChildrenLoading: boolean = false;
+    private rootParentLabel: string = "";
 
     private get isSelected(): boolean {
         return this._treeNode.key === this.selectedKey;
@@ -34,10 +37,44 @@ export default class TreeItem extends LightningElement {
         );
     }
 
+    private get showChildrenLoading(): boolean {
+        return this.isExpanded && !this.hasChildren && this.isChildrenLoading;
+    }
+
+    private get isParent(): boolean {
+        return this.hasChildren || this.isChildrenLoading;
+    }
+
     private get showChildren(): boolean {
         return this.isExpanded && this.hasChildren;
     }
 
+    private get treeLabels(): string {
+        let parentEl = (
+            this.template.querySelector("dx-tree-tile")?.getRootNode() as any
+        ).host;
+
+        if (!parentEl) {
+            return "";
+        }
+
+        const parentLabels = [];
+
+        while (parentEl) {
+            parentEl = parentEl?.getRootNode()?.host;
+
+            if (parentEl && parentEl.treeNode) {
+                parentLabels.push(parentEl.treeNode.label);
+            }
+        }
+
+        if (parentEl?.isRoot) {
+            this.rootParentLabel = parentEl.treeNode.label;
+        }
+
+        return `${parentLabels.reverse().join(":")}:${this.treeNode.label}`;
+    }
+
     private get href(): string | undefined {
         return (
             (this._treeNode.link && this._treeNode.link.href) ||
@@ -54,34 +91,67 @@ export default class TreeItem extends LightningElement {
     }
 
     connectedCallback(): void {
-        if (this.hasChildren) {
+        if (this.isParent) {
             this.fireEvent("register", {
                 setExpanded: this.setExpanded.bind(this)
             });
         }
     }
 
+    renderedCallback(): void {
+        this.sendEventToParentIfSelected();
+    }
+
+    private sendEventToParentIfSelected(): void {
+        /**
+         * This is to send selected element reference to parent if it's not visible in the viewport
+         * Parent component will use the elements offsetTop scrollTo that element's position
+         */
+        if (this.isSelected) {
+            const element = this.template.querySelector("dx-tree-tile");
+            if (element && !isInViewport(element)) {
+                this.fireEvent("selecteditemrendered", {
+                    element
+                });
+            }
+        }
+    }
+
     private onIconClick(event: CustomEvent): void {
-        this.doExpand();
-        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
+        const isSelectAction = false;
+        this.doExpand(isSelectAction);
+        this.sendGtm(event);
     }
 
-    private onLinkClick(event: Event): void {
-        if (!(this._treeNode.link && this._treeNode.link.href)) {
+    private preventDefaultLinkBehavior(event: Event) {
+        // prevent page refresh if href isn't present or link is already active
+        if (
+            !this._treeNode.link?.href ||
+            this._treeNode.link?.href === window.location.pathname
+        ) {
             event.preventDefault();
         }
+    }
+
+    private onLinkClick(event: Event): void {
+        this.preventDefaultLinkBehavior(event);
 
-        if (this.hasChildren) {
-            this.doExpand();
+        if (this.isParent) {
+            const isSelectAction = true;
+            this.doExpand(isSelectAction);
         }
 
-        this.sendGtm(event, "click");
+        this.sendGtm(event);
         this.fireEvent("tileselected", { name: this._treeNode.name });
     }
 
-    private doExpand(): void {
+    private doExpand(isSelectAction: boolean): void {
         this.isExpanded = !this.isExpanded;
-        this.fireEvent("expandcollapse");
+        this.fireEvent("expandcollapse", {
+            name: this._treeNode.name,
+            isSelectAction,
+            isExpanded: this.isExpanded
+        });
     }
 
     private fireEvent(type: string, detail = {}): void {
@@ -101,10 +171,28 @@ export default class TreeItem extends LightningElement {
         this.isExpanded = value;
     }
 
-    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
+    private sendGtm(event: Event) {
         track(event.currentTarget!, "custEv_leftNavLinkClick", {
-            clickText: this._treeNode.label,
-            sideNavAction
+            click_text: this._treeNode.label,
+            click_url: this.href!.includes("/docs/")
+                ? `${window.location.origin}${this.href}`
+                : // TODO: this is a hack to get the correct url for the left nav
+                  window.location.href.replace(/[^/]+$/, this.href!),
+            nav_level: this._treeNode.level + 1,
+            nav_item: this.treeLabels,
+            nav_type: "left nav bar",
+            element_type: "link"
+        });
+
+        track(event.currentTarget!, "custEv_linkClick", {
+            click_text: this._treeNode.label,
+            element_title: this.rootParentLabel,
+            click_url: this.href!.includes("/docs/")
+                ? `${window.location.origin}${this.href}`
+                : // TODO: this is a hack to get the correct url for the left nav
+                  window.location.href.replace(/[^/]+$/, this.href!),
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }