@sapudex/web-components 2.17.1 → 2.19.0

package/bundle.esm.js

@@ -30,6 +30,7 @@ import "./dist/Badge.js";
 import "./dist/Breadcrumbs.js";
 import "./dist/BreadcrumbsItem.js";
 import "./dist/Button.js";
+import "./dist/BusyIndicator.js";
 import "./dist/Carousel.js";
 import "./dist/Checkbox.js";
 import "./dist/Contact.js";
@@ -46,6 +47,8 @@ import "./dist/FilterMenuItem.js";
 import "./dist/FilterMenuSelectAll.js";
 import "./dist/Footer.js";
 import "./dist/HeroBanner.js";
+import "./dist/ImageGridTicker.js";
+import "./dist/ImageGridTickerItem.js";
 import "./dist/InputGroup.js";
 import "./dist/Link.js";
 import "./dist/LinkList.js";

package/config/dev-server.mjs

@@ -3,13 +3,9 @@ import { createServer } from 'vite';
 import yargs from 'yargs';
 import { hideBin }  from 'yargs/helpers';
 
-const argv = yargs(hideBin(process.argv))
-	.alias("c", "config")
-	.argv;
-
-const startVite = async (port) => {
+const startVite = async (config, port) => {
 	const server = await createServer({
-		configFile: argv.config,
+		configFile: config,
 		server: {
 			port: port,
 			strictPort: true,
@@ -36,15 +32,19 @@ const rmPortFile = async () => {
 	process.on(eventType, rmPortFile);
 });
 
-(async () => {
+async function start(outArgv) {
 	let retries = 10;
 	let port = 8080;
+	const argv = yargs(hideBin(outArgv))
+		.alias("c", "config")
+		.argv;
+
 	while (retries--) {
 		console.log(`taking port ${port}`);
 		await fs.writeFile(".dev-server-port", `${port}`);
 		try {
 			// execSync(command, {stdio: 'pipe'});
-			const server = await startVite(port);
+			const server = await startVite(argv.config ?? "", port);
 			if (server) {
 				// server started, don't try other ports
 				break;
@@ -63,4 +63,8 @@ const rmPortFile = async () => {
 		// no error normal exit
 		// process.exit();
 	}
-})();
+};
+
+export default {
+	_ui5mainFn: start
+}

package/cypress/specs/Accordion.cy.tsx

@@ -134,26 +134,6 @@ describe("Accordion", () => {
     cy.get("[udex-accordion]").find("udex-accordion-item").eq(4).should("be.focused")
   });
 
-  it("click on \"Arrow up\" btn move focus on first element if initial element is was the second", () => {
-    cy.get("[udex-accordion]").find("udex-accordion-item").eq(1).click().realPress("{uparrow}")
-    cy.get("[udex-accordion]").find("udex-accordion-item").first().should("be.focused")
-  });
-
-  it("click on \"Arrow up\" btn move focus on the last element if initial element was the first", () => {
-    cy.get("[udex-accordion]").find("udex-accordion-item").first().click().realPress("{uparrow}")
-    cy.get("[udex-accordion]").find("udex-accordion-item").eq(4).should("be.focused")
-  });
-
-  it("click on \"Arrow down\" btn move focus on the second element if initial element was the first", () => {
-    cy.get("[udex-accordion]").find("udex-accordion-item").first().click().realPress("{downarrow}")
-    cy.get("[udex-accordion]").find("udex-accordion-item").eq(1).should("be.focused")
-  });
-
-  it("click on \"Arrow down\" btn move focus  the first element if initial element was the last ", () => {
-    cy.get("[udex-accordion]").find("udex-accordion-item").eq(4).click().realPress("{downarrow}")
-    cy.get("[udex-accordion]").find("udex-accordion-item").first().should("be.focused")
-  });
-
   it("click on \"Tab\" btn move focus to the next element", () => {
     cy.get("[udex-accordion]").find("udex-accordion-item").eq(2).click().realPress("Tab")
     cy.get("[udex-accordion]").find("udex-accordion-item").eq(3).should("be.focused")

package/cypress/specs/BusyIndicator.cy.tsx

@@ -0,0 +1,10 @@
+import { UDExBusyIndicator } from "../support/component-imports.js";
+
+const busyIndicator = <UDExBusyIndicator></UDExBusyIndicator>
+
+describe("Busy Indicator", () => {
+  it("renders busy indicator", () => {
+    cy.mount(busyIndicator)
+    cy.get("[udex-busy-indicator]").shadow().find(".ui5-busy-indicator-root").should("be.visible")
+  });
+});

package/cypress/specs/FilterMenu.cy.tsx

@@ -153,7 +153,7 @@ describe("Filter Menu component", () => {
         const element = $el[0] as UDExFilterMenu;
         element.busy = true;
       });
-      cy.get("[udex-filter-menu]").shadow().find("ui5-busy-indicator").should("exist");
+      cy.get("[udex-filter-menu]").shadow().find("udex-busy-indicator").should("exist");
     });
 
     it('renders the search input if "showSearchInput" property is set', () => {

package/cypress/specs/Footer.cy.tsx

@@ -1,4 +1,4 @@
-import { UDExFooter } from "../support/component-imports.js";
+import { UDExFooter, UDExSocialMediaButton } from "../support/component-imports.js";
 import { quickLinks, trendingLinks, aboutLinks, siteInformationLinks, socialLinks } from "../fixtures/footer-links.js";
 import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 
@@ -7,6 +7,7 @@ const chineseLogoUrl = "./stories/footer/chinese-logo.svg";
 const chineseLogoLink = "https://www.sap.cn/index.html";
 const taglineUrl = "./stories/footer/tagline.svg";
 const chineseTaglineUrl = "./stories/footer/chinese-tagline.svg";
+const url = 'http://test.com';
 
 const defaultFooter = <UDExFooter
   id="footer"
@@ -28,6 +29,7 @@ const defaultFooter = <UDExFooter
   chinese-tagline-url={chineseTaglineUrl}
   chinese-logo-url={chineseLogoUrl}
   chinese-logo-link={chineseLogoLink}>
+    <UDExSocialMediaButton slot="customSocialLinks" url={url}></UDExSocialMediaButton>
 </UDExFooter>
 
 describe("Footer", () => {
@@ -76,6 +78,10 @@ describe("Footer", () => {
     cy.get("#footer").shadow().find(".udex-footer__social-container [udex-social-media-button]").should("have.length", 6)
   });
 
+  it("renders all social links from slot", () => {
+    cy.get("#footer").find("[udex-social-media-button]").should("have.length", 1)
+  });
+
   it("renders copyright", () => {
     cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", "© 2025 SAP SE or an SAP affiliate company. All rights reserved.")
   });
@@ -320,6 +326,19 @@ describe("Footer", () => {
     it("tests if mobile view is correctly rendered", () => {
       cy.get("#footer").shadow().find("udex-accordion-item.udex-footer__action-item").should("exist")
     });
+
+    it("test if accordion item emit events", () => {
+      const expectedDetails = {
+        name: "Quick Links",
+        expanded: true
+      }
+
+      const quickLinksClickHandler = cy.stub().as("accordionItemClick")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("accordion-item-click", quickLinksClickHandler)
+      ).shadow().find("udex-accordion-item.udex-footer__action-item").first().click()
+      cy.get("@accordionItemClick").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
+    })
   });
 
   describe("Footer chinese", () => {

package/cypress/specs/ImageGridTicker.cy.tsx

@@ -0,0 +1,208 @@
+import { UDExImageGridTicker, UDExImageGridTickerItem } from "../support/component-imports.js";
+
+const imageGridTicker = <UDExImageGridTicker>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/chiesi-customer-logo.svg" alt="chiesi logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/embecta-customer-logo.png" alt="embecta logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/mj-quinn-customer-logo.svg" alt="mj quinn logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/mk-group-logo.png" alt="mk group logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/natura-and-co-customer-logo.svg" alt="natura and co logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/banco-galicia-customer-logo.png" alt="galicia logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/kind-customer-logo.svg" alt="kind logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/resonac-customer-logo.png" alt="resonac logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/lion-customer-logo.png" alt="lion logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/puretech-scientific-customer-logo.svg" alt="puretech scientific logo"></UDExImageGridTickerItem>
+  <UDExImageGridTickerItem href="https://www.sap.com" src="./stories/image-grid/BSH-customer-logo.png" alt="bsh logo"></UDExImageGridTickerItem>
+</UDExImageGridTicker>
+
+describe("Image Grid Ticker", () => {
+  beforeEach(() => {
+    cy.viewport(1400, 800);
+    cy.mount(imageGridTicker);
+    cy.get("[udex-image-grid-ticker]").shadow().as("image-grid-ticker");
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("@image-grid-ticker")
+      .find(".udex-image-grid-ticker")
+      .should("be.visible");
+  });
+
+  it("renders the correct number of items", () => {
+    cy.viewport(1920, 800);
+    cy.get("@image-grid-ticker")
+      .find("[udex-image-grid-ticker-item]")
+      .should("have.length", 11);
+  });
+
+  it("duplicates items when scrollable", () => {
+    cy.get("[udex-image-grid-ticker]")
+      .invoke("attr", "_is-scrollable")
+      .should("exist");
+
+    cy.get("@image-grid-ticker")
+      .find(".udex-image-grid-ticker__track")
+      .children()
+      .should("have.length", 22);
+  });
+
+  it("animation is running initially when scrollable", () => {
+    cy.get("[udex-image-grid-ticker]")
+      .should("have.attr", "_is-scrollable");
+
+    cy.get("[udex-image-grid-ticker]")
+      .should("not.have.attr", "_is-paused");
+  });
+
+  it("toggles play/pause button state", () => {
+    cy.get("@image-grid-ticker")
+      .find(".udex-image-grid-ticker__play-button")
+      .click();
+
+    cy.get("udex-image-grid-ticker")
+      .should("have.attr", "_is-paused");
+
+    cy.get("@image-grid-ticker")
+      .find(".udex-image-grid-ticker__play-button")
+      .click();
+
+    cy.get("udex-image-grid-ticker")
+      .should("not.have.attr", "_is-paused");
+  });
+
+  it("supports keyboard right arrow navigation", () => {
+    cy.get("@image-grid-ticker")
+      .find("udex-image-grid-ticker-item")
+      .eq(3)
+      .shadow()
+      .find(".udex-image-grid-ticker-item__link")
+      .focus()
+      .type("{rightarrow}");
+
+    cy.get("@image-grid-ticker")
+      .find("udex-image-grid-ticker-item")
+      .eq(4)
+      .shadow()
+      .find(".udex-image-grid-ticker-item__link")
+      .should("be.focused")
+  });
+
+  it("supports keyboard left arrow navigation", () => {
+    cy.get("@image-grid-ticker")
+      .find("udex-image-grid-ticker-item")
+      .eq(3)
+      .shadow()
+      .find(".udex-image-grid-ticker-item__link")
+      .focus()
+      .type("{leftarrow}");
+
+    cy.get("@image-grid-ticker")
+      .find("udex-image-grid-ticker-item")
+      .eq(2)
+      .shadow()
+      .find(".udex-image-grid-ticker-item__link")
+      .should("be.focused")
+  });
+
+
+  it("pauses animation on mouseenter", () => {
+    cy.get("@image-grid-ticker")
+      .find(".udex-image-grid-ticker__track")
+      .trigger("mouseenter", { force: true });
+
+    cy.get("udex-image-grid-ticker")
+      .should("have.attr", "_is-paused");
+  });
+
+  it("resumes animation on mouseleave", () => {
+    cy.get("@image-grid-ticker")
+      .find(".udex-image-grid-ticker__track")
+      .trigger("mouseenter", { force: true })
+      .trigger("mouseleave", { force: true });
+
+    cy.get("udex-image-grid-ticker")
+      .should("not.have.attr", "_is-paused");
+  });
+
+  it("pauses when an item receives focus", () => {
+    cy.get("@image-grid-ticker")
+      .find("udex-image-grid-ticker-item")
+      .eq(2)
+      .shadow()
+      .find(".udex-image-grid-ticker-item__link")
+      .focus();
+
+    cy.get("udex-image-grid-ticker")
+      .should("have.attr", "_is-paused");
+  });
+
+  it("resumes animation when focus leaves", () => {
+    cy.get("@image-grid-ticker")
+      .find("udex-image-grid-ticker-item")
+      .eq(2)
+      .shadow()
+      .find(".udex-image-grid-ticker-item__link")
+      .focus()
+      .blur();
+
+    cy.get("udex-image-grid-ticker")
+      .should("not.have.attr", "_is-paused");
+  });
+
+  it("respects RTL direction", () => {
+    cy.get("[udex-image-grid-ticker]")
+      .invoke("attr", "dir", "rtl");
+
+    cy.get("[udex-image-grid-ticker]")
+      .should("have.attr", "dir", "rtl");
+  });
+
+  it("renders images in grayscale when enabled", () => {
+    cy.get("[udex-image-grid-ticker]")
+      .invoke("attr", "grayscale", "");
+
+    cy.get("@image-grid-ticker")
+      .find("udex-image-grid-ticker-item")
+      .first()
+      .shadow()
+      .find('.udex-image-grid-ticker-item__img')
+      .should("have.css", "filter")
+      .and("include", "grayscale");
+  });
+
+  it("does not duplicate items when not scrollable (mobile)", () => {
+    cy.viewport(600, 800);
+
+    cy.get("[udex-image-grid-ticker]")
+      .invoke("attr", "_is-scrollable")
+      .should("not.exist");
+
+    cy.get("@image-grid-ticker")
+      .find(".udex-image-grid-ticker__track")
+      .children()
+      .should("have.length", 11);
+  });
+
+  it("emits play-button-click event with correct isPaused detail", () => {
+    cy.get("udex-image-grid-ticker").then($el => {
+      const playSpy = cy.spy();
+
+      $el[0].addEventListener("play-button-click", playSpy);
+
+      cy.get("@image-grid-ticker")
+        .find(".udex-image-grid-ticker__play-button")
+        .click()
+        .then(() => {
+          const event = playSpy.getCall(0).args[0] as CustomEvent;
+          expect(event.detail.isPaused).to.eq(true);
+        });
+
+      cy.get("@image-grid-ticker")
+        .find(".udex-image-grid-ticker__play-button")
+        .click()
+        .then(() => {
+          const event = playSpy.getCall(1).args[0] as CustomEvent;
+          expect(event.detail.isPaused).to.eq(false);
+        });
+    });
+  });
+});

package/cypress/specs/ImageGridTickerItem.cy.tsx

@@ -0,0 +1,74 @@
+import { UDExImageGridTickerItem } from "../support/component-imports.js";
+
+const itemHref = "https://www.sap.com";
+const itemSrc = "./stories/image-grid/chiesi-customer-logo.svg";
+const itemAlt = "chiesi logo";
+const tooltip = "Chiesi";
+
+const imageGridTickerItem = <UDExImageGridTickerItem
+  href={itemHref}
+  src={itemSrc}
+  alt={itemAlt}
+  tooltip={tooltip}>
+</UDExImageGridTickerItem>
+
+describe("Image Grid Ticker Item", () => {
+  beforeEach(() => {
+    cy.mount(imageGridTickerItem);
+    cy.get("[udex-image-grid-ticker-item]").shadow().as("image-grid-ticker-item");
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("@image-grid-ticker-item")
+      .find(".udex-image-grid-ticker-item")
+      .should("be.visible");
+  });
+
+
+  it("renders an image element with correct attributes", () => {
+    cy.get("@image-grid-ticker-item")
+      .find(".udex-image-grid-ticker-item__img")
+      .should("have.attr", "src", itemSrc)
+      .and("have.attr", "alt", itemAlt)
+      .and("have.attr", "title", tooltip);
+  });
+
+  it("renders a link when href is provided", () => {
+    cy.get("@image-grid-ticker-item")
+      .find(".udex-image-grid-ticker-item__link")
+      .should("have.attr", "href", itemHref);
+  });
+
+  it("does not render link when href is empty", () => {
+    const noLinkItem = (
+      <UDExImageGridTickerItem src={itemSrc} alt={itemAlt}/>
+    );
+    cy.mount(noLinkItem);
+
+    cy.get("@image-grid-ticker-item")
+      .find(".udex-image-grid-ticker-item__link")
+      .should("not.exist");
+
+    cy.get("@image-grid-ticker-item")
+      .find(".udex-image-grid-ticker-item__img")
+      .should("exist");
+  });
+
+  it("defines the hover scale for the link", () => {
+    cy.get("@image-grid-ticker-item")
+      .find(".udex-image-grid-ticker-item__link")
+      .should("have.css", "transition")
+      .and("include", "transform");
+  });
+
+  it("renders image wrapper with correct default size", () => {
+    cy.get("@image-grid-ticker-item")
+      .find(".udex-image-grid-ticker-item__link")
+      .then($el => {
+        const rect = $el[0].getBoundingClientRect();
+
+        expect(Math.round(rect.width)).to.eq(120);
+        expect(Math.round(rect.height)).to.eq(76);
+      });
+  });
+});

package/cypress/specs/RatingIndicator.cy.tsx

@@ -0,0 +1,74 @@
+import { UDExRatingIndicator } from "../support/component-imports.js";
+
+const totalCount = 100;
+const ratingValue = 2.5;
+const newValue = 4;
+const maxSymbols = 10;
+const displayType = "Mobile";
+const accName = "test";
+
+const ratingIndicator = <UDExRatingIndicator total-count={totalCount} value={ratingValue} max={maxSymbols} display={displayType} accessible-name={accName}></UDExRatingIndicator>
+const disabledRatingIndicator = <UDExRatingIndicator value={ratingValue} disabled></UDExRatingIndicator>
+
+describe("Rating Indicator", () => {
+  beforeEach(() => {
+    cy.mount(ratingIndicator);
+  });
+
+  it("renders rating indicator", () => {
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator").should("be.visible");
+  });
+
+  it("renders with default attributes", () => {
+    cy.get("[udex-rating-indicator]").should("have.attr", "size", "M");
+  });
+
+  it("renders with custom value", () => {
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator").should("have.attr", "aria-valuenow", ratingValue);
+  });
+
+  it("renders with custom max symbols", () => {
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator").should("have.attr", "aria-valuemax", maxSymbols);
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator__item").should("have.length", maxSymbols);
+  });
+
+  it("renders with total count", () => {
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator__total").should("have.text", `(${totalCount})`);
+  });
+
+  it("renders with mobile display", () => {
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator--mobile").should("be.visible");
+  });
+
+  it("renders with proper accessible name", () => {
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator").should("have.attr", "aria-label", `${accName}, Total ${totalCount}`);
+  });
+
+  it("renders disabled", () => {
+    cy.mount(disabledRatingIndicator);
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator").should("have.attr", "tabindex", -1);
+  });
+});
+
+describe("General interaction",  () => {
+  it("changes rate on mouse click", () => {
+    cy.mount(ratingIndicator);
+    cy.get("[udex-rating-indicator]").should("have.attr", "value", `${ratingValue}`);
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator__item").eq(newValue).click();
+    cy.get("[udex-rating-indicator]").should("have.attr", "value", `${newValue + 1}`);
+  });
+
+  it("changes rate on enter click", () => {
+    cy.mount(ratingIndicator);
+    cy.get("[udex-rating-indicator]").should("have.attr", "value", `${ratingValue}`);
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator").focus().realPress("Enter");
+    cy.get("[udex-rating-indicator]").should("have.attr", "value", `${newValue}`);
+  });
+
+  it("not changes rate on click when disabled", () => {
+    cy.mount(disabledRatingIndicator);
+    cy.get("[udex-rating-indicator]").should("have.attr", "value", `${ratingValue}`);
+    cy.get("[udex-rating-indicator]").shadow().find(".udex-rating-indicator__item").eq(newValue).click();
+    cy.get("[udex-rating-indicator]").should("have.attr", "value", `${ratingValue}`);
+  });
+});

package/cypress/specs/Table.cy.tsx

@@ -262,7 +262,7 @@ describe("Table", () => {
 
   it("renders the loading indicator", () => {
     cy.mount(loadingTable)
-    cy.get("#table-loading").shadow().find("ui5-busy-indicator").should("be.visible")
+    cy.get("#table-loading").shadow().find("udex-busy-indicator").should("be.visible")
   });
 
   it("renders accessible name",  () => {