feat(atomic, commerce): create atomic-product-multi-value-text component

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -67,6 +67,7 @@ AtomicProductDescription,
 AtomicProductFieldCondition,
 AtomicProductImage,
 AtomicProductLink,
+AtomicProductMultiValueText,
 AtomicProductNumericFieldValue,
 AtomicProductPrice,
 AtomicProductRating,
@@ -212,6 +213,7 @@ AtomicProductDescription,
 AtomicProductFieldCondition,
 AtomicProductImage,
 AtomicProductLink,
+AtomicProductMultiValueText,
 AtomicProductNumericFieldValue,
 AtomicProductPrice,
 AtomicProductRating,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -1409,6 +1409,28 @@ export class AtomicProductLink {
 export declare interface AtomicProductLink extends Components.AtomicProductLink {}
 
 
+@ProxyCmp({
+  inputs: ['delimiter', 'field', 'maxValuesToDisplay']
+})
+@Component({
+  selector: 'atomic-product-multi-value-text',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['delimiter', 'field', 'maxValuesToDisplay'],
+})
+export class AtomicProductMultiValueText {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicProductMultiValueText extends Components.AtomicProductMultiValueText {}
+
+
 @ProxyCmp({
   inputs: ['field']
 })

packages/atomic-react/src/components/stencil-generated/commerce/index.ts

@@ -45,6 +45,7 @@ export const AtomicProductDescription = /*@__PURE__*/createReactComponent<JSX.At
 export const AtomicProductFieldCondition = /*@__PURE__*/createReactComponent<JSX.AtomicProductFieldCondition, HTMLAtomicProductFieldConditionElement>('atomic-product-field-condition');
 export const AtomicProductImage = /*@__PURE__*/createReactComponent<JSX.AtomicProductImage, HTMLAtomicProductImageElement>('atomic-product-image');
 export const AtomicProductLink = /*@__PURE__*/createReactComponent<JSX.AtomicProductLink, HTMLAtomicProductLinkElement>('atomic-product-link');
+export const AtomicProductMultiValueText = /*@__PURE__*/createReactComponent<JSX.AtomicProductMultiValueText, HTMLAtomicProductMultiValueTextElement>('atomic-product-multi-value-text');
 export const AtomicProductNumericFieldValue = /*@__PURE__*/createReactComponent<JSX.AtomicProductNumericFieldValue, HTMLAtomicProductNumericFieldValueElement>('atomic-product-numeric-field-value');
 export const AtomicProductPrice = /*@__PURE__*/createReactComponent<JSX.AtomicProductPrice, HTMLAtomicProductPriceElement>('atomic-product-price');
 export const AtomicProductRating = /*@__PURE__*/createReactComponent<JSX.AtomicProductRating, HTMLAtomicProductRatingElement>('atomic-product-rating');

packages/atomic/src/components.d.ts

@@ -2107,6 +2107,23 @@ export namespace Components {
          */
         "hrefTemplate"?: string;
     }
+    /**
+     * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.
+     */
+    interface AtomicProductMultiValueText {
+        /**
+          * The delimiter used to separate values when the field isn't indexed as a multi value field.
+         */
+        "delimiter": string | null;
+        /**
+          * The field that the component should use. The component will try to find this field in the `Product.raw` object unless it finds it in the `Product` object first. Make sure this field is present in the `fieldsToInclude` property of the `atomic-commerce-interface` component.
+         */
+        "field": string;
+        /**
+          * The maximum number of field values to display. If there are _n_ more values than the specified maximum, the last displayed value will be "_n_ more...".
+         */
+        "maxValuesToDisplay": number;
+    }
     /**
      * @alpha The `atomic-product-numeric-field-value` component renders the value of a number product field.
      * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.
@@ -4873,6 +4890,15 @@ declare global {
         prototype: HTMLAtomicProductLinkElement;
         new (): HTMLAtomicProductLinkElement;
     };
+    /**
+     * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.
+     */
+    interface HTMLAtomicProductMultiValueTextElement extends Components.AtomicProductMultiValueText, HTMLStencilElement {
+    }
+    var HTMLAtomicProductMultiValueTextElement: {
+        prototype: HTMLAtomicProductMultiValueTextElement;
+        new (): HTMLAtomicProductMultiValueTextElement;
+    };
     /**
      * @alpha The `atomic-product-numeric-field-value` component renders the value of a number product field.
      * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.
@@ -5996,6 +6022,7 @@ declare global {
         "atomic-product-field-condition": HTMLAtomicProductFieldConditionElement;
         "atomic-product-image": HTMLAtomicProductImageElement;
         "atomic-product-link": HTMLAtomicProductLinkElement;
+        "atomic-product-multi-value-text": HTMLAtomicProductMultiValueTextElement;
         "atomic-product-numeric-field-value": HTMLAtomicProductNumericFieldValueElement;
         "atomic-product-price": HTMLAtomicProductPriceElement;
         "atomic-product-rating": HTMLAtomicProductRatingElement;
@@ -8020,6 +8047,23 @@ declare namespace LocalJSX {
          */
         "hrefTemplate"?: string;
     }
+    /**
+     * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.
+     */
+    interface AtomicProductMultiValueText {
+        /**
+          * The delimiter used to separate values when the field isn't indexed as a multi value field.
+         */
+        "delimiter"?: string | null;
+        /**
+          * The field that the component should use. The component will try to find this field in the `Product.raw` object unless it finds it in the `Product` object first. Make sure this field is present in the `fieldsToInclude` property of the `atomic-commerce-interface` component.
+         */
+        "field": string;
+        /**
+          * The maximum number of field values to display. If there are _n_ more values than the specified maximum, the last displayed value will be "_n_ more...".
+         */
+        "maxValuesToDisplay"?: number;
+    }
     /**
      * @alpha The `atomic-product-numeric-field-value` component renders the value of a number product field.
      * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.
@@ -9653,6 +9697,7 @@ declare namespace LocalJSX {
         "atomic-product-field-condition": AtomicProductFieldCondition;
         "atomic-product-image": AtomicProductImage;
         "atomic-product-link": AtomicProductLink;
+        "atomic-product-multi-value-text": AtomicProductMultiValueText;
         "atomic-product-numeric-field-value": AtomicProductNumericFieldValue;
         "atomic-product-price": AtomicProductPrice;
         "atomic-product-rating": AtomicProductRating;
@@ -10119,6 +10164,10 @@ declare module "@stencil/core" {
              * @alpha The `atomic-product-link` component automatically transforms a search product title into a clickable link that points to the original item.
              */
             "atomic-product-link": LocalJSX.AtomicProductLink & JSXBase.HTMLAttributes<HTMLAtomicProductLinkElement>;
+            /**
+             * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.
+             */
+            "atomic-product-multi-value-text": LocalJSX.AtomicProductMultiValueText & JSXBase.HTMLAttributes<HTMLAtomicProductMultiValueTextElement>;
             /**
              * @alpha The `atomic-product-numeric-field-value` component renders the value of a number product field.
              * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.

packages/atomic/src/components/commerce/product-template-components/atomic-product-multi-value-text/atomic-product-multi-value-text.new.stories.tsx

@@ -0,0 +1,84 @@
+import {wrapInCommerceInterface} from '@coveo/atomic/storybookUtils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
+import {wrapInProduct} from '@coveo/atomic/storybookUtils/product-wrapper';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {render} from 'lit';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {html} from 'lit/static-html.js';
+
+const {decorator: productDecorator} = wrapInProduct();
+const {decorator: commerceInterfaceDecorator, play} = wrapInCommerceInterface({
+  skipFirstSearch: false,
+});
+
+const meta: Meta = {
+  component: 'atomic-product-multi-value-text',
+  title: 'Atomic-Commerce/Product Template Components/MultiValueText',
+  id: 'atomic-product-multi-value-text',
+  render: renderComponent,
+  decorators: [commerceInterfaceDecorator],
+  parameters,
+  play,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-product-multi-value-text',
+  args: {
+    'attributes-field': 'cat_available_sizes',
+  },
+  decorators: [productDecorator],
+};
+
+export const WithMaxValuesToDisplay: Story = {
+  name: 'With max values to display',
+  args: {
+    'attributes-field': 'cat_available_sizes',
+    'attributes-max-values-to-display': 1,
+  },
+  decorators: [productDecorator],
+};
+
+export const InPage: Story = {
+  name: 'In a page',
+  args: {
+    'attributes-field': 'cat_available_sizes',
+  },
+  decorators: [
+    (story) => {
+      const tempProductTemplate = document.createElement('div');
+      render(html` ${story()}`, tempProductTemplate);
+      tempProductTemplate.replaceChildren(
+        ...Array.from(tempProductTemplate.children)
+      );
+      return html`
+        <atomic-commerce-layout>
+          <atomic-layout-section section="facets"
+            ><atomic-commerce-facets></atomic-commerce-facets>
+          </atomic-layout-section>
+          <atomic-layout-section section="main">
+            <atomic-commerce-product-list
+              display="list"
+              density="normal"
+              image-size="icon"
+              style="border: 2px dashed black; padding:20px;"
+            >
+              <atomic-product-template>
+                ${unsafeHTML(
+                  `<template>${tempProductTemplate.innerHTML}</template>`
+                )}
+              </atomic-product-template>
+            </atomic-commerce-product-list>
+
+            <atomic-commerce-products-per-page
+              choices-displayed="1"
+              initial-choice="1"
+            ></atomic-commerce-products-per-page>
+          </atomic-layout-section>
+        </atomic-commerce-layout>
+      `;
+    },
+  ],
+};

packages/atomic/src/components/commerce/product-template-components/atomic-product-multi-value-text/atomic-product-multi-value-text.pcss

@@ -0,0 +1,19 @@
+:host {
+  > ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: inline-block;
+    }
+  }
+}
+
+.separator {
+  &::before {
+    display: inline;
+    content: ',\00a0';
+  }
+}