Merge branch 'master' into feature/SVCC-2942-result-actions

coveo · Jul 5, 2023 · 2b9b082 · 2b9b082
2 parents 6f6eb44 + cf4309a
commit 2b9b082
Show file tree

Hide file tree

Showing 23 changed files with 841 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.pcss b/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.pcss
@@ -1,9 +1,5 @@
 @import '../../../global/global.pcss';
 
-[part='container'] {
-  box-shadow: 0px 4px 8px rgba(4, 8, 31, 0.08), inset 0px 0px 0px 1px var(--atomic-neutral);
-}
-
 [part='header-label'] {
   color: var(--atomic-primary);
 }

diff --git a/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx b/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx
@@ -66,6 +66,14 @@ export class AtomicGeneratedAnswer implements InitializableComponent {
     );
   }
 
+  private get loadingClasses() {
+    return 'my-3';
+  }
+
+  private get contentClasses() {
+    return 'mt-0 mb-4 border border-neutral shadow-lg p-6 bg-background rounded-lg p-6 text-on-background';
+  }
+
   private renderContent() {
     return (
       <div part="generated-content">
@@ -116,23 +124,18 @@ export class AtomicGeneratedAnswer implements InitializableComponent {
   }
 
   public render() {
+    const {isLoading} = this.generatedAnswerState;
     if (this.shouldBeHidden) {
       return null;
     }
     return (
       <aside
-        class="bg-background border-neutral rounded-lg p-6 text-on-background mt-0 mx-auto mb-4"
+        class={`mx-auto ${
+          isLoading ? this.loadingClasses : this.contentClasses
+        }`}
         part="container"
       >
-        <article>
-          {this.generatedAnswerState.isLoading ? (
-            <TypingLoader
-              loadingLabel={this.bindings.i18n.t('generated-answer-loading')}
-            />
-          ) : (
-            this.renderContent()
-          )}
-        </article>
+        <article>{isLoading ? <TypingLoader /> : this.renderContent()}</article>
       </aside>
     );
   }

diff --git a/packages/atomic/src/components/search/atomic-generated-answer/generated-content.tsx b/packages/atomic/src/components/search/atomic-generated-answer/generated-content.tsx
@@ -13,7 +13,7 @@ export const GeneratedContent: FunctionalComponent<GeneratedContentProps> = (
   props
 ) => (
   <div class="mt-6">
-    <p part="generated-text" class="mt-2 mb-0 whitespace-pre-wrap leading-7">
+    <p part="generated-text" class="mb-0 whitespace-pre-wrap leading-7">
       {props.answer}
     </p>
     <SourceCitations

diff --git a/packages/atomic/src/components/search/atomic-generated-answer/typing-loader.tsx b/packages/atomic/src/components/search/atomic-generated-answer/typing-loader.tsx
@@ -1,18 +1,9 @@
 import {FunctionalComponent, h} from '@stencil/core';
 
-interface TypingLoaderProps {
-  loadingLabel: string;
-}
-
-export const TypingLoader: FunctionalComponent<TypingLoaderProps> = (props) => (
-  <div>
-    <div class="typing-indicator" aria-hidden="true">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-    <div class="mx-auto text-center mt-4 text-neutral-dark">
-      {props.loadingLabel}
-    </div>
+export const TypingLoader: FunctionalComponent = () => (
+  <div class="typing-indicator" aria-hidden="true">
+    <span></span>
+    <span></span>
+    <span></span>
   </div>
 );
diff --git a/packages/quantic/CHANGELOG.md b/packages/quantic/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.26.4 (2023-07-05)
+
+### Bug Fixes
+
+- **quantic:** Changed the quantic_OpensInSalesforceSubTab to something more generic ([#3005](https://github.com/coveo/ui-kit/issues/3005)) ([a1e4492](https://github.com/coveo/ui-kit/commits/a1e4492354b4228af86c69dd8351b8ae8d4a8ea6))
+
 ## 2.26.3 (2023-06-29)
 
 ## 2.26.2 (2023-06-29)

diff --git a/...ges/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list-expectations.ts b/...ges/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list-expectations.ts
@@ -1,6 +1,8 @@
 import {Interception} from '../../../../../../node_modules/cypress/types/net-stubbing';
 import {InterceptAliases} from '../../../page-objects/search';
+import {ComponentErrorExpectations} from '../../common-expectations';
 import {should} from '../../common-selectors';
+import {ConsoleExpectations} from '../../console-expectations';
 import {EventExpectations} from '../../event-expectations';
 import {
   RecommendationListSelector,
@@ -41,6 +43,13 @@ export function recommendationListExpectations(
         .logDetail(`${should(display)} display recommendations`);
     },
 
+    displayCarousel: (display: boolean) => {
+      selector
+        .carousel()
+        .should(display ? 'exist' : 'not.exist')
+        .logDetail(`${should(display)} display the carousel`);
+    },
+
     recommendationsEqual: (recommendationsAlias: string) => {
       cy.get<Array<{Title: string}>>(recommendationsAlias).then(
         (recommendations) => {
@@ -176,4 +185,8 @@ export const RecommendationListExpectations = {
   events: {
     ...EventExpectations,
   },
+  ...ComponentErrorExpectations(RecommendationListSelectors),
+  console: {
+    ...ConsoleExpectations,
+  },
 };
diff --git a/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list-selectors.ts b/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list-selectors.ts
@@ -1,4 +1,8 @@
-import {ComponentSelector, CypressSelector} from '../../common-selectors';
+import {
+  ComponentErrorSelector,
+  ComponentSelector,
+  CypressSelector,
+} from '../../common-selectors';
 
 export const recommendationlistComponent = 'c-quantic-recommendation-list';
 
@@ -7,9 +11,11 @@ export interface RecommendationListSelector extends ComponentSelector {
   recommendations: () => CypressSelector;
   label: (headingLevel: number) => CypressSelector;
   recommendationLinks: () => CypressSelector;
+  carousel: () => CypressSelector;
 }
 
-export const RecommendationListSelectors: RecommendationListSelector = {
+export const RecommendationListSelectors: RecommendationListSelector &
+  ComponentErrorSelector = {
   get: () => cy.get(recommendationlistComponent),
 
   placeholders: () =>
@@ -26,4 +32,14 @@ export const RecommendationListSelectors: RecommendationListSelector = {
     RecommendationListSelectors.get().find(
       '[data-cy="recommendations__item"] c-quantic-result-link a'
     ),
+  carousel: () =>
+    RecommendationListSelectors.get().find(
+      '[data-cy="recommendations__carousel"]'
+    ),
+  componentError: () =>
+    RecommendationListSelectors.get().find('c-quantic-component-error'),
+  componentErrorMessage: () =>
+    RecommendationListSelectors.get().find(
+      'c-quantic-component-error [data-cy="error-message"]'
+    ),
 };
diff --git a/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts b/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts
@@ -6,16 +6,21 @@ import {
   interceptSearchIndefinitely,
 } from '../../../page-objects/search';
 import {scope} from '../../../reporters/detailed-collector';
+import {stubConsoleError} from '../../console-selectors';
 import {RecommendationListActions as Actions} from './recommendation-list-actions';
 import {RecommendationListExpectations as Expect} from './recommendation-list-expectations';
 
+const invalidPropertyErrorMessage =
+  'The value of the recommendationsPerRow property must be an integer greater than 0.';
+
 interface RecommendationListOptions {
   recommendation: string;
-  numberOfRecommendations: number | string;
-  recommendationsPerRow: number;
+  numberOfRecommendations: number;
+  recommendationsPerRow: number | string;
   label: string;
   fieldsToInclude: string;
   headingLevel: number;
+  variant: 'grid' | 'carousel';
 }
 
 describe('quantic-recommendation-list', () => {
@@ -74,6 +79,7 @@ describe('quantic-recommendation-list', () => {
         Expect.events.receivedEvent(true, registerRecommendationTemplatesEvent);
         Expect.displayLabel(label, defaultHeadingLevel);
         Expect.displayRecommendations(true);
+        Expect.displayCarousel(false);
         Expect.recommendationsEqual(recommendationsAlias);
         Expect.correctFieldsIncluded(defaultFieldsToInclude.split(','));
         Expect.correctRecommendationId(defaultRecommendationId);
@@ -111,6 +117,7 @@ describe('quantic-recommendation-list', () => {
         Expect.events.receivedEvent(true, registerRecommendationTemplatesEvent);
         Expect.displayLabel(label, customHeadingLevel);
         Expect.displayRecommendations(true);
+        Expect.displayCarousel(false);
         Expect.recommendationsEqual(recommendationsAlias);
         Expect.correctFieldsIncluded(customFieldsToInclude.split(','));
         Expect.correctRecommendationId(customRecommendationId);
@@ -123,4 +130,69 @@ describe('quantic-recommendation-list', () => {
       });
     });
   });
+
+  describe('when the recommendations are displayed in a carousel', () => {
+    it('should properly display the recommendations inside a carousel', () => {
+      visitPage({
+        label,
+        variant: 'carousel',
+      });
+      setRecommendationsAlias();
+
+      scope('when loading the page', () => {
+        Expect.logRecommendationInterfaceLoad(recommendationsAlias);
+        Expect.events.receivedEvent(true, registerRecommendationTemplatesEvent);
+        Expect.displayLabel(label, defaultHeadingLevel);
+        Expect.displayCarousel(true);
+        Expect.displayRecommendations(true);
+        Expect.recommendationsEqual(recommendationsAlias);
+        Expect.correctFieldsIncluded(defaultFieldsToInclude.split(','));
+        Expect.correctRecommendationId(defaultRecommendationId);
+        Expect.correctNumberOfRecommendations(defaultNumberOfRecommendations);
+        Expect.correctNumberOfRecommendationsPerRow(
+          defaultRecommendationsPerRow
+        );
+        Actions.clickRecommendationLink(0);
+        Expect.logRecommendationOpen(0, recommendationsAlias);
+      });
+    });
+  });
+
+  describe('when invalid property values are passed', () => {
+    describe('when the value of the property recommendationsPerRow is not a number', () => {
+      it('should display an error message ', () => {
+        cy.visit(pageUrl, {
+          onBeforeLoad(win) {
+            stubConsoleError(win);
+          },
+        });
+        configure({
+          recommendationsPerRow: 'invalid value',
+        });
+
+        scope('when loading the page', () => {
+          Expect.console.error(true, invalidPropertyErrorMessage);
+          Expect.displayComponentError(true);
+        });
+      });
+    });
+
+    describe('when the value of the property recommendationsPerRow is a negative value', () => {
+      it('should display an error message ', () => {
+        cy.visit(pageUrl, {
+          onBeforeLoad(win) {
+            stubConsoleError(win);
+          },
+        });
+        configure({
+          recommendationsPerRow: -1,
+        });
+
+        scope('when loading the page', () => {
+          Expect.console.error(true, invalidPropertyErrorMessage);
+          Expect.displayComponentError(true);
+        });
+      });
+    });
+  });
 });
diff --git a/.../examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.html b/.../examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.html
@@ -19,6 +19,7 @@
         label={config.label}
         fields-to-include={config.fieldsToInclude}
         heading-level={config.headingLevel}
+        variant={config.variant}
       >
       </c-quantic-recommendation-list>
     </c-quantic-recommendation-interface>

diff --git a/...pp/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js b/...pp/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js
@@ -32,6 +32,8 @@ export default class ExampleQuanticRecommendationtList extends LightningElement
       attribute: 'label',
       label: 'Label',
       description: 'The label of the component.',
+      defaultValue:
+      'Top documents for you',
     },
     {
       attribute: 'fieldsToInclude',
@@ -44,9 +46,15 @@ export default class ExampleQuanticRecommendationtList extends LightningElement
     {
       attribute: 'headingLevel',
       label: 'Heading Level',
-      description: 'The Heading level to use for the heading label',
+      description: 'The Heading level to use for the heading label. Will display the label of the recommendations within a <hx> tag.',
       defaultValue: 1,
     },
+    {
+      attribute: 'variant',
+      label: 'Variant',
+      description: "The variant of the component. Accepted variants are `grid` and `carousel`.",
+      defaultValue: 'grid',
+    },
   ];
   expectedEvents = ['registerrecommendationtemplates'];
 

diff --git a/packages/quantic/force-app/main/default/labels/CustomLabels.labels-meta.xml b/packages/quantic/force-app/main/default/labels/CustomLabels.labels-meta.xml
@@ -1169,4 +1169,39 @@
       <protected>false</protected>
       <shortDescription>Fatal error: unable to initialize the component.</shortDescription>
     </labels>
+    <labels>
+      <fullName>quantic_InvalidPositiveIntegerProperty</fullName>
+      <value>The value of the {{0}} property must be an integer greater than 0.</value>
+      <language>en_US</language>
+      <protected>false</protected>
+      <shortDescription>The value of the property must be an integer greater than 0.</shortDescription>
+    </labels>
+    <labels>
+      <fullName>quantic_XOfY</fullName>
+      <value>{{0}} of {{1}}</value>
+      <language>en_US</language>
+      <protected>false</protected>
+      <shortDescription>1 of 6</shortDescription>
+    </labels>
+    <labels>
+      <fullName>quantic_TopDocumentsForYou</fullName>
+      <value>Top documents for you</value>
+      <language>en_US</language>
+      <protected>false</protected>
+      <shortDescription>Top documents for you</shortDescription>
+    </labels>
+    <labels>
+      <fullName>quantic_Carousel</fullName>
+      <value>Carousel</value>
+      <language>en_US</language>
+      <protected>false</protected>
+      <shortDescription>Carousel</shortDescription>
+    </labels>
+    <labels>
+      <fullName>quantic_Slide</fullName>
+      <value>Slide</value>
+      <language>en_US</language>
+      <protected>false</protected>
+      <shortDescription>Slide</shortDescription>
+    </labels>
 </CustomLabels>