@salesforcedevs/dx-components 1.3.136 → 1.3.138-coveo-alpha1

package/lwc.config.json

@@ -77,6 +77,8 @@
         "dx/skipNavLink",
         "dx/socials",
         "dx/spinner",
+        "dx/stepSequence",
+        "dx/stepSequenceStep",
         "dx/tabPanel",
         "dx/tabPanelList",
         "dx/tbidAvatarButton",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.136",
+    "version": "1.3.138-coveo-alpha1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -39,6 +39,5 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    },
-    "gitHead": "c076bf146988d61bedc4710e6443a18d7e27b1ca"
+    }
 }

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -23,7 +23,7 @@ export default class CardBlogPost extends LightningElement {
     private onLinkClick(event: Event) {
         const payload = {
             click_text: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_title: this.title,
             element_type: "card",
             content_category: "link"

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -32,7 +32,7 @@ export default class CardCallout extends LightningElement {
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_ctaLinkClick", {
             click_text: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_title: this.title,
             element_type: "link",
             content_category: "cta"

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -39,13 +39,13 @@ export default class CardDocs extends LightningElement {
                     ...payloadInnerButton,
                     element_title: this.title,
                     click_text: slotElement.innerText,
-                    click_url: slotElement.href
+                    click_url: `${window.location.origin}${slotElement.href}`
                 });
                 track(event.currentTarget!, "custEv_linkClick", {
                     ...payloadInnerButton,
                     element_title: this.title,
                     click_text: slotElement.innerText,
-                    click_url: slotElement.href
+                    click_url: `${window.location.origin}${slotElement.href}`
                 });
             });
         });
@@ -56,7 +56,7 @@ export default class CardDocs extends LightningElement {
         const payloadCardInfo = {
             click_text: this.title,
             element_title: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_type: "link",
             content_category: "cta"
         };
@@ -68,7 +68,7 @@ export default class CardDocs extends LightningElement {
         const payloadCardTextInfo = {
             click_text: this.body,
             element_title: this.title,
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             element_type: "tile",
             content_category: "cta"
         };

package/src/modules/dx/cardNews/cardNews.css

@@ -39,6 +39,11 @@ p {
     margin: 16px 0;
 }
 
+.inline-button {
+    --dx-c-button-primary-color: var(--dx-g-blue-natural-40);
+    --dx-c-button-primary-color-hover: var(--dx-g-blue-natural-30);
+}
+
 img {
     display: none;
     margin: 0;

package/src/modules/dx/cardNews/cardNews.html

@@ -18,6 +18,7 @@
                 </dx-button>
 
                 <dx-button
+                    class="inline-button"
                     if:false={hasLargeButton}
                     variant="inline"
                     inline-text-color={buttonColor}

package/src/modules/dx/cardNews/cardNews.ts

@@ -67,7 +67,9 @@ export default class CardNews extends LightningElement {
     private trackClick(e: Event) {
         const payload = {
             click_text: this.buttonText,
-            click_url: this.href,
+            click_url: this.href.includes("http")
+                ? this.href
+                : `${window.location.origin}${this.href}`,
             element_title: this.title,
             element_type: "link",
             content_category: "cta"

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -119,7 +119,7 @@ export default class CardTrial extends LightningElement {
             click_text: this.label,
             element_title: "dx-button",
             element_type: "card",
-            click_url: this.href,
+            click_url: `${window.location.origin}${this.href}`,
             content_category: "cta"
         };
         track(e.currentTarget!, "custEv_signupStart", payload);

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -74,7 +74,7 @@ export default class CardTrial extends LightningElement {
                 click_text: this.buttonCta,
                 element_title: this.title,
                 element_type: "card",
-                click_url: this.href,
+                click_url: `${window.location.origin}${this.href}`,
                 content_category: "cta"
             };
             track(e.currentTarget!, "custEv_signupStart", payload);

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -374,6 +374,19 @@ a.image-container > img {
     display: block;
 }
 
+/* BUTTONS */
+
+.buttons {
+    display: flex;
+    padding-top: var(--item-spacing);
+    padding-bottom: var(--item-spacing);
+}
+
+dx-button {
+    display: inline-block;
+    padding-right: var(--dx-g-spacing-lg);
+}
+
 /* AUTHORS */
 
 .authors {
@@ -495,6 +508,14 @@ dx-image-and-label {
         line-height: var(--dx-g-spacing-lg);
     }
 
+    .buttons {
+        flex-direction: column;
+    }
+
+    dx-button {
+        padding-bottom: var(--dx-g-spacing-sm);
+    }
+
     .authors {
         padding-top: 0;
     }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -50,6 +50,27 @@
                     </template>
                 </div>
                 <span class="body dx-text-body-1">{body}</span>
+                <div class="buttons" if:true={hasButtons}>
+                    <dx-button
+                        if:true={ctaPrimaryLabel}
+                        href={ctaPrimaryHref}
+                        icon-symbol={ctaPrimarySymbol}
+                        target={ctaPrimaryTarget}
+                        size="large"
+                    >
+                        {ctaPrimaryLabel}
+                    </dx-button>
+                    <dx-button
+                        if:true={ctaSecondaryLabel}
+                        href={ctaSecondaryHref}
+                        variant="secondary"
+                        icon-symbol={ctaSecondarySymbol}
+                        target={ctaSecondaryTarget}
+                        size="large"
+                    >
+                        {ctaSecondaryLabel}
+                    </dx-button>
+                </div>
                 <div class="slot-container">
                     <slot onslotchange={onSlotChange}></slot>
                 </div>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -11,6 +11,14 @@ export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
     @api labelAsPrimaryHeading: boolean = false;
     @api body!: string;
+    @api ctaPrimaryLabel?: string;
+    @api ctaPrimaryHref?: string;
+    @api ctaPrimarySymbol?: string;
+    @api ctaPrimaryTarget?: string;
+    @api ctaSecondaryLabel?: string;
+    @api ctaSecondaryHref?: string;
+    @api ctaSecondarySymbol?: string;
+    @api ctaSecondaryTarget?: string;
     @api imgSrc?: string;
     @api imgAlt?: string = "Featured content image";
     @api imgPlacement?: "inline" | "below" = "inline";
@@ -69,6 +77,10 @@ export default class FeaturedContentHeader extends LightningElement {
         );
     }
 
+    private get hasButtons() {
+        return this.ctaPrimaryLabel && this.ctaSecondaryLabel;
+    }
+
     private get style() {
         return cx(
             this.backgroundImg &&

package/src/modules/dx/featuresListHeader/featuresListHeader.css

@@ -4,6 +4,8 @@
 .container {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     padding: 0 var(--dx-g-page-padding-horizontal);
 }
 
@@ -35,8 +37,8 @@
 }
 
 .features-list {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     margin-top: var(--dx-g-spacing-lg);
     gap: var(--dx-g-spacing-md);
 }
@@ -44,10 +46,8 @@
 .feature-item {
     display: flex;
     align-items: center;
-    text-align: left;
     gap: var(--dx-g-spacing-smd);
-    flex-basis: calc(50% - var(--dx-g-spacing-smd));
-    flex-grow: 1;
+    text-align: left;
 }
 
 .feature-item span {
@@ -62,10 +62,6 @@ dx-button {
     margin-top: var(--dx-g-spacing-smd);
 }
 
-img {
-    object-fit: contain;
-}
-
 img.mobile {
     display: none;
 }
@@ -94,6 +90,7 @@ img.mobile {
     img.mobile {
         display: block;
         margin-top: var(--dx-g-spacing-3xl);
+        margin-bottom: var(--dx-g-spacing-4xl);
     }
 }
 
@@ -108,3 +105,9 @@ img.mobile {
         line-height: var(--dx-g-text-4xl);
     }
 }
+
+@media screen and (max-width: 640px) {
+    .features-list {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/dx/featuresListHeader/featuresListHeader.ts

@@ -42,7 +42,7 @@ export default class FeaturesListHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabel,
-                click_url: this.ctaHref,
+                click_url: `${window.location.origin}${this.ctaHref}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -50,7 +50,7 @@ export default class FeaturesListHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
                 element_title: this.title,
-                click_url: this.ctaHref,
+                click_url: `${window.location.origin}${this.ctaHref}`,
                 element_type: "link",
                 content_category: "cta"
             });
@@ -61,7 +61,7 @@ export default class FeaturesListHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabelSecondary,
-                click_url: this.ctaHrefSecondary,
+                click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -69,7 +69,7 @@ export default class FeaturesListHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
                 element_title: this.title,
-                click_url: this.ctaHrefSecondary,
+                click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "link",
                 content_category: "cta"
             });

package/src/modules/dx/footer/footer.html

@@ -7,8 +7,10 @@
             <div class="graphic graphic-trees" alt=""></div>
             <div class="graphic graphic-mountains" alt=""></div>
             <div class="graphic graphic-mountains-mobile" alt=""></div>
-            <span class="subheading">Sign up for developer updates</span>
-            <dx-button href="/newsletter">SIGN UP</dx-button>
+            <span class="subheading">{signupLabel}</span>
+            <dx-button onclick={handleSignup} href={signupPath}>
+                SIGN UP
+            </dx-button>
             <div class="graphic graphic-trees-small" alt=""></div>
         </div>
         <div
@@ -18,11 +20,15 @@
             <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
                 <h2 class="dx-text-display-4">
-                    Get timely developer updates
-                    <br />
-                    delivered to your inbox.
+                    <dx-formatted-rich-text
+                        value={signupLabel}
+                    ></dx-formatted-rich-text>
                 </h2>
-                <dx-button href="/newsletter" size="large">
+                <dx-button
+                    onclick={handleSignup}
+                    href={signupPath}
+                    size="large"
+                >
                     Sign up now
                 </dx-button>
             </div>

package/src/modules/dx/footer/footer.ts

@@ -8,6 +8,7 @@ import {
     socialLinks,
     intellectualHref
 } from "./links";
+import { track } from "dxUtils/analytics";
 
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
@@ -35,6 +36,7 @@ export default class Footer extends LightningElement {
     private intellectualHref = intellectualHref;
     private socialLinks = socialLinks;
     private termsLinks = termsLinks;
+    private signupPath = "/newsletter";
 
     @api
     set variant(value: FooterVariant) {
@@ -80,6 +82,12 @@ export default class Footer extends LightningElement {
         return date.getFullYear();
     }
 
+    get signupLabel(): string {
+        return this.showLargeSignup
+            ? "Get timely developer updates<br />delivered to your inbox."
+            : "Sign up for developer updates";
+    }
+
     get className() {
         return cx(`signup-variant-${this.variant}`);
     }
@@ -98,4 +106,16 @@ export default class Footer extends LightningElement {
             "terms-only"
         ].includes(value);
     }
+
+    private handleSignup(e: Event) {
+        track(e.currentTarget, "custEv_ctaButtonClick", {
+            click_text: this.signupLabel,
+            click_url: `${window.location.origin}${this.signupPath}`,
+            element_type: "button",
+            element_title: this.showSmallSignup
+                ? "Get Developer Updates"
+                : "get the latest developer updates.",
+            content_category: "cta"
+        });
+    }
 }

package/src/modules/dx/footerOption/footerOption.ts

@@ -11,7 +11,10 @@ export default class FooterOption extends LightningElement {
     sendGtm(e: PointerEvent) {
         track(e.currentTarget, "custEv_bottomNavLinkClick", {
             click_text: this.label || undefined,
-            click_url: this.href || undefined,
+            click_url:
+                (this.href && this.href.includes("http")
+                    ? this.href
+                    : `${window.location.origin}${this.href}`) || undefined,
             nav_item: this.label || undefined,
             nav_level: "1",
             element_type: "link",
@@ -20,7 +23,10 @@ export default class FooterOption extends LightningElement {
         track(e.currentTarget!, "custEv_linkClick", {
             click_text: this.label,
             element_title: this.generalLabel,
-            click_url: this.href,
+            click_url:
+                (this.href && this.href.includes("http")
+                    ? this.href
+                    : `${window.location.origin}${this.href}`) || undefined,
             element_type: "link",
             content_category: "cta"
         });

package/src/modules/dx/groupText/groupText.ts

@@ -87,7 +87,11 @@ export default class GroupText extends LightningElement {
         track(event.target!, "custEv_ctaButtonClick", {
             click_text: event.currentTarget.innerText,
             item_title: event.currentTarget.innerText,
-            click_url: event.currentTarget.href,
+            click_url: `${
+                event.currentTarget.href.includes("http")
+                    ? event.currentTarget.href
+                    : window.location.origin + event.currentTarget.href
+            }`,
             element_type: "button",
             element_title: this.title,
             content_category: "cta"

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

@@ -39,7 +39,9 @@ export default class MainContentHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabel,
-                click_url: this.ctaHref,
+                click_url: this.ctaHref.includes("http")
+                    ? this.ctaHref
+                    : `${window.location.origin}${this.ctaHref}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -47,7 +49,9 @@ export default class MainContentHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
                 element_title: this.title,
-                click_url: this.ctaHref,
+                click_url: this.ctaHref.includes("http")
+                    ? this.ctaHref
+                    : `${window.location.origin}${this.ctaHref}`,
                 element_type: "link",
                 content_category: "cta"
             });
@@ -58,7 +62,9 @@ export default class MainContentHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 click_text: this.ctaLabelSecondary,
-                click_url: this.ctaHrefSecondary,
+                click_url: this.ctaHrefSecondary!.includes("http")
+                    ? this.ctaHrefSecondary
+                    : `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "button",
                 element_title: this.title,
                 content_category: "cta"
@@ -66,7 +72,9 @@ export default class MainContentHeader extends LightningElement {
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
                 element_title: this.title,
-                click_url: this.ctaHrefSecondary,
+                click_url: this.ctaHrefSecondary!.includes("http")
+                    ? this.ctaHrefSecondary
+                    : `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "link",
                 content_category: "cta"
             });

package/src/modules/dx/section/section.html

@@ -37,6 +37,7 @@
                 variant={ctaBtnVariant}
                 icon-symbol={ctaBtnSymbol}
                 target={ctaBtnTarget}
+                onclick={handleLabelClick}
             >
                 {ctaLabel}
             </dx-button>

package/src/modules/dx/section/section.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
 
 export default class Section extends LightningElement {
     @api backgroundColor: string = "transparent";
@@ -48,4 +49,16 @@ export default class Section extends LightningElement {
     private get hasText(): boolean {
         return !!(this.title || this.label || this.subtitle);
     }
+
+    private handleLabelClick(e: Event) {
+        track(e.target!, "custEv_ctaLinkClick", {
+            click_text: this.ctaLabel,
+            element_title: this.title,
+            click_url: this.ctaHref!.includes("http")
+                ? this.ctaHref
+                : `${window.location.origin}${this.ctaHref}`,
+            element_type: "link",
+            content_category: "cta"
+        });
+    }
 }

package/src/modules/dx/sectionBanner/sectionBanner.html

@@ -11,7 +11,7 @@
                 {title}
             </h3>
             <div class="content-body-container">
-                <img if:true={hasQuote} src="/assets/svg/quotes.svg" alt="" />
+                <img if:true={hasQuote} src={quoteGraphicSrc} alt="" />
                 <div class={quoteContentStyle}>
                     <p class={contentBodyStyle}>{body}</p>
                     <p if:true={footNote} class="foot-note dx-text-display-7">

package/src/modules/dx/sectionBanner/sectionBanner.ts

@@ -11,6 +11,7 @@ export default class SectionBanner extends LightningElement {
     @api hideTopGraphic = false;
     @api backgroundColor = "indigo-vibrant-20";
     @api hasQuote = false;
+    @api quoteGraphicSrc?: string;
 
     get containerStyle() {
         return cx("container", !this.hideTopGraphic && "top-margin");

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -45,6 +45,7 @@ export default class SidebarSearch extends LightningElement {
     }
     set coveoAdvancedQueryConfig(value) {
         const jsonValue = toJson(value);
+        console.log("Coveo AQ query: " + value);
         const hasChanged =
             this._coveoAdvancedQueryConfig &&
             Object.entries(jsonValue).some(

package/src/modules/dx/stepSequence/stepSequence.css

@@ -0,0 +1,46 @@
+/*
+  This CSS will automatically handle the displaying of child dx-step-sequence-step components,
+  including animations, if they are enabled. There is no other UI for this component.
+*/
+::slotted(*) {
+    position: absolute;
+    top: 0;
+    transition: transform 0.4s ease, opacity 0.4s ease;
+    width: 100%;
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.no-animations ::slotted(*) {
+    display: none;
+}
+
+::slotted(.visible) {
+    display: block;
+}
+
+::slotted(.active-step) {
+    position: relative;
+}
+
+::slotted(.animate-left-out) {
+    opacity: 0;
+    transform: translateX(-100%);
+}
+
+::slotted(.animate-in) {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+::slotted(.animate-right-out) {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+.step-sequence-container {
+    overflow: hidden;
+    position: relative;
+}

package/src/modules/dx/stepSequence/stepSequence.html

@@ -0,0 +1,9 @@
+<template>
+    <div class={containerClassName}>
+        <slot
+            onslotchange={handleSlotChange}
+            onstepincrement={handleStepIncrement}
+            onstepdecrement={handleStepDecrement}
+        ></slot>
+    </div>
+</template>

package/src/modules/dx/stepSequence/stepSequence.ts

@@ -0,0 +1,197 @@
+/* eslint-disable no-restricted-globals */
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+
+// This is a UI-agnostic wrapper component that turns its children components into a sequence of
+// of steps. The children must be dx-step-sequence-step components. Navigation works both via the browser's
+// forward/back buttons and via any action buttons defined in the dx-step-sequence-step components (see that
+// component for details on the action buttons).
+export default class StepSequence extends LightningElement {
+    @api initialStepIndex: string | undefined;
+    @api animateTransitions = false;
+
+    private currentStepIndex = 0;
+    private steps: Array<HTMLElement> = [];
+    private isHiddenForInitialAnimation = true;
+
+    private get containerClassName() {
+        return cx("step-sequence-container", {
+            "no-animations": !this.animateTransitions,
+            hidden: this.isHiddenForInitialAnimation
+        });
+    }
+
+    connectedCallback() {
+        const initialStepIndex = parseInt(this.initialStepIndex as string, 10);
+        if (!isNaN(initialStepIndex)) {
+            this.currentStepIndex = initialStepIndex;
+        }
+        history.replaceState(
+            {
+                currentStepIndex: this.currentStepIndex
+            },
+            ""
+        );
+        window.addEventListener("popstate", this.handleHistoryPopstate);
+        if (this.animateTransitions) {
+            this.addEventListener("transitionend", this.handleTransitionEnd);
+        } else {
+            this.isHiddenForInitialAnimation = false;
+        }
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("popstate", this.handleHistoryPopstate);
+        this.removeEventListener("transitionend", this.handleTransitionEnd);
+    }
+
+    // Used only if this.animateTransitions is truthy
+    private handleTransitionEnd = ({ target }: Event) => {
+        if (
+            (target as HTMLElement).tagName?.toLowerCase() !==
+            "dx-step-sequence-step"
+        ) {
+            // Ignore transitions of other nested elements
+            return;
+        }
+
+        if (this.isHiddenForInitialAnimation) {
+            this.isHiddenForInitialAnimation = false;
+        }
+
+        // Ensure subsequent steps are no longer visible:
+        const prevStep = this.steps[this.currentStepIndex - 1];
+        const nextStep = this.steps[this.currentStepIndex + 1];
+        if (prevStep?.classList.contains("visible")) {
+            prevStep.classList.remove("visible");
+        }
+        if (nextStep?.classList.contains("visible")) {
+            nextStep.classList.remove("visible");
+        }
+
+        // Mark the current step as fully active:
+        this.steps[this.currentStepIndex].classList.add("active-step");
+    };
+
+    private changeActiveStep(nextStepIndex: number, updateHistory = true) {
+        if (nextStepIndex === this.currentStepIndex) {
+            // Should never happen, but covering all logical bases. Nothing to do here.
+            return;
+        }
+
+        if (!this.animateTransitions) {
+            this.steps[this.currentStepIndex].className = "";
+            this.steps[nextStepIndex].className = "visible active-step";
+        } else {
+            // If animations are enabled, we need to animate in the correct directions:
+            if (nextStepIndex > this.currentStepIndex) {
+                this.steps[this.currentStepIndex].className =
+                    "visible animate-left-out";
+                this.steps[nextStepIndex].className = "visible animate-in";
+            } else {
+                this.steps[this.currentStepIndex].className =
+                    "visible animate-right-out";
+                this.steps[nextStepIndex].className = "visible animate-in";
+            }
+        }
+
+        if (updateHistory) {
+            history.pushState(
+                {
+                    currentStepIndex: nextStepIndex
+                },
+                ""
+            );
+        }
+        this.currentStepIndex = nextStepIndex;
+    }
+
+    private initializeStepAnimationClasses(
+        currentStepIndex: number,
+        step: HTMLElement,
+        stepIndex: number
+    ) {
+        // All steps to the "left" of the current step are treated as though they've already
+        // animated out in that direction, and similarly for all steps to the "right." Only
+        // the current step is initialized as visible and active.
+        if (stepIndex < currentStepIndex) {
+            step.className = "animate-left-out";
+        } else if (stepIndex > currentStepIndex) {
+            step.className = "animate-right-out";
+        } else {
+            step.className = "visible active-step";
+        }
+    }
+
+    // This method is available in case there are scenarios where a sequence needs to "jump" in some cases
+    @api
+    public jumpToStep(stepIndex: number) {
+        if (stepIndex < 0 || stepIndex >= this.steps.length) {
+            // illegal value; ignore
+            return;
+        }
+
+        this.changeActiveStep(stepIndex);
+
+        if (this.animateTransitions) {
+            this.steps.forEach((step, index) =>
+                this.initializeStepAnimationClasses(stepIndex, step, index)
+            );
+        }
+    }
+
+    handleHistoryPopstate = ({ state }: PopStateEvent) => {
+        if (typeof state.currentStepIndex === "number") {
+            this.changeActiveStep(state.currentStepIndex, false);
+        }
+    };
+
+    handleStepDecrement(e: CustomEvent) {
+        e.stopPropagation();
+        if (this.currentStepIndex <= 0) {
+            return;
+        }
+        this.changeActiveStep(this.currentStepIndex - 1);
+    }
+
+    handleStepIncrement(e: CustomEvent) {
+        e.stopPropagation();
+        if (this.currentStepIndex >= this.steps.length - 1) {
+            return;
+        }
+        this.changeActiveStep(this.currentStepIndex + 1);
+    }
+
+    // Assign steps and appropriate classNames when slots are loaded. This component was built on
+    // the assumption that the slotChange will only happen at initial load, though it SHOULD still
+    // work even if the slots are changed later (though note that the value of
+    // `this.currentStepIndex` will be applied to the new slotted elements; call `jumpToStep` to
+    // change it).
+    handleSlotChange(e: Event) {
+        const slot = e.target as HTMLSlotElement;
+        this.steps = slot.assignedElements() as HTMLElement[];
+        if (!this.animateTransitions) {
+            this.steps[this.currentStepIndex].className = "visible active-step";
+        } else {
+            // For transition animations to be visible, the container must have a height that will
+            // keep the components visible as they transition in and out. Currently this component
+            // will have at least the height of the "tallest" slotted element.
+            let minHeight = 0;
+            this.steps.forEach((step, index) => {
+                if (step.clientHeight > minHeight) {
+                    minHeight = step.clientHeight;
+                }
+                this.initializeStepAnimationClasses(
+                    this.currentStepIndex,
+                    step,
+                    index
+                );
+            });
+            if (minHeight > 0) {
+                this.template.querySelector(
+                    ".step-sequence-container"
+                )!.style.minHeight = `${minHeight}px`;
+            }
+        }
+    }
+}

package/src/modules/dx/stepSequenceStep/stepSequenceStep.html

@@ -0,0 +1,3 @@
+<template>
+    <slot onslotchange={handleSlotChange}></slot>
+</template>

package/src/modules/dx/stepSequenceStep/stepSequenceStep.ts

@@ -0,0 +1,60 @@
+import { LightningElement } from "lwc";
+
+// A UI-agnostic component meant to be used as a child of dx-step-sequence. The component
+// automatically enables "go forward" and "go back" functionality for any slotted element's
+// ".primary-action" child and ".secondary-action" child, respectively. If the
+// dx-step-sequence has `animateTransitions` set to `true`, the transitions will auto-animate.
+// Child component action buttons can still perform whatever actions they want before the
+// step proceeds.
+export default class StepSequenceStep extends LightningElement {
+    handleSlotChange(e: Event) {
+        const slot = e.target as HTMLSlotElement;
+        const rootElement = slot.assignedElements()[0];
+        const primaryActionElement = rootElement.querySelector(
+            ".primary-action"
+        ) as HTMLElement | undefined;
+        const secondaryActionElement = rootElement.querySelector(
+            ".secondary-action"
+        ) as HTMLElement | undefined;
+
+        if (primaryActionElement) {
+            const assignedOnClick = primaryActionElement.onclick;
+            primaryActionElement.onclick = (event: MouseEvent) => {
+                assignedOnClick?.call(primaryActionElement, event);
+                // Child elements can prevent the default "go forward" action.
+                if (!event.defaultPrevented) {
+                    this.goForward();
+                }
+            };
+        }
+
+        if (secondaryActionElement) {
+            const assignedOnClick = secondaryActionElement.onclick;
+            secondaryActionElement.onclick = (event: MouseEvent) => {
+                assignedOnClick?.call(secondaryActionElement, event);
+                // Child elements can prevent the default "go back" action.
+                if (!event.defaultPrevented) {
+                    this.goBack();
+                }
+            };
+        }
+    }
+
+    goForward() {
+        this.dispatchEvent(
+            new CustomEvent("stepincrement", {
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    goBack() {
+        this.dispatchEvent(
+            new CustomEvent("stepdecrement", {
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+}

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

@@ -53,7 +53,7 @@ export default class Toc extends LightningElement {
         sendGtm(e.currentTarget!, "custEv_tableOfContents", {
             click_text: text,
             clickAction: "click",
-            click_url: href,
+            click_url: `${window.location.href}${href}`,
             element_title: this.title,
             element_type: "link",
             content_category: "cta"

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

@@ -174,7 +174,10 @@ export default class TreeItem extends LightningElement {
     private sendGtm(event: Event) {
         track(event.currentTarget!, "custEv_leftNavLinkClick", {
             click_text: this._treeNode.label,
-            click_url: this.href,
+            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",
@@ -184,7 +187,10 @@ export default class TreeItem extends LightningElement {
         track(event.currentTarget!, "custEv_linkClick", {
             click_text: this._treeNode.label,
             element_title: this.rootParentLabel,
-            click_url: this.href,
+            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"
         });

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.