@sapudex/web-components 2.1.1 → 2.3.0

package/bundle.esm.js

@@ -37,6 +37,7 @@ import "./dist/CountrySelector.js";
 import "./dist/DatePicker.js";
 import "./dist/Divider.js";
 import "./dist/Dropdown.js";
+import "./dist/EventRibbon.js";
 import "./dist/FilterMenu.js";
 import "./dist/FilterMenuGroupHeader.js";
 import "./dist/FilterMenuItem.js";

package/cypress/fixtures/event-ribbon-links.ts

@@ -0,0 +1,5 @@
+export const eventLink = {
+  target: "_blank",
+  url: "#",
+  text: "Learn more",
+}

package/cypress/specs/Accordion.cy.tsx

@@ -1,5 +1,4 @@
-import UDExAccordion from "../../src/Accordion.js";
-import UDExAccordionItem from "../../src/AccordionItem.js";
+import { UDExAccordion, UDExAccordionItem } from "../support/component-imports.js";
 
 const defaultAccordion = <UDExAccordion headline="Test headline" id="accordionComponent">
   <UDExAccordionItem label="Some label for item 1" numberBadge="72">

package/cypress/specs/AccordionItem.cy.tsx

@@ -1,4 +1,4 @@
-import UDExAccordionItem from "../../src/AccordionItem.js";
+import { UDExAccordionItem } from "../support/component-imports.js";
 
 const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72">
     <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>

package/cypress/specs/Avatar.cy.tsx

@@ -1,4 +1,4 @@
-import UDExAvatar from "../../src/Avatar.js";
+import { UDExAvatar } from "../support/component-imports.js";
 
 describe("Avatar", () => {
   it("renders correctly", () => {

package/cypress/specs/AvatarGroup.cy.tsx

@@ -1,5 +1,4 @@
-import UDExAvatar from "../../src/Avatar.js";
-import UDExAvatarGroup from "../../src/AvatarGroup.js";
+import { UDExAvatar, UDExAvatarGroup } from "../support/component-imports.js";
 
 const defaultAvatarGroup = <UDExAvatarGroup>
     <UDExAvatar initials="SM"></UDExAvatar>

package/cypress/specs/Badge.cy.tsx

@@ -1,4 +1,4 @@
-import UDExBadge from "../../src/Badge.js";
+import { UDExBadge } from "../support/component-imports.js";
 import "@ui5/webcomponents-icons/employee.js";
 
 const defaultBadge = <UDExBadge id="badge" icon="employee">Default</UDExBadge>

package/cypress/specs/CountrySelector.cy.tsx

@@ -1,4 +1,4 @@
-import UDExCountrySelector from "../../src/CountrySelector.js";
+import { UDExCountrySelector } from "../support/component-imports.js";
 
 const defaultCountrySelector = <UDExCountrySelector	id="default"
     searchPlaceholder="Search Countries and Regions"
@@ -159,7 +159,9 @@ describe("CountrySelector", () => {
 
   it('emits change-search when search field typing', () => {
     const changeHandler = cy.stub().as("changeHandler")
-    document.addEventListener("change-search", 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")
@@ -167,7 +169,9 @@ describe("CountrySelector", () => {
 
   it("emits reset-search when search reset button is clicked", () => {
     const resetHandler = cy.stub().as("resetHandler")
-    document.addEventListener("reset-search", 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()
@@ -176,7 +180,9 @@ describe("CountrySelector", () => {
 
   it('emits submit-search when user presses Enter key in the search', () => {
     const submitHandler = cy.stub().as("submitHandler")
-    document.addEventListener("submit-search", 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")

package/cypress/specs/EventRibbon.cy.tsx

@@ -0,0 +1,110 @@
+import { UDExEventRibbon } from "../support/component-imports.js";
+import { eventLink } from "../fixtures/event-ribbon-links.js";
+
+const defaultEventRibbon = <UDExEventRibbon
+  eventText="Get your free all-access pass to a network of latest innovations and insights"
+  eventLogo="now"
+  eventLink={JSON.stringify(eventLink)}
+  backgroundColorScheme="Blue1">
+</UDExEventRibbon>
+
+const linkIconEventRibbon = <UDExEventRibbon
+  eventLinkIcon="add-calendar"
+  eventText="Get your free all-access pass to a network of latest innovations and insights"
+  eventLogo="now"
+  eventLink={JSON.stringify(eventLink)}
+  backgroundColorScheme="Blue3">
+</UDExEventRibbon>
+
+const linkIconMediaEventRibbon = <UDExEventRibbon
+  eventLinkIcon="media-play"
+  eventText="Get your free all-access pass to a network of latest innovations and insights"
+  eventLogo="now"
+  eventLink={JSON.stringify(eventLink)}
+  backgroundColorScheme="Blue3">
+</UDExEventRibbon>
+
+const darkEventRibbon = <UDExEventRibbon 
+  mode="dark"  
+  eventText="Get your free all-access pass to a network of latest innovations and insights"
+  eventLogo="now"
+  eventLink={JSON.stringify(eventLink)}
+  backgroundColorScheme="Raspberry2">
+</UDExEventRibbon>
+
+const imageEventRibbon = <UDExEventRibbon
+  eventText="Get your free all-access pass to a network of latest innovations and insights"
+  eventLogo="now"
+  eventLink={JSON.stringify(eventLink)}
+  backgroundColorScheme="Blue1"
+  backgroundImage="https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg">
+</UDExEventRibbon>
+
+describe("EventRibbon", () => {
+  it("is correctly rendered", () => {
+    cy.mount(defaultEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("be.visible");
+  });
+
+  xit("renders light mode by default", () => {
+    cy.mount(defaultEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").then($eventRibbon => {
+      const {backgroundColor} = window.getComputedStyle($eventRibbon[0])
+      expect(backgroundColor).eqls("rgb(85, 107, 129)")
+    })
+  });
+
+  xit("correctly darkens light solid background by 1 shade on hover", () => {
+    cy.mount(defaultEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").realHover().then($eventRibbon => {
+      const {backgroundColor} = window.getComputedStyle($eventRibbon[0])
+      expect(backgroundColor).eqls("rgb(85, 107, 129)")
+    })
+  });
+
+  it("doesn't render event link icon by default", () => {
+    cy.mount(defaultEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").find("ui5-icon").should("not.exist");
+  });
+
+  it("correctly renders add-calendar icon", () => {
+    cy.mount(linkIconEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").find("ui5-icon").should("have.attr", "name", "add-calendar");
+  });
+
+  it("correctly renders media-play icon", () => {
+    cy.mount(linkIconMediaEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").find("ui5-icon").should("have.attr", "name", "media-play");
+  });
+
+  xit("correctly renders dark solid background", () => {
+    cy.mount(darkEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").then($eventRibbon => {
+      const {backgroundColor} = window.getComputedStyle($eventRibbon[0])
+      expect(backgroundColor).eqls("rgb(85, 107, 129)")
+    })
+  });
+
+  xit("correctly darkens dark solid background by 1 shade on hover", () => {
+    cy.mount(darkEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").realHover().then($eventRibbon => {
+      const {backgroundColor} = window.getComputedStyle($eventRibbon[0])
+      expect(backgroundColor).eqls("rgb(85, 107, 129)")
+    })
+  });
+
+  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])
+      assert.strictEqual(backgroundImage, 'url("https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg")')
+    })
+  });
+
+  it("correctly parses eventLink object", () => {
+    cy.mount(defaultEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("have.attr", "target", "_blank");
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("have.attr", "href", "#");
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__container").should("have.attr", "title", "Learn more");
+  });
+})

package/cypress/specs/Footer.cy.tsx

@@ -1,4 +1,4 @@
-import UDExFooter from "../../src/Footer.js";
+import { UDExFooter } 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";
 

package/cypress/specs/ListItem.cy.tsx

@@ -1,5 +1,5 @@
-import UDExListItem from "../../src/ListItem.js"
-import Icon from "@ui5/webcomponents/dist/Icon.js"
+import { UDExListItem } from "../support/component-imports.js";
+import UDExButton from "../../src/Button.js"
 
 const defaultListItem = <UDExListItem         
 id="listItem"
@@ -64,8 +64,8 @@ additional-text="Additional Text"
 imageSize="M"
 imageShape="Square">
     Default List Item
-    <Icon slot="firstIcon" name="edit"></Icon>
-    <Icon slot="secondIcon" name="decline"></Icon>
+    <UDExButton accessible-name='Action' slot='firstIcon' design='Tertiary' icon='edit' size='Small'></UDExButton>
+    <UDExButton accessible-name='Action' slot='secondIcon' design='Tertiary' icon='decline' size='Small'></UDExButton>
 </UDExListItem>
 
 describe("ListItem", () => {
@@ -119,7 +119,7 @@ describe("ListItem", () => {
       });
   
       it("renders first and second icons when both slots are filled", () => {
-        cy.get("#listItemIcons").find("ui5-icon").should("have.length", 2);
+        cy.get("#listItemIcons").find("udex-button").should("have.length", 2);
       });
   
       it("becomes selected when clicking", () => {

package/cypress/specs/PhoneNumberField.cy.tsx

@@ -1,4 +1,4 @@
-import UDExPhoneNumberField from "../../src/PhoneNumberField.js";
+import { UDExPhoneNumberField } from "../support/component-imports.js";
 
 const defaultPhoneNumberField = <UDExPhoneNumberField id="default"
   valueState="Standard"
@@ -128,8 +128,10 @@ describe("PhoneNumberField", () => {
 
     it("emit input when the value of the component changes", () => {
       const inputHandler = cy.stub().as("inputHandler")
-      document.addEventListener("input", inputHandler)
       cy.mount(<UDExPhoneNumberField></UDExPhoneNumberField>)
+      cy.get("[udex-phone-number-field]").then($phoneNumberField => {
+        $phoneNumberField[0].addEventListener("input", inputHandler)
+      })
       cy.get("[udex-phone-number-field]").shadow().find("input").click().type("012")
       cy.get("@inputHandler").should("have.been.called")
     });

package/cypress/specs/Review.cy.tsx

@@ -1,6 +1,4 @@
-import UDExButton from "../../src/Button.js";
-import UDExRatingBar from "../../src/RatingBar.js";
-import UDExReview from "../../src/Review.js";
+import { UDExButton, UDExRatingBar, UDExReview } from "../support/component-imports.js";
 
 const defaultReview = <UDExReview id="review-standard" rating={4.5} reviews={200}>
     <span slot="defaultText">Share your thought with other customers</span>

package/cypress/specs/ReviewItem.cy.tsx

@@ -1,4 +1,4 @@
-import UDExReviewItem from "../../src/ReviewItem.js";
+import { UDExReviewItem } from "../support/component-imports.js";
 
 const defaultReviewItem = <UDExReviewItem
   id="review-item"