@coveo/quantic 3.43.3 → 3.43.4

package/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/data.ts

@@ -0,0 +1,130 @@
+/**
+ * Facet response builders for the breadcrumb manager example page
+ * (`exampleQuanticBreadcrumbManager.html`), which registers four facets:
+ * filetype (regular), ytlikecount (numeric), date (timeframe), and
+ * geographicalhierarchy (category).
+ */
+type State = 'idle' | 'selected';
+
+const filetypeFacet = (state: State = 'idle') => ({
+  facetId: 'filetype',
+  field: 'filetype',
+  moreValuesAvailable: false,
+  values: [
+    {value: 'YouTubeVideo', state, numberOfResults: 100},
+    {value: 'txt', state: 'idle', numberOfResults: 50},
+  ],
+  indexScore: 0.5,
+});
+
+const numericFacet = (state: State = 'idle') => ({
+  facetId: 'ytlikecount',
+  field: 'ytlikecount',
+  moreValuesAvailable: false,
+  values: [
+    {start: 0, end: 1000, endInclusive: false, state, numberOfResults: 100},
+    {
+      start: 1000,
+      end: 2000,
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 50,
+    },
+  ],
+  indexScore: 0.4,
+});
+
+const timeframeFacet = (state: State = 'idle') => ({
+  facetId: 'date',
+  field: 'date',
+  moreValuesAvailable: false,
+  values: [
+    {start: 'past-1-week', end: 'now', endInclusive: false, state, numberOfResults: 100},
+    {
+      start: 'past-1-month',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 50,
+    },
+    {
+      start: 'past-6-month',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 40,
+    },
+    {
+      start: 'past-1-year',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 30,
+    },
+    {
+      start: 'past-10-year',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 20,
+    },
+  ],
+  indexScore: 0.3,
+});
+
+const categoryFacet = (state: State = 'idle') => ({
+  facetId: 'geographicalhierarchy',
+  field: 'geographicalhierarchy',
+  moreValuesAvailable: false,
+  values:
+    state === 'selected'
+      ? [
+          {
+            value: 'North America',
+            state: 'selected',
+            numberOfResults: 100,
+            children: [],
+            path: ['North America'],
+            isLeafValue: false,
+          },
+        ]
+      : [
+          {
+            value: 'North America',
+            state: 'idle',
+            numberOfResults: 100,
+            children: [],
+            path: ['North America'],
+            isLeafValue: false,
+          },
+          {
+            value: 'Africa',
+            state: 'idle',
+            numberOfResults: 50,
+            children: [],
+            path: ['Africa'],
+            isLeafValue: false,
+          },
+        ],
+  indexScore: 0.2,
+});
+
+const allFacets = (selected?: 'regular' | 'numeric' | 'timeframe' | 'category') => [
+  filetypeFacet(selected === 'regular' ? 'selected' : 'idle'),
+  numericFacet(selected === 'numeric' ? 'selected' : 'idle'),
+  timeframeFacet(selected === 'timeframe' ? 'selected' : 'idle'),
+  categoryFacet(selected === 'category' ? 'selected' : 'idle'),
+];
+
+export const allIdle = allFacets();
+export const regularSelected = allFacets('regular');
+export const numericSelected = allFacets('numeric');
+export const timeframeSelected = allFacets('timeframe');
+export const categorySelected = allFacets('category');
+
+export const regularAndTimeframeSelected = [
+  filetypeFacet('selected'),
+  numericFacet('idle'),
+  timeframeFacet('selected'),
+  categoryFacet('idle'),
+];

package/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/fixture.ts

@@ -1,12 +1,13 @@
 import {BreadcrumbManagerObject} from './pageObject';
-import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
-import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
+import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
 import {
   searchRequestRegex,
   insightSearchRequestRegex,
 } from '../../../../../../playwright/utils/requests';
 import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
 import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {allIdle} from './data';
 
 const breadcrumbManagerUrl = 's/quantic-breadcrumb-manager';
 
@@ -17,7 +18,6 @@ interface BreadcrumbManagerOptions {
 
 type QuanticBreadcrumbManagerE2EFixtures = {
   breadcrumbManager: BreadcrumbManagerObject;
-  search: SearchObject;
   options: Partial<BreadcrumbManagerOptions>;
 };
 
@@ -32,43 +32,54 @@ type QuanticBreadcrumbManagerE2eInsightFixtures =
   };
 
 export const testSearch =
-  quanticBase.extend<QuanticBreadcrumbManagerE2ESearchFixtures>({
+  facetBase.extend<QuanticBreadcrumbManagerE2ESearchFixtures>({
     options: {},
     urlHash: '',
-    search: async ({page}, use) => {
-      await use(new SearchObject(page, searchRequestRegex));
+    facetResponses: {responses: [allIdle]},
+    baseFacet: async ({page}, use) => {
+      await use(new BaseFacetObject(page, searchRequestRegex));
     },
     breadcrumbManager: async (
-      {page, options, configuration, search, urlHash},
+      {page, options, configuration, baseFacet, urlHash, facetResponses},
       use
     ) => {
+      await baseFacet.mockSearchWithBaseResponse();
       await page.goto(
         urlHash ? `${breadcrumbManagerUrl}#${urlHash}` : breadcrumbManagerUrl
       );
+      await baseFacet.mockSearchWithFacetResponseSequence(
+        facetResponses?.responses
+      );
       configuration.configure(options);
-      await search.waitForSearchResponse();
+      await baseFacet.waitForSearchResponse();
       await use(new BreadcrumbManagerObject(page));
     },
   });
 
 export const testInsight =
-  quanticBase.extend<QuanticBreadcrumbManagerE2eInsightFixtures>({
+  facetBase.extend<QuanticBreadcrumbManagerE2eInsightFixtures>({
     options: {},
-    search: async ({page}, use) => {
-      await use(new SearchObject(page, insightSearchRequestRegex));
+    facetResponses: {responses: [allIdle]},
+    baseFacet: async ({page}, use) => {
+      await use(new BaseFacetObject(page, insightSearchRequestRegex));
     },
     insightSetup: async ({page}, use) => {
       await use(new InsightSetupObject(page));
     },
     breadcrumbManager: async (
-      {page, options, search, configuration, insightSetup},
+      {page, options, baseFacet, configuration, insightSetup, facetResponses},
       use
     ) => {
       await page.goto(breadcrumbManagerUrl);
+      await baseFacet.mockSearchWithFacetResponseSequence(
+        facetResponses?.responses
+      );
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        baseFacet.waitForSearchResponse(),
+        baseFacet.performSearch(),
+      ]);
       await use(new BreadcrumbManagerObject(page));
     },
   });

package/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts

@@ -3,6 +3,14 @@ import {
   useCaseEnum,
   useCaseTestCases,
 } from '../../../../../../playwright/utils/useCase';
+import {
+  regularSelected,
+  numericSelected,
+  timeframeSelected,
+  categorySelected,
+  regularAndTimeframeSelected,
+  allIdle,
+} from './data';
 
 const fixtures = {
   search: testSearch,
@@ -23,17 +31,22 @@ useCaseTestCases.forEach((useCase) => {
   test.describe(`quantic breadcrumb manager ${useCase.label}`, () => {
     test.describe('when de-selecting a facet value', () => {
       test.describe('with regular facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, regularSelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const firstRegularFacetValue =
             await breadcrumbManager.firstRegularFacetValue;
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstRegularFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           const breadcrumbAnalyticsPromise =
             breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
               facetValue: firstRegularFacetValue,
@@ -45,18 +58,23 @@ useCaseTestCases.forEach((useCase) => {
       });
 
       test.describe('with numeric facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, numericSelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const [facetRangeStart, facetRangeEnd] =
             (await breadcrumbManager.firstNumericFacetValue)?.split(' - ') ??
             [];
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstNumericFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           // We use the facet display value to compare, but the display value is localized and can contain non-numeric characters while the analytics request doesn't contain those characters.
           const breadcrumbAnalyticsPromise =
             breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
@@ -70,17 +88,22 @@ useCaseTestCases.forEach((useCase) => {
       });
 
       test.describe('with timeframe|date facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, timeframeSelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const facetValue = await breadcrumbManager.firstTimeframeFacetValue;
           test.expect(facetValue).not.toBeNull();
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstTimeframeFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           // We use the facet display value to compare, but the display value is prettified and is transformed to be human readable, while the analytics request isn't.
           const [expectedFacetRangeStart, expectedFacetRangeEnd] =
             datetimeFacetLabelToValue[facetValue!].split('..');
@@ -96,17 +119,22 @@ useCaseTestCases.forEach((useCase) => {
       });
 
       test.describe('with category facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, categorySelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const facetValue = await breadcrumbManager.firstCategoryFacetValue;
           test.expect(facetValue).not.toBeNull();
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstCategoryFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           const expectedFacetValue = facetValue!;
           const breadcrumbAnalyticsPromise =
             breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
@@ -120,20 +148,30 @@ useCaseTestCases.forEach((useCase) => {
     });
 
     test.describe('when clicking on the clear all filters button', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            allIdle,
+            regularSelected,
+            regularAndTimeframeSelected,
+            allIdle,
+          ],
+        },
+      });
       test('should send a clear all filters analytics event and clear all selected facets values', async ({
         breadcrumbManager,
-        search,
+        baseFacet,
       }) => {
-        const searchResponsePromise = search.waitForSearchResponse();
+        const searchResponsePromise = baseFacet.waitForSearchResponse();
         await breadcrumbManager.clickFirstRegularFacetLink();
         await searchResponsePromise;
 
-        const searchResponsePromiseTwo = search.waitForSearchResponse();
+        const searchResponsePromiseTwo = baseFacet.waitForSearchResponse();
         await breadcrumbManager.clickFirstTimeframeFacetLink();
         await searchResponsePromiseTwo;
 
         await test.expect(breadcrumbManager.clearAllButton).toBeVisible();
-        const clearAllSearchResponsePromise = search.waitForSearchResponse();
+        const clearAllSearchResponsePromise = baseFacet.waitForSearchResponse();
         const clearAllAnalyticsPromise =
           breadcrumbManager.waitForBreadcrumbResetAllUaAnalytics();
         await breadcrumbManager.clickClearAllButton();
@@ -152,6 +190,9 @@ useCaseTestCases.forEach((useCase) => {
         const facetSelectedHash = 'f-filetype=YouTubeVideo';
         test.use({
           urlHash: facetSelectedHash,
+          facetResponses: {
+            responses: [regularSelected],
+          },
         });
 
         test('should have a facet selected in the breadcrumb manager', async ({

package/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.css

@@ -1,9 +1,8 @@
 .card {
   position: relative;
-  padding: 1rem 0.9rem;
-  background: var(--lwc-colorBackgroundAlt, #ffffff);
-  border: var(--lwc-borderWidthThin, 1px) solid var(--lwc-colorBorder, #dddbda);
-  border-radius: 0.25rem;
+  background: var(--slds-g-color-surface-1, var(--lwc-colorBackgroundAlt, #ffffff));
+  border: var(--slds-g-sizing-border-1, var(--lwc-borderWidthThin, 1px)) solid var(--slds-g-color-neutral-base-90, var(--lwc-colorBorder, #dddbda));
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
   background-clip: padding-box;
   -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);
   box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);

package/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.html

@@ -1,6 +1,6 @@
 <template>
   <host>
-    <article class="card">
+    <article class="card slds-p-around_medium">
       <header class="slds-grid slds-p-horizontal_x-small slds-has-flexi-truncate">
         <div class="slds-media__body card_focusable-header" onclick={handleHeaderClick} onkeydown={handleHeaderKeyDown}
           role="button" tabindex="0" data-testid="card-container__header">

package/force-app/main/default/lwc/quanticCarousel/quanticCarousel.css

@@ -13,19 +13,19 @@
 
 .carousel__indicator {
   width: 3.25rem;
-  height: 0.25rem;
+  height: var(--slds-g-sizing-2, 0.25rem);
   border: 0;
-  border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
-  background-color: var(--lwc-brandLightActive, #e3e5ed);
+  border-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
+  background-color: var(--slds-g-color-accent-light-1, var(--lwc-brandLightActive, #e3e5ed));
   transition: 0.2s;
 }
 
 .carousel__indicator--active {
-  background-color: var(--lwc-brandPrimary, #1b96ff);
+  background-color: var(--slds-g-color-accent-1, var(--lwc-brandPrimary, #1b96ff));
 }
 
 .carousel__indicator:hover {
-  background-color: var(--lwc-brandPrimaryActive, #0176d3);
+  background-color: var(--slds-g-color-accent-2, var(--lwc-brandPrimaryActive, #0176d3));
 }
 
 .carousel__previous-navigation {

package/force-app/main/default/lwc/quanticCaseClassification/quanticCaseClassification.css

@@ -28,7 +28,7 @@ lightning-icon {
 }
 
 .slds-visual-picker input:checked ~ label .visual-picker__figure:after {
-  border-right-color: var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255));
-  border-top-color: var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255));
-  border-radius: 4px;
+  border-right-color: var(--slds-g-color-brand-base-50, var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255)));
+  border-top-color: var(--slds-g-color-brand-base-50, var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255)));
+  border-radius: var(--slds-g-radius-border-2, 4px);
 }

package/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.css

@@ -1,6 +1,6 @@
 @import 'c/quanticFacetStyles';
 
 .facet__search-results_more-matches {
-   color:  #8E959D;
+   color: var(--slds-g-color-palette-neutral-60, #8E959D);
    font-size: var(--slds-g-font-scale-neg-1, 12px);
 }

package/force-app/main/default/lwc/quanticCitation/quanticCitation.css

@@ -1,29 +1,30 @@
 .citation:hover {
   cursor: pointer;
-  color: var(--lwc-brandAccessible, #0176d3);
+  color: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
 }
 
 .citation__link {
   max-width: 10.625rem;
-  height: 2rem;
+  height: var(--slds-g-sizing-9, 2rem);
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
 }
 
 .citation__link:hover {
-  background-color: var(--lwc-brandLight, #f4f6fe);
+  background-color: var(--slds-g-color-accent-light-1, var(--lwc-brandLight, #f4f6fe));
 }
 
 .citation__link:focus {
-  border: 1px solid var(--lwc-brandAccessible, #0070d2);
-  box-shadow: 0 0 3px 0 var(--lwc-brandAccessible, #0070d2);
+  border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0070d2));
+  box-shadow: 0 0 3px 0 var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0070d2));
 }
 
 .citation__link:hover .citation__title {
-  color: var(--lwc-brandAccessible, #0176d3);
+  color: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
 }
 
 .citation__title {
   font-weight: var(--lwc-fontWeightRegular, 400);
-  color: var(--lwc-colorTextPlaceholder, #747474);
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, #747474));
   font-size: var(--slds-g-font-size-base, 13px);
 }
 
@@ -35,18 +36,18 @@
 }
 
 .citation__tooltip {
-  color: rgb(26, 27, 30);
+  color: var(--slds-g-color-on-surface-3, rgb(26, 27, 30));
   cursor: default;
 }
 
 .citation__link--active {
-  border-color: var(--lwc-brandAccessible, #0176d3);
+  border-color: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
 }
 
 .citation__title--active {
-  color: var(--lwc-brandAccessible, #0176d3);
+  color: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
 }
 
 .citation__icon--active {
-  --slds-c-icon-color-foreground-default: var(--lwc-brandAccessible, #0176d3);
+  --slds-c-icon-color-foreground-default: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
 }

package/force-app/main/default/lwc/quanticDidYouMean/e2e/fixture.ts

@@ -44,6 +44,7 @@ export const testSearch =
       );
     },
     didYouMean: async ({page, options, configuration, search}, use) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure(options);
       await search.waitForSearchResponse();
@@ -68,11 +69,14 @@ export const testInsight =
       {page, options, search, configuration, insightSetup},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await use(new DidYouMeanObject(page));
     },
   });

package/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.css

@@ -7,9 +7,9 @@
 }
 
 .card-border {
-  border: 1px solid #dddbda;
+  border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #dddbda);
 }
 
 .no-suggestion-message {
-  background-color: #f6f7f9;
+  background-color: var(--slds-g-color-surface-2, #f6f7f9);
 }

package/force-app/main/default/lwc/quanticFacet/quanticFacet.css

@@ -1,6 +1,6 @@
 @import 'c/quanticFacetStyles';
 
 .facet__search-results_more-matches{
-  color: #8e959d;
+  color: var(--slds-g-color-palette-neutral-60, #8e959d);
   font-size: var(--slds-g-font-scale-neg-1, 12px);
 }

package/force-app/main/default/lwc/quanticFacetManager/e2e/data.ts

@@ -0,0 +1,59 @@
+/**
+ * Facet response builder for the facet manager example page
+ * (`exampleQuanticFacetManager.html`), which registers three facets:
+ * a `language` facet, a `date` timeframe facet, and an `objecttype` facet.
+ */
+const facetManagerData = [
+  {
+    facetId: 'language',
+    field: 'language',
+    moreValuesAvailable: false,
+    values: [{value: 'English', state: 'idle', numberOfResults: 100}],
+    indexScore: 0.3,
+  },
+  {
+    facetId: 'date',
+    field: 'date',
+    moreValuesAvailable: false,
+    values: [
+      {
+        start: 'past-1-week',
+        end: 'now',
+        endInclusive: false,
+        state: 'idle',
+        numberOfResults: 10,
+      },
+      {
+        start: 'past-1-month',
+        end: 'now',
+        endInclusive: false,
+        state: 'idle',
+        numberOfResults: 20,
+      },
+      {
+        start: 'past-6-month',
+        end: 'now',
+        endInclusive: false,
+        state: 'idle',
+        numberOfResults: 30,
+      },
+      {
+        start: 'past-1-year',
+        end: 'now',
+        endInclusive: false,
+        state: 'idle',
+        numberOfResults: 40,
+      },
+    ],
+    indexScore: 0.2,
+  },
+  {
+    facetId: 'objecttype',
+    field: 'objecttype',
+    moreValuesAvailable: false,
+    values: [{value: 'People', state: 'idle', numberOfResults: 50}],
+    indexScore: 0.1,
+  },
+];
+
+export default facetManagerData;