@sapudex/web-components 2.29.0 → 2.31.0

package/cypress/specs/FilterMenu.cy.tsx

@@ -68,6 +68,30 @@ const filterMenuGroup = <><UDExFilterMenu
 <a id="next-focus" href="#">Next focus</a>
 </>
 
+const filterMenuGroupCollapsible = <UDExFilterMenu
+id="filter-menu-group-with-search"
+disable-target-overlap="true"
+badge-value="2"
+mode={UDExListMode.MultiSelect}
+filter-name="Filter Name">
+<UDExFilterMenuGroupHeader collapsible collapsed label="Programming Languages" supporting-text="Digital Builders">
+  <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="C#" supporting-text="Object-oriented language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Perl" supporting-text="General-purpose scripting language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Ruby" supporting-text="Readable and easy-to-use"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="C++" supporting-text="Efficient and flexible language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="R" supporting-text="Language for statistical computing"></UDExFilterMenuItem>
+</UDExFilterMenuGroupHeader>
+</UDExFilterMenu>
+
 const filterMenuRadioGroup = <UDExFilterMenu
   id="filter-menu-radio-group"
   disable-target-overlap="true"
@@ -77,7 +101,7 @@ const filterMenuRadioGroup = <UDExFilterMenu
     <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
     <UDExFilterMenuItem label="Node.js"></UDExFilterMenuItem>
   </UDExFilterMenuGroupHeader>
-  <UDExFilterMenuGroupHeader label="Programming Languages">
+  <UDExFilterMenuGroupHeader label="Programming Languages" collapsible>
     <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
     <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
     <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
@@ -338,6 +362,20 @@ describe("Filter Menu component", () => {
         .find("udex-list-group-header")
         .should("have.attr", "selected")
     });
+
+    it('MultiSelect mode - expand collapsed items to show search result', () => {
+      cy.mount(filterMenuGroupCollapsible);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]")
+        .shadow().find("[udex-search]")
+        .shadow().find(".udex-search__field")
+        .click().type("java");
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").should("not.have.attr", "collapsed");
+    })
   });
 
   describe("Filter Menu group", () => {

package/cypress/specs/List.cy.tsx

@@ -0,0 +1,171 @@
+import { UDExList, UDExListGroupHeader, UDExListItem } from "../support/component-imports.js";
+
+const collapsibleList = <UDExList id="list-group-header-collapsible" mode="MultiSelect">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+const collapsibleListSingleSelect = <UDExList id="list-group-header-collapsible" mode="SingleSelect">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+const collapsibleListSingleContent = <UDExList id="list-group-header-collapsible" mode="SingleContent">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+const collapsibleListRadioGroup = <UDExList id="list-group-header-collapsible" mode="RadioGroup">
+<UDExListGroupHeader collapsible id="group-header-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+<UDExListGroupHeader collapsible collapsed id="group-header-collapsible-collapsed" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
+describe("List component - collapsible group header", () => {
+  it("MultiSelect - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header").as("grouping-header");
+    cy.get("@grouping-header").shadow().find('.udex-list__item').realClick();
+    cy.get("@grouping-header").should("have.attr", "focused", "");
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("@grouping-header").should("have.attr", "collapsed", "");
+        cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("have.attr", "collapsed", "");
+      });
+
+    cy.get("@grouping-header").realPress("ArrowRight")
+      .then(() => {
+        cy.get("@grouping-header").should("not.have.attr", "collapsed");
+        cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("not.have.attr", "collapsed", "");
+      });
+  });
+
+  it("MultiSelect - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").shadow().find('.udex-list__group-heading__icon').realClick();
+    cy.get("@grouping-header").should("have.attr", "collapsed", "");
+    cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").shadow().find('.udex-list__group-heading__icon').realClick();
+    cy.get("@grouping-header").should("not.have.attr", "collapsed", "");
+    cy.get("#group-header-collapsible").find("udex-list-item").eq(0).should("not.have.attr", "collapsed", "");
+  });
+
+  it("MultiSelect - focus on next grouping header on arrow down when previous grouping header is collapsed", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible-collapsed").shadow().find(".udex-list__group-header").as("grouping-header");
+    cy.get("@grouping-header").shadow().find('.udex-list__item').realClick();
+    cy.get("@grouping-header").should("have.attr", "focused", "");
+
+    cy.get("@grouping-header").realPress("ArrowDown")
+      .then(() => {
+        cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header").should("have.attr", "focused", "");
+      });
+  });
+
+  it("SingleSelect - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleListSingleSelect);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    cy.get("@grouping-header").realClick();
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+      });
+  });
+
+  it("SingleSelect - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleListSingleSelect);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+  });
+
+  it("SingleContent - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleListSingleContent);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    cy.get("@grouping-header").realClick();
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+      });
+
+    cy.get("@grouping-header").realPress("ArrowRight")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+      });
+  });
+
+  it("SingleContent - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleListSingleContent);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+  });
+
+  it("RadioGroup - collapse and expand the group when pressing arrow keys on grouping header", () => {
+    cy.mount(collapsibleListRadioGroup);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    cy.get("@grouping-header").realClick();
+
+    cy.get("@grouping-header").realPress("ArrowLeft")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+      });
+
+    cy.get("@grouping-header").realPress("ArrowRight")
+      .then(() => {
+        cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+      });
+  });
+
+  it("RadioGroup - collapses the group when clicking on grouping header arrow icon", () => {
+    cy.mount(collapsibleListRadioGroup);
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-header-wrap").as("grouping-header");
+    // First click to collapse
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+
+    // Second click to expand
+    cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+  });
+});

package/cypress/specs/ListItem.cy.tsx

@@ -5,7 +5,7 @@ import { UDExAvatarSize } from "../../src/Avatar.js";
 import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List.js";
 import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
 
-const defaultListItem = <UDExListItem         
+const defaultListItem = <UDExListItem
   id="listItem"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -20,7 +20,7 @@ const defaultListItem = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemSuccess = <UDExListItem         
+const listItemSuccess = <UDExListItem
   id="listItemSuccess"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -33,7 +33,7 @@ const listItemSuccess = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemError = <UDExListItem         
+const listItemError = <UDExListItem
   id="listItemError"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -46,7 +46,7 @@ const listItemError = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWarning = <UDExListItem         
+const listItemWarning = <UDExListItem
   id="listItemWarning"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -59,7 +59,7 @@ const listItemWarning = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWithIcons = <UDExListItem         
+const listItemWithIcons = <UDExListItem
   id="listItemIcons"
   accessible-name="accessible-name"
   supporting-text="Supporting text"
@@ -80,36 +80,32 @@ describe("ListItem", () => {
         cy.get("[udex-list-item]").should("exist");
       });
     });
-  
+
     describe("Basic attributes", () => {
       beforeEach(() => {
         cy.mount(defaultListItem);
       });
-  
+
       it("has correct supporting text", () => {
         cy.get("#listItem").shadow().find(".udex-list__supporting-text").should("have.text", "Supporting text");
       });
-  
+
       it("has correct avatar", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("exist");
       });
-  
+
       it("has avatar of size M", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "size", "M");
       });
-  
+
       it("has avatar of shape Square", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "shape", "Square");
       });
-  
+
       it("has avatar with alternative text", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").find("img").should("have.attr", "alt", "Person Avatar");
       });
-  
-      it("renders bullet marker at the start of the item", () => {
-        cy.get("#listItem").shadow().find(".udex-list__circle").should("exist");
-      });
-  
+
       it("has correct accessibleName", () => {
         cy.get("#listItem").shadow().find(".udex-list__content-wrap").should(($wrapper) => {
           const itemId = $wrapper.attr("_id");
@@ -126,51 +122,51 @@ describe("ListItem", () => {
         cy.get("#listItem").shadow().find("udex-status-badge").should("have.attr", "size", UDExAvatarSize.M);
       });
     });
-  
+
     describe("With Icons", () => {
       beforeEach(() => {
         cy.mount(listItemWithIcons);
       });
-  
+
       it("renders first and second icons when both slots are filled", () => {
         cy.get("#listItemIcons").find("udex-button").should("have.length", 2);
       });
-  
+
       it("becomes selected when clicking", () => {
         cy.get("#listItemIcons").shadow().find(".udex-list__item").click();
         cy.get("#listItemIcons").should("have.attr", "selected");
       });
-  
+
       it("pressing Enter sets data-selected", () => {
         cy.realPress("Enter");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
-  
+
       it("pressing Space sets data-selected", () => {
         cy.realPress("Space");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
     });
-  
+
     describe("Additional Text States", () => {
       it("shows Information state", () => {
         cy.mount(defaultListItem);
         cy.get("#listItem").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(0, 64, 176)");
       });
-  
+
       it("shows Success state", () => {
         cy.mount(listItemSuccess);
         cy.get("#listItemSuccess").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(30, 89, 47)");
       });
-  
+
       it("shows Error state", () => {
         cy.mount(listItemError);
         cy.get("#listItemError").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(132, 6, 6)");
       });
-  
+
       it("shows Warning state", () => {
         cy.mount(listItemWarning);
         cy.get("#listItemWarning").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(141, 42, 0)");
       });
     });
-});  
+});

package/cypress/specs/PromoTile.cy.tsx

@@ -8,6 +8,7 @@ const logoUrl = "http://test.com";
 const buttonLabel = "Button";
 const design = "Tertiary";
 const colorScheme = "Grey9";
+const gradient = "linear-gradient(135deg, var(--udexColorBlue10) 0%,var(--udexColorBlue11) 100%)";
 const promoTile = <UDExPromoTile>Text</UDExPromoTile>;
 const simplePromoTile = <UDExPromoTile eyebrow={eyebrow} header={header}>Text</UDExPromoTile>;
 const iconPromoTile = <UDExPromoTile icon={iconName} image-label={imageLabel}>Text</UDExPromoTile>;
@@ -23,6 +24,7 @@ const pictogramPromoTile = <UDExPromoTile button={buttonLabel}>
   />
 </UDExPromoTile>;
 const darkPromoTile = <UDExPromoTile color-scheme={colorScheme} button={buttonLabel}>Text</UDExPromoTile>;
+const gradientPromoTile = <UDExPromoTile background-gradient={gradient} button={buttonLabel}>Text</UDExPromoTile>;
 
 describe("Promo Tile", () => {
   it("renders simple promo tile", () => {
@@ -86,6 +88,14 @@ describe("Promo Tile", () => {
     cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container").should("have.class", "udex-promo-tile--dark");
     cy.get("[udex-promo-tile]").shadow().find("[udex-button]").should("have.attr", "design", "Secondary");
   });
+
+  it("renders promo tile with gradient", () => {
+    cy.mount(gradientPromoTile);
+    cy.get("[udex-promo-tile]").shadow().find(".udex-promo-tile__container")
+      .should("have.attr", "style")
+      .and("include", gradient)
+      .and("include", "rgb(255, 255, 255)");
+  });
 });
 
 describe("Promo Tile - CTA button", () => {

package/cypress/specs/ReviewItem.cy.tsx

@@ -4,7 +4,9 @@ const defaultReviewItem = <UDExReviewItem
   id="review-item"
   rating={4}
   reviewTitle="Review title"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum.">
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum.
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum.
+  ">
     <span slot="date">Jan 7, 2025</span>
     <span slot="author">John Ford, Job Title, Company, Inc.</span>
 </UDExReviewItem>
@@ -19,6 +21,33 @@ const reviewItemWithTopRating = <UDExReviewItem
     <span slot="author">John Ford, Job Title, Company, Inc.</span>
 </UDExReviewItem>
 
+const reviewItemWithTCustomContent = <UDExReviewItem
+  id="review-item-content"
+  rating={4}
+  reviewTitle="Review title"
+  showRatingTop>
+  <div slot="content">
+    <div class="truncatable-content">
+      <h4>AI agents that truly understand your business</h4>
+      <p>Amplify the impact of all your teams with Joule's AI agents that use their unique understanding
+        of your business context to offer expertise to perform complex processes across your business.
+        Reliable insights and the right business context enable Joule to act as an AI agent orchestrator,
+        triggering more impactful actions throughout your teams' workflows. And with SAP's agent builder,
+        you can scale endlessly as teams create and deploy custom AI agents tailored to their business needs.</p>
+      <h4>AI agents that truly understand your business</h4>
+      <p>SAP Business Data Cloud brings together the world's most comprehensive and mission-critical
+        data with the leading data platform to deliver transformational insights across all lines of business.</p>
+      <h4>Connect processes and empower teams with modular Cloud ERP applications</h4>
+      <p>Seamlessly connect your entire business value chain, from order to cash, procure to pay,
+        design to operate, hire to retire, and record to report, all tailored for industry nuances.
+        Power end-to-end processes with the most comprehensive and integrated portfolio of applications
+        with embedded AI capabilities.</p>
+    </div>
+  </div>
+  <span slot="date">Jan 7, 2025</span>
+  <span slot="author">John Ford, Job Title, Company, Inc.</span>
+</UDExReviewItem>
+
 
 describe("ReviewItem", () => {
   it("renders correctly", () => {
@@ -27,47 +56,52 @@ describe("ReviewItem", () => {
   });
 
   it("shows review expander", () => {
-    cy.mount(defaultReviewItem)
+    cy.mount(defaultReviewItem);
     cy.get("#review-item").shadow().find("#reviewExpander").should("be.visible")
   });
 
   it("review expander has correct text before clicking", () => {
-    cy.mount(defaultReviewItem)
-    const SUPPORTING_TEXT_TEST_VALUE = "Read more";
+    cy.mount(defaultReviewItem);
+    const SUPPORTING_TEXT_TEST_VALUE = "Show more";
     cy.get("#review-item").shadow().find("#reviewExpander").should("have.text", SUPPORTING_TEXT_TEST_VALUE)
   });
 
   it("renders rating on top when specified", () => {
-    cy.mount(reviewItemWithTopRating)
+    cy.mount(reviewItemWithTopRating);
     cy.get("#review-item-top").shadow().find(".udex-review-item__rating-top").should("be.visible")
   });
 
+  it("renders custom content", () => {
+    cy.mount(reviewItemWithTCustomContent);
+    cy.get("#review-item-content").find(".truncatable-content").should("be.visible")
+  });
+
   it("renders rating on top on mobile", () => {
-    cy.viewport(640, 640)
-    cy.mount(defaultReviewItem)
+    cy.viewport(640, 640);
+    cy.mount(defaultReviewItem);
     cy.get("#review-item").shadow().find(".udex-review-item").then($container => {
-      const styles = window.getComputedStyle($container[0])
-      expect(styles.flexDirection).eqls("column")
+      const styles = window.getComputedStyle($container[0]);
+      expect(styles.flexDirection).eqls("column");
     })
   });
 
   it("review expander has correct text after clicking on expander", () => {
-    cy.mount(defaultReviewItem)
-    const SUPPORTING_TEXT_TEST_VALUE = "Read less";
+    cy.mount(defaultReviewItem);
+    const SUPPORTING_TEXT_TEST_VALUE = "Show less";
     cy.get("#review-item").shadow().find("#reviewExpander").click().should("have.text", SUPPORTING_TEXT_TEST_VALUE)
   });
 
   it("has maximum rating when the upper limit is exceeded", () => {
     cy.mount(<UDExReviewItem rating={500} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"></UDExReviewItem>)
     cy.get("[udex-review-item]").shadow().find("udex-rating-indicator").then($rating => {
-      expect($rating.attr("value")).eqls("5")
+      expect($rating.attr("value")).eqls("5");
     })
   });
 
   it("has minimum rating when the lower limit is exceeded", () => {
     cy.mount(<UDExReviewItem rating={-500} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"></UDExReviewItem>)
     cy.get("[udex-review-item]").shadow().find("udex-rating-indicator").then($rating => {
-      expect($rating.attr("value")).eqls("0")
+      expect($rating.attr("value")).eqls("0");
     })
   });
-})
+})

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -262,27 +262,27 @@ describe("Desktop", () => {
     cy.get("#secondary-nav-without-breadcrumbs").shadow().find("div").first().should("have.attr", "class", rootClass)
   });
 
-  describe("Direction atributes", () => {
+  describe("Direction attributes", () => {
     beforeEach(() => {
       cy.mount(secondaryNavigationWithoutBreadcrumbs)
       cy.viewport(1080, 640);
     })
 
-    xit("has the attr \"data-horizontal-align=`right`\" when doesn't fit", () => {
-      const moreNavItem = cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5);
-      moreNavItem.click();
-      moreNavItem.shadow().find(".udex-secondary-navigation__dropdown", { timeout: 1000 })
-      .should("have.attr", "data-horizontal-align", "right")
+    it("has the attr \"data-horizontal-align=`right`\" when doesn't fit", () => {
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5).click();
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5)
+        .shadow().find(".udex-secondary-navigation__dropdown", { timeout: 5000 })
+        .should("be.visible")
+        .should("have.attr", "data-horizontal-align", "right")
     });
 
     it("has the attr \"data-horizontal-align=`left`\" when doesn't fit in the \"rtl\" mode", () => {
       cy.get("body").invoke("attr", "dir", "rtl");
-      const moreNavItem = cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5);
-      moreNavItem.
-      click()
-      .shadow()
-      .find(".udex-secondary-navigation__dropdown")
-      .should("have.attr", "data-horizontal-align", "left")
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5).click();
+      cy.get("#secondary-nav-without-breadcrumbs").shadow().find("[udex-secondary-navigation-item]").eq(5)
+        .shadow()
+        .find(".udex-secondary-navigation__dropdown")
+        .should("have.attr", "data-horizontal-align", "left")
     });
   })
 

package/cypress/specs/SelectBox.cy.tsx

@@ -25,6 +25,17 @@ const fullComponent = <UDExSelectBox
   <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
 </UDExSelectBox>
 
+
+const groupHeaderCollapsible = <div style="width: 350px; position:relative;"><UDExSelectBox
+  id="select-box"
+  mode={UDExListMode.MultiSelect}
+  label="Programming languages">
+  <UDExSelectBoxGroupHeader label="Programming Languages" collapsible>
+    <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+  </UDExSelectBoxGroupHeader>
+</UDExSelectBox></div>
+
 const multiSelect = <div style="width: 350px; position:relative;">
   <a id="previous-focus" href="#">Previous focusable element</a>
   <UDExSelectBox
@@ -590,6 +601,71 @@ describe("SelectBox", () => {
       .find(".udex-list__inactive-header")
       .should("exist")
     });
+
+    it("MultiSelect mode - arrow keys navigate items when group header is nonInteractive", () => {
+      cy.mount(groupHeader);
+      cy.get("udex-select-box-group-header")
+        .then($el => {
+          const select = $el as any;
+          select[0].nonInteractive = true;
+        });
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("be.focused");
+
+      cy.realPress("ArrowUp");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+    });
+
+    it("MultiSelect mode - arrow keys navigate through collapsible group header and its items", () => {
+      cy.mount(groupHeaderCollapsible);
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find(".udex-list__group-header-wrap")
+        .should("be.focused");
+
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("be.focused");
+
+      cy.realPress("ArrowUp");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+
+      cy.realPress("ArrowUp");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find(".udex-list__group-header-wrap")
+        .should("be.focused");
+    });
   });
 
   describe("Select Box focus tests", () => {