@sapudex/web-components 2.11.0 → 2.12.1

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/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);
+    });
+  });
+});

package/cypress/specs/SelectBox.cy.tsx

@@ -1,10 +1,11 @@
-import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSelectBoxItem } from  "../support/component-imports.js";
+import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSelectBoxItem, UDExButton } from  "../support/component-imports.js";
+import { UDExListMode } from "../../src/types/List.js";
 
 const fullComponent = <UDExSelectBox
-id="select-box"
-height="400px"
-label="Programming languages"
-supportingText="category lists">
+  id="select-box"
+  height="400px"
+  label="Programming languages"
+  supportingText="category lists">
   <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development">
     <span class="custom-content">Lorem ipsum</span>
   </UDExSelectBoxItem>
@@ -26,59 +27,65 @@ supportingText="category lists">
 
 const multiSelect = <div style="width: 300px; position:relative;">
   <a id="previous-focus" href="#">Previous focusable element</a>
-<UDExSelectBox
-id="select-box"
-height="400px"
-label="Programming languages"
-supportingText="category lists"
-mode="MultiSelect">
-  <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Swift" supportingText="iOS app development"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="C# - is a general-purpose high-level programming language supporting multiple paradigms" supportingText="Object-oriented language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Perl" supportingText="General-purpose scripting language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Rust" supportingText="Focused on safety and speed"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="PHP" supportingText="Server-side scripting language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Go" supportingText="Statically typed language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Kotlin" supportingText="For Android development"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="TypeScript" supportingText="Super set of JS with static typing"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Ruby" supportingText="Readable and easy-to-use"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="C++" supportingText="Efficient and flexible language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="C" supportingText="Most widely used programming language" disabled></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
-</UDExSelectBox></div>
+  <UDExSelectBox
+    id="select-box"
+    height="400px"
+    label="Programming languages"
+    supportingText="category lists"
+    mode={UDExListMode.MultiSelect}>
+    <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Swift" supportingText="iOS app development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="C# - is a general-purpose high-level programming language supporting multiple paradigms" supportingText="Object-oriented language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Perl" supportingText="General-purpose scripting language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Rust" supportingText="Focused on safety and speed"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="PHP" supportingText="Server-side scripting language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Go" supportingText="Statically typed language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Kotlin" supportingText="For Android development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="TypeScript" supportingText="Super set of JS with static typing"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Ruby" supportingText="Readable and easy-to-use"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="C++" supportingText="Efficient and flexible language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="C" supportingText="Most widely used programming language" disabled></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
+  </UDExSelectBox>
+</div>
 
-const displayOnly = <div style="width: 350px; position:relative;"><UDExSelectBox
-id="select-box"
-height="400px"
-label="Programming languages"
-supportingText="category lists"
-mode="MultiSelect"
-displayonly>
-  <UDExSelectBoxItem selected label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Swift" supportingText="iOS app development"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="C#" supportingText="Object-oriented language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Perl" supportingText="General-purpose scripting language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Rust" supportingText="Focused on safety and speed"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="PHP" supportingText="Server-side scripting language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Go" supportingText="Statically typed language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Kotlin" supportingText="For Android development"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="TypeScript" supportingText="Super set of JS with static typing"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="Ruby" supportingText="Readable and easy-to-use"></UDExSelectBoxItem>
-  <UDExSelectBoxItem selected label="C++" supportingText="Efficient and flexible language"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="C" supportingText="Most widely used programming language" disabled></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
-</UDExSelectBox></div>
+const displayOnly = <div style="width: 350px; position:relative;">
+  <UDExSelectBox
+    id="select-box"
+    height="400px"
+    label="Programming languages"
+    supportingText="category lists"
+    mode={UDExListMode.MultiSelect}
+    displayonly>
+    <UDExSelectBoxItem selected label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Swift" supportingText="iOS app development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="C#" supportingText="Object-oriented language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Perl" supportingText="General-purpose scripting language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Rust" supportingText="Focused on safety and speed"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="PHP" supportingText="Server-side scripting language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Go" supportingText="Statically typed language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Kotlin" supportingText="For Android development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="TypeScript" supportingText="Super set of JS with static typing"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="Ruby" supportingText="Readable and easy-to-use"></UDExSelectBoxItem>
+    <UDExSelectBoxItem selected label="C++" supportingText="Efficient and flexible language"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="C" supportingText="Most widely used programming language" disabled></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
+  </UDExSelectBox>
+</div>
 
 const shortComponent = <div style="width: 350px; position:relative;"><UDExSelectBox
-id="select-box"
-height="400px"
-label="Programming languages"
-supportingText="category lists">
-  <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+  id="select-box"
+  height="400px"
+  label="Programming languages"
+  supportingText="category lists">
+  <UDExSelectBoxItem label="JavaScript" additionalText="Additional Text">
+    <UDExButton id='firstIcon' accessible-name='Action' slot='firstIcon' design='Tertiary' icon='action' size='Small'></UDExButton>
+    <UDExButton id='secondIcon' accessible-name='Email' slot='secondIcon' design='Tertiary' icon='email' size='Small'></UDExButton>
+  </UDExSelectBoxItem>
   <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
   <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
   <UDExSelectBoxItem label="Swift"></UDExSelectBoxItem>
@@ -87,21 +94,21 @@ supportingText="category lists">
 </UDExSelectBox></div>
 
 const groupHeader = <div style="width: 350px; position:relative;"><UDExSelectBox
-id="select-box"
-mode="MultiSelect"
-label="Programming languages">
-<UDExSelectBoxGroupHeader label="Programming Languages" supportingText="Digital Builders">
-  <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
-  <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
-</UDExSelectBoxGroupHeader>
+  id="select-box"
+  mode={UDExListMode.MultiSelect}
+  label="Programming languages">
+  <UDExSelectBoxGroupHeader label="Programming Languages" supportingText="Digital Builders">
+    <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+  </UDExSelectBoxGroupHeader>
 </UDExSelectBox></div>
 
 const selectAll = <div style="width: 350px; position:relative;">
   <a id="previous-focus" href="#">Previous focusable element</a>
   <UDExSelectBox
-  id="select-box"
-  mode="MultiSelect"
-  label="Programming languages">
+    id="select-box"
+    mode={UDExListMode.MultiSelect}
+    label="Programming languages">
     <UDExSelectBoxSelectAll>
       <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
       <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
@@ -238,6 +245,28 @@ describe("SelectBox", () => {
     .should("not.exist");
   });
 
+  it('render the additional text in the item', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
+
+    cy.get("@firstItem").should("have.attr", "additional-text", "Additional Text");
+  });
+
+  it('render the first icon slot in the item', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
+    cy.get("@firstItem").find("#firstIcon").should("exist");
+  });
+
+  it('render the second icon slot in the item', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
+    cy.get("@firstItem").find("#secondIcon").should("exist");
+  });
+
   it('should filter items based on search input', () => {
     cy.mount(fullComponent);
     cy.get("#select-box").shadow()
@@ -906,6 +935,45 @@ describe("SelectBox", () => {
       cy.get("@showmore")
       .should("have.been.called");
     });
-  });
 
+    it('emit first-icon-click when first icon clicked', () => {
+      let eventType;
+      let itemLabel;
+      cy.mount(shortComponent);
+      cy.get("#select-box").then(menu => {
+        menu.get(0).addEventListener("ui5-first-icon-click", (e: CustomEvent) => {
+          eventType = e.type;
+          itemLabel = e.detail.item.label;
+          e.detail.originalEvent.stopPropagation();
+        });
+      });
+
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
+      cy.get("@firstItem").find("#firstIcon").click().then(() => {
+        expect(eventType).to.equal("ui5-first-icon-click");
+        expect(itemLabel).to.equal("JavaScript");
+      });
+    });
+
+    it('emit second-icon-click when second icon clicked', () => {
+      let eventType;
+      let itemAdditionalText;
+      cy.mount(shortComponent);
+      cy.get("#select-box").then(menu => {
+        menu.get(0).addEventListener("ui5-second-icon-click", (e: CustomEvent) => {
+          eventType = e.type;
+          itemAdditionalText = e.detail.item.additionalText;
+          e.detail.originalEvent.stopPropagation();
+        });
+      });
+
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0).as("firstItem");
+      cy.get("@firstItem").find("#secondIcon").click().then(() => {
+        expect(eventType).to.equal("ui5-second-icon-click");
+        expect(itemAdditionalText).to.equal("Additional Text");
+      });
+    });
+  });
 });