@coveo/quantic 3.35.0 → 3.36.0

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

@@ -46,6 +46,11 @@ const exampleSalesforceLink = 'https://www.example-salesforce.com';
 const urlFragment = '#:~:text=text%2001';
 const exampleCitationUrl = 'https://example.com/';
 
+const activeCitationLinkClass = 'citation__link--active';
+const activeCitationTitleClass = 'citation__title--active';
+const activeCitationIconClass = 'citation__icon--active';
+const testIconName = 'utility:attach';
+
 const defaultOptions = {
   citation: exampleCitation,
   interactiveCitation: {
@@ -62,9 +67,23 @@ const selectors = {
   citationTitle: '.citation__title',
   citationTooltip: 'c-quantic-tooltip',
   citationTooltipUrl: '[data-testid="citation__tooltip-uri"]',
+  citationIcon: '.citation__icon',
+  actionsSlot: 'slot[name="actions"]',
 };
 
-function createTestComponent(options = defaultOptions) {
+/**
+ * Mocks the return value of the assignedNodes method.
+ * @param {Array<Element>} assignedElements
+ */
+function mockSlotAssignedNodes(assignedElements) {
+  HTMLSlotElement.prototype.assignedNodes = function () {
+    return assignedElements;
+  };
+}
+
+function createTestComponent(options = defaultOptions, assignedElements = []) {
+  mockSlotAssignedNodes(assignedElements);
+
   const element = createElement('c-quantic-citation', {
     is: QuanticCitation,
   });
@@ -447,4 +466,116 @@ describe('c-quantic-citation', () => {
       });
     });
   });
+
+  describe('when the citation is active', () => {
+    it('should apply the active styles to the citation link, title and icon', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        citation: exampleCitation,
+        isActive: true,
+        iconName: testIconName,
+      });
+      await flushPromises();
+
+      const citationLink = element.shadowRoot.querySelector(
+        selectors.citationLink
+      );
+      const citationTitle = element.shadowRoot.querySelector(
+        selectors.citationTitle
+      );
+      const citationIcon = element.shadowRoot.querySelector(
+        selectors.citationIcon
+      );
+
+      expect(citationLink.classList).toContain(activeCitationLinkClass);
+      expect(citationTitle.classList).toContain(activeCitationTitleClass);
+      expect(citationIcon.classList).toContain(activeCitationIconClass);
+    });
+  });
+
+  describe('when the citation is not active', () => {
+    it('should not apply the active styles to the citation link, title and icon', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        citation: exampleCitation,
+        isActive: false,
+        iconName: testIconName,
+      });
+      await flushPromises();
+
+      const citationLink = element.shadowRoot.querySelector(
+        selectors.citationLink
+      );
+      const citationTitle = element.shadowRoot.querySelector(
+        selectors.citationTitle
+      );
+      const citationIcon = element.shadowRoot.querySelector(
+        selectors.citationIcon
+      );
+
+      expect(citationLink.classList).not.toContain(activeCitationLinkClass);
+      expect(citationTitle.classList).not.toContain(activeCitationTitleClass);
+      expect(citationIcon.classList).not.toContain(activeCitationIconClass);
+    });
+  });
+
+  describe('when an icon name is provided', () => {
+    it('should set the icon name on the citation icon', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        citation: exampleCitation,
+        iconName: testIconName,
+      });
+      await flushPromises();
+
+      const citationIcon = element.shadowRoot.querySelector('lightning-icon');
+      expect(citationIcon.iconName).toBe(testIconName);
+    });
+  });
+
+  describe('when no icon name is provided', () => {
+    it('should not display any icon in the citation', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        citation: exampleCitation,
+        iconName: undefined,
+      });
+      await flushPromises();
+
+      const citationIcon = element.shadowRoot.querySelector('lightning-icon');
+      expect(citationIcon).toBeNull();
+    });
+  });
+
+  describe('citation actions slot', () => {
+    it('should render provided actions in the slot', async () => {
+      const exampleAction = document.createElement('span');
+      exampleAction.textContent = 'Test Action';
+      const exampleAssignedElements = [exampleAction];
+
+      const element = createTestComponent(
+        defaultOptions,
+        exampleAssignedElements
+      );
+      await flushPromises();
+
+      const slot = element.shadowRoot.querySelector(selectors.actionsSlot);
+      expect(slot).not.toBeNull();
+
+      const assignedActions = slot.assignedNodes();
+      expect(assignedActions).toHaveLength(1);
+      expect(assignedActions[0].textContent).toBe('Test Action');
+    });
+
+    it('should have no assigned actions when none are provided', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const slot = element.shadowRoot.querySelector(selectors.actionsSlot);
+      expect(slot).not.toBeNull();
+
+      const assignedActions = element.querySelectorAll('[slot="actions"]');
+      expect(assignedActions).toHaveLength(0);
+    });
+  });
 });

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

@@ -37,4 +37,16 @@
 .citation__tooltip {
   color: rgb(26, 27, 30);
   cursor: default;
-}
+}
+
+.citation__link--active {
+  border-color: var(--lwc-brandAccessible, #0176d3);
+}
+
+.citation__title--active {
+  color: var(--lwc-brandAccessible, #0176d3);
+}
+
+.citation__icon--active {
+  --slds-c-icon-color-foreground-default: var(--lwc-brandAccessible, #0176d3);
+}

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

@@ -3,7 +3,7 @@
     class="citation slds-m-right_xx-small slds-m-vertical_xx-small slds-is-relative"
   >
     <a
-      class="citation__link slds-badge slds-badge_lightest slds-align_absolute-center slds-text-link_reset slds-p-left_xx-small slds-p-right_x-small"
+      class={citationLinkClasses}
       aria-label={citationTitle}
       href={hrefValue}
       target="_blank"
@@ -12,11 +12,15 @@
       onmouseleave={handleCitationMouseLeave}
       onclick={handleClick}
     >
-      <p
-        class="citation__title slds-m-left_x-small slds-truncate slds-has-flexi-truncate"
-      >
-        {citationTitle}
-      </p>
+      <template lwc:if={iconName}>
+        <lightning-icon
+          icon-name={iconName}
+          size="xx-small"
+          class={citationIconClasses}
+          aria-hidden="true"
+        ></lightning-icon>
+      </template>
+      <p class={citationTitleClasses}>{citationTitle}</p>
     </a>
     <c-quantic-tooltip
       light-theme
@@ -26,9 +30,25 @@
       onmouseleave={handleTooltipMouseLeave}
     >
       <div class="citation__tooltip" slot="content">
-        <div data-testid="citation__tooltip-uri" class="slds-text-body_small slds-text-color_weak slds-truncate slds-var-p-vertical_xxx-small">{hrefValue}</div>
-        <div data-testid="citation__tooltip-title" class="slds-text-title_bold slds-var-p-vertical_xx-small">{citationTitle}</div>
-        <div data-testid="citation__tooltip-text" class="citation__tooltip-text slds-text-body_small slds-var-p-vertical_xxx-small">{text}</div>
+        <div
+          data-testid="citation__tooltip-uri"
+          class="slds-text-body_small slds-text-color_weak slds-truncate slds-var-p-vertical_xxx-small"
+        >
+          {hrefValue}
+        </div>
+        <div
+          data-testid="citation__tooltip-title"
+          class="slds-text-title_bold slds-var-p-vertical_xx-small"
+        >
+          {citationTitle}
+        </div>
+        <div
+          data-testid="citation__tooltip-text"
+          class="citation__tooltip-text slds-text-body_small slds-var-p-vertical_xxx-small"
+        >
+          {text}
+        </div>
+        <slot name="actions"></slot>
       </div>
     </c-quantic-tooltip>
   </li>

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

@@ -13,6 +13,7 @@ const supportedFileTypesForTextFragment = ['html', 'SalesforceItem'];
  * The `QuanticCitation` component renders an individual citation.
  * @fires CustomEvent#quantic__citationhover
  * @category Internal
+ * @slot actions Slot for action controls (e.g., lightning-button-icon) rendered inside the citation tooltip.
  * @example
  * <c-quantic-citation citation={citation} interactive-citation={interactiveCitation} onclick={handleClick} onquantic__citationhover={handleHover}></c-quantic-citation>
  */
@@ -36,6 +37,22 @@ export default class QuanticCitation extends NavigationMixin(LightningElement) {
    * @default false
    */
   @api disableCitationAnchoring = false;
+  /**
+   * Whether the citation is in an active state.
+   * A citation in an active state is displayed with a different title and border color based on the theme set on the community.
+   * @api
+   * @type {boolean}
+   * @default false
+   */
+  @api isActive = false;
+  /**
+   * The name of the Salesforce icon to display before the citation title.
+   * See https://www.lightningdesignsystem.com/2e1ef8501/p/83309d-icons for a list of valid icon names.
+   * @api
+   * @example 'utility:attach'
+   * @type {string}
+   */
+  @api iconName;
 
   /** @type {Object} */
   timeout;
@@ -281,4 +298,41 @@ export default class QuanticCitation extends NavigationMixin(LightningElement) {
       ? this.salesforceRecordUrl
       : (this.clickUri ?? this.citation?.uri);
   }
+
+  get citationTitleClasses() {
+    return [
+      'citation__title',
+      'slds-m-left_x-small',
+      'slds-truncate',
+      'slds-has-flexi-truncate',
+      {
+        'citation__title--active': this.isActive,
+      },
+    ];
+  }
+
+  get citationLinkClasses() {
+    return [
+      'citation__link',
+      'slds-badge',
+      'slds-badge_lightest',
+      'slds-align_absolute-center',
+      'slds-text-link_reset',
+      'slds-p-left_xx-small',
+      'slds-p-right_x-small',
+      {
+        'citation__link--active': this.isActive,
+      },
+    ];
+  }
+
+  get citationIconClasses() {
+    return [
+      'citation__icon',
+      'slds-m-left_x-small',
+      {
+        'citation__icon--active': this.isActive,
+      },
+    ];
+  }
 }

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

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

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

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

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

@@ -1,3 +1,8 @@
+.tab-bar_list-container {
+  /* Prevents horizontal scrollbar from appearing when tabs overflow */
+  overflow-x: clip;
+}
+
 .tab-bar_dropdown {
   max-width: 150px;
 }
@@ -5,3 +10,7 @@
 .tab-bar__more-button:focus {
   text-decoration: none;
 }
+
+.tab-bar__dropdown-tab {
+  display: inline;
+}

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

@@ -45,7 +45,7 @@
                     data-label={tab.label}
                     onblur={onBlur}
                   >
-                    <span class="slds-tabs_default__link" title={tab.label}
+                    <span class="tab-bar__dropdown-tab slds-tabs_default__link slds-truncate" title={tab.label}
                       >{tab.label}</span
                     >
                   </button>