@sapudex/web-components 2.9.0 → 2.11.0

package/bundle.esm.js

@@ -72,6 +72,7 @@ import "./dist/Pagination.js";
 import "./dist/PasswordField.js";
 import "./dist/PhoneNumberField.js";
 import "./dist/ProgressBar.js";
+import "./dist/PromoTile.js";
 import "./dist/Quote.js";
 import "./dist/RadioButton.js";
 import "./dist/RangeSlider.js";
@@ -98,6 +99,7 @@ import "./dist/SideNavigationItem.js";
 import "./dist/SideNavigationMobile.js";
 import "./dist/SideNavigationSubItem.js";
 import "./dist/Slider.js";
+import "./dist/SocialMediaButton.js";
 import "./dist/StatusBadge.js";
 import "./dist/StatusMessage.js";
 import "./dist/StepInput.js";

package/cypress/fixtures/footer-links.ts

@@ -176,46 +176,45 @@ export const siteInformationLinks = [
 ];
 
 export const socialLinks = [
-{
-    "url":"https://facebook.com",
-    "iconUrl":"./assets/facebook.svg",
-    "id":"facebookId",
+  {
+    "url":"https://facebook.com/SAP",
     "name":"facebook",
-    "target":"_blank",
-},
-{
-    "url":"https://twitter.com",
-    "iconUrl":"./assets/twitter.svg",
-    "id":"twitterId",
-    "name":"twitter",
-    "target":"_blank",
-},
-{
-    "url":"https://youtube.com",
-    "iconUrl":"./assets/youtube.svg",
-    "id":"youtubeId",
+    "id":"facebookId",
+    "accessibleName":"Facebook Social Media Link",
+    "target":"_blank",
+  },
+  {
+    "url":"https://x.com/sap",
+    "name":"x",
+    "id":"xId",
+    "accessibleName":"X Social Media Link",
+    "target":"_blank",
+  },
+  {
+    "url":"https://youtube.com/@SAP",
     "name":"youtube",
+    "id":"youtubeId",
+    "accessibleName":"YouTube Social Media Link",
     "target":"_blank",
-},
-{
-    "url":"https://linkedin.com",
-    "iconUrl":"./assets/linkedin.svg",
-    "id":"linkedinId",
+  },
+  {
+    "url":"https://www.linkedin.com/company/sap",
     "name":"linkedin",
+    "id":"linkedinId",
+    "accessibleName":"LinkedIn Social Media Link",
     "target":"_blank",
-},
-{
+  },
+  {
     "url":"https://instagram.com",
-    "iconUrl":"./assets/instagram.svg",
-    "id":"instagramId",
     "name":"instagram",
+    "id":"instagramId",
+    "accessibleName":"Instagram Social Media Link",
     "target":"_blank",
-},
-{
-    "url":"https://sap.com",
-    "iconUrl":"./assets/email.svg",
+  },
+  {
+    "url":"mailto:contact@sap.com",
+    "name":"email",
     "id":"sapId",
-    "name":"sap",
-    "target":"_blank",
-}
+    "accessibleName":"Send SAP Email Link",
+  }
 ];

package/cypress/specs/Accordion.cy.tsx

@@ -1,4 +1,5 @@
 import { UDExAccordion, UDExAccordionItem } from "../support/component-imports.js";
+import {UDExAccordionHeadlineLevel} from "../../src/Accordion.js";
 
 const defaultAccordion = <UDExAccordion headline="Test headline" id="accordionComponent">
   <UDExAccordionItem label="Some label for item 1" numberBadge="72">
@@ -44,6 +45,24 @@ describe("Accordion", () => {
     cy.get("[udex-accordion]").find("udex-accordion-item").should("have.length", 5);
   });
 
+  it("renders default tag of the accordion headline", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__headline").then($el => {
+      expect($el.get(0).tagName).to.equal("H3")
+    })
+  });
+
+  it("renders right tag of the accordion headline", () => {
+    cy.mount(<UDExAccordion headline="Test headline" headlineLevel={UDExAccordionHeadlineLevel.H1}>
+      <UDExAccordionItem label="Some label for item 1" numberBadge="72">
+        <div>Lorem ipsum dolor sit amet</div>
+      </UDExAccordionItem>
+    </UDExAccordion>)
+
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__headline").then($el => {
+      expect($el.get(0).tagName).to.equal("H1")
+    });
+  });
+
   it("clicking on expand all btn shows hidden", () => {
     cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click()
 

package/cypress/specs/AccordionItem.cy.tsx

@@ -8,6 +8,10 @@ const expandedAccordionItem = <UDExAccordionItem label="Some label for item 1" n
     <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>
 
+const accordionItemLarge = <UDExAccordionItem label="Some label for item 1" labelSize="Large">
+    <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>
+
 describe('AccordionItem', () => {
 
   beforeEach(() => {
@@ -26,6 +30,11 @@ describe('AccordionItem', () => {
     cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__content").should("exist").and("be.visible")
   });
 
+  it("render different headline size", () => {
+    cy.mount(accordionItemLarge);
+    cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__content").should("exist");
+  });
+
   it("click on accordion item add necessary class and change aria-expanded to true", () => {
     cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__header").should("have.attr", "aria-expanded")
   });

package/cypress/specs/CountrySelector.cy.tsx

@@ -55,7 +55,10 @@ describe("CountrySelector", () => {
 
   it("renders supporting text", () => {
     cy.mount(countrySelectorWithSupportingText)
-    cy.get("#country-selector-supporting-text").shadow().find("udex-status-message").shadow().find(".udex-status-message__supporting-text").should("have.text", "Test supporting text")
+    cy.get("#country-selector-supporting-text")
+      .shadow().find("udex-text-field")
+      .shadow().find("udex-status-message")
+      .shadow().find(".udex-status-message__supporting-text").should("have.text", "Test supporting text")
   });
 
   it("renders Standard valueState by default", () => {
@@ -133,7 +136,7 @@ describe("CountrySelector", () => {
 
   it('hides trigger icon when displayonly', () => {
     cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>)
-    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("udex-control-button").should("not.be.visible")
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("udex-control-button").should("not.exist")
   });
 
   it('add special class when hideFlagImages is true', () => {