Skip to content

Commit

Permalink
feat(atomic)!: remove gridCellLinkTarget property (#4378)
Browse files Browse the repository at this point in the history 
This PR removes the deprecated gridCellLinkTarget property

https://coveord.atlassian.net/browse/KIT-3487

---------

Co-authored-by: GitHub Actions Bot <>
  • Loading branch information
@fpbrault
fpbrault authored Sep 12, 2024
1 parent 7c110bc commit 650d6f3
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 213 deletions.
16 changes: 8 additions & 8 deletions packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,15 +409,15 @@ export declare interface AtomicCommercePager extends Components.AtomicCommercePa


@ProxyCmp({
inputs: ['density', 'display', 'gridCellLinkTarget', 'imageSize', 'numberOfPlaceholders'],
inputs: ['density', 'display', 'imageSize', 'numberOfPlaceholders'],
methods: ['setRenderFunction']
})
@Component({
selector: 'atomic-commerce-product-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['density', 'display', 'gridCellLinkTarget', 'imageSize', 'numberOfPlaceholders'],
inputs: ['density', 'display', 'imageSize', 'numberOfPlaceholders'],
})
export class AtomicCommerceProductList {
protected el: HTMLElement;
Expand Down Expand Up @@ -523,15 +523,15 @@ export declare interface AtomicCommerceRecommendationInterface extends Component


@ProxyCmp({
inputs: ['density', 'display', 'gridCellLinkTarget', 'headingLevel', 'imageSize', 'productId', 'productsPerPage', 'slotId'],
inputs: ['density', 'display', 'headingLevel', 'imageSize', 'productId', 'productsPerPage', 'slotId'],
methods: ['setRenderFunction', 'previousPage', 'nextPage']
})
@Component({
selector: 'atomic-commerce-recommendation-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['density', 'display', 'gridCellLinkTarget', 'headingLevel', 'imageSize', 'productId', 'productsPerPage', 'slotId'],
inputs: ['density', 'display', 'headingLevel', 'imageSize', 'productId', 'productsPerPage', 'slotId'],
})
export class AtomicCommerceRecommendationList {
protected el: HTMLElement;
Expand Down Expand Up @@ -1891,15 +1891,15 @@ export declare interface AtomicRecsInterface extends Components.AtomicRecsInterf


@ProxyCmp({
inputs: ['density', 'display', 'gridCellLinkTarget', 'headingLevel', 'imageSize', 'label', 'numberOfRecommendations', 'numberOfRecommendationsPerPage', 'recommendation'],
inputs: ['density', 'display', 'headingLevel', 'imageSize', 'label', 'numberOfRecommendations', 'numberOfRecommendationsPerPage', 'recommendation'],
methods: ['setRenderFunction', 'previousPage', 'nextPage']
})
@Component({
selector: 'atomic-recs-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['density', 'display', 'gridCellLinkTarget', 'headingLevel', 'imageSize', 'label', 'numberOfRecommendations', 'numberOfRecommendationsPerPage', 'recommendation'],
inputs: ['density', 'display', 'headingLevel', 'imageSize', 'label', 'numberOfRecommendations', 'numberOfRecommendationsPerPage', 'recommendation'],
})
export class AtomicRecsList {
protected el: HTMLElement;
Expand Down Expand Up @@ -2248,15 +2248,15 @@ export declare interface AtomicResultLink extends Components.AtomicResultLink {}


@ProxyCmp({
inputs: ['density', 'display', 'gridCellLinkTarget', 'imageSize', 'tabsExcluded', 'tabsIncluded'],
inputs: ['density', 'display', 'imageSize', 'tabsExcluded', 'tabsIncluded'],
methods: ['setRenderFunction']
})
@Component({
selector: 'atomic-result-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['density', 'display', 'gridCellLinkTarget', 'imageSize', 'tabsExcluded', 'tabsIncluded'],
inputs: ['density', 'display', 'imageSize', 'tabsExcluded', 'tabsIncluded'],
})
export class AtomicResultList {
protected el: HTMLElement;
Expand Down
68 changes: 4 additions & 64 deletions packages/atomic/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import { Range } from "./components/commerce/facets/facet-number-input/atomic-co
import { i18n } from "i18next";
import { CommerceInitializationOptions } from "./components/commerce/atomic-commerce-interface/atomic-commerce-interface";
import { StandaloneSearchBoxData } from "./utils/local-storage-utils";
import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout, ItemTarget } from "./components/common/layout/display-options";
import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
import { ItemRenderingFunction } from "./components/common/item-list/item-list-common";
import { RedirectionPayload } from "./components/search/atomic-search-box/redirection-payload";
import { AriaLabelGenerator } from "./components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products";
import { AtomicInterface } from "./utils/initialization-utils";
import { unknown as AnyBindings, i18nCompatibilityVersion as i18nCompatibilityVersion1, ItemDisplayBasicLayout as ItemDisplayBasicLayout1, ItemDisplayDensity as ItemDisplayDensity1, ItemDisplayImageSize as ItemDisplayImageSize1, ItemRenderingFunction as ItemRenderingFunction1, ItemTarget as ItemTarget1 } from "./components";
import { unknown as AnyBindings, i18nCompatibilityVersion as i18nCompatibilityVersion1, ItemDisplayBasicLayout as ItemDisplayBasicLayout1, ItemDisplayDensity as ItemDisplayDensity1, ItemDisplayImageSize as ItemDisplayImageSize1, ItemRenderingFunction as ItemRenderingFunction1 } from "./components";
import { AnyBindings as AnyBindings1 } from "./components/common/interface/bindings";
import { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
import { NumericFilter, NumericFilterState, RelativeDateUnit } from "./components/common/types";
Expand All @@ -43,12 +43,12 @@ export { Range } from "./components/commerce/facets/facet-number-input/atomic-co
export { i18n } from "i18next";
export { CommerceInitializationOptions } from "./components/commerce/atomic-commerce-interface/atomic-commerce-interface";
export { StandaloneSearchBoxData } from "./utils/local-storage-utils";
export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout, ItemTarget } from "./components/common/layout/display-options";
export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
export { ItemRenderingFunction } from "./components/common/item-list/item-list-common";
export { RedirectionPayload } from "./components/search/atomic-search-box/redirection-payload";
export { AriaLabelGenerator } from "./components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products";
export { AtomicInterface } from "./utils/initialization-utils";
export { unknown as AnyBindings, i18nCompatibilityVersion as i18nCompatibilityVersion1, ItemDisplayBasicLayout as ItemDisplayBasicLayout1, ItemDisplayDensity as ItemDisplayDensity1, ItemDisplayImageSize as ItemDisplayImageSize1, ItemRenderingFunction as ItemRenderingFunction1, ItemTarget as ItemTarget1 } from "./components";
export { unknown as AnyBindings, i18nCompatibilityVersion as i18nCompatibilityVersion1, ItemDisplayBasicLayout as ItemDisplayBasicLayout1, ItemDisplayDensity as ItemDisplayDensity1, ItemDisplayImageSize as ItemDisplayImageSize1, ItemRenderingFunction as ItemRenderingFunction1 } from "./components";
export { AnyBindings as AnyBindings1 } from "./components/common/interface/bindings";
export { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
export { NumericFilter, NumericFilterState, RelativeDateUnit } from "./components/common/types";
Expand Down Expand Up @@ -503,12 +503,6 @@ export namespace Components {
* The desired layout to use when displaying products. Layouts affect how many products to display per row and how visually distinct they are from each other.
*/
"display": ItemDisplayLayout;
/**
* The target location to open the product link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-product-link` in the `link` slot of the `atomic-product-template` component.
*/
"gridCellLinkTarget": ItemTarget;
/**
* The expected size of the image displayed for products.
*/
Expand Down Expand Up @@ -611,12 +605,6 @@ export namespace Components {
* The layout to apply when displaying the products. This does not affect the display of the surrounding list itself. To modify the number of products per column, modify the `--atomic-recs-number-of-columns` CSS variable.
*/
"display": ItemDisplayBasicLayout;
/**
* The [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) location to open the product link. This property is ignored unless the `display` property is set to `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-product-link` in the `link` slot of the `atomic-product-template` component.
*/
"gridCellLinkTarget": ItemTarget;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
*/
Expand Down Expand Up @@ -1705,12 +1693,6 @@ export namespace Components {
* The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself. To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
*/
"display": ItemDisplayBasicLayout1;
/**
* The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-result-link` in the `link` slot of the `atomic-result-template` component.
*/
"gridCellLinkTarget": ItemTarget1;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
*/
Expand Down Expand Up @@ -2535,12 +2517,6 @@ export namespace Components {
* The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself. To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
*/
"display": ItemDisplayBasicLayout;
/**
* The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-result-link` in the `link` slot of the `atomic-result-template` component.
*/
"gridCellLinkTarget": ItemTarget;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
*/
Expand Down Expand Up @@ -2891,12 +2867,6 @@ export namespace Components {
* The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.
*/
"display": ItemDisplayLayout;
/**
* The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-result-link` in the `link` slot of the `atomic-result-template` component.
*/
"gridCellLinkTarget": ItemTarget;
/**
* The expected size of the image displayed in the results.
*/
Expand Down Expand Up @@ -6505,12 +6475,6 @@ declare namespace LocalJSX {
* The desired layout to use when displaying products. Layouts affect how many products to display per row and how visually distinct they are from each other.
*/
"display"?: ItemDisplayLayout;
/**
* The target location to open the product link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-product-link` in the `link` slot of the `atomic-product-template` component.
*/
"gridCellLinkTarget"?: ItemTarget;
/**
* The expected size of the image displayed for products.
*/
Expand Down Expand Up @@ -6599,12 +6563,6 @@ declare namespace LocalJSX {
* The layout to apply when displaying the products. This does not affect the display of the surrounding list itself. To modify the number of products per column, modify the `--atomic-recs-number-of-columns` CSS variable.
*/
"display"?: ItemDisplayBasicLayout;
/**
* The [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) location to open the product link. This property is ignored unless the `display` property is set to `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-product-link` in the `link` slot of the `atomic-product-template` component.
*/
"gridCellLinkTarget"?: ItemTarget;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
*/
Expand Down Expand Up @@ -7645,12 +7603,6 @@ declare namespace LocalJSX {
* The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself. To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
*/
"display"?: ItemDisplayBasicLayout1;
/**
* The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-result-link` in the `link` slot of the `atomic-result-template` component.
*/
"gridCellLinkTarget"?: ItemTarget1;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
*/
Expand Down Expand Up @@ -8432,12 +8384,6 @@ declare namespace LocalJSX {
* The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself. To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
*/
"display"?: ItemDisplayBasicLayout;
/**
* The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-result-link` in the `link` slot of the `atomic-result-template` component.
*/
"gridCellLinkTarget"?: ItemTarget;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
*/
Expand Down Expand Up @@ -8768,12 +8714,6 @@ declare namespace LocalJSX {
* The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.
*/
"display"?: ItemDisplayLayout;
/**
* The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)). This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-result-link` in the `link` slot of the `atomic-result-template` component.
*/
"gridCellLinkTarget"?: ItemTarget;
/**
* The expected size of the image displayed in the results.
*/
Expand Down
38 changes: 13 additions & 25 deletions ...mic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ import {
ItemDisplayDensity,
ItemDisplayImageSize,
ItemDisplayLayout,
ItemTarget,
getItemListDisplayClasses,
} from '../../common/layout/display-options';
import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
Expand Down Expand Up @@ -107,14 +106,6 @@ export class AtomicCommerceProductList
*/
@Prop({reflect: true}) imageSize: ItemDisplayImageSize = 'small';

/**
* The target location to open the product link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)).
* This property is only leveraged when `display` is `grid`.
* @defaultValue `_self`
* @deprecated - Instead of using this property, provide an `atomic-product-link` in the `link` slot of the `atomic-product-template` component.
*/
@Prop() gridCellLinkTarget: ItemTarget = '_self';

/**
* Sets a rendering function to bypass the standard HTML template mechanism for rendering products.
* You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
Expand Down Expand Up @@ -145,23 +136,20 @@ export class AtomicCommerceProductList
this.summary = this.search.summary();
}

this.productTemplateProvider = new ProductTemplateProvider(
{
includeDefaultTemplate: true,
templateElements: Array.from(
this.host.querySelectorAll('atomic-product-template')
),
getResultTemplateRegistered: () => this.resultTemplateRegistered,
getTemplateHasError: () => this.templateHasError,
setResultTemplateRegistered: (value: boolean) => {
this.resultTemplateRegistered = value;
},
setTemplateHasError: (value: boolean) => {
this.templateHasError = value;
},
this.productTemplateProvider = new ProductTemplateProvider({
includeDefaultTemplate: true,
templateElements: Array.from(
this.host.querySelectorAll('atomic-product-template')
),
getResultTemplateRegistered: () => this.resultTemplateRegistered,
getTemplateHasError: () => this.templateHasError,
setResultTemplateRegistered: (value: boolean) => {
this.resultTemplateRegistered = value;
},
this.gridCellLinkTarget
);
setTemplateHasError: (value: boolean) => {
this.templateHasError = value;
},
});

this.productListCommon = new ItemListCommon({
engineSubscribe: this.bindings.engine.subscribe,
Expand Down
16 changes: 0 additions & 16 deletions .../components/commerce/atomic-commerce-product-list/e2e/atomic-commerce-product-list.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,4 @@ test.describe('when interface load yields no products', () => {
});
});

test.describe('when gridCellLinkTarget is set to _blank', async () => {
test.beforeEach(async ({productList}) => {
await productList.load({story: 'open-in-new-tab'});
await productList.hydrated.waitFor();
});

test('should open product in new tab', async ({context, productList}) => {
const newTabPromise = context.waitForEvent('page');
await productList.products.first().click();
const newTab = await newTabPromise;
await newTab.waitForLoadState();

expect(newTab.url()).toMatch(/sports\.barca\.group\/pdp\/.*$/);
});
});

// TODO: KIT-3247 add the rest of E2E tests
Loading

0 comments on commit 650d6f3

Please sign in to comment.