@coveo/quantic 3.37.10 → 3.38.1

package/force-app/main/default/lwc/quanticGeneratedAnswerCopyToClipboard/quanticGeneratedAnswerCopyToClipboard.js

@@ -12,8 +12,27 @@ import {LightningElement, api} from 'lwc';
 export default class QuanticGeneratedAnswerCopyToClipboard extends LightningElement {
   /**
    * The answer to copy
+   * @type {string}
    */
-  @api answer;
+  @api answer = '';
+
+  /**
+   * The size of the copy icon.
+   * @api
+   * @type {'xx-small' | 'x-small' | 'small' | 'medium' | 'large'}
+   */
+  @api
+  get size() {
+    return this._size;
+  }
+  set size(value) {
+    if (['xx-small', 'x-small', 'small', 'medium', 'large'].includes(value)) {
+      this._size = value;
+    }
+  }
+
+  /** @type {'xx-small' | 'x-small' | 'small' | 'medium' | 'large'} */
+  _size = 'xx-small';
 
   labels = {
     copy,

package/force-app/main/default/lwc/quanticSort/e2e/pageObject.ts

@@ -1,4 +1,4 @@
-import type {Locator, Page, Request} from '@playwright/test';
+import {expect, type Locator, type Page, type Request} from '@playwright/test';
 import {isUaSearchEvent} from '../../../../../../playwright/utils/requests';
 
 export class SortObject {
@@ -32,7 +32,20 @@ export class SortObject {
     } else {
       await this.sortDropDown.press('Space');
     }
-    await this.sortButton('Oldest').waitFor({state: 'visible'});
+    const overlay = this.page.locator('div[part="dropdown overlay"]');
+    await overlay.waitFor({state: 'visible'});
+    await overlay
+      .locator('[role="option"]')
+      .first()
+      .waitFor({state: 'visible'});
+  }
+
+  async selectNextSortOptionUsingKeyboard(
+    expectedLabel: string
+  ): Promise<void> {
+    await this.sortDropDown.press('ArrowDown');
+    await this.sortDropDown.press('Enter');
+    await expect(this.sortDropDown).toHaveText(expectedLabel);
   }
 
   async waitForSortUaAnalytics(eventValue: any): Promise<Request> {
@@ -60,24 +73,22 @@ export class SortObject {
     return uaRequest;
   }
 
-  async allSortLabelOptions() {
-    const options = await this.page
-      .locator('div[part="dropdown overlay"]')
-      .allInnerTexts();
-    const arrSort = options[0].split('\n');
-    return arrSort;
-  }
+  async getSortLabelValue(): Promise<{label: string; value: string | null}[]> {
+    const sortOptions = this.page.locator(
+      'div[part="dropdown overlay"] [role="option"]'
+    );
+    await sortOptions.first().waitFor({state: 'visible'});
 
-  async getSortLabelValue() {
-    const arrSort = await this.allSortLabelOptions();
-    const sortLabelwithValueList = await Promise.all(
-      arrSort.map(async (item) => ({
-        label: item,
-        value: await this.page
-          .getByRole('option', {name: item})
-          .getAttribute('data-value'),
+    return sortOptions.evaluateAll((options) =>
+      options.map((option) => ({
+        label: (
+          (option as HTMLElement).innerText ||
+          option.getAttribute('aria-label') ||
+          option.getAttribute('title') ||
+          ''
+        ).trim(),
+        value: option.getAttribute('data-value'),
       }))
     );
-    return sortLabelwithValueList;
   }
 }

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

@@ -11,8 +11,8 @@ const fixtures = {
 
 useCaseTestCases.forEach((useCase) => {
   let test;
-  let sortArrOptions;
-  let sortLabelWithValue;
+  let sortArrOptions: string[];
+  let sortLabelWithValue: {label: string; value: string | null}[];
   if (useCase.value === useCaseEnum.search) {
     test = fixtures[useCase.value] as typeof testSearch;
   } else {
@@ -22,8 +22,8 @@ useCaseTestCases.forEach((useCase) => {
   test.describe(`quantic sort ${useCase.label}`, () => {
     test.beforeEach(async ({sort}) => {
       await sort.clickSortDropDown();
-      sortArrOptions = await sort.allSortLabelOptions();
       sortLabelWithValue = await sort.getSortLabelValue();
+      sortArrOptions = sortLabelWithValue.map(({label}) => label);
       await sort.clickSortDropDown();
     });
 
@@ -53,15 +53,13 @@ useCaseTestCases.forEach((useCase) => {
         // Selecting the next sort using Enter to open dropdown, the ArrowDown, then ENTER key
         await sort.focusSortDropDown();
         await sort.openSortDropdownUsingKeyboardEnter();
-        await sort.sortDropDown.press('ArrowDown');
-        await sort.sortDropDown.press('Enter');
+        await sort.selectNextSortOptionUsingKeyboard(sortArrOptions[1]);
         await expect(sort.sortDropDown).toHaveText(sortArrOptions[1]);
 
         // Selecting the next sort using Space to open dropdown, the ArrowDown, then ENTER key
         await sort.focusSortDropDown();
         await sort.openSortDropdownUsingKeyboardEnter(false);
-        await sort.sortDropDown.press('ArrowDown');
-        await sort.sortDropDown.press('Enter');
+        await sort.selectNextSortOptionUsingKeyboard(sortArrOptions[2]);
         await expect(sort.sortDropDown).toHaveText(sortArrOptions[2]);
       });
     });
@@ -76,7 +74,7 @@ useCaseTestCases.forEach((useCase) => {
             sortLabelWithValue[2]; // Assuming 0 is the first sort option
 
           const currentUrl = await page.url();
-          const urlHash = `#sortCriteria=${encodeURI(expectedSortValue)}`;
+          const urlHash = `#sortCriteria=${encodeURI(expectedSortValue!)}`;
 
           await page.goto(`${currentUrl}/${urlHash}`);
           await page.getByRole('button', {name: 'Try it now'}).click();

package/force-app/main/default/lwc/quanticThreadItem/__tests__/quanticThreadItem.test.js

@@ -0,0 +1,176 @@
+// @ts-ignore
+import QuanticThreadItem from '../quanticThreadItem';
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+
+const selectors = {
+  titleButton: '[data-testid="thread-item-title-button"]',
+  titleSpan: '[data-testid="thread-item-title-static"]',
+  boldTitle: '.slds-text-title_bold',
+  contentWrapper: '[data-testid="thread-item-content"]',
+  visibleContent: '[data-testid="thread-item-content"] > div:not([hidden])',
+  line: '[data-testid="thread-item-line"]',
+  dot: '[data-testid="thread-item-dot"]',
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticThreadItem,
+  'c-quantic-thread-item',
+  {
+    title: 'Test title',
+  }
+);
+
+describe('c-quantic-thread-item', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('initial rendering', () => {
+    it('renders a button when collapse is enabled', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      expect(button).not.toBeNull();
+    });
+
+    it('renders a span instead of a button when disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      const span = element.shadowRoot.querySelector(selectors.titleSpan);
+      expect(button).toBeNull();
+      expect(span).not.toBeNull();
+    });
+
+    it('renders the timeline line by default', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const line = element.shadowRoot.querySelector(selectors.line);
+      expect(line).not.toBeNull();
+    });
+
+    it('hides the timeline line when hideLine is true', async () => {
+      const element = createTestComponent({hideLine: true});
+      await flushPromises();
+
+      const line = element.shadowRoot.querySelector(selectors.line);
+      expect(line).toBeNull();
+    });
+  });
+
+  describe('collapsed state', () => {
+    it('does not render the content by default', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+
+    it('button has aria-expanded set to false when collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      expect(button.getAttribute('aria-expanded')).toBe('false');
+    });
+
+    it('dot does not have expanded class when collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).not.toContain('thread-item__dot--expanded');
+    });
+  });
+
+  describe('expanded state', () => {
+    it('renders the content when isExpanded is true', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('button has aria-expanded set to true when expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.titleButton);
+      expect(button.getAttribute('aria-expanded')).toBe('true');
+    });
+
+    it('dot has expanded class when expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).toContain('thread-item__dot--expanded');
+    });
+  });
+
+  describe('toggle interaction', () => {
+    it('renders the content when the button is clicked while collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.titleButton).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('does not render the content when the button is clicked while expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.titleButton).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+  });
+
+  describe('disableCollapse', () => {
+    it('forces item to be expanded regardless of isExpanded prop', async () => {
+      const element = createTestComponent({
+        disableCollapse: true,
+        isExpanded: false,
+      });
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('renders a bold title when collapse is disabled', async () => {
+      const element = createTestComponent({
+        disableCollapse: true,
+        isExpanded: false,
+      });
+      await flushPromises();
+
+      const title = element.shadowRoot.querySelector(selectors.titleSpan);
+      expect(title.className).toContain('slds-text-title_bold');
+      expect(
+        element.shadowRoot.querySelector(selectors.boldTitle)
+      ).not.toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,64 @@
+.thread-item {
+  list-style: none;
+}
+
+.thread-item__dot-column,
+.thread-item__line-column {
+  width: 10px;
+}
+
+.thread-item__line-column {
+  align-items: stretch;
+}
+
+.thread-item__dot {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.thread-item__dot--expanded {
+  background-color: var(--lwc-colorTextDefault, #080707);
+}
+
+.thread-item__line {
+  position: relative;
+  width: 1px;
+  height: 100%;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.thread-item__line::before,
+.thread-item__line::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 1px;
+  height: 8px;
+  background-color: var(--lwc-colorBorder, #dddbda);
+}
+
+.thread-item__line::before {
+  top: -8px;
+}
+
+.thread-item__line::after {
+  bottom: -8px;
+}
+
+.thread-item__clamped-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.thread-item__title-button {
+  width: fit-content;
+  border-radius: var(--slds-g-radius-border-2, 4px);
+}
+
+.thread-item__title-button:hover {
+  background-color: var(--lwc-colorBackgroundRowHover, #f3f2f2);
+}

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

@@ -0,0 +1,48 @@
+<template>
+  <li class="thread-item">
+    <div class="slds-grid slds-grid_vertical-align-center">
+      <div
+        class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-shrink-none slds-m-right_x-small thread-item__dot-column"
+      >
+        <span class={dotClass} data-testid="thread-item-dot"></span>
+      </div>
+      <div class="slds-col slds-has-flexi-truncate">
+        <template lwc:if={disableCollapse}>
+          <span class={titleClass} data-testid="thread-item-title-static"
+            >{title}</span
+          >
+        </template>
+        <template lwc:else>
+          <button
+            type="button"
+            class={titleButtonClass}
+            aria-expanded={isExpanded}
+            data-testid="thread-item-title-button"
+            onclick={handleTitleClick}
+            aria-controls="thread-item-content"
+          >
+            {title}
+          </button>
+        </template>
+      </div>
+    </div>
+    <div class="slds-grid">
+      <div
+        class="slds-grid slds-grid_align-center slds-shrink-none thread-item__line-column slds-m-right_x-small"
+      >
+        <template lwc:if={shouldDisplayLine}>
+          <span class="thread-item__line" data-testid="thread-item-line"></span>
+        </template>
+      </div>
+      <div
+        id="thread-item-content"
+        class="slds-col slds-p-left_x-small slds-p-vertical_xx-small"
+        data-testid="thread-item-content"
+      >
+        <div hidden={contentHidden}>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.js

@@ -0,0 +1,80 @@
+import {LightningElement, api} from 'lwc';
+
+/**
+ * The `QuanticThreadItem` component renders a thread item with timeline visuals and collapsible content.
+ * @category Internal
+ * @example
+ * <c-quantic-thread-item title="Step title" hide-line is-expanded></c-quantic-thread-item>
+ */
+export default class QuanticThreadItem extends LightningElement {
+  /**
+   * The title displayed for the thread item.
+   * @api
+   * @type {string}
+   */
+  @api title = '';
+
+  /**
+   * Whether the thread item can be expanded or collapsed.
+   * @api
+   * @type {boolean}
+   * @defaultValue `false`
+   */
+  @api disableCollapse = false;
+
+  /**
+   * Whether the timeline line should be hidden.
+   * @api
+   * @type {boolean}
+   * @defaultValue `false`
+   */
+  @api hideLine = false;
+
+  /**
+   * Whether the thread item is expanded.
+   * @api
+   * @type {boolean}
+   * @defaultValue `false`
+   */
+  @api
+  get isExpanded() {
+    return this._isExpanded;
+  }
+  set isExpanded(value) {
+    this._isExpanded = value;
+  }
+
+  /** @type {boolean} */
+  _isExpanded = false;
+
+  connectedCallback() {
+    this._isExpanded = this.disableCollapse ? true : this.isExpanded;
+  }
+
+  handleTitleClick() {
+    if (this.disableCollapse) {
+      return;
+    }
+    this._isExpanded = !this._isExpanded;
+  }
+
+  get shouldDisplayLine() {
+    return !this.hideLine;
+  }
+
+  get contentHidden() {
+    return !this._isExpanded;
+  }
+
+  get titleClass() {
+    return `thread-item__clamped-text slds-text-body_regular slds-p-horizontal_x-small slds-p-vertical_xx-small${this._isExpanded ? ' slds-text-title_bold' : ''}`;
+  }
+
+  get titleButtonClass() {
+    return `slds-button_reset slds-p-horizontal_x-small slds-p-vertical_xx-small thread-item__title-button thread-item__clamped-text${this._isExpanded ? ' slds-text-title_bold' : ''}`;
+  }
+
+  get dotClass() {
+    return `thread-item__dot${this._isExpanded ? ' thread-item__dot--expanded' : ''}`;
+  }
+}

package/force-app/main/default/lwc/quanticThreadItem/quanticThreadItem.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>66.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>