@salesforcedevs/dx-components 1.3.258 → 1.3.260

package/lwc.config.json

@@ -5,6 +5,7 @@
         { "npm": "@salesforcedevs/docs-components" }
     ],
     "expose": [
+        "dx/agenda",
         "dx/alert",
         "dx/audio",
         "dx/banner",
@@ -14,11 +15,13 @@
         "dx/buttonToggle",
         "dx/cardBlogPost",
         "dx/cardCallout",
+        "dx/cardClickthrough",
         "dx/cardContent",
         "dx/cardDemo",
         "dx/cardDocs",
         "dx/cardEvent",
         "dx/cardExpanded",
+        "dx/cardGrid",
         "dx/cardGridDocs",
         "dx/cardMinimal",
         "dx/cardNews",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.258",
+    "version": "1.3.260",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,5 +45,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "1a1c249fe121c056d038fa06f99be150f3b799fd"
+    "gitHead": "b839cf5e249f61097ec60de9f07257c7ddbdf0e5"
 }

package/src/modules/dx/agenda/agenda.css

@@ -0,0 +1,97 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+ul {
+    list-style: none;
+}
+
+.container {
+    max-width: 840px;
+    margin: 0 auto;
+}
+
+.detail-list-title {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.detail-list-content-container {
+    position: relative;
+}
+
+.detail-list-content {
+    background-color: white;
+    border-color: var(--dx-g-gray-90);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 16px;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-2xl);
+}
+
+.detail-list-item {
+    align-items: center;
+    display: flex;
+    gap: var(--dx-g-spacing-xl);
+    padding: var(--dx-g-spacing-xl) 0;
+}
+
+.detail-list-item:not(:last-child) {
+    border-bottom: 1px solid var(--dx-g-gray-95);
+}
+
+.detail-list-item-title {
+    flex: 1;
+}
+
+.detail-list-item .detail-list-item-detail {
+    color: var(--dx-g-blue-vibrant-20);
+    display: inline-block;
+    font-weight: 700;
+    width: 25%;
+}
+
+.detail-list-item-detail-right {
+    text-align: right;
+}
+
+.flourish-container {
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+    width: var(--dx-c-flourish-width, unset);
+}
+
+@media (max-width: 915px) {
+    .flourish-container {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .detail-list-content {
+        padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-mlg);
+    }
+
+    .detail-list-item {
+        gap: var(--dx-g-spacing-md);
+    }
+
+    .detail-list-item-detail {
+        width: 30%;
+    }
+
+    .detail-list-item-title {
+        font-size: var(--dx-g-text-base);
+        line-height: 20px;
+    }
+}
+
+@media (max-width: 430px) {
+    .detail-list-item-detail {
+        font-size: var(--dx-g-text-xs);
+    }
+
+    .detail-list-item-title {
+        font-size: var(--dx-g-text-sm);
+    }
+}

package/src/modules/dx/agenda/agenda.html

@@ -0,0 +1,31 @@
+<template>
+    <div class="container">
+        <h2 class="detail-list-title dx-text-display-4">{title}</h2>
+        <div class="detail-list-content-container">
+            <ul class="detail-list-content" part="content">
+                <template for:each={items} for:item="item">
+                    <li class="detail-list-item" key={item.title}>
+                        <span
+                            lwc:if={item.leftDetail}
+                            class="detail-list-item-detail detail-list-item-detail-left dx-text-body-3"
+                        >
+                            {item.leftDetail}
+                        </span>
+                        <span class="detail-list-item-title dx-text-display-7">
+                            {item.title}
+                        </span>
+                        <span
+                            lwc:if={item.rightDetail}
+                            class="detail-list-item-detail detail-list-item-detail-right dx-text-body-3"
+                        >
+                            {item.rightDetail}
+                        </span>
+                    </li>
+                </template>
+            </ul>
+            <div lwc:if={flourish} class="flourish-container">
+                <img src={flourish} alt={flourishAlt} />
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/agenda/agenda.ts

@@ -0,0 +1,26 @@
+import { toJson } from "dxUtils/normalizers";
+import { api, LightningElement } from "lwc";
+
+export interface AgendaItem {
+    body?: string;
+    isInitiallyOpen?: boolean;
+    leftDetail?: string;
+    rightDetail?: string;
+    title: string;
+}
+
+export default class Agenda extends LightningElement {
+    @api title: string = "Agenda";
+    @api flourish?: string;
+    @api flourishAlt?: string;
+
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value: any) {
+        this._items = toJson(value);
+    }
+
+    private _items: AgendaItem[] = [];
+}

package/src/modules/dx/cardClickthrough/cardClickthrough.css

@@ -0,0 +1,69 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    --dx-c-heading-max-lines: 4;
+    --dx-c-card-grid-max-width: 60px;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+}
+
+.not-clickable {
+    cursor: default;
+}
+
+.image {
+    width: 100%;
+    height: 160px;
+}
+
+.control {
+    border-radius: 50%;
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-40);
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 32px;
+    right: 20px;
+}
+
+/* text section */
+
+.card_section-text {
+    grid-area: text;
+    flex-grow: 1;
+    position: relative;
+}
+
+.dx-text-display-8 dx-button {
+    margin-left: var(--dx-g-spacing-xs);
+}
+
+.dx-text-display-6 {
+    position: relative;
+    -webkit-line-clamp: var(--dx-c-heading-max-lines);
+    -webkit-box-orient: vertical;
+    display: box;
+    overflow: hidden;
+}
+
+.dx-text-display-6 dx-icon {
+    display: inline-block;
+    transform: translateY(-3px);
+}
+
+/* mobile responsiveness */
+
+@media screen and (max-width: 1024px) {
+    .has-image:not(.show-mobile-image) .image {
+        display: none;
+    }
+}

package/src/modules/dx/cardClickthrough/cardClickthrough.html

@@ -0,0 +1,18 @@
+<template>
+    <a href={href} class={className} target={target} onclick={handleCardClick}>
+        <img
+            if:true={imgSrc}
+            alt={imgAlt}
+            src={imgSrc}
+            class="image dx-card-base_image"
+        />
+        <div
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+        >
+            <span class="dx-text-label-3" part="label">{label}</span>
+            <dx-card-title title={title} target={target} onclick={handleLinkClick}></dx-card-title>
+            <span lwc:if={body} class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
+            <span lwc:if={href} class="control"><dx-icon size="medium" symbol="forward"></dx-icon></span>
+        </div>
+    </a>
+</template>

package/src/modules/dx/cardClickthrough/cardClickthrough.ts

@@ -0,0 +1,60 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { track } from "dxUtils/analytics";
+
+export default class CardClickthrough extends LightningElement {
+    @api body!: string;
+    @api href?: string;
+    @api imgAlt?: string = "";
+    @api imgSrc?: string | null = null;
+    @api label!: string;
+    @api title!: string;
+    @api target?: string | null = null;
+    @api showMobileImg?: boolean = false;
+
+    private get className(): string {
+        return cx(
+            "card",
+            "dx-card-base",
+            this.imgSrc && "has-image",
+            this.showMobileImg && "show-mobile-image",
+            !this.href && "not-clickable" // for "coming soon" cards
+        );
+    }
+
+    handleCardClick(evt: Event) {
+        if (!this.href) {
+            evt.preventDefault();
+        }
+    }
+
+    private handleLinkClick(event: PointerEvent) {
+        if (!this.href) {
+            return;
+        }
+        const payloadCardInfo = {
+            click_text: this.title,
+            element_title: this.title,
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_cardClick", payloadCardInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardInfo);
+    }
+
+    private handleTextClick(event: PointerEvent) {
+        if (!this.href) {
+            return;
+        }
+        const payloadCardTextInfo = {
+            click_text: this.body,
+            element_title: this.title,
+            click_url: `${window.location.origin}${this.href}`,
+            element_type: "tile",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_ctaTile", payloadCardTextInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardTextInfo);
+    }
+}

package/src/modules/dx/cardDocs/cardDocs.html

@@ -9,13 +9,13 @@
         <div
             class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
-            <span class="dx-text-label-3">{label}</span>
+            <span class="dx-text-label-3" part="label">{label}</span>
             <dx-card-title
                 title={title}
                 target={target}
                 onclick={handleLinkClick}
             ></dx-card-title>
-            <span class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
+            <span lwc:if={body} class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
         </div>
         <div class="dx-card-base_section-vertical dx-card-base_ctas">
             <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/cardGrid/cardGrid.css

@@ -0,0 +1,5 @@
+@media screen and (max-width: 1024px) {
+    dx-card-docs {
+        --dx-c-body-max-lines: 3;
+    }
+}

package/src/modules/dx/cardGrid/cardGrid.html

@@ -0,0 +1,18 @@
+<template>
+    <dx-grid columns={numColumns}>
+        <template for:each={cards} for:item="card">
+            <dx-card-clickthrough
+                key={card.title}
+                body={card.body}
+                href={card.href}
+                img-alt={card.imgAlt}
+                img-src={card.imgSrc}
+                label={card.label}
+                title={card.title}
+                target={card.target}
+                show-mobile-img={card.showMobileImg}
+            >
+            </dx-card-clickthrough>
+        </template>
+    </dx-grid>
+</template>

package/src/modules/dx/cardGrid/cardGrid.ts

@@ -0,0 +1,19 @@
+import { api, LightningElement } from "lwc";
+import Grid from "dx/grid";
+import { DocsCard } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+
+export default class CardGrid extends LightningElement {
+    // DocsCard[] with _optional_ href
+    private _cards: ({ href?: string } & Omit<DocsCard, "href">)[] = [];
+
+    @api
+    get cards() {
+        return this._cards;
+    }
+    set cards(value: any) {
+        this._cards = toJson(value);
+    }
+
+    @api numColumns: Grid["columns"] = "three";
+}

package/src/modules/dx/footer/footer.css

@@ -13,7 +13,7 @@ a {
 }
 
 footer {
-    padding-top: var(--dx-g-spacing-5xl);
+    padding-top: var(--dx-c-footer-padding-top, var(--dx-g-spacing-5xl));
 }
 
 footer.signup-variant-large-signup {
@@ -74,6 +74,10 @@ footer.signup-variant-no-signup {
     height: 504px;
 }
 
+.content-container_top_large_no_signup {
+    height: 33vw;
+}
+
 .subscription {
     position: relative;
     z-index: 1;
@@ -278,7 +282,7 @@ footer.signup-variant-no-signup {
 }
 
 @media screen and (min-width: 1400px) {
-    .content-container_top_large {
+    .content-container_top_large:not(.content-container_top_large_no_signup) {
         /* takes into account the background assets' h:w ratio */
         height: 38vw;
     }
@@ -301,11 +305,20 @@ footer.signup-variant-no-signup {
         background-size: 122.92%;
     }
 
+    .content-container_top_large_no_signup .graphic-large {
+        background-size: 101%;
+    }
+
     .content-container_top_large {
         height: 464px;
         padding-top: var(--dx-g-spacing-2xl);
     }
 
+    .content-container_top_large_no_signup {
+        height: 38vw;
+        padding-top: 0;
+    }
+
     .subscription h3 {
         font-size: 24px;
         line-height: 28px;
@@ -380,6 +393,10 @@ footer.signup-variant-no-signup {
         padding-bottom: 140px;
     }
 
+    .content-container_top_large_no_signup {
+        height: 44vw;
+    }
+
     .graphic-mountains {
         display: none;
     }

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

@@ -34,6 +34,13 @@
                 </dx-button>
             </div>
         </div>
+        <div
+            if:true={showLargeNoSignup}
+            class={largeNoSignupClassName}
+        >
+            <div class="graphic graphic-large" alt=""></div>
+            <slot name="custom-content" onslotchange={onSlotChange}></slot>
+        </div>
         <div
             if:true={showContainerMiddle}
             class="content-container content-container_middle"

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

@@ -1,6 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { FooterVariant, OptionWithLink } from "typings/custom";
+import {
+    FooterVariant,
+    LightningSlotElement,
+    OptionWithLink
+} from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import {
     defaultGeneralLinks,
@@ -9,6 +13,7 @@ import {
     intellectualHref
 } from "./links";
 import { track } from "dxUtils/analytics";
+import { isSlotEmpty } from "dxUtils/slot";
 
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
@@ -34,6 +39,7 @@ export default class Footer extends LightningElement {
     private _locales: OptionWithLink[] | null = null;
     private _variant: FooterVariant = "small-signup";
     private intellectualHref = intellectualHref;
+    private isSlotEmpty = true;
     private socialLinks = socialLinks;
     private termsLinks = termsLinks;
     private signupUrl = "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
@@ -64,6 +70,10 @@ export default class Footer extends LightningElement {
         return this.variant === "small-signup";
     }
 
+    get showLargeNoSignup() {
+        return this.variant === "large-no-signup";
+    }
+
     get hasLocales() {
         return this.locale && this.locales;
     }
@@ -94,17 +104,31 @@ export default class Footer extends LightningElement {
         return cx(`signup-variant-${this.variant}`);
     }
 
+    get largeNoSignupClassName() {
+        return cx(
+            "content-container",
+            "content-container_top_large",
+            "content-container_top_large_no_signup",
+            !this.isSlotEmpty && "custom-content"
+        );
+    }
+
     private onLocaleChange(e: CustomEvent) {
         this.dispatchEvent(
             new CustomEvent("localechange", { detail: e.detail })
         );
     }
 
+    private onSlotChange(e: LightningSlotElement): void {
+        this.isSlotEmpty = isSlotEmpty(e);
+    }
+
     private isFooterVariant(value: string): value is FooterVariant {
         return [
             "no-signup",
             "small-signup",
             "large-signup",
+            "large-no-signup",
             "terms-only"
         ].includes(value);
     }

package/src/modules/dx/searchResults/resultsTemplate.js

@@ -0,0 +1,157 @@
+/*
+ The String.raw tagged template literal is basically a no-op and won't do any changes to the template string, 
+ but if you assign it to a variable with the name html or css, 
+ tools like Prettier and VS Code will interpret the string as HTML or CSS respectively
+*/
+const html = String.raw;
+
+export default html`
+    <div class="coveo-show-if-no-results">
+        <div class="no-results">
+            <img
+                src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
+                alt="purple cloud with floating binary numbers above"
+            />
+            <div class="no-results-info">
+                <span
+                    class="CoveoQuerySummary dx-text-display-8"
+                    data-enable-no-results-found-message="true"
+                    data-no-results-found-message="Sorry, no results were found for your search &ldquo;\${query}&rdquo;"
+                ></span>
+                <p class="dx-text-display-8 tip">Search Tips:</p>
+                <ul class="tip-list">
+                    <li>Please consider misspellings</li>
+                    <li>Try different search keywords</li>
+                </ul>
+                <p class="dx-text-display-8 tip tbc-container">
+                    Still not finding what you're looking for? Consider asking
+                    in the&nbsp;
+                    <a
+                        class="link"
+                        href="https://trailhead.salesforce.com/trailblazer-community/feed"
+                    >
+                        Trailblazer Community
+                    </a>
+                    !
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="coveo-show-if-results">
+        <script
+            id="myDocumentResultTemplate"
+            class="result-template"
+            type="text/underscore"
+            data-field-publicurl=""
+        >
+            <div class="dx-result">
+                <div class="dx-result-info">
+                    <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+                    <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
+                        <% if (raw.content_type === "community posts" && raw.sfid) { %>
+                            <span class="CoveoFieldValue" data-field="@sfid" data-helper="communityBreadcrumbs" data-html-value="true"></span>
+                        <% } else { %>
+                            <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
+                        <% } %>
+                    <% } else { %>
+                        <% if (raw.uri.includes('/references/')) { %>
+                            <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
+                        <% } else { %>
+                            <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                        <% } %>
+                    <% } %>
+                </div>
+                <% if (raw.content_type === "community posts") { %>
+                    <a
+                        class="dx-result-title CoveoResultLink"
+                        data-href-template="https://trailhead.salesforce.com/trailblazer-community/feed/<%= raw.sfid %>"
+                        target="_blank"
+                    >
+                <% } else { %>
+                    <a
+                        href="<%= raw.uri %>"
+                        class="dx-result-title CoveoResultLink"
+                        <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                            target="_blank"
+                        <% } %>
+                    >
+                <% } %>
+                    <%= title %>
+                    <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
+                    <% } %>
+                </a>
+                <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
+                <p class="dx-result-excerpt CoveoExcerpt"></p>
+                <% if (raw.sfcommentcount || raw.sflikecount) { %>
+                <div class="post-info-container">
+                    <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
+                    <% if (raw.sfcommentcount && raw.sflikecount) { %>
+                        <span>&bull;</span>
+                    <% } %>
+                    <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
+                </div>
+                <% } %>
+            </div>
+        </script>
+        <script
+            id="myDefaultResultTemplate"
+            class="result-template"
+            type="text/underscore"
+        >
+            <div class="dx-result">
+                <div class="dx-result-info">
+                    <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+                    <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
+                        <% if (raw.content_type === "community posts" && raw.sfid) { %>
+                            <span class="CoveoFieldValue" data-field="@sfid" data-helper="communityBreadcrumbs" data-html-value="true"></span>
+                        <% } else { %>
+                            <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
+                        <% } %>
+                    <% } else { %>
+                        <% if (raw.uri.includes('/references/')) { %>
+                            <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
+                        <% } else { %>
+                            <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                        <% } %>
+                    <% } %>
+                </div>
+                    <% if (raw.content_type === "community posts") { %>
+                        <a
+                            class="dx-result-title CoveoResultLink"
+                            data-href-template="https://trailhead.salesforce.com/trailblazer-community/feed/<%= raw.sfid %>"
+                            target="_blank"
+                        >
+                    <% } else { %>
+                        <a
+                            href="<%= raw.uri %>"
+                            class="dx-result-title CoveoResultLink"
+                            <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                                target="_blank"
+                            <% } %>
+                        >
+                    <% } %>
+                    <% if (title) { %>
+                        <%= title %>
+                    <% } else { %>
+                        <%= uri %>
+                    <% } %>
+                    <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                            <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
+                    <% } %>
+                </a>
+                <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
+                <p class="dx-result-excerpt CoveoExcerpt"></p>
+                <% if (raw.sfcommentcount || raw.sflikecount) { %>
+                <div class="post-info-container">
+                    <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
+                    <% if (raw.sfcommentcount && raw.sflikecount) { %>
+                        <span>&bull;</span>
+                    <% } %>
+                    <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
+                </div>
+                <% } %>
+            </div>
+        </script>
+    </div>
+`;

package/src/modules/dx/searchResults/searchResults.ts

@@ -8,6 +8,7 @@ import {
 } from "dxConstants/contentTypes";
 import { getContentTypeColorVariables } from "dxUtils/contentTypes";
 import { pollUntil } from "dxUtils/async";
+import resultsTemplate from "./resultsTemplate";
 
 // Max height for breadcrumb without wrapping
 const MAX_BREADCRUMB_HEIGHT = 16;
@@ -41,146 +42,6 @@ function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
     return { numberOfPages, currentPage };
 }
 
-const resultsTemplatesInnerHtml = `
-    <div class="coveo-show-if-no-results">
-        <div class="no-results">
-            <img
-                src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
-                alt="purple cloud with floating binary numbers above"
-            />
-            <div class="no-results-info">
-                <span class="CoveoQuerySummary dx-text-display-8"
-                    data-enable-no-results-found-message="true"
-                    data-no-results-found-message="Sorry, no results were found for your search &ldquo;\${query}&rdquo;">
-                </span>
-                <p class="dx-text-display-8 tip">Search Tips:</p>
-                <ul class="tip-list">
-                    <li>Please consider misspellings</li>
-                    <li>Try different search keywords</li>
-                </ul>
-                <p class="dx-text-display-8 tip tbc-container">
-                    Still not finding what you're looking for? Consider
-                    asking in the&nbsp;
-                    <a
-                        class="link"
-                        href="https://trailhead.salesforce.com/trailblazer-community/feed"
-                    >
-                        Trailblazer Community
-                    </a>
-                    !
-                </p>
-            </div>
-        </div>  
-    </div>
-    <div class="coveo-show-if-results">
-        <script
-            id="myDocumentResultTemplate"
-            class="result-template"
-            type="text/underscore"
-            data-field-publicurl=""
-        >
-            <div class="dx-result">
-                <div class="dx-result-info">
-                    <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
-                    <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
-                        <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
-                    <% } else { %>
-                        <% if (raw.uri.includes('/references/')) { %>
-                            <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
-                        <% } else { %>
-                            <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
-                        <% } %>
-                    <% } %>
-                </div>
-                <% if (raw.content_type === "community posts") { %>
-                    <a
-                        class="dx-result-title CoveoResultLink"
-                        data-href-template="https://trailhead.salesforce.com/trailblazer-community/feed/<%= raw.sfid %>"
-                    >
-                <% } else { %>
-                    <a
-                        href="<%= raw.uri %>"
-                        class="dx-result-title CoveoResultLink"
-                        <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
-                            target="_blank"
-                        <% } %>
-                    >
-                <% } %>
-                    <%= title %>
-                    <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
-                            <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
-                    <% } %>
-                </a>
-                <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
-                <p class="dx-result-excerpt CoveoExcerpt"></p>
-                <% if (raw.sfcommentcount || raw.sflikecount) { %>
-                <div class="post-info-container">
-                    <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
-                    <% if (raw.sfcommentcount && raw.sflikecount) { %>
-                        <span>&bull;</span>
-                    <% } %>
-                    <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
-                </div>
-                <% } %>
-            </div>
-        </script>
-        <script
-            id="myDefaultResultTemplate"
-            class="result-template"
-            type="text/underscore"
-        >
-                <div class="dx-result">
-                    <div class="dx-result-info">
-                        <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
-                        <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
-                            <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
-                        <% } else { %>
-                            <% if (raw.uri.includes('/references/')) { %>
-                                <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
-                            <% } else { %>
-                                <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
-                            <% } %>
-                        <% } %>
-                    </div>
-                        <% if (raw.content_type === "community posts") { %>
-                            <a
-                                class="dx-result-title CoveoResultLink"
-                                data-href-template="https://trailhead.salesforce.com/trailblazer-community/feed/<%= raw.sfid %>"
-                            >
-                        <% } else { %>
-                            <a
-                                href="<%= raw.uri %>"
-                                class="dx-result-title CoveoResultLink"
-                                <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
-                                    target="_blank"
-                                <% } %>
-                            >
-                        <% } %>
-                        <% if (title) { %>
-                            <%= title %>
-                        <% } else { %>
-                            <%= uri %>
-                        <% } %>
-                        <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
-                                <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
-                        <% } %>
-                    </a>
-                    <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
-                    <p class="dx-result-excerpt CoveoExcerpt"></p>
-                    <% if (raw.sfcommentcount || raw.sflikecount) { %>
-                    <div class="post-info-container">
-                        <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
-                        <% if (raw.sfcommentcount && raw.sflikecount) { %>
-                            <span>&bull;</span>
-                        <% } %>
-                        <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
-                    </div>
-                    <% } %>
-                </div>
-        </script>
-    </div>
-`;
-
 const isInternalDomain = (domain: string) =>
     domain === "developer.salesforce.com" ||
     domain === "developer-website-s.herokuapp.com";
@@ -284,6 +145,10 @@ const buildTemplateHelperUriBreadcrumbs = (value: string) => {
     return `<span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>`;
 };
 
+const buildTemplateHelperCommunityBreadcrumbs = () => {
+    return `<span class="breadcrumb"><span class="breadcrumb-item">trailhead.salesforce.com</span> / <span class="breadcrumb-item">trailblazer-community</span> / <span class="breadcrumb-item">feed</span> / </span>`;
+};
+
 const buildTemplateHelperBreadcrumbs = (value: string) => {
     const parts = value.split("/").filter((part) => part !== "");
 
@@ -577,7 +442,7 @@ export default class SearchResults extends LightningElement {
 
         if (resultsList) {
             // eslint-disable-next-line @lwc/lwc/no-inner-html
-            resultsList.innerHTML = resultsTemplatesInnerHtml;
+            resultsList.innerHTML = resultsTemplate;
         }
 
         Coveo.SearchEndpoint.configureCloudV2Endpoint(
@@ -607,6 +472,11 @@ export default class SearchResults extends LightningElement {
             buildTemplateHelperUriBreadcrumbs
         );
 
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "communityBreadcrumbs",
+            buildTemplateHelperCommunityBreadcrumbs
+        );
+
         Coveo.TemplateHelpers.registerTemplateHelper(
             "postedDate",
             buildTemplateHelperPostedDate

package/src/modules/dx/sectionSignup/sectionSignup.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import { LightningSlotElement } from "typings/custom";
 import debounce from "debounce";
+import { isSlotEmpty } from "dxUtils/slot";
 const MOBILE_SIZE = 640;
 const getInputSize = () =>
     (window.innerWidth ||
@@ -30,8 +31,7 @@ export default class SectionSignup extends LightningElement {
     }
 
     private onSlotChange(e: LightningSlotElement) {
-        // @ts-ignore
-        this.isSlotEmpty = e.target.assignedElements().length === 0;
+        this.isSlotEmpty = isSlotEmpty(e);
     }
 
     private _updateSize = () => {