@sapudex/web-components 2.8.0 → 2.10.0

package/bundle.esm.js

@@ -98,6 +98,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/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', () => {

package/cypress/specs/EventRibbon.cy.tsx

@@ -1,11 +1,12 @@
 import { UDExEventRibbon } from "../support/component-imports.js";
 import { eventLink } from "../fixtures/event-ribbon-links.js";
+import { UDExEventRibbonColorSheme } from "../../src/types/EventRibbon.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">
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue1}>
 </UDExEventRibbon>
 
 const linkIconEventRibbon = <UDExEventRibbon
@@ -13,7 +14,7 @@ const linkIconEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Blue3">
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue3}>
 </UDExEventRibbon>
 
 const linkIconMediaEventRibbon = <UDExEventRibbon
@@ -21,7 +22,7 @@ const linkIconMediaEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Blue3">
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue3}>
 </UDExEventRibbon>
 
 const darkEventRibbon = <UDExEventRibbon 
@@ -29,17 +30,25 @@ const darkEventRibbon = <UDExEventRibbon
   eventText="Get your free all-access pass to a network of latest innovations and insights"
   eventLogo="now"
   eventLink={JSON.stringify(eventLink)}
-  backgroundColorScheme="Raspberry2">
+  backgroundColorScheme={UDExEventRibbonColorSheme.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"
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue1}
   backgroundImage="https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg">
 </UDExEventRibbon>
 
+const customLogoEventRibbon = <UDExEventRibbon
+  eventText="Get your free all-access pass to a network of latest innovations and insights"
+  customEventLogo="https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg"
+  customEventLogoAltText="SAP Logo"
+  eventLink={JSON.stringify(eventLink)}
+  backgroundColorScheme={UDExEventRibbonColorSheme.Blue1}>
+</UDExEventRibbon>
+
 describe("EventRibbon", () => {
   it("is correctly rendered", () => {
     cy.mount(defaultEventRibbon)
@@ -107,4 +116,14 @@ describe("EventRibbon", () => {
     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");
   });
-})
+
+  it("correctly renders custom logo image", () => {
+    cy.mount(customLogoEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__logo-img").should("have.attr", "src", "https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg");
+  });
+
+  it("correctly renders custom logo image alt text", () => {
+    cy.mount(customLogoEventRibbon)
+    cy.get("[udex-event-ribbon]").shadow().find(".udex-event-ribbon__logo-img").should("have.attr", "alt", "SAP Logo");
+  });
+})