@salesforcedevs/dx-components 1.30.6 → 1.32.0-alpha.1

package/src/modules/dx/searchResults/searchResults.css

@@ -248,7 +248,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .coveo-pager-list-item {
     border: none;
-    border-radius: 16px;
+    border-radius: var(--dx-g-spacing-xs);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -282,13 +282,62 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     border-right: none;
 }
 
+/* List item states: same padding in all states so text never moves. Ring 8px from text on sides, more on top/bottom. */
 .dx-result {
+    --dx-result-inner-gap-x: var(
+        --dx-g-spacing-sm
+    ); /* 8px between text and ring on sides */
+
+    --dx-result-inner-gap-y: var(
+        --dx-g-spacing-xs
+    ); /* ring closer to card edge so more padding inside box top/bottom */
+
+    position: relative;
     background: white;
-    border-radius: 16px;
+    border-radius: var(--dx-g-spacing-md);
     border: 1px solid rgb(24 24 24 / 4%);
     box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
-    padding: 20px;
-    margin-bottom: var(--dx-g-spacing-lg);
+    padding: var(--dx-g-spacing-md);
+    margin-bottom: var(--dx-g-spacing-md);
+    transition: background-color 0.1s ease;
+}
+
+/* Hover: same shape as focus box, more padding top/bottom inside box; space between results unchanged */
+.dx-result:hover::after {
+    content: "";
+    position: absolute;
+    top: var(--dx-result-inner-gap-y);
+    bottom: var(--dx-result-inner-gap-y);
+    left: var(--dx-result-inner-gap-x);
+    right: var(--dx-result-inner-gap-x);
+    background: var(--dx-g-gray-95);
+    border-radius: var(--dx-g-spacing-xs);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.dx-result > * {
+    position: relative;
+    z-index: 1;
+}
+
+/* Focus: ring 8px from text via pseudo-element; no padding/layout change */
+.dx-result:focus-within {
+    outline: none;
+}
+
+/* Pseudo: 8px from text on sides, more padding top/bottom inside ring (smaller inset y) */
+.dx-result:focus-within::before {
+    content: "";
+    position: absolute;
+    top: var(--dx-result-inner-gap-y);
+    bottom: var(--dx-result-inner-gap-y);
+    left: var(--dx-result-inner-gap-x);
+    right: var(--dx-result-inner-gap-x);
+    border: 2px solid var(--dx-g-blue-vibrant-50);
+    border-radius: var(--dx-g-spacing-xs);
+    pointer-events: none;
+    z-index: 2;
 }
 
 .dx-result-title {
@@ -322,10 +371,59 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     color: white;
 }
 
-.dx-search-header + .coveo-main-section {
+.dx-search-header + .dx-search-main {
     margin-top: var(--dx-g-spacing-2xl);
 }
 
+.dx-search-results {
+    font-family: var(--dx-g-font-sans);
+    background-color: #fafaf9;
+}
+
+.dx-search-main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--dx-g-spacing-xl);
+}
+
+.dx-search-box-row {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.dx-search-box-row .dx-search-box {
+    max-width: 400px;
+}
+
+.dx-search-loading {
+    padding: var(--dx-g-spacing-2xl);
+    text-align: center;
+}
+
+.dx-search-loading-image {
+    max-width: 200px;
+}
+
+.dx-search-no-results {
+    display: flex;
+    justify-content: center;
+    gap: 90px;
+    margin: 50px 34px 90px;
+}
+
+.dx-search-no-results-info {
+    text-align: left;
+}
+
+.dx-search-no-results-info > ul {
+    list-style-type: disc;
+    list-style-position: inside;
+    font-size: var(--dx-g-text-xs);
+}
+
+.dx-search-result-list {
+    padding-bottom: var(--dx-g-spacing-2xl);
+}
+
 .dx-search-header-container {
     margin: 0 auto;
     max-width: 1200px;
@@ -498,7 +596,8 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 }
 
 @media screen and (max-width: 768px) {
-    .no-results > img {
+    .no-results > img,
+    .dx-search-no-results > img {
         display: none;
     }
 }

package/src/modules/dx/searchResults/searchResults.html

@@ -1,106 +1,99 @@
 <template>
-    <div
-        id="search"
-        class="CoveoSearchInterface"
-        data-enable-history="true"
-        data-pipeline={coveoSearchPipeline}
-    >
-        <div
-            class="CoveoAnalytics"
-            data-search-hub="salesforcedevdoc"
-            data-endpoint={coveoAnalyticsEndpoint}
-        ></div>
-        <div if:true={hasQuery} class="dx-search-header">
+    <div id="search" class="dx-search-results">
+        <div lwc:if={hasQuery} class="dx-search-header">
             <div class="dx-search-header-container">
                 <p class="dx-search-header-title">
-                    <span class="dx-search-header-title-results">{header}</span>
+                    <span class="dx-search-header-title-results">
+                        {resultCountLabel}
+                    </span>
                     &nbsp;results for
                 </p>
                 <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
             </div>
         </div>
-        <div class="coveo-main-section">
-            <div class="coveo-facet-column">
-                <div class="dx-facet-column-header">
-                    <span class="dx-facet-column-header-title">Filters</span>
-                    <template if:true={hasFilters}>
-                        <dx-button onclick={clearFilters} variant="inline">
-                            Clear
-                        </dx-button>
-                    </template>
+        <div class="dx-search-main">
+            <div class="dx-search-results-column">
+                <div class="dx-search-box-row">
+                    <dx-input
+                        class="dx-search-box"
+                        type="search"
+                        placeholder="Search"
+                        role="search"
+                        aria-label="Search"
+                        icon-symbol="search"
+                        size="small"
+                        value={query}
+                        onchange={onSearchInputChange}
+                        clearable
+                    ></dx-input>
                 </div>
-                <div
-                    class="CoveoDynamicFacetManager"
-                    data-enable-reorder="false"
-                >
-                    <div
-                        class="CoveoDynamicFacet"
-                        data-title="Content Type"
-                        data-field="@commonsource"
-                        data-tab="All"
-                        data-enable-facet-search="false"
-                    ></div>
-                    <div
-                        class="CoveoDynamicFacet"
-                        data-title="Language"
-                        data-field="@language"
-                        data-tab="All"
-                        data-enable-facet-search="false"
-                    ></div>
+                <div lwc:if={isLoading} class="dx-search-loading">
+                    <img
+                        class="dx-search-loading-image"
+                        src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
+                        alt="Loading"
+                    />
                 </div>
-                <div class="dx-facet-column-footer">
-                    <dx-button onclick={dismissFiltersOverlay}>
-                        View {header} results
-                    </dx-button>
-                </div>
-            </div>
-            <div class="coveo-results-column">
-                <div class="CoveoShareQuery"></div>
-                <div class="CoveoExportToExcel"></div>
-                <div class="CoveoPreferencesPanel">
-                    <div class="CoveoResultsPreferences"></div>
-                    <div class="CoveoResultsFiltersPreferences"></div>
-                </div>
-                <div class="CoveoDidYouMean"></div>
-                <div class="coveo-results-header">
-                    <div class="coveo-summary-section"></div>
-                    <div class="coveo-sort-section" role="radiogroup">
-                        <span
-                            class="CoveoSort"
-                            data-sort-criteria="relevancy"
-                            data-caption="Sorted by Relevance"
-                        ></span>
+                <template lwc:if={showNoResults}>
+                    <div class="dx-search-no-results">
+                        <img
+                            src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
+                            alt=""
+                        />
+                        <div class="dx-search-no-results-info">
+                            <p class="dx-text-display-8">
+                                Sorry, no results were found for your search
+                                &ldquo;{query}&rdquo;
+                            </p>
+                            <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="CoveoSearchbox"
-                            data-enable-omnibox="false"
-                            data-add-search-button="false"
-                            aria-hidden="true"
-                        ></div>
+                </template>
+                <template lwc:if={hasResults}>
+                    <div class="dx-search-result-list">
+                        <template
+                            for:each={results}
+                            for:item="result"
+                            for:index="index"
+                        >
+                            <div
+                                key={result.uniqueId}
+                                class="dx-result"
+                                data-result-id={result.uniqueId}
+                            >
+                                <a
+                                    href={result.href}
+                                    class="dx-result-title"
+                                    target={result.openInNewTab}
+                                    rel={result.rel}
+                                >
+                                    {result.title}
+                                </a>
+                                <p
+                                    lwc:if={result.matchedText}
+                                    class="dx-result-excerpt"
+                                >
+                                    {result.matchedText}
+                                </p>
+                            </div>
+                        </template>
                     </div>
-                </div>
-                <div class="CoveoBreadcrumb"></div>
-                <div class="CoveoHiddenQuery"></div>
-                <div class="CoveoErrorReport"></div>
-                <div
-                    class="CoveoResultList"
-                    data-layout="list"
-                    data-wait-animation="fade"
-                    data-auto-select-fields-to-include="true"
-                    lwc:dom="manual"
-                ></div>
-                <div class="coveo-results-footer" aria-hidden="true">
-                    <div class="CoveoPager"></div>
-                </div>
-                <div class="pagination-container">
-                    <dx-pagination
-                        current-page={currentPage}
-                        total-pages={totalPages}
-                        onpagechange={goToPage}
-                        pages-to-show="5"
-                    ></dx-pagination>
-                </div>
+                </template>
             </div>
         </div>
     </div>