From 2b7404f4b2cfefaf1cef8d7e0d195ba282d4d7b6 Mon Sep 17 00:00:00 2001 From: Michael Grondines Date: Fri, 1 Nov 2024 09:45:35 -0400 Subject: [PATCH 01/11] fix(atomic): add tooltip to insight tabs (#4596) ** [SVCC-4285](https://coveord.atlassian.net/browse/SVCC-4285) Simply added tooltip to insight tabs ! [SVCC-4285]: https://coveord.atlassian.net/browse/SVCC-4285?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --- packages/atomic/src/components/common/tabs/tab-bar.tsx | 1 + .../components/insight/atomic-insight-tab/atomic-insight-tab.tsx | 1 + .../atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/atomic/src/components/common/tabs/tab-bar.tsx b/packages/atomic/src/components/common/tabs/tab-bar.tsx index b64c82ddb03..1f8878e2dfe 100644 --- a/packages/atomic/src/components/common/tabs/tab-bar.tsx +++ b/packages/atomic/src/components/common/tabs/tab-bar.tsx @@ -148,6 +148,7 @@ export class TabBar { style="text-transparent" class="truncate rounded px-4 py-2 font-semibold" ariaLabel={tab.label} + title={tab.label} onClick={() => { tab.select(); this.tabPopover?.togglePopover(); diff --git a/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx b/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx index d6cf903aa12..88430ae7d92 100644 --- a/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx @@ -95,6 +95,7 @@ export class AtomicInsightTab part="tab" class={buttonClasses.join(' ')} ariaLabel={this.bindings.i18n.t('tab-search', {label: this.label})} + title={this.label} ariaPressed={`${this.tabState.isActive}`} onClick={() => this.tab.select()} > diff --git a/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx b/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx index e1f20f7325c..d410d934ce6 100644 --- a/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx +++ b/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx @@ -90,6 +90,7 @@ export class AtomicIPXTab implements InitializableComponent { part="tab" class={buttonClasses.join(' ')} ariaLabel={this.bindings.i18n.t('tab-search', {label: this.label})} + title={this.label} ariaPressed={`${this.tabState.isActive}`} onClick={() => this.tab.select()} > From 573b7f3ac5691d55aa91fe6cce60932f33ae8a85 Mon Sep 17 00:00:00 2001 From: Germain Bergeron Date: Mon, 4 Nov 2024 10:21:46 -0500 Subject: [PATCH 02/11] chore: allow running on node 22 (#4605) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As of Oct 29th Node 22 is the [new LTS](https://nodejs.org/en/about/previous-releases). While trying to bump in some of our repository we hit a roadblock because ui-kit doesn't allow it yet. Requires https://github.com/coveo/coveo.analytics.js/pull/479 ✅ The `Report bundle size` check will stay red because it checkouts master and master doesn't allow running on Node 22 --- .nvmrc | 2 +- package-lock.json | 92 ++++++++++--------- package.json | 2 +- packages/atomic-angular/package.json | 2 +- .../projects/atomic-angular/package.json | 2 +- packages/atomic-hosted-page/package.json | 2 +- packages/atomic-react/package.json | 2 +- packages/atomic/package.json | 2 +- packages/auth/package.json | 2 +- packages/bueno/package.json | 2 +- packages/headless-react/package.json | 2 +- packages/headless/package.json | 4 +- packages/quantic/package.json | 2 +- packages/samples/headless-react/package.json | 2 +- patches/coveo.analytics+2.30.38.patch | 31 ------- 15 files changed, 61 insertions(+), 90 deletions(-) delete mode 100644 patches/coveo.analytics+2.30.38.patch diff --git a/.nvmrc b/.nvmrc index 593cb75bc5c..fdb2eaaff0c 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20.16.0 \ No newline at end of file +22.11.0 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ae7dc3bdd6e..80335752c74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -95,7 +95,7 @@ "vite": "~5.3.0" }, "engines": { - "node": "^20.9.0", + "node": "^20.9.0 || ^22.11.0", "npm": ">=8.6.0" } }, @@ -25934,38 +25934,6 @@ "typescript": ">=4" } }, - "node_modules/coveo.analytics": { - "version": "2.30.39", - "resolved": "https://registry.npmjs.org/coveo.analytics/-/coveo.analytics-2.30.39.tgz", - "integrity": "sha512-Vce17Mq9lwoBY587ZHqLOcKCu0ufymrWpiZ1X0K6NeoDFygcBFz/7vkpn+mnihG/67AnylhGVcloDWkfRLqnEQ==", - "license": "MIT", - "dependencies": { - "@types/uuid": "^9.0.0", - "cross-fetch": "^3.1.5", - "react-native-get-random-values": "^1.11.0", - "uuid": "^9.0.0" - } - }, - "node_modules/coveo.analytics/node_modules/cross-fetch": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", - "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==", - "dependencies": { - "node-fetch": "^2.6.12" - } - }, - "node_modules/coveo.analytics/node_modules/uuid": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", - "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", - "funding": [ - "https://github.com/sponsors/broofa", - "https://github.com/sponsors/ctavan" - ], - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/create-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz", @@ -54182,7 +54150,7 @@ "wait-on": "7.2.0" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "peerDependencies": { "@coveo/bueno": "1.0.2", @@ -54221,7 +54189,7 @@ "typescript": "5.4.5" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "peerDependencies": { "@coveo/headless": "3.5.0" @@ -54260,7 +54228,7 @@ "tslib": "2.6.3" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "peerDependencies": { "@angular/common": "14 - 17", @@ -54283,7 +54251,7 @@ "@types/node": "20.14.12" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } }, "packages/atomic-hosted-page/node_modules/@playwright/test": { @@ -54377,7 +54345,7 @@ "rollup-plugin-polyfill-node": "^0.13.0" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "peerDependencies": { "@coveo/headless": "3.5.0", @@ -57111,7 +57079,7 @@ "vite": "5.3.5" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } }, "packages/auth/node_modules/@esbuild/aix-ppc64": { @@ -57709,7 +57677,7 @@ "ts-jest": "29.2.3" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } }, "packages/bueno/node_modules/ts-jest": { @@ -57771,7 +57739,7 @@ "@microsoft/fetch-event-source": "2.0.1", "@reduxjs/toolkit": "2.2.7", "abortcontroller-polyfill": "1.7.5", - "coveo.analytics": "2.30.39", + "coveo.analytics": "2.30.42", "dayjs": "1.11.12", "exponential-backoff": "3.1.0", "fast-equals": "5.0.1", @@ -57795,7 +57763,7 @@ "vitest": "2.1.1" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "peerDependencies": { "encoding": "^0.1.13", @@ -57827,7 +57795,7 @@ "vitest": "2.1.1" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "peerDependencies": { "react": "^18", @@ -58458,6 +58426,27 @@ "node": ">= 16" } }, + "packages/headless/node_modules/coveo.analytics": { + "version": "2.30.42", + "resolved": "https://registry.npmjs.org/coveo.analytics/-/coveo.analytics-2.30.42.tgz", + "integrity": "sha512-O+S7tCJIypYRF4aqsJc6KZtUC4c7oQE5WhrMSgieJT4jSlOWwasfKCSQhhN+YJ0XgLw5kQRqxiBZFHcCU5jX5A==", + "license": "MIT", + "dependencies": { + "@types/uuid": "^9.0.0", + "cross-fetch": "^3.1.5", + "react-native-get-random-values": "^1.11.0", + "uuid": "^9.0.0" + } + }, + "packages/headless/node_modules/cross-fetch": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", + "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==", + "license": "MIT", + "dependencies": { + "node-fetch": "^2.6.12" + } + }, "packages/headless/node_modules/dayjs": { "version": "1.11.12", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz", @@ -58746,6 +58735,19 @@ "node": ">= 4.0.0" } }, + "packages/headless/node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "packages/headless/node_modules/vite-node": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.1.tgz", @@ -58911,7 +58913,7 @@ "xml2js": "0.6.2" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } }, "packages/quantic/node_modules/@babel/compat-data": { @@ -62768,7 +62770,7 @@ "vitest": "2.1.1" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } }, "packages/samples/headless-react/node_modules/@adobe/css-tools": { diff --git a/package.json b/package.json index 05e1a7521c8..1c05e34af7c 100644 --- a/package.json +++ b/package.json @@ -134,7 +134,7 @@ ] }, "engines": { - "node": "^20.9.0", + "node": "^20.9.0 || ^22.11.0", "npm": ">=8.6.0" }, "dependencies": { diff --git a/packages/atomic-angular/package.json b/packages/atomic-angular/package.json index 73732a19a02..c3605fbf4c9 100644 --- a/packages/atomic-angular/package.json +++ b/packages/atomic-angular/package.json @@ -43,6 +43,6 @@ "typescript": "5.4.5" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } } diff --git a/packages/atomic-angular/projects/atomic-angular/package.json b/packages/atomic-angular/projects/atomic-angular/package.json index 2b5cfb9f6ba..0047eca8632 100644 --- a/packages/atomic-angular/projects/atomic-angular/package.json +++ b/packages/atomic-angular/projects/atomic-angular/package.json @@ -15,6 +15,6 @@ "tslib": "2.6.3" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } } diff --git a/packages/atomic-hosted-page/package.json b/packages/atomic-hosted-page/package.json index 66b70fa1a37..ff355b9f651 100644 --- a/packages/atomic-hosted-page/package.json +++ b/packages/atomic-hosted-page/package.json @@ -40,6 +40,6 @@ "@types/node": "20.14.12" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } } diff --git a/packages/atomic-react/package.json b/packages/atomic-react/package.json index c114ad339ca..724c2ce930d 100644 --- a/packages/atomic-react/package.json +++ b/packages/atomic-react/package.json @@ -54,7 +54,7 @@ "react-dom": ">=18.0.0" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "exports": { ".": { diff --git a/packages/atomic/package.json b/packages/atomic/package.json index a056f242fa3..5a5f21680f1 100644 --- a/packages/atomic/package.json +++ b/packages/atomic/package.json @@ -165,6 +165,6 @@ }, "license": "Apache-2.0", "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } } diff --git a/packages/auth/package.json b/packages/auth/package.json index f57bce0b1b6..c6f7708bca7 100644 --- a/packages/auth/package.json +++ b/packages/auth/package.json @@ -48,7 +48,7 @@ "ts-jest": "29.2.3" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "publishConfig": { "access": "public" diff --git a/packages/bueno/package.json b/packages/bueno/package.json index 8a5d67b5c18..90f11ca7f79 100644 --- a/packages/bueno/package.json +++ b/packages/bueno/package.json @@ -35,6 +35,6 @@ "ts-jest": "29.2.3" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } } diff --git a/packages/headless-react/package.json b/packages/headless-react/package.json index 5c89bab71f1..15511623da3 100644 --- a/packages/headless-react/package.json +++ b/packages/headless-react/package.json @@ -57,6 +57,6 @@ "react-dom": "^18" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } } diff --git a/packages/headless/package.json b/packages/headless/package.json index 2dc5a03ff33..1bc5f1b6629 100644 --- a/packages/headless/package.json +++ b/packages/headless/package.json @@ -162,7 +162,7 @@ "@microsoft/fetch-event-source": "2.0.1", "@reduxjs/toolkit": "2.2.7", "abortcontroller-polyfill": "1.7.5", - "coveo.analytics": "2.30.39", + "coveo.analytics": "2.30.42", "dayjs": "1.11.12", "exponential-backoff": "3.1.0", "fast-equals": "5.0.1", @@ -186,6 +186,6 @@ "typedoc": "0.26.10" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" } } diff --git a/packages/quantic/package.json b/packages/quantic/package.json index bda5160552f..005f987e9f8 100644 --- a/packages/quantic/package.json +++ b/packages/quantic/package.json @@ -51,7 +51,7 @@ "marked": "12.0.2" }, "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "devDependencies": { "@ckeditor/jsdoc-plugins": "39.9.1", diff --git a/packages/samples/headless-react/package.json b/packages/samples/headless-react/package.json index f1893c1031f..f7938ea35ea 100644 --- a/packages/samples/headless-react/package.json +++ b/packages/samples/headless-react/package.json @@ -5,7 +5,7 @@ "private": true, "type": "module", "engines": { - "node": "^20.9.0" + "node": "^20.9.0 || ^22.11.0" }, "dependencies": { "@coveo/auth": "2.0.1", diff --git a/patches/coveo.analytics+2.30.38.patch b/patches/coveo.analytics+2.30.38.patch deleted file mode 100644 index 3d1c165cd4d..00000000000 --- a/patches/coveo.analytics+2.30.38.patch +++ /dev/null @@ -1,31 +0,0 @@ -diff --git a/node_modules/coveo.analytics/dist/browser.mjs b/node_modules/coveo.analytics/dist/browser.mjs -index 78efccc..115b8d3 100644 ---- a/node_modules/coveo.analytics/dist/browser.mjs -+++ b/node_modules/coveo.analytics/dist/browser.mjs -@@ -1135,8 +1135,6 @@ class NoopAnalyticsClient { - } - } - --const fetch$1 = window.fetch; -- - class AnalyticsFetchClient { - constructor(opts) { - this.opts = opts; -@@ -1156,7 +1154,7 @@ class AnalyticsFetchClient { - const _a = Object.assign(Object.assign({}, defaultOptions), (preprocessRequest ? yield preprocessRequest(defaultOptions, 'analyticsFetch') : {})), { url } = _a, fetchData = __rest(_a, ["url"]); - let response; - try { -- response = yield fetch$1(url, fetchData); -+ response = yield fetch(url, fetchData); - } - catch (error) { - console.error('An error has occured when sending the event.', error); -@@ -1184,7 +1182,7 @@ class AnalyticsFetchClient { - return __awaiter(this, void 0, void 0, function* () { - const { baseUrl } = this.opts; - const url = `${baseUrl}/analytics/visit`; -- yield fetch$1(url, { headers: this.getHeaders(), method: 'DELETE' }); -+ yield fetch(url, { headers: this.getHeaders(), method: 'DELETE' }); - }); - } - shouldAppendVisitorId(eventType) { From 38970c3e27c62f67ba7274a5bec61cc8160d4bec Mon Sep 17 00:00:00 2001 From: Felix Perron-Brault Date: Mon, 4 Nov 2024 13:10:45 -0500 Subject: [PATCH 03/11] fix(atomic): fix clicks for recommendation lists in grid display mode (#4623) This PR ensures that clicks on grid display mode result cards open the result/product for `atomic-recs-list`, `atomic-ipx-recs-list` and `atomic-commerce-recommendation-list`, as with other types of result lists. https://coveord.atlassian.net/browse/KIT-3705 --- .../src/lib/stencil-generated/components.ts | 4 +-- packages/atomic/src/components.d.ts | 10 ++++++ .../atomic-commerce-recommendation-list.tsx | 5 +-- .../atomic-recs-list/atomic-ipx-recs-list.tsx | 2 ++ .../atomic-recs-list/atomic-recs-list.tsx | 2 ++ .../atomic-recs-result/atomic-recs-result.tsx | 36 ++++++++++++++++--- packages/atomic/src/pages/index.html | 1 - 7 files changed, 49 insertions(+), 11 deletions(-) diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts index c83226b2dee..1fca16c1bac 100644 --- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts +++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts @@ -1893,14 +1893,14 @@ export declare interface AtomicRecsList extends Components.AtomicRecsList {} @ProxyCmp({ - inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation'] + inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation'] }) @Component({ selector: 'atomic-recs-result', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation'], + inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation'], }) export class AtomicRecsResult { protected el: HTMLElement; diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index beb42d4e7ae..1ecb7eb68d3 100644 --- a/packages/atomic/src/components.d.ts +++ b/packages/atomic/src/components.d.ts @@ -2652,6 +2652,11 @@ export namespace Components { * The InteractiveResult item. */ "interactiveResult": RecsInteractiveResult; + /** + * The result link to use when the result is clicked in a grid layout. + * @default - An `atomic-result-link` without any customization. + */ + "linkContent": ParentNode; "loadingFlag"?: string; /** * Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system. Particularly useful for Atomic React @@ -8646,6 +8651,11 @@ declare namespace LocalJSX { * The InteractiveResult item. */ "interactiveResult": RecsInteractiveResult; + /** + * The result link to use when the result is clicked in a grid layout. + * @default - An `atomic-result-link` without any customization. + */ + "linkContent"?: ParentNode; "loadingFlag"?: string; /** * Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system. Particularly useful for Atomic React diff --git a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx index 019393485b3..292951e93d1 100644 --- a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx +++ b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx @@ -322,10 +322,7 @@ export class AtomicCommerceRecommendationList this.imageSize ), content: this.productTemplateProvider.getTemplateContent(product), - linkContent: - this.display === 'grid' - ? this.productTemplateProvider.getLinkTemplateContent(product) - : this.productTemplateProvider.getEmptyLinkTemplateContent(), + linkContent: this.productTemplateProvider.getLinkTemplateContent(product), store: this.bindings.store, density: this.density, display: this.display, diff --git a/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx b/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx index 2ae8c6f1536..099b2e6b356 100644 --- a/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx +++ b/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx @@ -350,6 +350,8 @@ export class AtomicIPXRecsList implements InitializableComponent { this.imageSize ), content: this.itemTemplateProvider.getTemplateContent(recommendation), + linkContent: + this.itemTemplateProvider.getLinkTemplateContent(recommendation), store: this.bindings.store, density: this.density, display: this.display, diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx index a131f53d691..c69e927dc1b 100644 --- a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx +++ b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx @@ -326,6 +326,8 @@ export class AtomicRecsList implements InitializableComponent { this.imageSize ), content: this.itemTemplateProvider.getTemplateContent(recommendation), + linkContent: + this.itemTemplateProvider.getLinkTemplateContent(recommendation), store: this.bindings.store, density: this.density, display: this.display, diff --git a/packages/atomic/src/components/recommendations/atomic-recs-result/atomic-recs-result.tsx b/packages/atomic/src/components/recommendations/atomic-recs-result/atomic-recs-result.tsx index 8cfbec370f8..1b0f4136a3f 100644 --- a/packages/atomic/src/components/recommendations/atomic-recs-result/atomic-recs-result.tsx +++ b/packages/atomic/src/components/recommendations/atomic-recs-result/atomic-recs-result.tsx @@ -1,5 +1,6 @@ import {Component, h, Prop, Element, Listen, Host} from '@stencil/core'; import {RecsInteractiveResult, RecsResult} from '..'; +import {parentNodeToString} from '../../../utils/dom-utils'; import {applyFocusVisiblePolyfill} from '../../../utils/initialization-utils'; import { InteractiveItemContextEvent, @@ -29,6 +30,7 @@ import {AtomicRecsStore} from '../atomic-recs-interface/store'; export class AtomicRecsResult { private layout!: ItemLayout; private resultRootRef?: HTMLElement; + private linkContainerRef?: HTMLElement; private executedRenderingFunctionOnce = false; @Element() host!: HTMLElement; @@ -37,6 +39,13 @@ export class AtomicRecsResult { */ @Prop() stopPropagation?: boolean; + /** + * The result link to use when the result is clicked in a grid layout. + * + * @default - An `atomic-result-link` without any customization. + */ + @Prop() linkContent: ParentNode = new DocumentFragment(); + /** * The result item. */ @@ -94,6 +103,18 @@ export class AtomicRecsResult { */ @Prop() renderingFunction: ItemRenderingFunction; + @Listen('click') + public handleClick(event: MouseEvent) { + if (this.stopPropagation) { + event.stopPropagation(); + } + this.host + .shadowRoot!.querySelector( + '.link-container > atomic-result-link a:not([slot])' + ) + ?.click(); + } + @Listen('atomic/resolveResult') public resolveResult(event: ItemContextEvent) { event.preventDefault(); @@ -133,11 +154,12 @@ export class AtomicRecsResult { } private getContentHTML() { - return Array.from(this.content!.children) - .map((child) => child.outerHTML) - .join(''); + return parentNodeToString(this.content!); } + private getLinkHTML() { + return parentNodeToString(this.linkContent); + } private get isCustomRenderFunctionMode() { return this.renderingFunction !== undefined; } @@ -158,6 +180,10 @@ export class AtomicRecsResult { class="result-root" ref={(ref) => (this.resultRootRef = ref)} > +
(this.linkContainerRef = ref)} + >
); } @@ -171,6 +197,7 @@ export class AtomicRecsResult { .join(' ')}`} innerHTML={this.getContentHTML()} > +
); } @@ -186,7 +213,8 @@ export class AtomicRecsResult { if (this.shouldExecuteRenderFunction()) { const customRenderOutputAsString = this.renderingFunction!( this.result, - this.resultRootRef! + this.resultRootRef!, + this.linkContainerRef! ); this.resultRootRef!.className += ` ${this.layout diff --git a/packages/atomic/src/pages/index.html b/packages/atomic/src/pages/index.html index 5d54fd9a883..41255b0b1ff 100644 --- a/packages/atomic/src/pages/index.html +++ b/packages/atomic/src/pages/index.html @@ -230,7 +230,6 @@ -