@sapudex/web-components 2.10.0 → 2.12.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";

package/cypress/fixtures/profile-menu.ts

@@ -0,0 +1,75 @@
+export const userData = {
+  name : "John Sánchez",
+  username : "john.miller",
+  email : "john.miller@sap.com",
+  avatarUrl : "https://avatars.profile.sap.com/d/6/idd62e808170c86bf4c00df641a1d5715e4283e241ea481a2aa4a13c9711c0acbf_small.jpeg",
+  avatarInitials: "JS"
+};
+export const columnsData = [
+  {
+    category: "Group heading",
+    url: "https://sap.com",
+    items: [
+      {
+        "title": "Lorem ipsum",
+        "url": "https://sap.com",
+        "externalLink": true
+      },
+      {
+        "title": "Curabitur aliquam",
+        "url": "https://sap.com"
+      },
+      {
+        "title": "Sed sodales nisisuscipit",
+        "url": "https://sap.com"
+      },
+      {
+        "title": "Lorem ipsum example of two lines in row",
+        "url": "https://sap.com",
+        "externalLink": true
+      },
+      {
+        "title": "Sed sodales nisisuscipit",
+        "url": "https://sap.com"
+      }
+    ],
+  },
+  {
+    items: [
+      {
+        title: "SAP Learning Journeys",
+        url: "https://community-qa.sap.com/topics",
+      },
+      {
+        title: "Training Courses",
+        url: "https://community-qa.sap.com/topics",
+        externalLink: true,
+      },
+      {
+        title: "SAP Learning Hub",
+        url: "https://community-qa.sap.com/topics",
+      },
+      {
+        title: "SAP Training and Adoption",
+        url: "https://community-qa.sap.com/topics",
+      },
+    ],
+  },
+];
+
+export const identities = [
+  {
+    avatarUrl: "https://avatars.profile.sap.com/d/6/idd62e808170c86bf4c00df641a1d5715e4283e241ea481a2aa4a13c9711c0acbf_small.jpeg",
+    email: "email_1@email.com",
+    name: "code_type1",
+    idsUser: "P1111111",
+    isLogged: false,
+  },
+  {
+    avatarUrl: "https://avatars.profile.sap.com/d/6/idd62e808170c86bf4c00df641a1d5715e4283e241ea481a2aa4a13c9711c0acbf_small.jpeg",
+    email: "email_2@email.com",
+    name: "code_type2",
+    idsUser: "P2222222",
+    isLogged: true,
+  },
+];

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

@@ -2,12 +2,18 @@ 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";
 
+const taglineAlt = "SAP tagline alt";
+const chineseLogoUrl = "./stories/footer/chinese-logo.svg";
+const chineseLogoLink = "https://www.sap.cn/index.html";
+const taglineUrl = "./stories/footer/tagline.svg";
+const chineseTaglineUrl = "./stories/footer/chinese-tagline.svg";
+
 const defaultFooter = <UDExFooter
   id="footer"
   logoLink="#test"
   logoTitle="SAP Title"
   logoAriaLabel="SAP Homepage"
-  logoUrl='./assets/sap-logo.svg'
+  logoUrl='https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg'
   contactNumbersList='[{"country":"France","number":"400-619-0727"},{"country":"United State","number":"1-800-872-1727"}]'
   localCountryNumbersLink='#'
   chatWithUsLink='#'
@@ -16,7 +22,12 @@ const defaultFooter = <UDExFooter
   aboutLinks = {JSON.stringify(aboutLinks)}
   siteInformationLinks = {JSON.stringify(siteInformationLinks)}
   socialLinks = {JSON.stringify(socialLinks)}
-  contactUsLink='#'>
+  contactUsLink='#'
+  tagline-alt={taglineAlt}
+  tagline-url={taglineUrl}
+  chinese-tagline-url={chineseTaglineUrl}
+  chinese-logo-url={chineseLogoUrl}
+  chinese-logo-link={chineseLogoLink}>
 </UDExFooter>
 
 describe("Footer", () => {
@@ -70,16 +81,17 @@ describe("Footer", () => {
   });
 
   it("sets data-id attribute to social links", () => {
-      cy.get("#footer").shadow().find(".udex-footer__social-container [udex-social-media-button]").each(($socialLink, index) => {
-        expect($socialLink[0]).attr("data-id").eqls(socialLinks[index].id)
-      })
-    });
+    cy.get("#footer").shadow().find(".udex-footer__social-container [udex-social-media-button]").each(($socialLink, index) => {
+      expect($socialLink[0]).attr("data-id").eqls(socialLinks[index].id)
+    })
+  });
 
-  it("renders chinese text when specified in url", () => {
-    setLanguage("zh_cn")
-    cy.mount(defaultFooter)
-    cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-text").should("have.text", "ICP_NUMBER PUBLIC_SECURITY_NETWORK_NUMBER")
-    cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-link").should("have.attr", "href", "https://beian.miit.gov.cn/")
+  it("renders tagline image", () => {
+    cy.get("#footer").shadow().find(".udex-footer__tagline-image").should("have.attr", "src", taglineUrl);
+  });
+
+  it("renders tagline image alt", () => {
+    cy.get("#footer").shadow().find(".udex-footer__tagline-image").should("have.attr", "alt", taglineAlt);
   });
 
   describe("Desktop tests", () => {
@@ -309,4 +321,29 @@ describe("Footer", () => {
       cy.get("#footer").shadow().find("udex-accordion-item.udex-footer__action-item").should("exist")
     });
   });
+
+  describe("Footer chinese", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      setLanguage("zh_cn");
+      cy.get("#footer").shadow().as("footer");
+    });
+
+    it("renders chinese text when specified in url", () => {
+      cy.get("@footer").find(".udex-footer__copyright-chinese-text").should("have.text", "ICP_NUMBER PUBLIC_SECURITY_NETWORK_NUMBER")
+      cy.get("@footer").find(".udex-footer__copyright-chinese-link").should("have.attr", "href", "https://beian.miit.gov.cn/")
+    });
+
+    it("renders chinese logo", () => {
+      cy.get("@footer").find(".udex-footer__logo-image-chinese").should("have.attr", "src", chineseLogoUrl);
+    });
+
+    it("renders chinese logo link", () => {
+      cy.get("@footer").find(".udex-footer__logo a").should("have.attr", "href", chineseLogoLink);
+    });
+
+    it("renders chinese tagline image", () => {
+      cy.get("@footer").find(".udex-footer__tagline-image-chinese").should("have.attr", "src", chineseTaglineUrl);
+    });
+  });
 });

package/cypress/specs/ListItem.cy.tsx

@@ -1,71 +1,76 @@
 import { UDExListItem } from "../support/component-imports.js";
 import UDExButton from "../../src/Button.js"
+import { UDExAvatarShape } from "../../dist/Avatar.js";
+import { UDExAvatarSize } from "../../src/Avatar.js";
+import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List.js";
+import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
 
 const defaultListItem = <UDExListItem         
-id="listItem"
-accessibleName="accessible-name"
-supportingText="Supporting text"
-image="image"
-imageAlt="Person Avatar"
-additionalText="Additional Text"
-additionalTextState="Information"
-imageSize="M"
-imageShape="Square"
-type="Circle">
-    Default List Item
+  id="listItem"
+  accessibleName="accessible-name"
+  supportingText="Supporting text"
+  image="./stories/list/image.png"
+  imageAlt="Person Avatar"
+  additionalText="Additional Text"
+  additionalTextState={UDExAdditionalTextState.Information}
+  imageBadgeState={UDExStatusBadgeValueState.Information}
+  imageSize={UDExAvatarSize.M}
+  imageShape={UDExAvatarShape.Square}
+  type={UDExListStyleType.Circle}>
+  Default List Item
 </UDExListItem>
 
 const listItemSuccess = <UDExListItem         
-id="listItemSuccess"
-accessibleName="accessible-name"
-supportingText="Supporting text"
-image="./stories/list/image.png"
-imageAlt="Person Avatar"
-additionalText="Additional Text"
-additionalTextState="Success"
-imageSize="M"
-imageShape="Square">
-    Default List Item
+  id="listItemSuccess"
+  accessibleName="accessible-name"
+  supportingText="Supporting text"
+  image="./stories/list/image.png"
+  imageAlt="Person Avatar"
+  additionalText="Additional Text"
+  additionalTextState={UDExAdditionalTextState.Success}
+  imageSize={UDExAvatarSize.M}
+  imageShape={UDExAvatarShape.Square}>
+  Default List Item
 </UDExListItem>
 
 const listItemError = <UDExListItem         
-id="listItemError"
-accessibleName="accessible-name"
-supportingText="Supporting text"
-image="./stories/list/image.png"
-imageAlt="Person Avatar"
-additionalText="Additional Text"
-additionalTextState="Error"
-imageSize="M"
-imageShape="Square">
-    Default List Item
+  id="listItemError"
+  accessibleName="accessible-name"
+  supportingText="Supporting text"
+  image="./stories/list/image.png"
+  imageAlt="Person Avatar"
+  additionalText="Additional Text"
+  additionalTextState={UDExAdditionalTextState.Error}
+  imageSize={UDExAvatarSize.M}
+  imageShape={UDExAvatarShape.Square}>
+  Default List Item
 </UDExListItem>
 
 const listItemWarning = <UDExListItem         
-id="listItemWarning"
-accessibleName="accessible-name"
-supportingText="Supporting text"
-image="./stories/list/image.png"
-imageAlt="Person Avatar"
-additionalText="Additional Text"
-additionalTextState="Warning"
-imageSize="M"
-imageShape="Square">
-    Default List Item
+  id="listItemWarning"
+  accessibleName="accessible-name"
+  supportingText="Supporting text"
+  image="./stories/list/image.png"
+  imageAlt="Person Avatar"
+  additionalText="Additional Text"
+  additionalTextState={UDExAdditionalTextState.Warning}
+  imageSize={UDExAvatarSize.M}
+  imageShape={UDExAvatarShape.Square}>
+  Default List Item
 </UDExListItem>
 
 const listItemWithIcons = <UDExListItem         
-id="listItemIcons"
-accessible-name="accessible-name"
-supporting-text="Supporting text"
-image="./stories/list/image.png"
-image-alt="Person Avatar"
-additional-text="Additional Text"
-imageSize="M"
-imageShape="Square">
-    Default List Item
-    <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>
+  id="listItemIcons"
+  accessible-name="accessible-name"
+  supporting-text="Supporting text"
+  image="./stories/list/image.png"
+  image-alt="Person Avatar"
+  additional-text="Additional Text"
+  imageSize={UDExAvatarSize.M}
+  imageShape={UDExAvatarShape.Square}>
+  Default List Item
+  <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", () => {
@@ -111,6 +116,15 @@ describe("ListItem", () => {
           expect($wrapper.attr("aria-labelledby")).to.eq(`${itemId}-invisibleText`);
         });
       });
+
+      it("renders status badge", () => {
+        cy.get("#listItem").shadow().find("udex-status-badge").should("exist");
+      });
+
+      it("renders status badge properties", () => {
+        cy.get("#listItem").shadow().find("udex-status-badge").should("have.attr", "value-state", UDExStatusBadgeValueState.Information);
+        cy.get("#listItem").shadow().find("udex-status-badge").should("have.attr", "size", UDExAvatarSize.M);
+      });
     });
   
     describe("With Icons", () => {

package/cypress/specs/MastheadProfileMenu.cy.tsx

@@ -0,0 +1,174 @@
+import { UDExMastheadProfileMenu } from "../support/component-imports.js"
+import { UDExMessageStrip } from "../support/component-imports.js"
+import { UDExLink } from "../support/component-imports.js";
+import { identities, columnsData, userData } from "../fixtures/profile-menu.js";
+import AnalyticsName from "../../src/types/AnalyticsName.js";
+
+const profileMenu = <UDExMastheadProfileMenu
+  id="profileMenu"
+  identities={JSON.stringify(identities)}
+  links={JSON.stringify(columnsData)}
+  loggedInUser={JSON.stringify(userData)}
+  accessible-name="Test accessible name">
+  <UDExMessageStrip design="Action" slot="message">
+    <span style="vertical-align: middle">Action or Promotion.</span>
+    <UDExLink design="Default" href="https://www.sap.com" target="_blank">
+      Learn more
+    </UDExLink>
+  </UDExMessageStrip>
+</UDExMastheadProfileMenu>
+
+const simpleProfileMenu = <UDExMastheadProfileMenu
+  id="masthead-profile-menu-simple"
+  accessible-name="Test accessible name"
+  loggedInUser={JSON.stringify(userData)}
+  links={JSON.stringify([columnsData[1]])}
+  logoutUrl="#">
+</UDExMastheadProfileMenu>
+
+describe("Masthead Profile Menu", () => {
+  beforeEach(() => {
+    cy.mount(profileMenu);
+    cy.get("[udex-masthead-profile-menu]").shadow().as("profile");
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu").should("be.visible");
+  });
+
+  it("tests if web component renders user avatar", () => {
+    cy.get("@profile").find("udex-avatar").should("exist");
+  });
+
+  it("tests if web component renders user name", () => {
+    cy.get("@profile").find(".udex-profile-menu__account-name").should("have.text", "John Sánchez");
+  });
+
+  it("tests if web component renders user email", () => {
+    cy.get("@profile").find(".udex-profile-menu__account-email").should("have.text", "john.miller@sap.com");
+  });
+
+  it("tests if web component renders message strip", () => {
+    cy.get("[udex-masthead-profile-menu]").find("udex-message-strip").should("exist");
+  });
+
+  it("tests if web component renders masthead menu", () => {
+    cy.get("@profile").find("udex-masthead-menu").should("exist");
+  });
+
+  it("tests if web component renders logout link", () => {
+    cy.mount(simpleProfileMenu);
+    cy.get("#masthead-profile-menu-simple").shadow().find(".udex-masthead-profile-menu__actions").should("exist");
+  });
+
+  it("tests if web component renders switch account button", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").should("exist");
+  });
+
+  it("tests if identities menu opens when the switch account button is clicked", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find("[udex-list]").should("be.visible");
+  });
+
+  it("verifies the correct number of identity list items are rendered", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find("udex-list").find("[udex-list-item]").should("have.length", identities.length);
+  });
+
+  it("renders the correct title for the identity switcher list", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find(".udex-masthead-profile-menu__switcher-title").should("have.text", "Switch account");
+  });
+
+  it("renders the back button for the identity", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-back").should("exist");
+  });
+
+  it("navigates back to the profile view after clicking the back button", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-back").click();
+    cy.get("@profile").find(".udex-profile-menu__account-name").should("have.text", "John Sánchez");
+  });
+
+  it("renders the back button title for the desktop", () => {
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-back").should("have.attr", "label", "Back");
+  });
+
+  it("renders the back button title for the mobile", () => {
+    cy.viewport(1024, 640);
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-back").should("have.attr", "label", "Switch account");
+  });
+
+  it("tests if event \"ui5-profile-item-click\" emits when clicking on a menu item", () => {
+    let eventType;
+    let analyticsName;
+    let itemLabel
+
+    cy.get("#profileMenu").then(menu => {
+      menu.get(0).addEventListener("ui5-profile-item-click", ({type, detail}: CustomEvent) => {
+        eventType = type;
+        analyticsName = detail.analyticsName;
+        itemLabel = detail.item.label;
+        detail.originalEvent.preventDefault();
+      });
+    });
+
+    cy.get("@profile").find("udex-masthead-menu").shadow().find("udex-masthead-menu-item").eq(0).click().then(() => {
+      expect(eventType).to.equal("ui5-profile-item-click");
+      expect(analyticsName).to.equal(AnalyticsName.Header);
+      expect(itemLabel).to.equal(columnsData[0].category);
+    });
+  });
+
+  it("tests if event \"ui5-logout\" emits when clicking on logout item", () => {
+    let eventType;
+    cy.mount(simpleProfileMenu);
+    cy.get("#masthead-profile-menu-simple").then(menu => {
+      menu.get(0).addEventListener("ui5-logout", (e: CustomEvent) => {
+        eventType = e.type;
+        e.detail.originalEvent.preventDefault();
+      });
+    });
+
+    cy.get("#masthead-profile-menu-simple").shadow().find(".udex-masthead-profile-menu__actions").find("udex-masthead-menu-item").eq(0).click().then(() => {
+      expect(eventType).to.equal("ui5-logout");
+    });
+  });
+
+  it("tests if event \"ui5-add-or-remove-account-click\" emits when clicking on add or remove account button", () => {
+    let eventType;
+    let analyticsName;
+    cy.get("#profileMenu").then(menu => {
+      menu.get(0).addEventListener("ui5-add-or-remove-account-click", (e: CustomEvent) => {
+        eventType = e.type;
+        analyticsName = e.detail.analyticsName;
+      });
+    });
+
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find(".udex-masthead-profile-menu__add-remove-btn").click().then(() => {
+      expect(eventType).to.equal("ui5-add-or-remove-account-click");
+      expect(analyticsName).to.equal(AnalyticsName.Header);
+    });
+  });
+
+  it("tests if event \"ui5-identity-item-click\" emits when clicking on identity item", () => {
+    let eventType;
+    let idsUser;
+    cy.get("#profileMenu").then(menu => {
+      menu.get(0).addEventListener("ui5-identity-item-click", (e: CustomEvent) => {
+        eventType = e.type;
+        idsUser = e.detail.item.idsUser;
+      });
+    });
+
+    cy.get("@profile").find(".udex-masthead-profile-menu__btn-switcher").click();
+    cy.get("@profile").find("udex-list-item").eq(0).click().then(() => {
+      expect(eventType).to.equal("ui5-identity-item-click");
+      expect(idsUser).to.equal(identities[0].idsUser);
+    });
+  });
+});