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

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

@@ -0,0 +1,141 @@
+/*
+ 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>
+                <a
+                    href="<%- raw.content_type === "help_documentation" ? raw.publicurl : 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>
+                    <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.css

@@ -1,4 +1,6 @@
-@import "helpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/typeBadge";
 @import "./coveo.css";
 
 /* stylelint-disable selector-class-pattern */
@@ -178,6 +180,24 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     margin-top: var(--dx-g-spacing-lg);
 }
 
+.coveo-query-summary-cancel-last,
+.coveo-query-summary-search-tips-info,
+.CoveoQuerySummary ul {
+    display: none;
+}
+
+.CoveoSearchInterface .coveo-results-column.coveo-no-results {
+    max-width: 100%;
+}
+
+.CoveoQuerySummary div {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.coveo-query-summary-no-results-string {
+    color: var(--dx-g-text-heading-color);
+}
+
 .CoveoSort {
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
@@ -197,8 +217,8 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .CoveoSort.coveo-selected,
 .CoveoSort.coveo-selected:hover {
-    color: var(--dx-g-blue-vibrant-50);
-    border-bottom-color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-g-blue-vibrant-40);
+    border-bottom-color: var(--dx-g-blue-vibrant-40);
 }
 
 .CoveoBreadcrumb {
@@ -265,27 +285,24 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 .dx-result {
     background: white;
     border-radius: 16px;
-    border: 1px solid rgba(24, 24, 24, 0.04);
-    box-shadow: 0 0 2px 0 rgba(24, 24, 24, 0.08),
-        0 2px 4px 1px rgba(24, 24, 24, 0.16);
+    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);
 }
 
 .dx-result-title {
+    /* override the default Coveo style */
+    color: var(--dx-g-blue-vibrant-20) !important;
+    display: block;
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-lg);
     margin: 0;
     margin-bottom: var(--dx-g-spacing-sm);
 }
 
-.CoveoResultLink,
-a.CoveoResultLink,
-.CoveoResult a.CoveoResultLink {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
 .dx-result-excerpt {
+    display: inline;
     color: var(--dx-g-gray-10);
     font-size: 14px;
     line-height: 20px;
@@ -294,15 +311,14 @@ a.CoveoResultLink,
 
 .dx-search-header {
     padding: var(--dx-g-spacing-xl);
-    background: url("data:image/svg+xml,%3Csvg width='1440' height='170' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2392DAFF' fill-rule='nonzero'%3E%3Cpath d='M841 141l-2 2-1 4-4 1-2 2 2 2 4 1 1 4 2 1 2-1 2-4 4-1 1-2-1-2-4-1-2-4-2-2zm0 2l2 4 1 1 4 2-4 1-1 1-2 4-1-4-2-1-4-1 4-2 2-1 1-4zM1224 42l-1 1-2 4-4 2-1 2 1 2 4 1 2 4 1 1 2-1 2-4 4-1 1-2-1-2-4-2-2-3-2-2zm0 2l2 4 1 1 4 2-4 1-1 1-2 4-1-4-1-1-4-1 4-2 1-1 1-4zM506 19l-2 1-2 4-4 2-1 1 1 2 4 2 2 4 2 1 2-1 1-4 4-2 2-2-2-1-4-2-1-4-2-1zm0 2l1 4h1l1 1 4 1-4 2-2 1-1 4-2-4-1-1-4-2 4-1 1-1 2-4zM1298 0l-5 5a85 85 0 00-4 120 1 1 0 11-1 1 87 87 0 017-126h3zM1440 112c-6 10-14 18-23 25a1 1 0 01-1-1 89 89 0 0024-28v4zM1339 79c13-3 26 4 31 16 5 11 0 25-11 31a1 1 0 11-1-1c10-7 14-19 10-30-4-10-16-17-28-14-12 2-21 12-21 23a1 1 0 11-2 0c0-12 9-23 22-25z'/%3E%3Cpath d='M1362 86h2c10 10 10 27 0 37-9 8-23 8-32 0-7-7-7-18 0-24 3-3 7-4 10-4 4 0 8 1 11 4 4 4 4 11 0 16a10 10 0 01-14 0 1 1 0 111-2l6 3c2 0 4-1 5-3 4-3 4-9 0-13-2-2-5-3-9-3-3 0-6 1-8 3-7 6-7 16 0 22 7 7 20 7 28 0 10-10 10-25 0-35v-1zM1387 115c10-5 23-1 28 8 6 10 2 22-8 28-10 5-22 3-29-7a1 1 0 012-1c6 9 17 11 26 6s12-16 7-25c-5-8-16-12-25-7a1 1 0 11-1-2z'/%3E%3Cpath d='M1371 103c4-1 8 0 12 2 3 3 5 6 5 11a1 1 0 01-2 0c0-4-1-7-4-9s-7-3-11-2a1 1 0 110-2zM1381 125c6-6 14-6 20 0 4 4 4 11 0 15-4 3-10 3-13 0a1 1 0 011-2c3 3 8 3 10 0 4-3 4-9 0-12-4-4-12-4-17 0-2 3-4 6-4 10s2 8 4 10a20 20 0 0027 0 1 1 0 012 2c-4 4-9 6-15 6s-11-2-15-6c-3-3-5-7-5-12 0-4 2-8 5-11z'/%3E%3Cpath d='M1378 143a1 1 0 112 1c-5 10-15 16-27 17-11 1-22-5-28-14a1 1 0 112-1c6 9 16 14 26 13 11-1 20-7 25-16z'/%3E%3Cpath d='M1285 144l1 1c4 7 11 11 19 12 8 0 16-4 20-11a1 1 0 011 1c-4 8-12 12-21 12-9-1-17-6-21-13l1-2z'/%3E%3Cpath d='M1300 121c4 0 8 2 11 5 2 2 4 5 4 8 0 4-2 7-4 9-4 4-11 4-15 0a1 1 0 112-1c3 3 8 3 12 0 2-2 3-5 3-8 0-2-1-5-3-7-3-2-6-4-10-4s-7 2-10 4c-3 3-5 8-5 12s2 8 5 11c4 4 10 7 16 7s11-3 15-7a1 1 0 112 2c-5 4-11 7-17 7-7 0-13-3-17-7s-6-8-6-13 2-10 6-13c3-3 7-5 11-5zM1296 101c8-2 16-1 22 2a1 1 0 11-1 2c-6-3-13-4-20-2s-12 6-15 13a1 1 0 11-2-1c3-7 9-12 16-14zM1270 96a1 1 0 010 2h-40c-5 0-9 4-9 8v1c0 5 4 9 9 9h17c6 0 12 5 12 11l-4 7c-2 2-5 3-7 3h-18a1 1 0 010-2h17l7-2 3-6c0-5-4-9-9-9h-18c-6 0-11-5-11-11s5-11 11-11h40zM1209 135a1 1 0 010 2h-43a1 1 0 010-2h43zM1217 155c7 0 12 5 12 11l-1 4h-2l1-4c0-5-4-9-9-9h-8a1 1 0 010-2h7z'/%3E%3Cpath d='M1306 156a1 1 0 010 2h-44c-4 0-8 4-8 9v3h-2v-3c0-6 4-10 10-11h44zM1166 135a1 1 0 110 2c-5 0-10 4-10 9s4 9 9 9h17a1 1 0 010 2h-16c-7 0-12-5-12-11s5-11 12-11zM1193 153a1 1 0 012 1h-1l-5 6a1 1 0 01-2-1v-1l6-5zM1201 153a1 1 0 012 1l-6 6a1 1 0 01-2-1l1-1 5-5zM1219 132h1v9a1 1 0 01-2 0v-8l1-1z'/%3E%3Cpath d='M1223 136a1 1 0 010 2h-8a1 1 0 01-1-2h9zM1422 38a1 1 0 110 2c-5 0-9 4-9 9s4 9 9 9h18v2h-18c-6 0-11-5-11-11s5-11 11-11zM1440 0v1h-43c-5 0-9 4-9 9s4 9 9 9h35c3 0 6 1 8 3v15c-2 2-5 3-8 3a1 1 0 010-2c3 0 6-2 8-4v-8c-1-3-4-5-8-5h-35c-6 0-11-5-11-11 0-5 3-8 7-10h47zM729 39c-27 0-51-16-62-39h2a67 67 0 00120 0h2a69 69 0 01-62 39zM279 5c-4 0-7-2-8-4V0h2a7 7 0 0012 0h2v1c-2 2-5 4-8 4z'/%3E%3Cg opacity='.3' transform='translate(258 74)'%3E%3Cpath d='M47 8a1 1 0 010 2h-6a7 7 0 000 14h4a1 1 0 011 2h-5a9 9 0 010-18h6z'/%3E%3Cpath d='M81 8a9 9 0 019 10c0 4-4 7-9 8h-2a7 7 0 000 13h29a9 9 0 011 17H61a7 7 0 00-1 13h8a9 9 0 019 9c0 5-4 8-9 8H28a9 9 0 01-9-9c1-4 4-8 9-8h3a7 7 0 001-13H9a9 9 0 01-1-17h42a7 7 0 100-13 1 1 0 010-2 9 9 0 010 17H9a7 7 0 00-1 13h23a9 9 0 011 17h-4c-3 0-6 3-7 6a7 7 0 007 7h40c4 0 7-2 7-6a7 7 0 00-6-7h-9a9 9 0 011-17h47a7 7 0 001-13H79a9 9 0 010-17h2c4 0 7-3 7-7a7 7 0 00-6-7H71a1 1 0 010-2h10z'/%3E%3Ccircle cx='7.3' cy='77.6' r='1.9'/%3E%3Cpath d='M26 28l1 1v6a1 1 0 01-2 0v-6l1-1z'/%3E%3Cpath d='M29 31a1 1 0 010 2h-6a1 1 0 010-2h6zM59 1a9 9 0 100 17 9 9 0 000-17zm0 2a7 7 0 110 13 7 7 0 010-13z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
+    background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
+            no-repeat 100% 0,
         linear-gradient(
-            45deg,
-            var(--dx-g-indigo-vibrant-20) 0%,
-            var(--dx-g-indigo-vibrant-30) 100%
+            77deg,
+            var(--dx-g-indigo-vibrant-30) 40.1%,
+            var(--dx-g-indigo-vibrant-40) 99.07%
         );
-    background-repeat: no-repeat;
-    background-position: right;
-    background-size: auto 100%;
+    background-size: auto;
     color: white;
 }
 
@@ -334,6 +350,18 @@ a.CoveoResultLink,
     margin-top: var(--dx-g-spacing-md);
 }
 
+@media (min-width: 928px) and (max-width: 1024px) {
+    .dx-search-header {
+        background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
+                no-repeat 200% 0,
+            linear-gradient(
+                77deg,
+                var(--dx-g-indigo-vibrant-30) 40.1%,
+                var(--dx-g-indigo-vibrant-40) 99.07%
+            );
+    }
+}
+
 @media (min-width: 768px) {
     .dx-search-header {
         padding: var(--dx-g-spacing-4xl);
@@ -350,6 +378,30 @@ a.CoveoResultLink,
     }
 }
 
+@media (min-width: 768px) and (max-width: 928px) {
+    .dx-search-header {
+        background: url("https://a.sfdcstatic.com/developer-website/images/binary-trees.svg")
+                no-repeat 90% 50%,
+            linear-gradient(
+                77deg,
+                var(--dx-g-indigo-vibrant-30) 40.1%,
+                var(--dx-g-indigo-vibrant-40) 99.07%
+            );
+    }
+}
+
+@media (max-width: 768px) {
+    .dx-search-header {
+        background: url("https://a.sfdcstatic.com/developer-website/images/binary.svg")
+                no-repeat 90% 50%,
+            linear-gradient(
+                77deg,
+                var(--dx-g-indigo-vibrant-30) 40.1%,
+                var(--dx-g-indigo-vibrant-40) 99.07%
+            );
+    }
+}
+
 .dx-facet-column-header {
     display: flex;
     align-items: center;
@@ -385,3 +437,68 @@ a.CoveoResultLink,
     margin: 0 auto;
     width: fit-content;
 }
+
+.dx-result-info {
+    display: flex;
+    gap: 12px;
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.breadcrumb {
+    color: #555;
+    font-size: var(--dx-g-text-xs);
+}
+
+.no-results-info {
+    text-align: left;
+}
+
+.no-results {
+    display: flex;
+    justify-content: center;
+    gap: 90px;
+    margin: 50px 34px 90px;
+}
+
+.tip {
+    font-size: var(--dx-g-text-sm);
+}
+
+.tip-list {
+    padding-bottom: var(--dx-g-spacing-2xl);
+}
+
+.tbc-container {
+    padding-top: var(--dx-g-spacing-2xl);
+    border-top: 1px solid var(--dx-g-gray-80);
+}
+
+.link {
+    color: var(--dx-g-blue-vibrant-50);
+    text-decoration: underline;
+}
+
+.link:hover {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+.no-results-info > ul {
+    list-style-type: disc;
+    list-style-position: inside;
+    font-size: var(--dx-g-text-xs);
+}
+
+.no-results-info > dx-hr {
+    --dx-c-hr-color: var(--dx-g-gray-80);
+    --dx-c-stroke-width: 1px;
+}
+
+.post-info-container {
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+@media screen and (max-width: 768px) {
+    .no-results > img {
+        display: none;
+    }
+}

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

@@ -5,12 +5,15 @@
         data-enable-history="true"
         data-pipeline={coveoSearchPipeline}
     >
-        <div class="CoveoAnalytics" data-search-hub="salesforcedevdoc"></div>
-        <div class="CoveoFolding"></div>
+        <div
+            class="CoveoAnalytics"
+            data-search-hub="salesforcedevdoc"
+            data-endpoint={coveoAnalyticsEndpoint}
+        ></div>
         <div if:true={hasQuery} class="dx-search-header">
             <div class="dx-search-header-container">
                 <p class="dx-search-header-title">
-                    <span class="dx-search-header-title-results">{title}</span>
+                    <span class="dx-search-header-title-results">{header}</span>
                     &nbsp;results for
                 </p>
                 <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
@@ -47,7 +50,7 @@
                 </div>
                 <div class="dx-facet-column-footer">
                     <dx-button onclick={dismissFiltersOverlay}>
-                        View {title} results
+                        View {header} results
                     </dx-button>
                 </div>
             </div>