@sapudex/web-components 2.18.0 → 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/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.")
   });

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/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",  () => {

package/cypress/support/component-imports.instrumented.ts

@@ -3,18 +3,55 @@ import UDExAccordionItem from "../../instrumented/AccordionItem.js";
 import UDExAvatar from "../../instrumented/Avatar.js";
 import UDExAvatarGroup from "../../instrumented/AvatarGroup.js";
 import UDExBadge from "../../instrumented/Badge.js";
+import UDExBreadcrumbs from "../../instrumented/Breadcrumbs.js";
+import UDExBreadcrumbsItem from "../../instrumented/BreadcrumbsItem.js";
+import UDExBusyIndicator from "../../instrumented/BusyIndicator.js";
+import UDExButton from "../../instrumented/Button.js";
+import UDExCheckbox from "../../instrumented/Checkbox.js";
+import UDExContact from "../../instrumented/Contact.js";
+import UDExContactItem from "../../instrumented/ContactItem.js";
 import UDExCountrySelector from "../../instrumented/CountrySelector.js";
+import UDExDivider from "../../instrumented/Divider.js";
+import UDExEventRibbon from "../../instrumented/EventRibbon.js";
+import UDExFilterMenu from "../../instrumented/FilterMenu.js";
+import UDExFilterMenuGroupHeader from "../../instrumented/FilterMenuGroupHeader.js";
+import UDExFilterMenuItem from "../../instrumented/FilterMenuItem.js";
+import UDExFilterMenuSelectAll from "../../instrumented/FilterMenuSelectAll.js";
 import UDExFooter from "../../instrumented/Footer.js";
+import UDExHeroBanner from "../../instrumented/HeroBanner.js";
+import UDExImageGridTicker from "../../instrumented/ImageGridTicker.js";
+import UDExImageGridTickerItem from "../../instrumented/ImageGridTickerItem.js";
+import UDExInputGroup from "../../instrumented/InputGroup.js";
+import UDExLink from "../../instrumented/Link.js";
+import UDExLinkList from "../../instrumented/LinkList.js";
+import UDExLinkListItem from "../../instrumented/LinkListItem.js";
 import UDExListItem from "../../instrumented/ListItem.js";
+import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
+import UDExMessageStrip from "../../instrumented/MessageStrip.js";
+import UDExPasswordField from "../../instrumented/PasswordField.js";
 import UDExPhoneNumberField from "../../instrumented/PhoneNumberField.js";
+import UDExPromoTile from "../../instrumented/PromoTile.js";
+import UDExQuote from "../../instrumented/Quote.js";
+import UDExRatingBar from "../../instrumented/RatingBar.js";
+import UDExRatingIndicator from "../../instrumented/RatingIndicator.js";
 import UDExReview from "../../instrumented/Review.js";
 import UDExReviewItem from "../../instrumented/ReviewItem.js";
 import UDExSecondaryNavigation from "../../instrumented/SecondaryNavigation.js";
 import UDExSelectBox from "../../instrumented/SelectBox.js";
+import UDExSelectBoxGroupHeader from "../../instrumented/SelectBoxGroupHeader.js";
+import UDExSelectBoxItem from "../../instrumented/SelectBoxItem.js";
+import UDExSelectBoxSelectAll from "../../instrumented/SelectBoxSelectAll.js";
 import UDExSlider from "../../instrumented/Slider.js";
+import UDExSocialMediaButton from "../../instrumented/SocialMediaButton.js";
 import UDExStatusBadge from "../../instrumented/StatusBadge.js";
 import UDExStatusMessage from "../../instrumented/StatusMessage.js";
 import UDExSwitch from "../../instrumented/Switch.js";
+import UDExTable from "../../instrumented/Table.js";
+import UDExTableCell from "../../instrumented/TableCell.js";
+import UDExTableGroupRow from "../../instrumented/TableGroupRow.js";
+import UDExTableHeaderCell from "../../instrumented/TableHeaderCell.js";
+import UDExTableHeaderRow from "../../instrumented/TableHeaderRow.js";
+import UDExTableRow from "../../instrumented/TableRow.js";
 import UDExTag from "../../instrumented/Tag.js";
 import UDExTagGroup from "../../instrumented/TagGroup.js";
 import UDExTextArea from "../../instrumented/TextArea.js";
@@ -26,40 +63,6 @@ import UDExUpload from "../../instrumented/Upload.js";
 import UDExUploadItem from "../../instrumented/UploadItem.js";
 import UDExWizard from "../../instrumented/Wizard.js";
 import UDExWizardStep from "../../instrumented/WizardStep.js";
-import UDExButton from "../../instrumented/Button.js";
-import UDExRatingBar from "../../instrumented/RatingBar.js";
-import UDExBreadcrumbs from "../../instrumented/Breadcrumbs.js";
-import UDExBreadcrumbsItem from "../../instrumented/BreadcrumbsItem.js";
-import UDExTable from "../../instrumented/Table.js";
-import UDExTableHeaderRow from "../../instrumented/TableHeaderRow.js";
-import UDExTableHeaderCell from "../../instrumented/TableHeaderCell.js";
-import UDExTableRow from "../../instrumented/TableRow.js";
-import UDExTableGroupRow from "../../instrumented/TableGroupRow.js";
-import UDExTableCell from "../../instrumented/TableCell.js";
-import UDExLink from "../../instrumented/Link.js";
-import UDExLinkList from "../../instrumented/LinkList.js";
-import UDExLinkListItem from "../../instrumented/LinkListItem.js";
-import UDExRatingIndicator from "../../instrumented/RatingIndicator.js";
-import UDExSelectBoxSelectAll from "../../instrumented/SelectBoxSelectAll.js";
-import UDExSelectBoxGroupHeader from "../../instrumented/SelectBoxGroupHeader.js";
-import UDExSelectBoxItem from "../../instrumented/SelectBoxItem.js";
-import UDExContact from "../../instrumented/Contact.js";
-import UDExContactItem from "../../instrumented/ContactItem.js";
-import UDExEventRibbon from "../../instrumented/EventRibbon.js";
-import UDExDivider from "../../instrumented/Divider.js";
-import UDExFilterMenu from "../../instrumented/FilterMenu.js";
-import UDExFilterMenuItem from "../../instrumented/FilterMenuItem.js";
-import UDExFilterMenuGroupHeader from "../../instrumented/FilterMenuGroupHeader.js";
-import UDExFilterMenuSelectAll from "../../instrumented/FilterMenuSelectAll.js";
-import UDExSocialMediaButton from "../../instrumented/SocialMediaButton.js";
-import UDExPromoTile from "../../instrumented/PromoTile.js";
-import UDExQuote from "../../instrumented/Quote.js";
-import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
-import UDExMessageStrip from "../../instrumented/MessageStrip.js";
-import UDExHeroBanner from "../../instrumented/HeroBanner.js";
-import UDExCheckbox from "../../instrumented/Checkbox.js";
-import UDExInputGroup from "../../instrumented/InputGroup.js";
-import UDExPasswordField from "../../instrumented/PasswordField.js";
 
 export {
   UDExAccordion,
@@ -69,47 +72,57 @@ export {
   UDExBadge,
   UDExBreadcrumbs,
   UDExBreadcrumbsItem,
+  UDExBusyIndicator,
   UDExButton,
+  UDExCheckbox,
   UDExContact,
   UDExContactItem,
   UDExCountrySelector,
   UDExDivider,
   UDExEventRibbon,
   UDExFilterMenu,
-  UDExFilterMenuItem,
   UDExFilterMenuGroupHeader,
+  UDExFilterMenuItem,
   UDExFilterMenuSelectAll,
   UDExFooter,
+  UDExHeroBanner,
+  UDExImageGridTicker,
+  UDExImageGridTickerItem,
+  UDExInputGroup,
   UDExLink,
   UDExLinkList,
   UDExLinkListItem,
   UDExListItem,
+  UDExMastheadProfileMenu,
+  UDExMessageStrip,
+  UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,
+  UDExQuote,
   UDExRatingBar,
   UDExRatingIndicator,
   UDExReview,
   UDExReviewItem,
   UDExSecondaryNavigation,
   UDExSelectBox,
+  UDExSelectBoxGroupHeader,
   UDExSelectBoxItem,
   UDExSelectBoxSelectAll,
   UDExSlider,
+  UDExSocialMediaButton,
   UDExStatusBadge,
   UDExStatusMessage,
   UDExSwitch,
   UDExTable,
-  UDExSelectBoxGroupHeader,
-  UDExSocialMediaButton,
-  UDExTableGroupRow,
   UDExTableCell,
+  UDExTableGroupRow,
   UDExTableHeaderCell,
   UDExTableHeaderRow,
   UDExTableRow,
   UDExTag,
   UDExTagGroup,
-  UDExTextField,
   UDExTextArea,
+  UDExTextField,
   UDExToast,
   UDExTooltip,
   UDExTruncatedText,
@@ -117,11 +130,4 @@ export {
   UDExUploadItem,
   UDExWizard,
   UDExWizardStep,
-  UDExQuote,
-  UDExMastheadProfileMenu,
-  UDExMessageStrip,
-  UDExHeroBanner,
-  UDExCheckbox,
-  UDExInputGroup,
-  UDExPasswordField
 };