feat(smart-snippet): allow link _target modifs (#3026)

* feat(smart-snippet): allow link _target modifs * test(smart-snippet): add slot cypress test * test(smart-snippet): fix cypress test * Update packages/atomic/src/pages/examples/ipx.html Co-authored-by: Benjamin Taillon <[email protected]> * style(smart-snippets): name refactor + jsdoc * test(smart-snippets): update cypress tests --------- Co-authored-by: Benjamin Taillon <[email protected]>
coveo · Jul 26, 2023 · 8a9342a · 8a9342a
1 parent c928679
commit 8a9342a
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 3 deletions.
diff --git a/packages/atomic/cypress/e2e/smart-snippet-actions.ts b/packages/atomic/cypress/e2e/smart-snippet-actions.ts
@@ -71,7 +71,7 @@ export const addSmartSnippetDefaultOptions: Required<AddSmartSnippetOptions> = {
 };
 
 export const addSmartSnippet =
-  (options: AddSmartSnippetOptions = {}) =>
+  (options: AddSmartSnippetOptions = {}, slot?: HTMLElement) =>
   (fixture: TestFixture) => {
     const element = generateComponentHTML(
       'atomic-smart-snippet',
@@ -80,6 +80,9 @@ export const addSmartSnippet =
     element.append(
       ...toArray(options.content ?? addSmartSnippetDefaultOptions.content)
     );
+    if (slot) {
+      element.append(slot);
+    }
     fixture
       .withStyle(
         `html { font-size: ${

diff --git a/packages/atomic/cypress/e2e/smart-snippet.cypress.ts b/packages/atomic/cypress/e2e/smart-snippet.cypress.ts
@@ -525,4 +525,17 @@ describe('Smart Snippet Test Suites', () => {
         .should('equal', 'rgb(84, 170, 255)');
     });
   });
+
+  describe('when there is a valid slot named "source-anchor-attributes"', () => {
+    beforeEach(() => {
+      const slot = generateComponentHTML('a', {
+        target: '_blank',
+        slot: 'source-anchor-attributes',
+      });
+      new TestFixture().with(addSmartSnippet({}, slot)).init();
+    });
+    it('copies the attributes properly', () => {
+      SmartSnippetSelectors.sourceUrl().should('have.attr', 'target', '_blank');
+    });
+  });
 });
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -1857,6 +1857,7 @@ export namespace Components {
         "source"?: HTMLElement;
     }
     interface AtomicSmartSnippetSource {
+        "anchorAttributes"?: Attr[];
         "source": Result;
     }
     interface AtomicSmartSnippetSuggestions {
@@ -4745,6 +4746,7 @@ declare namespace LocalJSX {
         "source"?: HTMLElement;
     }
     interface AtomicSmartSnippetSource {
+        "anchorAttributes"?: Attr[];
         "onBeginDelayedSelectSource"?: (event: AtomicSmartSnippetSourceCustomEvent<any>) => void;
         "onCancelPendingSelectSource"?: (event: AtomicSmartSnippetSourceCustomEvent<any>) => void;
         "onSelectSource"?: (event: AtomicSmartSnippetSourceCustomEvent<any>) => void;

diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-source.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-source.tsx
@@ -31,6 +31,7 @@ export class AtomicSmartSnippetSource
 {
   @InitializeBindings() public bindings!: AnyBindings;
   @Prop({reflect: true, mutable: true}) source!: Result;
+  @Prop() anchorAttributes?: Attr[];
 
   @Event() selectSource!: EventEmitter;
   @Event() beginDelayedSelectSource!: EventEmitter;
@@ -55,6 +56,7 @@ export class AtomicSmartSnippetSource
           href={this.source.clickUri}
           className="block"
           part="source-url"
+          attributes={this.anchorAttributes}
           onSelect={() => this.selectSource.emit()}
           onBeginDelayedSelect={() => this.beginDelayedSelectSource.emit()}
           onCancelPendingSelect={() => this.cancelPendingSelectSource.emit()}
@@ -64,6 +66,7 @@ export class AtomicSmartSnippetSource
         <LinkWithResultAnalytics
           title={this.source.title}
           href={this.source.clickUri}
+          attributes={this.anchorAttributes}
           className="block"
           part="source-title"
           onSelect={() => this.selectSource.emit()}

diff --git a/...mmon/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx b/...mmon/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx
@@ -13,6 +13,7 @@ import {AnyBindings} from '../../interface/bindings';
 
 interface SmartSnippetSuggestionProps {
   id: string;
+  getSourceAnchorAttributes?: () => Attr[] | undefined;
   getHost: () => HTMLElement;
   getBindings: () => AnyBindings;
   getHeadingLevel: () => number;
@@ -128,6 +129,7 @@ export class SmartSnippetSuggestionCommon {
         {
           <atomic-smart-snippet-source
             source={source}
+            anchorAttributes={this.props.getSourceAnchorAttributes?.()}
             onSelectSource={() =>
               this.props
                 .getQuestionsList()

diff --git a/...atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx b/...atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx
@@ -12,6 +12,7 @@ type FeedBackModalElement =
 interface SmartSnippetProps {
   id: string;
   modalTagName: string;
+  getSourceAnchorAttributes?: () => Attr[] | undefined;
   getHost: () => HTMLElement;
   getBindings: () => AnyBindings;
   getModalRef: () => FeedBackModalElement | undefined;
@@ -152,6 +153,7 @@ export class SmartSnippetCommon {
           >
             {source && (
               <atomic-smart-snippet-source
+                anchorAttributes={this.props.getSourceAnchorAttributes?.()}
                 source={source}
                 onSelectSource={this.props.getSmartSnippet().selectSource}
                 onBeginDelayedSelectSource={

diff --git a/...arch/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.tsx b/...arch/smart-snippets/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.tsx
@@ -11,6 +11,7 @@ import {
   BindStateToController,
 } from '../../../../utils/initialization-utils';
 import {randomID} from '../../../../utils/utils';
+import {getAttributesFromLinkSlot} from '../../../common/result-link/attributes-slot';
 import {SmartSnippetSuggestionCommon} from '../../../common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
@@ -30,6 +31,9 @@ import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
  * </atomic-smart-snippet-suggestions>
  * ```
  *
+ * @slot source-anchor-attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.
+ * To be used exclusively in anchor elements, such as: `<a slot="source-anchor-attributes" target="_blank"></a>`.
+ *
  * @part container - The wrapper with a border around the entire component.
  * @part heading - The heading above the list of related questions.
  * @part questions - The list of related questions.
@@ -91,6 +95,8 @@ export class AtomicSmartSnippetSuggestions implements InitializableComponent {
 
     this.smartSnippetSuggestionListCommon = new SmartSnippetSuggestionCommon({
       id: this.id,
+      getSourceAnchorAttributes: () =>
+        getAttributesFromLinkSlot(this.host, 'source-anchor-attributes'),
       getHost: () => this.host,
       getBindings: () => this.bindings,
       getHeadingLevel: () => this.headingLevel,

diff --git a/...atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx b/...atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx
@@ -10,6 +10,7 @@ import {
   BindStateToController,
 } from '../../../../utils/initialization-utils';
 import {randomID} from '../../../../utils/utils';
+import {getAttributesFromLinkSlot} from '../../../common/result-link/attributes-slot';
 import {SmartSnippetCommon} from '../../../common/smart-snippets/atomic-smart-snippet/smart-snippet-common';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
@@ -29,6 +30,9 @@ import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
  * </atomic-smart-snippet>
  * ```
  *
+ * @slot source-anchor-attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.
+ * To be used exclusively in anchor elements, such as: `<a slot="source-anchor-attributes" target="_blank"></a>`.
+ *
  * @part smart-snippet - The wrapper of the entire smart snippet.
  * @part question - The header displaying the question that is answered by the found document excerpt.
  * @part answer - The container displaying the full document excerpt.
@@ -102,6 +106,8 @@ export class AtomicSmartSnippet implements InitializableComponent {
     this.smartSnippetCommon = new SmartSnippetCommon({
       id: this.id,
       modalTagName: 'atomic-smart-snippet-feedback-modal',
+      getSourceAnchorAttributes: () =>
+        getAttributesFromLinkSlot(this.host, 'source-anchor-attributes'),
       getHost: () => this.host,
       getBindings: () => this.bindings,
       getModalRef: () => this.modalRef,

diff --git a/packages/atomic/src/pages/examples/ipx.html b/packages/atomic/src/pages/examples/ipx.html
@@ -174,6 +174,17 @@
         top: 10px;
         left: 5px;
       }
+      atomic-did-you-mean,
+      atomic-notifications,
+      atomic-smart-snippet,
+      atomic-smart-snippet-suggestions {
+        padding-bottom: 1rem;
+      }
+
+      atomic-smart-snippet::part(source-url),
+      atomic-smart-snippet-suggestions::part(source-url) {
+        word-wrap: break-word;
+      }
     </style>
   </head>
 
@@ -231,8 +242,13 @@
             <atomic-notifications></atomic-notifications>
           </atomic-layout-section>
           <atomic-layout-section section="results">
-            <atomic-smart-snippet></atomic-smart-snippet>
-            <atomic-smart-snippet-suggestions></atomic-smart-snippet-suggestions>
+            <atomic-generated-answer></atomic-generated-answer>
+            <atomic-smart-snippet>
+              <a slot="source-anchor-attributes" target="_blank" rel="noopener"></a>
+            </atomic-smart-snippet>
+            <atomic-smart-snippet-suggestions>
+              <a slot="source-anchor-attributes" target="_blank" rel="noopener"></a>
+            </atomic-smart-snippet-suggestions>
             <atomic-result-list image-size="none">
               <atomic-result-template>
                 <template>