diff --git a/packages/atomic/cypress/e2e/smart-snippet-actions.ts b/packages/atomic/cypress/e2e/smart-snippet-actions.ts index 714af875a79..1cc60033443 100644 --- 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 = { }; 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 index da598f40987..7a91bc72929 100644 --- 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 index b76df3a0f95..e6bddef1228 100644 --- 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) => void; "onCancelPendingSelectSource"?: (event: AtomicSmartSnippetSourceCustomEvent) => void; "onSelectSource"?: (event: AtomicSmartSnippetSourceCustomEvent) => 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 index 1f8dc427b0b..ab977738dd1 100644 --- 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 this.selectSource.emit()} diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx index 014043c64a3..16233a88299 100644 --- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx +++ b/packages/atomic/src/components/common/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 { { this.props .getQuestionsList() diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx index 26eca4e52ed..45b8ef62d1f 100644 --- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx +++ b/packages/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 && ( * ``` * + * @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: ``. + * * @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/packages/atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx b/packages/atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx index 91a3b59699d..15f3bce6b4d 100644 --- a/packages/atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx +++ b/packages/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'; * * ``` * + * @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: ``. + * * @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 index a76693fe7c5..66bcaf56f24 100644 --- 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; + } @@ -231,8 +242,13 @@ - - + + + + + + +