@coveo/quantic 3.37.10 → 3.38.0

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/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>