@sapudex/web-components 2.21.0 → 2.23.0

package/bundle.esm.js

@@ -49,6 +49,8 @@ import "./dist/Feed.js";
 import "./dist/FeedItem.js";
 import "./dist/Footer.js";
 import "./dist/HeroBanner.js";
+import "./dist/ImageGridCloud.js";
+import "./dist/ImageGridCloudItem.js";
 import "./dist/ImageGridTicker.js";
 import "./dist/ImageGridTickerItem.js";
 import "./dist/InputGroup.js";

package/cypress/specs/CountrySelector.cy.tsx

@@ -1,224 +1,238 @@
 import { UDExCountrySelector } from "../support/component-imports.js";
 
-const defaultCountrySelector = <UDExCountrySelector	id="default"
-    searchPlaceholder="Search Countries and Regions"
-    label="Countries"
-    blockedCountryCodes="PL">
-</UDExCountrySelector>
-
-const countrySelectorWithoutFlags = <UDExCountrySelector id="country-selector-no-flags"
-    searchPlaceholder="Search Countries and Regions"
-    blockedCountry-Codes="PL"
-    hideFlagImages>
+const defaultCountrySelector = <div style={{ width: "300px" }}><UDExCountrySelector
+  id="default"
+  label="Countries"
+  height="400px"
+  blockedCountryCodes="PL">
+</UDExCountrySelector></div>
+
+const countrySelectorWithoutFlags = <UDExCountrySelector
+  id="country-selector-no-flags"
+  blockedCountryCodes="PL"
+  hideFlagImages>
 </UDExCountrySelector>
 
 const countrySelectorWithSupportingText = <UDExCountrySelector
-    id="country-selector-supporting-text"
-    supportingText="Test supporting text"
-    searchPlaceholder="Search Countries and Regions"
-    height="400px">
+  id="country-selector-supporting-text"
+  supportingText="Test supporting text"
+  height="400px">
 </UDExCountrySelector>
 
-describe("CountrySelector", () => {
-  const blockedCountryIsoCode = 'PL';
-  const initialCountryData = {
-    iso: 'FR',
-    phoneFmt: "+xxxx xxxx xxxx",
-    countryName: "France",
-    localName: "France",
-  }
-
-  const countrySelectorNoFlagClass = "udex-country-selector__dropdown--hide-flag";
-  const countrySelectorDisabledClass = "udex-country-selector__trigger--disabled";
-  const countrySelectorReadOnlyClass = "udex-country-selector__trigger--readonly";
-  const countrySelectorDisplayOnlyClass = "udex-country-selector__trigger--displayonly";
-
+describe("CountrySelector component", () => {
   beforeEach(() => {
-    cy.mount(defaultCountrySelector)
+    cy.mount(defaultCountrySelector);
+    cy.get("#default").shadow().as("defaultCountrySelector");
+    cy.get("@defaultCountrySelector").find(".udex-text-field__search").as("searchInput");
+    cy.get("@defaultCountrySelector").find(".udex-text-field__trigger").as("buttonTrigger");
+    cy.get("@defaultCountrySelector").find("[ui5-popover]").as("dropdownPopover");
   });
 
   it("is correctly rendered", () => {
-    cy.get("#default").shadow().find(".udex-country-selector__dropdown").should("be.visible")
+    cy.get("@defaultCountrySelector").find(".udex-select-box__root").should("be.visible");
   });
 
   it("renders flag icon when no country is selected", () => {
-    cy.get("#default").shadow().find(".udex-country-selector__image").should("be.visible")
+    cy.get("@defaultCountrySelector").find(".udex-text-field__image").should("be.visible");
   });
 
   it("renders label", () => {
-    cy.get("#default").shadow().find("udex-text-field").shadow().find(".udex-text-field__label").should("have.text", "Countries")
-  });
-
-  it("renders placeholder in the dropdown's search", () => {
-    cy.get("#default").shadow().find(".udex-country-selector__dropdown").find("udex-search").shadow().find("input").should("have.attr", "placeholder", "Search Countries and Regions")
+    cy.get("@defaultCountrySelector").find(".udex-text-field__label").should("be.visible");
   });
 
   it("renders supporting text", () => {
     cy.mount(countrySelectorWithSupportingText)
     cy.get("#country-selector-supporting-text")
-      .shadow().find("udex-text-field")
-      .shadow().find("udex-status-message")
-      .shadow().find(".udex-status-message__supporting-text").should("have.text", "Test supporting text")
+      .shadow().find("[udex-status-message]")
+      .shadow().find(".udex-status-message__supporting-text")
+      .should("have.text", "Test supporting text");
   });
 
   it("renders Standard valueState by default", () => {
     cy.mount(countrySelectorWithSupportingText)
-    cy.get("#country-selector-supporting-text").should("have.attr", "value-state", "Standard")
+    cy.get("#country-selector-supporting-text")
+      .shadow().find("[udex-status-message]")
+      .should("have.attr", "value-state", "Standard");
   });
 
   it("renders Error valueState", () => {
-    cy.mount(<UDExCountrySelector valueState="Error"></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Error")
+    cy.mount(<UDExCountrySelector valueState="Error" supportingText="error"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]")
+      .shadow().find("[udex-status-message]")
+      .should("have.attr", "value-state", "Error");
   });
 
   it("renders Warning valueState", () => {
-    cy.mount(<UDExCountrySelector valueState="Warning"></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Warning")
+    cy.mount(<UDExCountrySelector valueState="Warning" supportingText="Warning"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]")
+      .shadow().find("[udex-status-message]")
+      .should("have.attr", "value-state", "Warning");
   });
 
   it("renders Success valueState", () => {
-    cy.mount(<UDExCountrySelector valueState="Success"></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Success")
+    cy.mount(<UDExCountrySelector valueState="Success" supportingText="Success"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]")
+      .shadow().find("[udex-status-message]")
+      .should("have.attr", "value-state", "Success");
   });
 
-  it('opens the dropdown on trigger click', () => {
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("#dropdown").should("have.attr", "open")
+  it("renders readonly country selector", () => {
+    cy.mount(<UDExCountrySelector readonly></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find("#search-input").should("have.attr", "readonly");
+    cy.get("[udex-country-selector]").shadow().find("#search-input").should("have.attr", "aria-readonly", "true");
   });
 
-  it('closes the dropdown on trigger click', () => {
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  it("renders disabled country selector", () => {
+    cy.mount(<UDExCountrySelector disabled></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find("#search-input").should("have.attr", "disabled");
   });
 
-  it('closes the dropdown on outside click', () => {
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("body").click()
-    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  it("renders displayonly country selector", () => {
+    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find("#search-input").should("have.attr", "readonly");
+    cy.get("[udex-country-selector]").shadow().find("#search-input").should("have.attr", "aria-readonly", "true");
   });
 
-  it('closes the dropdown on country selection', () => {
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("#dropdown").find("udex-list")
-    .find("udex-list-item").first().click()
-    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  it("renders initially selected country", () => {
+    cy.mount(<UDExCountrySelector preselectedCountry="PL"></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__text-holder").should("have.text", "Poland (Polska)");
   });
 
-  it('opens the dropdown on trigger icon click', () => {
-    cy.get("#default").shadow().find("#udexTextField").shadow().find("udex-control-button").click()
-    cy.get("#default").shadow().find("#dropdown").should("have.attr", "open")
+  it("renders no result dropdown", () => {
+    cy.get("@searchInput").click()
+      .realPress("x")
+      .realPress("y")
+      .realPress("z");
+    cy.get("@dropdownPopover").find(".udex-no-result").should("have.text", "No matches found.");
   });
 
-  it('doesnt render blocked country', () => {
-    cy.get("#default").shadow().find("#dropdown").find("udex-list-item[id='PL']").should("not.exist")
+  it("filtering options after typing input", () => {
+    cy.get("@searchInput").click()
+      .realPress("a")
+      .realPress("f")
+      .realPress("g");
+    cy.get("@dropdownPopover").find("udex-list-item").should("have.length", 1);
+    cy.get("@dropdownPopover").find("udex-list-item").first().should("have.attr", "data-token-id", "AF");
   });
 
-  it('renders readonly country selector', () => {
-    cy.mount(<UDExCountrySelector readonly></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorReadOnlyClass)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "readonly")
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "aria-readonly", "true")
+  it("opens the dropdown on trigger click", () => {
+    cy.get("@searchInput").click();
+    cy.get("@dropdownPopover").should("have.attr", "open");
   });
 
-  it('renders disabled country selector', () => {
-    cy.mount(<UDExCountrySelector disabled></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorDisabledClass)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "disabled")
+  it("closes the dropdown on trigger click", () => {
+    cy.get("@buttonTrigger").click();
+    cy.get("@buttonTrigger").click();
+    cy.get("@dropdownPopover").should("not.have.attr", "open");
   });
 
-  it('renders displayonly country selector', () => {
-    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorDisplayOnlyClass)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "readonly")
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "aria-readonly", "true")
+  it("closes the dropdown on outside click", () => {
+    cy.get("@searchInput").click();
+    cy.get("body").realClick();
+    cy.get("@dropdownPopover").should("not.have.attr", "open");
   });
 
-  it('hides trigger icon when displayonly', () => {
-    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("udex-control-button").should("not.exist")
+  it("closes the dropdown on country selection", () => {
+    cy.get("@searchInput").click();
+    cy.get("@defaultCountrySelector").find("[udex-list-item]").first().click();
+    cy.get("@dropdownPopover").should("not.have.attr", "open");
   });
 
-  it('add special class when hideFlagImages is true', () => {
-    cy.mount(countrySelectorWithoutFlags)
-    cy.get("#country-selector-no-flags").shadow().find("#dropdown").find("udex-list")
-    .find("udex-list-item").first().find(".udex-country-selector-item__image").should("not.exist")
+  it("opens the dropdown on trigger icon click", () => {
+    cy.get("@defaultCountrySelector").find(".udex-text-field__trigger").click();
+    cy.get("@dropdownPopover").should("have.attr", "open");
   });
 
-  it('renders initially selected country', () => {
-    cy.mount(<UDExCountrySelector id="country-selector-preselected" preselectedCountry="PL"></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value", "Poland (Polska)")
+  it("doesnt render blocked country", () => {
+    cy.get("@dropdownPopover").find("udex-list-item[id='PL']").should("not.exist");
   });
 
-  it("emits open/close when dropdown opened/closed", () => {
-    const openHandler = cy.stub().as("openHandler")
-    const closeHandler = cy.stub().as("closeHandler")
-    cy.mount(<UDExCountrySelector onOpen={openHandler} onClose={closeHandler}></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
-    cy.get("@openHandler").should("have.been.called")
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
-    cy.get("@closeHandler").should("have.been.called")
+  it("hides trigger icon when displayonly", () => {
+    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__trigger").should("not.exist");
   });
 
-  it('emits change-search when search field typing', () => {
-    const changeHandler = cy.stub().as("changeHandler")
-    cy.get("#default").then($countrySelector => {
-      $countrySelector[0].addEventListener("change-search", changeHandler)
-    })
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a")
-    cy.get("@changeHandler").should("have.been.called")
+  it("hides image flag when hideFlagImages is true", () => {
+    cy.mount(countrySelectorWithoutFlags);
+    cy.get("#country-selector-no-flags").shadow().find("udex-list-item")
+      .first().find(".udex-country-selector-item__image").should("not.exist");
   });
 
-  it("emits reset-search when search reset button is clicked", () => {
-    const resetHandler = cy.stub().as("resetHandler")
-    cy.get("#default").then($countrySelector => {
-      $countrySelector[0].addEventListener("reset-search", resetHandler)
-    })
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a")
-    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__reset-button").click()
-    cy.get("@resetHandler").should("have.been.called")
+  it("set active country item on item option click", () => {
+    cy.get("@searchInput").click();
+    cy.get("@defaultCountrySelector").find("[udex-list-item]").first().click();
+    cy.get("@defaultCountrySelector").find(".udex-text-field__text-holder").should("have.text", "Afghanistan (افغانستان)");
   });
 
-  it('emits submit-search when user presses Enter key in the search', () => {
-    const submitHandler = cy.stub().as("submitHandler")
-    cy.get("#default").then($countrySelector => {
-      $countrySelector[0].addEventListener("submit-search", submitHandler)
-    })
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a").realPress("Enter")
-    cy.get("@submitHandler").should("have.been.called")
+  it("set active country item on item option click", () => {
+    cy.get("@searchInput").click();
+    cy.get("@defaultCountrySelector").find("[udex-list-item]").first().click();
+    cy.get("@defaultCountrySelector").find(".udex-text-field__text-holder").should("have.text", "Afghanistan (افغانستان)");
   });
 
-  it('emits selection-change when list item is clicked', () => {
-    const selectionHandler = cy.stub().as("selectionHandler")
-    cy.mount(<UDExCountrySelector onSelectionChange={selectionHandler}></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
-    cy.get("[udex-country-selector]").shadow().find("#dropdown").find("udex-list")
-    .find("udex-list-item").first().click()
+  it("open dropdown press `ArrowDown` key on search", () => {
+    cy.get("@searchInput").click().realPress("{downarrow}");
+    cy.get("@dropdownPopover").should("have.attr", "open");
+  });
+
+  it("set active country item on `Enter` press", () => {
+    cy.get("@searchInput").click().realPress("{downarrow}").realPress("{enter}");
+    cy.get("@defaultCountrySelector").find(".udex-text-field__text-holder").should("have.text", "Afghanistan (افغانستان)");
+  });
+
+  it("close dropdown press `Escape` key on search", () => {
+    cy.get("@searchInput").click().realPress("{downarrow}").realPress("Escape");
+    cy.get("@dropdownPopover").should("not.have.attr", "open");
+  });
 
-    cy.get("@selectionHandler").should("have.been.called")
+  it("emits before-open event when dropdown is about to open", () => {
+    const beforeOpenHandler = cy.stub().as("beforeOpenHandler");
+    cy.mount(<UDExCountrySelector onBeforeOpen={beforeOpenHandler}></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find("#search-input").click();
+    cy.get("@beforeOpenHandler").should("have.been.called");
   });
 
-  it('focus on element with corresponding starting letter', () => {
-    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("a").realPress("Enter")
-    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  it("emits before-close event when dropdown is about to close", () => {
+    const beforeCloseHandler = cy.stub().as("beforeCloseHandler");
+    cy.mount(<UDExCountrySelector onBeforeClose={beforeCloseHandler}></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__trigger").click();
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__trigger").click();
+    cy.get("@beforeCloseHandler").should("have.been.called");
   });
 
-  it('focus on element with corresponding starting letter filtered by search value', () => {
-    cy.get("#default").shadow().find("#udexTextField").click()
-    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a").realPress("Tab").realPress("Tab").realPress("Enter")
-    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Afghanistan (افغانستان)")
+  it("emits open event when dropdown is opened", () => {
+    const openHandler = cy.stub().as("openHandler");
+    cy.mount(<UDExCountrySelector onOpen={openHandler}></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find("#search-input").click();
+    cy.get("@openHandler").should("have.been.called");
   });
 
-  it('keyboard focus navigation for `ArrowDown`', () => {
-    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("{downarrow}").realPress("Enter")
-    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  it("emits close event when dropdown is closed", () => {
+    const closeHandler = cy.stub().as("closeHandler");
+    cy.mount(<UDExCountrySelector onClose={closeHandler}></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__trigger").click();
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__trigger").click();
+    cy.get("@closeHandler").should("have.been.called");
   });
 
-  it('keyboard focus navigation for `ArrowUp`', () => {
-    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("{downarrow}").realPress("{downarrow}").realPress("{uparrow}").realPress("Enter")
-    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  it('emits change-search when search field typing', () => {
+    const changeHandler = cy.stub().as("changeHandler");
+    cy.get("#default").then($countrySelector => {
+      $countrySelector[0].addEventListener("change-search", changeHandler)
+    });
+    cy.get("@searchInput").click()
+      .realPress("p")
+      .realPress("o")
+      .realPress("l")
+      .realPress("a");
+    cy.get("@changeHandler").should("have.been.called");
+  });
+
+  it('emits selection-change when list item is clicked', () => {
+    const selectionHandler = cy.stub().as("selectionHandler");
+    cy.mount(<UDExCountrySelector onSelectionChange={selectionHandler}></UDExCountrySelector>);
+    cy.get("[udex-country-selector]").shadow().find(".udex-text-field__trigger").click();
+    cy.get("[udex-country-selector]").shadow().find("[udex-list-item]").first().click();
+    cy.get("@selectionHandler").should("have.been.called");
   });
 });

package/cypress/specs/EventRibbon.cy.tsx

@@ -105,7 +105,9 @@ describe("EventRibbon", () => {
   it("correctly renders background image", () => {
     cy.mount(imageEventRibbon)
     cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").then($eventRibbon => {
-      const { backgroundImage } = window.getComputedStyle($eventRibbon[0])
+      const container = $eventRibbon[0];
+      const beforeStyle = window.getComputedStyle(container, '::before');
+      const backgroundImage = beforeStyle.backgroundImage;
       assert.strictEqual(backgroundImage, 'url("https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg")')
     })
   });

package/cypress/specs/ImageGridCloud.cy.tsx

@@ -0,0 +1,78 @@
+import { UDExImageGridCloud, UDExImageGridCloudItem } from "../support/component-imports.js";
+
+const imageGridCloud = <UDExImageGridCloud id="image-grid-cloud">
+  <UDExImageGridCloudItem src="./stories/image-grid/chiesi-customer-logo.svg" alt="chiesi logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/embecta-customer-logo.png" alt="embecta logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/mj-quinn-customer-logo.svg" alt="mj quinn logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/mk-group-logo.png" alt="mk group logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/natura-and-co-customer-logo.svg" alt="natura and co logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/banco-galicia-customer-logo.png" alt="galicia logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/celsa-uk-customer-logo.svg" alt="celsa logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/kind-customer-logo.svg" alt="kind logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/resonac-customer-logo.png" alt="resonac logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/lion-customer-logo.png" alt="lion logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/bank-islam-customer-logo.svg" alt="bank islam logo"></UDExImageGridCloudItem>
+  <UDExImageGridCloudItem src="./stories/image-grid/puretech-scientific-customer-logo.svg" alt="puretech scientific logo"></UDExImageGridCloudItem>
+</UDExImageGridCloud>
+
+describe("Image Grid Cloud", () => {
+  beforeEach(() => {
+    cy.mount(imageGridCloud);
+    cy.get("[udex-image-grid-cloud]").shadow().as("image-grid-cloud");
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("@image-grid-cloud")
+      .find("#udex-image-grid-cloud")
+      .should("be.visible");
+  });
+
+  it("renders the correct number of items", () => {
+    cy.get("@image-grid-cloud")
+      .find("[udex-image-grid-cloud-item]")
+      .should("have.length", 12);
+  });
+
+  it("renders items in grayscale when enabled", () => {
+    cy.get("[udex-image-grid-cloud]")
+      .invoke("attr", "grayscale", "true");
+
+    cy.get("@image-grid-cloud")
+      .find("[udex-image-grid-cloud-item]")
+      .first()
+      .should("have.css", "filter", "grayscale(1)");
+  });
+
+  it("renders default Large size of items", () => {
+    cy.get("@image-grid-cloud")
+      .find("[udex-image-grid-cloud-item]")
+      .first()
+      .should("have.css", "width", "180px")
+      .should("have.css", "height", "90px");
+  });
+
+  it("renders Small size of items", () => {
+    cy.get("[udex-image-grid-cloud]")
+      .invoke("attr", "size", "Small");
+
+    cy.get("@image-grid-cloud")
+      .find("[udex-image-grid-cloud-item]")
+      .first()
+      .should("have.css", "width", "140px")
+      .should("have.css", "height", "70px");
+  });
+
+  it("renders rows with the correct number of items", () => {
+    cy.viewport(1600, 800);
+
+    cy.get("@image-grid-cloud")
+      .find("#udex-image-grid-cloud")
+      .children()
+      .then((items) => {
+        const containerWidth = 1600;
+        const itemWidth = 208; // item width + gap + borders
+        const expectedItemsPerRow = Math.floor(containerWidth / itemWidth);
+        expect(items.length).to.be.greaterThan(expectedItemsPerRow - 1);
+      });
+  });
+});

package/cypress/specs/ImageGridCloudItem.cy.tsx

@@ -0,0 +1,29 @@
+import { UDExImageGridCloudItem } from "../support/component-imports.js";
+
+const itemSrc = "./stories/image-grid/chiesi-customer-logo.svg";
+const itemAlt = "chiesi logo";
+
+const imageGridCloudItem = <UDExImageGridCloudItem
+  src={itemSrc}
+  alt={itemAlt}>
+</UDExImageGridCloudItem>
+
+describe("Image Grid Cloud Item", () => {
+  beforeEach(() => {
+    cy.mount(imageGridCloudItem);
+    cy.get("[udex-image-grid-cloud-item]").shadow().as("image-grid-cloud-item");
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("@image-grid-cloud-item")
+      .find(".udex-image-grid-cloud-item-img")
+      .should("be.visible");
+  });
+
+  it("renders an image element with correct attributes", () => {
+    cy.get("@image-grid-cloud-item")
+      .find(".udex-image-grid-cloud-item-img")
+      .should("have.attr", "src", itemSrc)
+      .and("have.attr", "alt", itemAlt);
+  });
+});