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

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

@@ -65,6 +65,7 @@ AtomicProductDescription,
 AtomicProductFieldCondition,
 AtomicProductImage,
 AtomicProductLink,
+AtomicProductMultiValueText,
 AtomicProductNumericFieldValue,
 AtomicProductPrice,
 AtomicProductRating,
@@ -208,6 +209,7 @@ AtomicProductDescription,
 AtomicProductFieldCondition,
 AtomicProductImage,
 AtomicProductLink,
+AtomicProductMultiValueText,
 AtomicProductNumericFieldValue,
 AtomicProductPrice,
 AtomicProductRating,

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

@@ -1366,6 +1366,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

@@ -44,6 +44,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

@@ -2076,6 +2076,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.additionalFields` 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.
@@ -4816,6 +4833,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.
@@ -5940,6 +5966,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;
@@ -7947,6 +7974,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.additionalFields` 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.
@@ -9562,6 +9606,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;
@@ -10023,6 +10068,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,106 @@
+import {wrapInCommerceInterface} from '@coveo/atomic-storybook-utils/commerce/commerce-interface-wrapper';
+import {wrapInCommerceProductList} from '@coveo/atomic-storybook-utils/commerce/commerce-product-list-wrapper';
+import {wrapInProductTemplate} from '@coveo/atomic-storybook-utils/commerce/commerce-product-template-wrapper';
+import {parameters} from '@coveo/atomic-storybook-utils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic-storybook-utils/common/render-component';
+import {getSampleCommerceEngineConfiguration} from '@coveo/headless/commerce';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit/static-html.js';
+
+const baseConfiguration = getSampleCommerceEngineConfiguration();
+
+const {decorator: productDecorator} = wrapInProductTemplate();
+const {decorator: commerceProductListDecorator} = wrapInCommerceProductList();
+const {decorator: commerceInterfaceDecorator, play} = wrapInCommerceInterface({
+  engineConfig: {
+    ...baseConfiguration,
+    context: {
+      ...baseConfiguration.context,
+      view: {
+        url: 'https://sports.barca.group/browse/promotions/ui-kit-testing-product-multi-value-text',
+      },
+    },
+  },
+  type: 'product-listing',
+});
+
+const meta: Meta = {
+  component: 'atomic-product-multi-value-text',
+  title: 'Atomic-Commerce/Product Template Components/MultiValueText',
+  id: 'atomic-product-multi-value-text',
+  render: renderComponent,
+  parameters,
+  play,
+  args: {
+    'attributes-field': 'cat_available_sizes',
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-product-multi-value-text',
+  decorators: [
+    productDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+  ],
+};
+
+export const WithDelimiter: Story = {
+  name: 'With delimiter',
+  decorators: [
+    productDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+  ],
+  args: {
+    'attributes-field': 'ec_product_id',
+    'attributes-delimiter': '_',
+  },
+};
+
+export const WithMaxValuesToDisplaySetToMinimum: Story = {
+  name: 'With max values to display set to minimum',
+  decorators: [
+    productDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+  ],
+  args: {
+    'attributes-max-values-to-display': 1,
+  },
+};
+
+export const WithMaxValuesToDisplaySetToTotalNumberOfValues: Story = {
+  name: 'With max values to display set to total number of values',
+  decorators: [
+    productDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+  ],
+  args: {
+    'attributes-max-values-to-display': 6,
+  },
+};
+
+export const InAPageWithTheCorrespondingFacet: Story = {
+  name: 'In a page with the corresponding facet',
+  decorators: [
+    productDecorator,
+    commerceProductListDecorator,
+    (story) => {
+      return html`
+        <atomic-commerce-layout>
+          <atomic-layout-section section="facets"
+            ><atomic-commerce-facets></atomic-commerce-facets>
+          </atomic-layout-section>
+          <atomic-layout-section section="main">
+            ${story()}
+          </atomic-layout-section>
+        </atomic-commerce-layout>
+      `;
+    },
+    commerceInterfaceDecorator,
+  ],
+};

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';
+  }
+}