test(atomic): add tests & stories for atomic-product-image

packages/atomic/src/components.d.ts

@@ -2051,6 +2051,7 @@ export namespace Components {
         "field": string;
         /**
           * The product field that contains the alt text for the images. This will look for the field in the product object first, then in the product.additionalFields object. The field can be a string or an array of strings.  If the value of the field is a string, it will be used as the alt text for all the images.  If the value of the field is an array of strings, the alt text will be used in the order of the images.  If the field is not specified, or does not contain a valid value, the alt text will be set to "Image {index} out of {totalImages} for {productName}".
+          * @type {string}
          */
         "imageAltField"?: string;
         /**
@@ -7935,6 +7936,7 @@ declare namespace LocalJSX {
         "field"?: string;
         /**
           * The product field that contains the alt text for the images. This will look for the field in the product object first, then in the product.additionalFields object. The field can be a string or an array of strings.  If the value of the field is a string, it will be used as the alt text for all the images.  If the value of the field is an array of strings, the alt text will be used in the order of the images.  If the field is not specified, or does not contain a valid value, the alt text will be set to "Image {index} out of {totalImages} for {productName}".
+          * @type {string}
          */
         "imageAltField"?: string;
     }

packages/atomic/src/components/commerce/product-template-components/atomic-product-image/atomic-product-image.new.stories.tsx

@@ -0,0 +1,70 @@
+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 type {Meta, StoryObj as Story} from '@storybook/web-components';
+import type {Decorator} from '@storybook/web-components';
+import {html} from 'lit-html';
+
+const styledDivDecorator: Decorator = (story) => {
+  return html`<div style="max-width: 700px">${story()}</div>`;
+};
+
+const {
+  decorator: commerceInterfaceDecorator,
+  play: initializeCommerceInterface,
+} = wrapInCommerceInterface({
+  skipFirstSearch: false,
+  type: 'product-listing',
+  engineConfig: {
+    context: {
+      view: {
+        url: 'https://ui-kit.coveo/atomic/storybook/atomic-product-image',
+      },
+      language: 'en',
+      country: 'US',
+      currency: 'USD',
+    },
+  },
+});
+const {decorator: commerceProductListDecorator} = wrapInCommerceProductList();
+const {decorator: productTemplateDecorator} = wrapInProductTemplate();
+
+const meta: Meta = {
+  component: 'atomic-product-image',
+  title: 'Atomic-Commerce/Product Template Components/ProductImage',
+  id: 'atomic-product-image',
+  render: renderComponent,
+  decorators: [
+    productTemplateDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+    styledDivDecorator,
+  ],
+  parameters,
+  play: initializeCommerceInterface,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-product-image',
+};
+
+export const withAFallbackImage: Story = {
+  name: 'With a fallback image',
+  args: {
+    'attributes-field': 'invalid',
+    'attributes-fallback': 'https://sports.barca.group/logos/barca.svg',
+  },
+};
+
+export const withAnAltTextField: Story = {
+  name: 'With an alt text field',
+  args: {
+    'attributes-field': 'invalid',
+    'attributes-fallback': 'invalid',
+    'attributes-image-alt-field': 'ec_name',
+  },
+};

packages/atomic/src/components/commerce/product-template-components/atomic-product-image/atomic-product-image.tsx

@@ -47,6 +47,7 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
    * If the value of the field is an array of strings, the alt text will be used in the order of the images.
    *
    * If the field is not specified, or does not contain a valid value, the alt text will be set to "Image {index} out of {totalImages} for {productName}".
+   * @type {string}
    */
   @Prop({reflect: true}) imageAltField?: string;
 
@@ -170,6 +171,10 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
         this.product,
         this.imageAltField
       );
+      // KIT-3620
+      // if (isNullOrUndefined(value)) {
+      //   return null;
+      // }
 
       if (Array.isArray(value)) {
         return value.map((v) => `${v}`.trim());
@@ -208,9 +213,10 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
     });
     if (this.images.length === 0) {
       this.validateUrl(this.fallback);
-
       return (
         <img
+          // class="aspect-square" KIT-3619
+          //TODO - KIT-3641 use image-alt-field prior to image-not-found-alt
           alt={this.bindings.i18n.t('image-not-found-alt')}
           src={this.fallback}
           loading="eager"
@@ -222,7 +228,7 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
     }
 
     return (
-      // TODO: handle small/icon image sizes better on mobile
+      // TODO - KIT-3612 : handle small/icon image sizes better on mobile
       <ImageCarousel
         bindings={this.bindings}
         currentImage={this.currentImage}