@sapudex/web-components 2.48.0 → 2.50.0

package/bundle.esm.js

@@ -24,6 +24,8 @@ import "./dist/Assets.js";
 // Import your web components here from the dist/ directory
 import "./dist/Accordion.js";
 import "./dist/AccordionItem.js";
+import "./dist/AccordionSpotlight.js";
+import "./dist/AccordionSpotlightItem.js";
 import "./dist/Avatar.js";
 import "./dist/AvatarGroup.js";
 import "./dist/Badge.js";

package/cypress/specs/AccordionSpotlight.cy.tsx

@@ -0,0 +1,402 @@
+import {
+  UDExAccordionSpotlight,
+  UDExAccordionSpotlightItem,
+} from "../support/component-imports.js";
+
+const defaultAccordionSpotlight = (
+  <UDExAccordionSpotlight id="accordion-spotlight">
+    <UDExAccordionSpotlightItem heading="Item 1" subheading="Description for item 1" selected>
+      <div>Panel content 1</div>
+    </UDExAccordionSpotlightItem>
+    <UDExAccordionSpotlightItem heading="Item 2" subheading="Description for item 2">
+      <div>Panel content 2</div>
+    </UDExAccordionSpotlightItem>
+    <UDExAccordionSpotlightItem heading="Item 3" subheading="Description for item 3">
+      <div>Panel content 3</div>
+    </UDExAccordionSpotlightItem>
+  </UDExAccordionSpotlight>
+);
+
+describe("AccordionSpotlight — rendering", () => {
+  beforeEach(() => {
+    cy.mount(defaultAccordionSpotlight);
+  });
+
+  it("renders the root element and nav panel", () => {
+    cy.get("[udex-accordion-spotlight]").shadow().find(".udex-accordion-spotlight").should("exist");
+    cy.get("[udex-accordion-spotlight]").shadow().find(".udex-accordion-spotlight__nav").should("exist");
+    cy.get("[udex-accordion-spotlight]").shadow().find(".udex-accordion-spotlight__nav-holder").should("exist");
+  });
+
+  it("renders correct number of nav items", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__nav-item")
+      .should("have.length", 3);
+  });
+
+  it("first item is selected by default", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(0)
+      .should("have.class", "udex-accordion-spotlight-item__button--active")
+      .and("have.attr", "aria-expanded", "true");
+  });
+
+  it("all other items are not selected", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(1)
+      .should("not.have.class", "udex-accordion-spotlight-item__button--active")
+      .and("have.attr", "aria-expanded", "false");
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(2)
+      .should("not.have.class", "udex-accordion-spotlight-item__button--active")
+      .and("have.attr", "aria-expanded", "false");
+  });
+
+  it("subheading area is open for the selected item and hidden for the rest", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__expand")
+      .eq(0)
+      .should("have.class", "udex-accordion-spotlight-item__expand--open")
+      .and("not.have.attr", "aria-hidden");
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__expand")
+      .eq(1)
+      .should("not.have.class", "udex-accordion-spotlight-item__expand--open")
+      .and("have.attr", "aria-hidden", "true");
+  });
+
+  it("does not render footer slot when no footer content is provided", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__footer")
+      .should("not.exist");
+  });
+
+  it("renders footer slot when footer content is provided", () => {
+    cy.mount(
+      <UDExAccordionSpotlight id="accordion-spotlight-with-footer">
+        <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
+          <div>Panel content 1</div>
+        </UDExAccordionSpotlightItem>
+        <UDExAccordionSpotlightItem heading="Item 2" subheading="Sub 2">
+          <div>Panel content 2</div>
+        </UDExAccordionSpotlightItem>
+        <div slot="footer">Footer content</div>
+      </UDExAccordionSpotlight>
+    );
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__footer")
+      .should("exist");
+  });
+
+  it("renders content panels on desktop", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content")
+      .should("exist");
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content .udex-accordion-spotlight__panel")
+      .should("have.length", 3);
+  });
+
+  it("each panel has role=region and aria-labelledby that matches its button id", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content .udex-accordion-spotlight__panel")
+      .each(($panel, index) => {
+        cy.wrap($panel).should("have.attr", "role", "region");
+        const labelledBy = $panel.attr("aria-labelledby");
+        expect(labelledBy).to.be.a("string").and.not.be.empty;
+        cy.get("[udex-accordion-spotlight]")
+          .shadow()
+          .find(".udex-accordion-spotlight-item__button")
+          .eq(index)
+          .should("have.attr", "id", labelledBy);
+      });
+  });
+});
+
+describe("AccordionSpotlight — item selection", () => {
+  beforeEach(() => {
+    cy.mount(defaultAccordionSpotlight);
+  });
+
+  it("clicking a nav button activates that item", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(1)
+      .click();
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(1)
+      .should("have.class", "udex-accordion-spotlight-item__button--active");
+  });
+
+  it("clicking a nav button deactivates the previously selected item", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(1)
+      .click();
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(0)
+      .should("not.have.class", "udex-accordion-spotlight-item__button--active");
+  });
+
+  it("clicking a nav button updates aria-expanded on the clicked button", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(2)
+      .click()
+      .should("have.attr", "aria-expanded", "true");
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(0)
+      .should("have.attr", "aria-expanded", "false");
+  });
+
+  it("clicking the already-selected item does not fire item-click event", () => {
+    const itemClickHandler = cy.stub().as("itemClick");
+    cy.mount(
+      <UDExAccordionSpotlight id="accordion-spotlight-noop" onItemClick={itemClickHandler}>
+        <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
+          <div>Panel content 1</div>
+        </UDExAccordionSpotlightItem>
+        <UDExAccordionSpotlightItem heading="Item 2" subheading="Sub 2">
+          <div>Panel content 2</div>
+        </UDExAccordionSpotlightItem>
+      </UDExAccordionSpotlight>
+    );
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(0)
+      .click();
+
+    cy.get("@itemClick").should("not.have.been.called");
+  });
+
+  it("clicking a different item fires item-click event", () => {
+    const itemClickHandler = cy.stub().as("itemClick");
+    cy.mount(
+      <UDExAccordionSpotlight id="accordion-spotlight-event" onItemClick={itemClickHandler}>
+        <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
+          <div>Panel content 1</div>
+        </UDExAccordionSpotlightItem>
+        <UDExAccordionSpotlightItem heading="Item 2" subheading="Sub 2">
+          <div>Panel content 2</div>
+        </UDExAccordionSpotlightItem>
+      </UDExAccordionSpotlight>
+    );
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .eq(1)
+      .click();
+
+    cy.get("@itemClick").should("have.been.calledOnce");
+  });
+});
+
+describe("AccordionSpotlight — autoPlay", () => {
+  it("does not render play button when autoPlay is false (default)", () => {
+    cy.mount(defaultAccordionSpotlight);
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__play-button")
+      .should("not.exist");
+  });
+
+  it("renders play button when autoPlay is true", () => {
+    cy.mount(
+      <UDExAccordionSpotlight id="accordion-spotlight-autoplay" autoPlay>
+        <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
+          <div>Panel content 1</div>
+        </UDExAccordionSpotlightItem>
+        <UDExAccordionSpotlightItem heading="Item 2" subheading="Sub 2">
+          <div>Panel content 2</div>
+        </UDExAccordionSpotlightItem>
+      </UDExAccordionSpotlight>
+    );
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__play-button")
+      .should("exist");
+  });
+
+  it("clicking the play button toggles the icon between pause and play", () => {
+    cy.mount(
+      <UDExAccordionSpotlight id="accordion-spotlight-toggle" autoPlay>
+        <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
+          <div>Panel content 1</div>
+        </UDExAccordionSpotlightItem>
+        <UDExAccordionSpotlightItem heading="Item 2" subheading="Sub 2">
+          <div>Panel content 2</div>
+        </UDExAccordionSpotlightItem>
+      </UDExAccordionSpotlight>
+    );
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__play-button")
+      .should("have.attr", "icon", "pause");
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__play-button")
+      .click();
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__play-button")
+      .should("have.attr", "icon", "play");
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__play-button")
+      .click();
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__play-button")
+      .should("have.attr", "icon", "pause");
+  });
+});
+
+describe("AccordionSpotlight — Static media mode", () => {
+  it("renders the media area in Static mode with slotted media content", () => {
+    cy.mount(
+      <UDExAccordionSpotlight id="accordion-spotlight-static" mediaMode="Static">
+        <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
+          <div>Panel content 1</div>
+        </UDExAccordionSpotlightItem>
+        <UDExAccordionSpotlightItem heading="Item 2" subheading="Sub 2">
+          <div>Panel content 2</div>
+        </UDExAccordionSpotlightItem>
+        <img slot="media" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>" alt="media" />
+      </UDExAccordionSpotlight>
+    );
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__media")
+      .should("exist");
+  });
+
+  it("does not render the content area in Static mode", () => {
+    cy.mount(
+      <UDExAccordionSpotlight id="accordion-spotlight-static-nocontent" mediaMode="Static">
+        <UDExAccordionSpotlightItem heading="Item 1" subheading="Sub 1" selected>
+          <div>Panel content 1</div>
+        </UDExAccordionSpotlightItem>
+        <UDExAccordionSpotlightItem heading="Item 2" subheading="Sub 2">
+          <div>Panel content 2</div>
+        </UDExAccordionSpotlightItem>
+        <img slot="media" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>" alt="media" />
+      </UDExAccordionSpotlight>
+    );
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content")
+      .should("not.exist");
+  });
+
+  it("does not render the media area in Dynamic mode (default)", () => {
+    cy.mount(defaultAccordionSpotlight);
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__media")
+      .should("not.exist");
+  });
+});
+
+describe("AccordionSpotlight — accessibility", () => {
+  beforeEach(() => {
+    cy.mount(defaultAccordionSpotlight);
+  });
+
+  it("each nav button has an aria-expanded attribute", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .each(($btn) => {
+        cy.wrap($btn).should("have.attr", "aria-expanded");
+      });
+  });
+
+  it("each nav button has aria-controls that matches a panel id", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight-item__button")
+      .each(($btn) => {
+        const controls = $btn.attr("aria-controls");
+        expect(controls).to.be.a("string").and.not.be.empty;
+        cy.get("[udex-accordion-spotlight]")
+          .shadow()
+          .find(`#${controls}`)
+          .should("exist")
+          .and("have.class", "udex-accordion-spotlight__panel");
+      });
+  });
+
+  it("each content panel has role=region", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content .udex-accordion-spotlight__panel")
+      .each(($panel) => {
+        cy.wrap($panel).should("have.attr", "role", "region");
+      });
+  });
+
+  it("inactive panels have aria-hidden=true", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content .udex-accordion-spotlight__panel")
+      .eq(1)
+      .should("have.attr", "aria-hidden", "true");
+
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content .udex-accordion-spotlight__panel")
+      .eq(2)
+      .should("have.attr", "aria-hidden", "true");
+  });
+
+  it("active panel does not have aria-hidden", () => {
+    cy.get("[udex-accordion-spotlight]")
+      .shadow()
+      .find(".udex-accordion-spotlight__content .udex-accordion-spotlight__panel")
+      .eq(0)
+      .should("not.have.attr", "aria-hidden");
+  });
+});

package/cypress/specs/BusyIndicator.cy.tsx

@@ -7,4 +7,19 @@ describe("Busy Indicator", () => {
     cy.mount(busyIndicator)
     cy.get("[udex-busy-indicator]").shadow().find(".ui5-busy-indicator-root").should("be.visible")
   });
+
+  it("does not have surface-container attribute by default", () => {
+    cy.mount(busyIndicator)
+    cy.get("[udex-busy-indicator]").should("not.have.attr", "surface-container")
+  });
+
+  it("sets surface-container attribute when surfaceContainer property is set", () => {
+    cy.mount(<UDExBusyIndicator surfaceContainer></UDExBusyIndicator>)
+    cy.get("[udex-busy-indicator]").should("have.attr", "surface-container")
+  });
+
+  it("renders busy indicator root when surface-container is set", () => {
+    cy.mount(<UDExBusyIndicator surfaceContainer></UDExBusyIndicator>)
+    cy.get("[udex-busy-indicator]").shadow().find(".ui5-busy-indicator-root").should("be.visible")
+  });
 });

package/cypress/specs/Carousel.cy.tsx

@@ -0,0 +1,142 @@
+import { UDExCarousel } from "../support/component-imports.js";
+
+describe("UDExCarousel component", () => {
+  it("tests if web component is correctly rendered", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+    cy.get("[udex-carousel]").shadow().find(".udex-carousel").should("be.visible");
+  });
+
+  it("tests if component renders content slots", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+    cy.get("[udex-carousel]").shadow().find(".udex-carousel slot").should("have.length", 3);
+  });
+
+  it("tests if component renders numeric page indicator type", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" navigation-placement="bottom" page-indicator-type="Numeric">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find("[ui5-carousel]")
+      .shadow()
+      .find(".ui5-carousel-navigation-text")
+      .should("have.text", "1 of 3");
+  });
+
+  it("tests if component renders 3 items per page", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" items-per-page="S3 M3 L3 XL3" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+        <div>slide 4</div>
+        <div>slide 5</div>
+        <div>slide 6</div>
+        <div>slide 7</div>
+        <div>slide 8</div>
+      </UDExCarousel>
+    );
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find("[ui5-carousel]")
+      .shadow()
+      .find(".ui5-carousel-item:not(.ui5-carousel-item--hidden)")
+      .should("have.length", 3);
+  });
+
+  it("tests if correct navigation-placement attribute is applied", () => {
+    cy.mount(
+      <UDExCarousel id="carousel-bottom" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+    cy.get("#carousel-bottom").should("have.attr", "navigation-placement", "bottom");
+
+    cy.mount(
+      <UDExCarousel id="carousel-top" navigation-placement="top">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+    cy.get("#carousel-top").should("have.attr", "navigation-placement", "top");
+  });
+
+  it("tests if correct disabled attribute is applied to navigation buttons", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-back]").as("prev");
+    cy.get("[udex-carousel]").shadow().find("[data-ui5-arrow-forward]").as("next");
+
+    cy.get("@prev").should("have.attr", "disabled");
+    cy.get("@next").should("not.have.attr", "disabled");
+
+    cy.get("@next").click();
+    cy.get("@prev").should("not.have.attr", "disabled");
+    cy.get("@next").should("not.have.attr", "disabled");
+
+    cy.get("@next").click();
+    cy.get("@prev").should("not.have.attr", "disabled");
+    cy.get("@next").should("have.attr", "disabled");
+  });
+
+  it("tests navigation buttons are hidden when all items fit on one page", () => {
+    cy.mount(
+      <UDExCarousel id="carousel" items-per-page="S3 M3 L3 XL3" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find(".udex-carousel__navigation-wrapper")
+      .should("not.exist");
+  });
+
+  it("tests navigation buttons appear after resizing to viewport where items no longer fit on one page", () => {
+    cy.viewport(1440, 900);
+    cy.mount(
+      <UDExCarousel id="carousel" items-per-page="S1 M1 L1 XL3" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </UDExCarousel>
+    );
+
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find(".udex-carousel__navigation-wrapper")
+      .should("not.exist");
+
+    cy.viewport(375, 812);
+
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find(".udex-carousel__navigation-wrapper")
+      .should("exist");
+  });
+});