@sapudex/web-components 2.2.0 → 2.4.0

package/.eslintignore

@@ -2,9 +2,12 @@
 
 config
 dist
+instrumented
+coverage
 test
 src/generated
 jsdoc-dist
+.nyc_output
 .eslintrc.cjs
 package-scripts.cjs
 bundle.esm.js

package/bundle.esm.js

@@ -32,11 +32,14 @@ import "./dist/BreadcrumbsItem.js";
 import "./dist/Button.js";
 import "./dist/Carousel.js";
 import "./dist/Checkbox.js";
+import "./dist/Contact.js";
+import "./dist/ContactItem.js";
 import "./dist/ControlButton.js";
 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/contact-numbers.ts

@@ -0,0 +1,10 @@
+export const contactNumbers = [
+  {
+    "country":"Local Country Name",
+    "number":"+1-800-872-1727"
+  },
+  {
+    "country":"United States",
+    "number":"+1-800-872-1727"
+  }
+];

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">
@@ -19,6 +18,15 @@ const defaultAccordion = <UDExAccordion headline="Test headline" id="accordionCo
   </UDExAccordionItem>
 </UDExAccordion>
 
+const simpleAccordion = <UDExAccordion hide-expand-button id="accordionComponent">
+  <UDExAccordionItem label="Some label for item 1">
+      <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>
+  </UDExAccordionItem>
+    <UDExAccordionItem label="Some label for item 2">
+      <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>
+  </UDExAccordionItem>
+</UDExAccordion>
+
 describe("Accordion", () => {
   beforeEach(() => {
     cy.mount(defaultAccordion)
@@ -139,4 +147,19 @@ describe("Accordion", () => {
     cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click()
     cy.get("@toggleItems").should("have.been.called")
   });
+});
+
+describe("Accordion - simplified", () => {
+  beforeEach(() => {
+    cy.mount(simpleAccordion)
+  })
+
+  it("does not render empty headline", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__headline").should("not.exist");
+  });
+
+
+  it("hide expand all button", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").should("not.exist");
+  });
 });

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/Contact.cy.tsx

@@ -0,0 +1,92 @@
+import { UDExContact, UDExContactItem } from "../support/component-imports.js";
+import { contactNumbers } from "../fixtures/contact-numbers.js";
+
+const contactComponent = <UDExContact
+    button-text="Contact us"
+    local-country-numbers-link="local-country-numbers-link-href"
+    contact-numbers={JSON.stringify(contactNumbers)}
+  >
+  <UDExContactItem label="Call me now" href="www.sap.com" icon="Headset">SAP can call you to discuss any questions you have.</UDExContactItem>
+  <UDExContactItem label="Chat now" icon="Discussion-2">Get live help and chat with an SAP representative.</UDExContactItem>
+  <UDExContactItem label="Contact us" href="www.sap.com" icon="Email">E-mail us with comments, questions or feedback.</UDExContactItem>
+</UDExContact>
+
+describe("Contact component", () => {
+  beforeEach(() => {
+    cy.mount(contactComponent)
+  });
+
+  it("component is correctly rendered", () => {
+    cy.get("[udex-contact]").shadow().find(".udex-contact").should("be.visible");
+  });
+
+  it("renders the text for component", () => {
+    cy.get("[udex-contact]").shadow().find("[udex-button]").should("have.text", "Contact us");
+  });
+
+  it("test if the popover is closed after pressing \"Escape\" key", () => {
+    cy.get("[udex-contact]").shadow().find(".udex-contact__button").click().realPress("Escape");
+    cy.get("[udex-contact]").shadow().find("[ui5-responsive-popover]").should("not.visible");
+  });
+
+  describe("Desktop tests", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").click();
+    });
+
+    it("renders the popover after clicking the button opener", () => {
+      cy.get("[udex-contact]").shadow().find("[ui5-responsive-popover]").should("be.visible");
+    });
+
+    it("renders the popover after clicking the button opener", () => {
+      cy.get("[udex-contact]").shadow().find("[ui5-responsive-popover]").should("be.visible");
+    });
+
+    it("renders right amount of contact items", () => {
+      cy.get("[udex-contact]").find("udex-contact-item").should("have.length", 3);
+    });
+
+    it("renders the title of phone section", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__call-us-title").should("have.text", "Call us today!");
+    });
+
+    it("renders the text of complete list section", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__complete-list").should("have.text", "Complete list of local country numbers");
+    });
+
+    it("renders the href of complete list link", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__local-country-link").should("have.attr", "href", "local-country-numbers-link-href");
+    });
+
+    it("renders the list of phone numbers", () => {
+      const numbers = cy.get("[udex-contact]").shadow().find(".udex-contact__number-wrapper");
+      numbers.each(($item, index) => {
+        const currentContactNumber = contactNumbers[index];
+        const country = $item.find(".udex-contact__country").text();
+        const number = $item.find(".udex-contact__number").text();
+        expect(country).to.include(currentContactNumber.country);
+        expect(number).to.include(currentContactNumber.number);
+      })
+    });
+  });
+
+  describe("Mobile tests", () => {
+    beforeEach(() => {
+      cy.simulateDevice();
+    });
+
+    it("renders the close mobile button", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").click();
+      cy.get("[udex-contact]").shadow().find(".udex-contact__close-btn").should("be.visible");
+    });
+
+    it("renders the tooltip for the opener button", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").should("have.attr", "tooltip", "Contact us");
+    });
+
+    it("renders the accessibleName for the opener button", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").should("have.attr", "accessible-name", "Contact us");
+    });
+  });
+});

package/cypress/specs/ContactItem.cy.tsx

@@ -0,0 +1,56 @@
+import { UDExContactItem } from "../support/component-imports.js";
+
+const contactItemComponent = <UDExContactItem label="Call me now" href="www.sap.com" icon="Headset">SAP can call you to discuss any questions you have.</UDExContactItem>
+
+describe("Contact Item component", () => {
+  beforeEach(() => {
+    cy.mount(contactItemComponent)
+  })
+
+  it("component is correctly rendered", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item").should("be.visible");
+  });
+
+  it("renders the text for the item", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__description").should("be.visible");
+  });
+
+  it("renders the link text for the item", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").should("have.text", "Call me now");
+  });
+
+  it("renders the href for the link", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").should("have.attr", "href", "www.sap.com");
+  });
+
+  it("renders the icon for the item", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__icon").should("be.visible");
+  });
+
+  it("renders the name for the icon", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__icon").should("have.attr", "name", "headset");
+  });
+
+  it("test the contact item has custom \"item-click\" event with mouse click on the link", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link")
+      .then($link => {
+        $link.get(0).addEventListener("item-click", event => {
+          expect(event.type).to.equal("item-click");
+        });
+      });
+
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").click();
+  });
+
+  it("tests the \"item-click\" event is prevented when prevent default is called", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link")
+      .then($link => {
+        $link.get(0).addEventListener("item-click", event => {
+          event.preventDefault();
+        });
+      });
+
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").click();
+    cy.url().should("not.include", "www.sap.com");
+  });
+});

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,4 +1,4 @@
-import UDExListItem from "../../src/ListItem.js"
+import { UDExListItem } from "../support/component-imports.js";
 import UDExButton from "../../src/Button.js"
 
 const defaultListItem = <UDExListItem         

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"