feat(quantic): add quantic-load-more-results component #1

.changeset/quantic-add-load-more-results-component.md

@@ -0,0 +1,7 @@
+---
+"@coveo/quantic": minor
+---
+
+Added the `quantic-load-more-results` component, letting users load additional results into
+the current result list without navigating to a new page, for both Search and Insight Panel
+interfaces.

.vscode/settings.json

@@ -1,4 +1,4 @@
-{
+{   "workbench.colorTheme": "Vue Theme",
     "chat.useAgentSkills": true,
     "json.schemaDownload.trustedDomains": {
         "https://opencode.ai/config.json": true,

packages/quantic/force-app/examples/main/lwc/exampleQuanticLoadMoreResults/exampleQuanticLoadMoreResults.html

@@ -0,0 +1,19 @@
+<template>
+  <c-example-layout
+    title={pageTitle}
+    description={pageDescription}
+    show-preview={isConfigured}>
+
+    <div slot="configuration">
+      <c-configurator options={options} ontryitnow={handleTryItNow}>
+        <c-action-perform-search slot="actions" disabled={notConfigured} engine-id={engineId}></c-action-perform-search>
+      </c-configurator>
+    </div>
+
+    <c-example-use-case slot="preview" use-case={config.useCase} engine-id={engineId}>
+      <c-quantic-load-more-results
+        engine-id={engineId}>
+      </c-quantic-load-more-results>
+    </c-example-use-case>
+  </c-example-layout>
+</template>

packages/quantic/force-app/examples/main/lwc/exampleQuanticLoadMoreResults/exampleQuanticLoadMoreResults.js

@@ -0,0 +1,29 @@
+import {api, LightningElement, track} from 'lwc';
+
+export default class ExampleQuanticLoadMoreResults extends LightningElement {
+  @api engineId = 'quantic-load-more-results-engine';
+  @track config = {};
+  isConfigured = false;
+
+  pageTitle = 'Quantic Load More Results';
+  pageDescription =
+    'The Quantic Load More Results component allows users to load additional results into the current result list without navigating to a new page.';
+  options = [
+    {
+      attribute: 'useCase',
+      label: 'Use Case',
+      description:
+        'Define which use case to test. Possible values are: search, insight',
+      defaultValue: 'search',
+    },
+  ];
+
+  get notConfigured() {
+    return !this.isConfigured;
+  }
+
+  handleTryItNow(evt) {
+    this.config = evt.detail;
+    this.isConfigured = true;
+  }
+}

packages/quantic/force-app/examples/main/lwc/exampleQuanticLoadMoreResults/exampleQuanticLoadMoreResults.js-meta.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>52.0</apiVersion>
+    <isExposed>true</isExposed>
+    <targets>
+      <target>lightning__RecordPage</target>
+      <target>lightning__AppPage</target>
+      <target>lightning__HomePage</target>
+      <target>lightningCommunity__Page</target>
+      <target>lightningCommunity__Default</target>
+  </targets>
+</LightningComponentBundle>

packages/quantic/force-app/main/default/labels/CustomLabels.labels-meta.xml

@@ -1750,4 +1750,39 @@
     <protected>false</protected>
     <shortDescription>Dislike</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_LoadMoreResults</fullName>
+    <value>Load more results</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Load more results</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_ShowingResultsOfLoadMore</fullName>
+    <value>Showing {{0}} of {{1}} result</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>ex: Showing 10 of 123 result</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_ShowingResultsOfLoadMore_plural</fullName>
+    <value>Showing {{0}} of {{1}} results</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>ex: Showing 10 of 123 results</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_ShowingResultsOfLoadMore_zero</fullName>
+    <value>No results</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>No Results</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_AllResultsLoaded</fullName>
+    <value>All results have been loaded.</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>All results have been loaded.</shortDescription>
+  </labels>
 </CustomLabels>

packages/quantic/force-app/main/default/lwc/jsconfig.json

@@ -26,6 +26,9 @@
         "quanticCategoryFacetValue/quanticCategoryFacetValue.js"
       ],
       "c/quanticFacet": ["quanticFacet/quanticFacet.js"],
+      "c/quanticLoadMoreResults": [
+        "quanticLoadMoreResults/quanticLoadMoreResults.js"
+      ],
       "c/quanticPager": ["quanticPager/quanticPager.js"],
       "c/quanticPlaceholder": ["quanticPlaceholder/quanticPlaceholder.js"],
       "c/quanticQueryError": ["quanticQueryError/quanticQueryError.js"],