coveo · alexprudhomme · Sep 19, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024
@@ -2044,7 +2044,7 @@ export namespace Components {
      */
     interface AtomicProductLink {
         /**
-          * The [template literal](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) from which to generate the `href` attribute value  The template literal can reference any number of product properties from the parent product. It can also reference the window object.  For example, the following markup generates an `href` value such as `http://uri.com?id=itemTitle`, using the product's `clickUri` and `itemtitle` fields. ```html <atomic-product-link href-template='${clickUri}?id=${raw.itemtitle}'></atomic-product-link> ```
+          * The [template literal](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) from which to generate the `href` attribute value  The template literal can reference any number of product properties from the parent product. It can also reference the window object.  For example, the following markup generates an `href` value such as `http://uri.com?id=itemTitle`, using the product's `clickUri` and `itemtitle` fields. ```html <atomic-product-link href-template='${clickUri}?id=${permanentId}'></atomic-product-link> ```
          */
         "hrefTemplate"?: string;
     }
@@ -7875,7 +7875,7 @@ declare namespace LocalJSX {
      */
     interface AtomicProductLink {
         /**
-          * The [template literal](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) from which to generate the `href` attribute value  The template literal can reference any number of product properties from the parent product. It can also reference the window object.  For example, the following markup generates an `href` value such as `http://uri.com?id=itemTitle`, using the product's `clickUri` and `itemtitle` fields. ```html <atomic-product-link href-template='${clickUri}?id=${raw.itemtitle}'></atomic-product-link> ```
+          * The [template literal](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) from which to generate the `href` attribute value  The template literal can reference any number of product properties from the parent product. It can also reference the window object.  For example, the following markup generates an `href` value such as `http://uri.com?id=itemTitle`, using the product's `clickUri` and `itemtitle` fields. ```html <atomic-product-link href-template='${clickUri}?id=${permanentId}'></atomic-product-link> ```
          */
         "hrefTemplate"?: string;
     }

@@ -0,0 +1,89 @@
+import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {wrapInCommerceProductList} from '@coveo/atomic/storybookUtils/commerce/commerce-product-list-wrapper';
+import {wrapInProductTemplate} from '@coveo/atomic/storybookUtils/commerce/commerce-product-template-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit-html';
+
+const {
+  decorator: commerceInterfaceDecorator,
+  play: initializeCommerceInterface,
+} = wrapInCommerceInterface({
+  skipFirstSearch: false,
+  type: 'product-listing',
+  engineConfig: {
+    context: {
+      view: {
+        url: 'https://sports.barca.group/browse/promotions/ui-kit-testing',
+      },
+      language: 'en',
+      country: 'US',
+      currency: 'USD',
+    },
+  },
+});
+const {decorator: commerceProductListDecorator} = wrapInCommerceProductList();
+const {decorator: productTemplateDecorator} = wrapInProductTemplate();
+
+const meta: Meta = {
+  component: 'atomic-product-link',
+  title: 'Atomic-Commerce/Product Template Components/ProductLink',
+  id: 'atomic-product-link',
+  render: renderComponent,
+  decorators: [
+    productTemplateDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+  ],
+  parameters,
+  play: initializeCommerceInterface,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-product-link',
+};
+
+export const WithSlotsAttributes: Story = {
+  name: 'opens in a new browser tab',
+  decorators: [
+    () => {
+      return html`
+        <atomic-product-link>
+          <a slot="attributes" target="_blank"></a>
+        </atomic-product-link>
+      `;
+    },
+  ],
+};
+
+export const WithAlternativeContent: Story = {
+  name: 'with alternative content',
+  decorators: [
+    () => {
+      return html`
+        <atomic-product-link>
+          <div>
+            Alternative content
+            <img src="https://picsum.photos/350" class="thumbnail" />
+          </div>
+        </atomic-product-link>
+      `;
+    },
+  ],
+};
+
+export const WithHrefTemplate: Story = {
+  name: 'with href template',
+  decorators: [
+    () => {
+      return html`
+        <atomic-product-link
+          href-template="\${clickUri}?source=\${additionalFields.source}"
+        ></atomic-product-link>
+      `;
+    },
+  ],
+};
@@ -22,6 +22,7 @@ import {buildStringTemplateFromProduct} from '../product-utils';
  * The `atomic-product-link` component automatically transforms a search product title into a clickable link that points to the original item.
  * @slot default - Lets you display alternative content inside the link.
  * @slot attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to the link element, overriding other attributes. Use only with an "a" tag, e.g., `<a slot="attributes" target="_blank" download></a>`.
+ *
  */
 @Component({
   tag: 'atomic-product-link',
@@ -48,7 +49,7 @@ export class AtomicProductLink
    *
    * For example, the following markup generates an `href` value such as `http://uri.com?id=itemTitle`, using the product's `clickUri` and `itemtitle` fields.
    * ```html
-   * <atomic-product-link href-template='${clickUri}?id=${raw.itemtitle}'></atomic-product-link>
+   * <atomic-product-link href-template='${clickUri}?id=${permanentId}'></atomic-product-link>
    * ```
    */
   @Prop({reflect: true}) hrefTemplate?: string;

@@ -0,0 +1,59 @@
+import {test, expect} from './fixture';
+
+test.describe('default', () => {
+  test.beforeEach(async ({productLink}) => {
+    await productLink.load();
+    await productLink.hydrated.first().waitFor({state: 'visible'});
+  });
+
+  test('should render as links', async ({productLink, page}) => {
+    expect(await productLink.anchor().count()).toBeGreaterThan(1);
+
+    await expect(productLink.anchor().first()).toHaveAttribute('href');
+
+    await productLink.anchor().first().click({force: true});
+    expect(page.url()).toContain('barca');
+  });
+});
+
+test.describe('with slot for attributes', () => {
+  test.beforeEach(async ({productLink}) => {
+    await productLink.load({story: 'with-slots-attributes'});
+    await productLink.hydrated.first().waitFor({state: 'visible'});
+  });
+
+  test('should support to open in new tab', async ({productLink}) => {
+    const anchor = productLink.anchor().first();
+    await expect(anchor).toHaveAttribute('target', '_blank');
+  });
+});
+
+test.describe('with alternative content', () => {
+  test.beforeEach(async ({productLink}) => {
+    await productLink.load({story: 'with-alternative-content'});
+    await productLink.hydrated.first().waitFor({state: 'visible'});
+  });
+
+  test('should render alternative content', async ({productLink}) => {
+    await expect(productLink.anchor().first()).toHaveText(
+      'Alternative content'
+    );
+
+    await expect(productLink.anchor().first().locator('img')).toBeVisible();
+  });
+});
+
+test.describe('with href template', () => {
+  test.beforeEach(async ({productLink}) => {
+    await productLink.load({story: 'with-href-template'});
+    await productLink.hydrated.first().waitFor({state: 'visible'});
+  });
+
+  test('should render the href template', async ({productLink}) => {
+    const anchor = productLink.anchor().first();
+    await expect(anchor).toHaveAttribute(
+      'href',
+      'https://sports.barca.group/pdp/SP00021_00001?source=Sports'
+    );
+  });
+});
@@ -0,0 +1,19 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {ProductLinkPageObject} from './page-object';
+
+type MyFixtures = {
+  productLink: ProductLinkPageObject;
+};
+
+export const test = base.extend<MyFixtures & AxeFixture>({
+  makeAxeBuilder,
+  productLink: async ({page}, use) => {
+    await use(new ProductLinkPageObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';
@@ -0,0 +1,12 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class ProductLinkPageObject extends BasePageObject<'atomic-product-link'> {
+  constructor(page: Page) {
+    super(page, 'atomic-product-link');
+  }
+
+  anchor() {
+    return this.page.getByRole('link');
+  }
+}
@@ -1,4 +1,5 @@
 import {Product, ProductTemplatesHelpers} from '@coveo/headless/commerce';
+import {readFromObject} from '../../../utils/object-utils';
 import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
 
 export function getStringValueFromProductOrNull(
@@ -36,11 +37,3 @@ export function buildStringTemplateFromProduct(
     return newValue;
   });
 }
-
-function readFromObject<T>(object: T, key: string): string | undefined {
-  if (object && typeof object === 'object' && key in object) {
-    const value = (object as Record<string, unknown>)[key];
-    return typeof value === 'string' ? value : undefined;
-  }
-  return undefined;
-}
@@ -1,12 +1,12 @@
-import {wrapInCommerceProductList} from '@coveo/atomic/storybookUtils/commerce/atomic-commerce-product-list-wrapper';
-import {wrapInCommerceRecommendationList} from '@coveo/atomic/storybookUtils/commerce/atomic-commerce-recommendation-list-wrapper';
-import {wrapInCommerceSearchBoxInstantProducts} from '@coveo/atomic/storybookUtils/commerce/atomic-commerce-searchbox-instant-products-wrapper';
 import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
-import {wrapInCommerceRecommendationInterface} from '@coveo/atomic/storybookUtils/commerce/commerce-recommendation-interface-wrapper';
+import {wrapInCommerceProductList} from '@coveo/atomic/storybookUtils/commerce/commerce-product-list-wrapper';
 import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
 import {renderComponentWithoutCodeRoot} from '@coveo/atomic/storybookUtils/common/render-component';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 import {within} from 'shadow-dom-testing-library';
+import {wrapInCommerceRecommendationInterface} from '../../../../storybookUtils/commerce/commerce-recommendation-interface-wrapper';
+import {wrapInCommerceRecommendationList} from '../../../../storybookUtils/commerce/commerce-recommendation-list-wrapper';
+import {wrapInCommerceSearchBoxInstantProducts} from '../../../../storybookUtils/commerce/commerce-searchbox-instant-products-wrapper';
 
 const TEMPLATE_EXAMPLE = `<template>
   <atomic-product-section-name>

@@ -0,0 +1,17 @@
+export function readFromObject<T extends object>(
+  object: T,
+  key: string
+): string | undefined {
+  const keys = key.split('.');
+  let current: unknown = object;
+
+  for (const k of keys) {
+    if (current && typeof current === 'object' && k in current) {
+      current = (current as Record<string, unknown>)[k];
+    } else {
+      return undefined;
+    }
+  }
+
+  return typeof current === 'string' ? current : undefined;
+}
@@ -6,6 +6,7 @@ import {
 } from '@coveo/headless';
 import {RecsBindings} from '../components/recommendations/atomic-recs-interface/atomic-recs-interface';
 import {Bindings} from '../components/search/atomic-search-interface/atomic-search-interface';
+import {readFromObject} from './object-utils';
 
 /**
  * Binds the logging of document
@@ -82,21 +83,3 @@ export function getStringValueFromResultOrNull(result: Result, field: string) {
 
   return value;
 }
-
-function readFromObject<T extends object>(
-  object: T,
-  key: string
-): string | undefined {
-  const keys = key.split('.');
-  let current: unknown = object;
-
-  for (const k of keys) {
-    if (current && typeof current === 'object' && k in current) {
-      current = (current as Record<string, unknown>)[k];
-    } else {
-      return undefined;
-    }
-  }
-
-  return typeof current === 'string' ? current : undefined;
-}
@@ -1,5 +1,5 @@
 import {Decorator} from '@storybook/web-components';
-import {html} from 'lit-html/static.js';
+import {html} from 'lit-html';
 
 export const wrapInCommerceProductList = (): {
   decorator: Decorator;
@@ -8,8 +8,8 @@ export const wrapInCommerceProductList = (): {
     <atomic-commerce-product-list
       id="code-root"
       number-of-placeholders="24"
-      display="grid"
-      density="normal"
+      display="list"
+      density="compact"
       image-size="small"
     >
       ${story()}

@@ -0,0 +1,22 @@
+import {Decorator} from '@storybook/web-components';
+import {html, TemplateResult} from 'lit-html';
+
+export const wrapInProductTemplate = (): {
+  decorator: Decorator;
+} => {
+  const decorator: Decorator = (story) => {
+    // lit-html does not support adding expressions to `template` tags
+    // https://lit.dev/docs/templates/expressions/#invalid-locations
+
+    const templateTag = document.createElement('template');
+    templateTag.innerHTML = `${(story() as TemplateResult).strings.join('')}`;
+    templateTag.id = 'code-root';
+    return html`
+      <atomic-product-template>${templateTag}</atomic-product-template>
+    `;
+  };
+
+  return {
+    decorator,
+  };
+};