Merge branch 'master' into KIT-3596

packages/atomic-angular/package.json

@@ -20,17 +20,17 @@
     "@angular/platform-browser": "17.3.12",
     "@angular/platform-browser-dynamic": "17.3.12",
     "@angular/router": "17.3.12",
-    "@coveo/atomic": "3.3.0",
+    "@coveo/atomic": "3.6.2",
     "rxjs": "7.8.1"
   },
   "peerDependencies": {
-    "@coveo/headless": "3.3.0"
+    "@coveo/headless": "3.4.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "17.3.9",
     "@angular/cli": "17.3.9",
     "@angular/compiler-cli": "17.3.12",
-    "@coveo/headless": "3.3.0",
+    "@coveo/headless": "3.4.0",
     "@types/node": "20.14.12",
     "jasmine-core": "5.2.0",
     "karma": "6.4.3",

packages/atomic-angular/projects/atomic-angular/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@coveo/atomic-angular",
-  "version": "3.1.5",
+  "version": "3.1.10",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/coveo/ui-kit"
   },
   "peerDependencies": {
     "@angular/common": "14 - 17",
     "@angular/core": "14 - 17",
-    "@coveo/headless": "3.3.0"
+    "@coveo/headless": "3.4.0"
   },
   "dependencies": {
-    "@coveo/atomic": "3.3.0",
+    "@coveo/atomic": "3.6.2",
     "tslib": "2.6.3"
   },
   "engines": {

packages/atomic-hosted-page/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveo/atomic-hosted-page",
   "description": "Web Component used to inject a Coveo Hosted Search Page in the DOM.",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/coveo/ui-kit.git",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@coveo/bueno": "1.0.1",
-    "@coveo/headless": "3.3.0",
+    "@coveo/headless": "3.4.0",
     "@stencil/core": "4.20.0"
   },
   "devDependencies": {

packages/atomic-react/CHANGELOG.md

@@ -1,3 +1,7 @@
+## <small>3.1.10 (2024-10-23)</small>
+
+- chore(deps): bump rollup (#4525) ([874286e](https://github.com/coveo/ui-kit/commits/874286e)), closes [#4525](https://github.com/coveo/ui-kit/issues/4525)
+
 ## <small>3.1.1 (2024-09-24)</small>
 
 - docs: document headless, atomic, and atomic-react entry points (#4455) ([3853bdc](https://github.com/coveo/ui-kit/commits/3853bdc)), closes [#4455](https://github.com/coveo/ui-kit/issues/4455)

packages/atomic-react/package.json

@@ -2,7 +2,7 @@
   "name": "@coveo/atomic-react",
   "sideEffects": false,
   "type": "module",
-  "version": "3.1.5",
+  "version": "3.1.10",
   "description": "React specific wrapper for the Atomic component library",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "commerce/"
   ],
   "dependencies": {
-    "@coveo/atomic": "3.3.0"
+    "@coveo/atomic": "3.6.2"
   },
   "devDependencies": {
     "@coveo/release": "1.0.0",
@@ -48,11 +48,11 @@
     "ncp": "2.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "3.29.4",
+    "rollup": "4.24.0",
     "rollup-plugin-polyfill-node": "^0.13.0"
   },
   "peerDependencies": {
-    "@coveo/headless": "3.3.0",
+    "@coveo/headless": "3.4.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

packages/atomic/CHANGELOG.md

@@ -1,3 +1,27 @@
+## <small>3.6.2 (2024-10-23)</small>
+
+- chore(deps): bump rollup (#4525) ([874286e](https://github.com/coveo/ui-kit/commits/874286e)), closes [#4525](https://github.com/coveo/ui-kit/issues/4525)
+- fix(atomic): broken HTML because of formatting in CRGA markdown heading (#4522) ([9e15c6c](https://github.com/coveo/ui-kit/commits/9e15c6c)), closes [#4522](https://github.com/coveo/ui-kit/issues/4522) [/github.com/coveo/ui-kit/blob/master/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts#L50](https://github.com//github.com/coveo/ui-kit/blob/master/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts/issues/L50)
+- fix(atomic): delete ./loader/package.json when building atomic (#4539) ([c39f716](https://github.com/coveo/ui-kit/commits/c39f716)), closes [#4539](https://github.com/coveo/ui-kit/issues/4539)
+- fix(atomic): fix layout issue on product variants with imageSize set to none (#4521) ([cbfca7f](https://github.com/coveo/ui-kit/commits/cbfca7f)), closes [#4521](https://github.com/coveo/ui-kit/issues/4521)
+- fix(atomic): prevent clicks on atomic-product-image indicators from opening the product page (#4534) ([4d53962](https://github.com/coveo/ui-kit/commits/4d53962)), closes [#4534](https://github.com/coveo/ui-kit/issues/4534)
+- fix(atomic): prevent touch events on atomic-product-children from opening the product page (#4533) ([7739951](https://github.com/coveo/ui-kit/commits/7739951)), closes [#4533](https://github.com/coveo/ui-kit/issues/4533)
+- fix(insight): error "getAllFacets is undefined" in insight panel interface (#4474) ([836ef3a](https://github.com/coveo/ui-kit/commits/836ef3a)), closes [#4474](https://github.com/coveo/ui-kit/issues/4474)
+- feat(atomic): remove imageAltField as an array option & use image alt field prior to image not found ([ee7e1d9](https://github.com/coveo/ui-kit/commits/ee7e1d9)), closes [#4511](https://github.com/coveo/ui-kit/issues/4511)
+- test(atomic): fix failing atomic-color-facet test because of source change (#4543) ([c423e15](https://github.com/coveo/ui-kit/commits/c423e15)), closes [#4543](https://github.com/coveo/ui-kit/issues/4543)
+
+## 3.4.0 (2024-10-16)
+
+- fix(atomic): add hover effect for atomic-product clickable element in mobile/grid (#4519) ([0828b1f](https://github.com/coveo/ui-kit/commits/0828b1f)), closes [#4519](https://github.com/coveo/ui-kit/issues/4519)
+- fix(atomic): fix product image not always respect imageSize on grid display mode (#4520) ([95b6571](https://github.com/coveo/ui-kit/commits/95b6571)), closes [#4520](https://github.com/coveo/ui-kit/issues/4520)
+- fix(atomic): hide carousel buttons when image size is set to icon (#4518) ([479cc41](https://github.com/coveo/ui-kit/commits/479cc41)), closes [#4518](https://github.com/coveo/ui-kit/issues/4518)
+- test(atomic): fix flaky atomic did you mean tests (#4516) ([ec36b2e](https://github.com/coveo/ui-kit/commits/ec36b2e)), closes [#4516](https://github.com/coveo/ui-kit/issues/4516)
+- test(atomic): skip quickview cypress tests (#4532) ([bb65136](https://github.com/coveo/ui-kit/commits/bb65136)), closes [#4532](https://github.com/coveo/ui-kit/issues/4532)
+- feat(atomic): added logic to send analytics when opening user actions (#4512) ([06bea5a](https://github.com/coveo/ui-kit/commits/06bea5a)), closes [#4512](https://github.com/coveo/ui-kit/issues/4512)
+- feat(didyoumean): allow shifting queryCorrectionMode on the fly (#4305) ([7b007a2](https://github.com/coveo/ui-kit/commits/7b007a2)), closes [#4305](https://github.com/coveo/ui-kit/issues/4305)
+- feat(ipx): add exportparts to atomic-ipx-body (#4523) ([70754a0](https://github.com/coveo/ui-kit/commits/70754a0)), closes [#4523](https://github.com/coveo/ui-kit/issues/4523)
+- ci(atomic): run only affected E2E tests in atomic (#4484) ([497ede3](https://github.com/coveo/ui-kit/commits/497ede3)), closes [#4484](https://github.com/coveo/ui-kit/issues/4484)
+
 ## 3.3.0 (2024-10-10)
 
 - test(atomic): add tests & stories for atomic-product-image (#4469) ([bc09766](https://github.com/coveo/ui-kit/commits/bc09766)), closes [#4469](https://github.com/coveo/ui-kit/issues/4469)

packages/atomic/cypress/e2e/facets/color-facet/color-facet.cypress.ts

@@ -647,7 +647,7 @@ describe('Color Facet Test Suites', () => {
     describe('as a dependent', () => {
       const parentFacetId = 'def';
       const parentField = 'author';
-      const expectedValue = 'amoreau';
+      const expectedValue = 'Susan Cook';
       beforeEach(() => {
         new TestFixture()
           .with(

packages/atomic/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveo/atomic",
   "type": "module",
-  "version": "3.3.0",
+  "version": "3.6.2",
   "description": "A web-component library for building modern UIs interfacing with the Coveo platform",
   "homepage": "https://docs.coveo.com/en/atomic/latest/",
   "repository": {
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@coveo/bueno": "1.0.1",
-    "@coveo/headless": "3.3.0",
+    "@coveo/headless": "3.4.0",
     "@popperjs/core": "^2.11.6",
     "@salesforce-ux/design-system": "^2.16.1",
     "@stencil/store": "2.0.16",
@@ -149,7 +149,7 @@
     "postcss-nested": "6.2.0",
     "puppeteer": "22.14.0",
     "react": "18.3.1",
-    "rollup": "4.22.4",
+    "rollup": "4.24.0",
     "rollup-plugin-html": "0.2.1",
     "shadow-dom-testing-library": "1.11.2",
     "storybook": "8.1.2",
@@ -163,7 +163,7 @@
   },
   "peerDependencies": {
     "@coveo/bueno": "1.0.1",
-    "@coveo/headless": "3.3.0"
+    "@coveo/headless": "3.4.0"
   },
   "license": "Apache-2.0",
   "engines": {

packages/atomic/project.json

@@ -50,6 +50,7 @@
     "build": {
       "dependsOn": [
         "cached:build:stencil",
+        "delete-loader-package-json",
         "validate:definitions",
         "build-storybook"
       ],
@@ -146,6 +147,14 @@
       "options": {
         "command": "test-storybook -c packages/atomic/.storybook --url=http://localhost:4400"
       }
+    },
+    "delete-loader-package-json": {
+      "dependsOn": ["^build", "cached:build:stencil"],
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "rm ./loader/package.json",
+        "cwd": "packages/atomic"
+      }
     }
   }
 }

packages/atomic/src/components.d.ts

@@ -2062,7 +2062,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}".
+          * 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. If the product has multiple images, the value of the `imageAltField` will be used as the alt text for every image.  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;
@@ -7959,7 +7959,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}".
+          * 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. If the product has multiple images, the value of the `imageAltField` will be used as the alt text for every image.  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/atomic-product/atomic-product.pcss

@@ -29,7 +29,8 @@
           }
         }
 
-        &.image-icon {
+        &.image-icon,
+        &.image-none {
           atomic-product-section-children .product-child {
             width: 2rem;
             height: 2rem;
@@ -46,7 +47,8 @@
           }
         }
 
-        &.image-icon {
+        &.image-icon,
+        &.image-none {
           atomic-product-section-children .product-child {
             width: 2rem;
             height: 2rem;

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

@@ -132,7 +132,11 @@ export class AtomicProductChildren
           event.key === 'Enter' && this.onSelectChild(child)
         }
         onMouseEnter={() => this.onSelectChild(child)}
-        onTouchStart={() => this.onSelectChild(child)}
+        onTouchStart={(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+          this.onSelectChild(child);
+        }}
       >
         <img
           class="aspect-square p-1"

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

@@ -41,11 +41,7 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
 
   /**
    * 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 product has multiple images, the value of the `imageAltField` will be used as the alt text for every image.
    *
    * 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}
@@ -138,9 +134,7 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
       this.validateUrl(finalUrl);
       let altText;
 
-      if (Array.isArray(validImageAlt) && validImageAlt[index]) {
-        altText = validImageAlt[index];
-      } else if (typeof validImageAlt === 'string') {
+      if (typeof validImageAlt === 'string') {
         altText = validImageAlt;
       } else {
         altText = this.bindings.i18n.t('image-alt-fallback-multiple', {
@@ -167,22 +161,17 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
   }
 
   private get imageAlt() {
-    if (this.imageAltField) {
-      const value = ProductTemplatesHelpers.getProductProperty(
-        this.product,
-        this.imageAltField
-      );
-
-      if (isNullOrUndefined(value)) {
-        return null;
-      }
-
-      if (Array.isArray(value)) {
-        return value.map((v) => `${v}`.trim());
-      }
-      return (value as string).trim();
+    if (!this.imageAltField) {
+      return null;
     }
-    return null;
+    const value = ProductTemplatesHelpers.getProductProperty(
+      this.product,
+      this.imageAltField
+    );
+    if (isNullOrUndefined(value)) {
+      return null;
+    }
+    return (value as string).trim();
   }
 
   private get numberOfImages() {
@@ -212,13 +201,18 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
         alt: image.alt,
       };
     });
+
     if (this.images.length === 0) {
       this.validateUrl(this.fallback);
+      const alt = this.imageAlt
+        ? this.imageAlt
+        : this.bindings.i18n.t('image-not-found-alt', {
+            itemName: this.product.ec_name,
+          });
       return (
         <img
-          //TODO - KIT-3641 use image-alt-field prior to image-not-found-alt
           class="aspect-square"
-          alt={this.bindings.i18n.t('image-not-found-alt')}
+          alt={alt}
           src={this.fallback}
           loading="eager"
         />