WEBDEV-7036 Integrate smart results into collection browser (#404)

* Add slot and styling for smart results

* Update to new search service

Author: rebecca-shoptaw

package.json

@@ -31,7 +31,7 @@
     "@internetarchive/ia-dropdown": "^1.3.8",
     "@internetarchive/infinite-scroller": "1.0.1",
     "@internetarchive/modal-manager": "^0.2.8",
-    "@internetarchive/search-service": "^1.4.0",
+    "@internetarchive/search-service": "^1.4.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",
     "dompurify": "^2.3.6",

src/collection-browser.ts

@@ -245,6 +245,9 @@ export class CollectionBrowser
   /** Whether to replace the default sort options with a slot for customization (default: false) */
   @property({ type: Boolean }) enableSortOptionsSlot = false;
 
+  /** Whether to display a smart results carousel above the full results */
+  @property({ type: Boolean, reflect: true }) showSmartResults = false;
+
   /**
    * The results per page so we can paginate.
    *
@@ -652,18 +655,31 @@ export class CollectionBrowser
    */
   private get rightColumnTemplate(): TemplateResult {
     return html`
-      <div id="right-column" class="column">
-        <div id="cb-top-view">
-          <slot name="cb-top-slot"></slot>
-        </div>
-        ${this.isManageView
-          ? this.manageBarTemplate
-          : this.sortFilterBarTemplate}
-        <slot name="cb-results"></slot>
-        ${this.displayMode === `list-compact` && this.totalResults
-          ? this.listHeaderTemplate
+      <div
+        id="right-column"
+        class="column ${this.showSmartResults ? 'smart-results-spacing' : ''}"
+      >
+        ${this.showSmartResults
+          ? html`<slot name="smart-results"></slot>`
           : nothing}
-        ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+        <section id="results">
+          ${this.showSmartResults
+            ? html`<h2 class="results-section-heading">
+                ${msg('All results')}
+              </h2>`
+            : nothing}
+          <div id="cb-top-view">
+            <slot name="cb-top-slot"></slot>
+          </div>
+          ${this.isManageView
+            ? this.manageBarTemplate
+            : this.sortFilterBarTemplate}
+          <slot name="cb-results"></slot>
+          ${this.displayMode === `list-compact` && this.totalResults
+            ? this.listHeaderTemplate
+            : nothing}
+          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+        </section>
       </div>
     `;
   }
@@ -2072,14 +2088,34 @@ export class CollectionBrowser
           min-height: 90vh;
           border-left: 1px solid rgb(232, 232, 232);
           border-right: 1px solid rgb(232, 232, 232);
-          padding-left: 1rem;
-          padding-right: 1rem;
           margin-top: var(--rightColumnMarginTop, 0);
           background: #fff;
         }
 
+        #right-column.smart-results-spacing {
+          padding-top: 0.5rem;
+          border-right: none;
+          background: transparent;
+          min-width: 0;
+        }
+
+        #results {
+          background: #fff;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+
+        #right-column.smart-results-spacing #results {
+          border-radius: 10px 10px 0px 0px;
+          padding-top: 0.5rem;
+          margin-top: 1rem;
+        }
+
         .mobile #right-column {
           border-left: none;
+        }
+
+        .mobile #results {
           padding: 5px 5px 0;
         }
 
@@ -2268,6 +2304,12 @@ export class CollectionBrowser
           max-height: 2000px;
         }
 
+        .results-section-heading {
+          margin: 0.5rem 0.3rem;
+          font-size: 2rem;
+          line-height: 25px;
+        }
+
         #results-total {
           display: flex;
           align-items: baseline;

yarn.lock

@@ -211,10 +211,10 @@
   resolved "https://registry.npmjs.org/@internetarchive/result-type/-/result-type-0.0.1.tgz"
   integrity sha512-sWahff5oP1xAK1CwAu1/5GTG2RXsdx/sQKn4SSOWH0r0vU2QoX9kAom/jSXeBsmgK0IjTc+9Ty9407SMORi+nQ==
 
-"@internetarchive/search-service@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@internetarchive/search-service/-/search-service-1.4.0.tgz#e8fea0609eaf832b3fcdb02acb21e1a6c79bf028"
-  integrity sha512-6+GH5NbDLE1v+JfY5Ryo1GnsTUbpkbX/B0NCkoB25iYQZA82AbiNEyb6M6X332/5mUDRTGx6HKi+74CcJpDVEw==
+"@internetarchive/search-service@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@internetarchive/search-service/-/search-service-1.4.1.tgz#c68e2d285066137b879d49009c34caf8cfa96437"
+  integrity sha512-csXL1ikZGROss2wxKyyKZpZx4STv7W+RN1/Dw8hh2Jvd1vKYJjVv/ah9P9CnG/QarStvZuVVGA1m2Rru6m3O2w==
   dependencies:
     "@internetarchive/field-parsers" "^0.1.4"
     "@internetarchive/result-type" "^0.0.1"