@sapudex/web-components 2.4.0 → 2.4.1

package/src/MastheadItem.ts

@@ -11,7 +11,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
-  OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT,
+  OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import type UDExAvatar from "./Avatar.js";
@@ -21,6 +21,7 @@ import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
@@ -58,11 +59,14 @@ export type MenuItem = {
 type UDExMastheadItemItemClickEventDetail = {
   originalEvent: PointerEvent,
   item: UDExMastheadItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 export type UDExMastheadDropdownEventDetail = {
   title: string,
   action: UDExMastheadDropdownItemAction,
+  analyticsName: AnalyticsName,
 }
 
 /**
@@ -142,15 +146,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: String })
     menuTitle: string = "";
 
-  /**
-   * Defines the text of item.
-   *
-   * @public
-   * @default ""
-   */
-  @property({ type: String })
-    text: string = "";
-
   /**
    * Defines the selected item.
    *
@@ -264,6 +259,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  /**
+   * Defines the label for analytics
+   *
+   * @public
+   */
+  @property({ type: String })
+    label!: string;
+
   /**
    * Slot for the dropdown
    *
@@ -295,6 +298,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  onBeforeRendering(): void {
+    this.label = this.eventItemTitle;
+  }
+
   onAfterRendering(): void {
     this._profileAvatar = this.profileAvatar;
     this._mastheadShell = this.mastheadShell;
@@ -381,17 +388,19 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   fireDropdownCloseEvent(title: string, action: UDExMastheadDropdownItemAction): void {
-    this.fireDecoratorEvent("dropdown-closed", { title, action });
+    this.fireDecoratorEvent("dropdown-closed", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireDropdownOpenEvent(title: string, action: UDExMastheadDropdownItemAction): void {
-    this.fireDecoratorEvent("dropdown-opened", { title, action });
+    this.fireDecoratorEvent("dropdown-opened", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireItemClickEvent(e: PointerEvent): void {
     this.fireDecoratorEvent("item-click", {
       item: this,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: e.currentTarget as HTMLElement,
     });
   }
 
@@ -442,7 +451,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   closeDropdown(): void {
     this.selected = false;
-    this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
+    this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
   getDomElement(selector: string): HTMLElement | undefined | null {
@@ -532,6 +541,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.getAttribute("slot") === "cart";
   }
 
+  get isSearchBtn(): boolean {
+    return this.icon === "search";
+  }
+
   get isSupportBtn(): boolean {
     return this.getAttribute("slot") === "support";
   }
@@ -553,22 +566,18 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get eventItemTitle(): string {
-    if (this.accessibleName) {
-      return this.accessibleName.trim();
+    if (this.isSearchBtn) {
+      return UDExMastheadItem.i18nBundle.getText(SEARCH);
     }
-
     if (this.isCartBtn) {
       return UDExMastheadItem.i18nBundle.getText(CART);
     }
-
     if (this.isProfileBtn) {
       return UDExMastheadItem.i18nBundle.getText(PROFILE);
     }
-
     if (this.isCountrySelectorBtn) {
       return UDExMastheadItem.i18nBundle.getText(COUNTRY_SELECTOR);
     }
-
     if (this.isSupportBtn) {
       return UDExMastheadItem.i18nBundle.getText(SUPPORT);
     }

package/src/MastheadMenu.hbs

@@ -22,6 +22,8 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
         <udex-masthead-menu-item
+            part="menu-item"
+            exportparts="menu-item"
             id="category-{{categoryId}}"
             @click="{{../../handleMenuItemClick}}"
             url="{{this.url}}"
@@ -42,11 +44,14 @@
             <li>
                 {{#if this.url}}
                     <udex-masthead-menu-item
+                        part="menu-item"
+                        exportparts="menu-item"
                         @click="{{../../../handleMenuItemClick}}"
                         badge="{{this.badge}}"
                         ?external-link="{{this.externalLink}}"
                         url="{{this.url}}"
-                        label="{{this.title}}">
+                        label="{{this.title}}"
+                        exportparts="badge">
                     </udex-masthead-menu-item>
                 {{else}}
                     <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>

package/src/MastheadMenu.ts

@@ -12,6 +12,7 @@ import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -39,6 +40,8 @@ type UDExMastheadMenuMenuItemClickEventDetail = {
   category?: string,
   originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -131,6 +134,8 @@ class UDExMastheadMenu extends UI5Element {
     if (url?.length) {
       const list = item.closest(".udex-masthead-menu__list") as HTMLElement;
       this.fireDecoratorEvent("menu-item-click", {
+        sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
+        analyticsName: AnalyticsName.Header,
         item,
         originalEvent: e,
         ...(type !== UDExItemType.Heading && { category: list?.getAttribute("category") || "" }),

package/src/MastheadMenuItem.hbs

@@ -41,7 +41,7 @@
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
             aria-haspopup="{{ariaHasPopup}}"
-            role="button"
+            role="{{accessibleRoleText}}"
             tabindex="{{_tabIndex}}">
             {{#if iconStart}}
                 {{>arrow-left}}

package/src/MastheadMenuItem.ts

@@ -225,8 +225,8 @@ class UDExMastheadMenuItem extends UI5Element {
     return this.externalLink ? "new-win-desc" : null;
   }
 
-  get accessibleRoleText(): string | null {
-    return this.accessibleRole ? this.accessibleRole : null;
+  get accessibleRoleText(): string {
+    return this.accessibleRole ? this.accessibleRole : "menuitem";
   }
 
   get partAttr(): string {

package/src/MastheadMobileMenu.hbs

@@ -10,9 +10,10 @@
                 {{>nav-items}}
             {{/if}}
             {{#if _showCategories}}
-                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
                     {{#if _hideExploreSapBtn}}
                         <udex-masthead-menu-item
+                            part="menu-item"
                             class="udex-masthead-mobile-menu__back-item"
                             @click="{{handleExploreBackToMenuItems}}"
                             label="{{_clickedItem.innerText}}"
@@ -24,6 +25,7 @@
                     {{else}}
                         {{#if isNotMultipleMode}}
                             <udex-masthead-menu-item
+                                part="menu-item"
                                 class="udex-masthead-mobile-menu__heading"
                                 label="{{_clickedItem.innerText}}"
                                 type="Heading"
@@ -31,9 +33,11 @@
                             </udex-masthead-menu-item>
                         {{else}}
                             <udex-masthead-menu-item
+                                part="menu-item"
                                 class="udex-masthead-mobile-menu__back-item"
                                 @click="{{handleBackToMenuItems}}"
                                 label="{{_clickedItem.innerText}}"
+                                aria-has-popup="true"
                                 type="Button"
                                 has-border
                                 icon-start
@@ -45,12 +49,14 @@
                 {{>categories}}
             {{/if}}
             {{#if _showCategoryItems}}
-                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
+                        part="menu-item"
                         class="udex-masthead-mobile-menu__back-item"
                         @click="{{handleBackToCategories}}"
                         label="{{_category.category}}"
                         type="Button"
+                        aria-has-popup="true"
                         has-border
                         icon-start
                         is-back-to-categories>
@@ -62,11 +68,13 @@
     </div>
     {{#if showExploreBtn}}
         <udex-masthead-menu-item
+            part="menu-item"
             class="udex-masthead-mobile-menu__explore-btn"
             id="{{exploreItem._id}}"
             @click="{{handleExploreSapClick}}"
             @keydown="{{handleLeftRightKeys}}"
-            accessible-role="button"
+            accessible-role-text="button"
+            aria-has-popup="true"
             type="Button"
             first-level
             icon-end
@@ -78,9 +86,10 @@
 
 {{#*inline "nav-items"}}
     {{#each items}}
-        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
             {{#if this.subItems}}
                 <udex-masthead-menu-item
+                    part="menu-item"
                     @click="{{../handleMenuItemClick}}"
                     label="{{this.innerText}}"
                     aria-has-popup="true"
@@ -92,6 +101,7 @@
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
+                    part="menu-item"
                     @click="{{../handleMobileItemEvent}}"
                     url="{{this.href}}"
                     label="{{this.innerText}}"
@@ -105,8 +115,9 @@
 
 {{#*inline "categories"}}
     {{#if _clickedItem.href}}
-        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
             <udex-masthead-menu-item
+                part="menu-item"
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
                 @click="{{handleMobileItemEvent}}"
@@ -116,8 +127,9 @@
     {{/if}}
     {{#each _categories}}
         {{#if this.category}}
-            <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <li class="udex-masthead-mobile-menu__list-item" role="none">
                 <udex-masthead-menu-item
+                    part="menu-item"
                     @click="{{../handleMenuCategoryClick}}"
                     url="{{this.url}}"
                     id="{{@index}}"
@@ -131,8 +143,9 @@
             </li>
         {{else}}
             {{#each this.items}}
-                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
+                        part="menu-item"
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
@@ -146,8 +159,9 @@
 
 {{#*inline "category-items"}}
     {{#if _category.url}}
-        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
             <udex-masthead-menu-item
+                part="menu-item"
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
@@ -157,8 +171,9 @@
     {{/if}}
     {{#each _category.items}}
         {{#if this.url}}
-            <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <li class="udex-masthead-mobile-menu__list-item" role="none">
                 <udex-masthead-menu-item
+                    part="menu-item"
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"

package/src/MastheadMobileMenu.ts

@@ -13,7 +13,7 @@ import type { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
-
+import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
 
 // Styles
@@ -24,10 +24,14 @@ type UDExMastheadMobileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   category?: string,
   isMobile: boolean,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 type UDExMastheadMobileMenuExploreClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -151,7 +155,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     e.preventDefault();
     this.openExploreSapMenu(e);
     this.setFocusItemByIndex(0);
-    this.fireDecoratorEvent("explorer-menu-click", { originalEvent: e });
+    this.fireExploreSapMobileButton(e);
   }
 
   handleBackToMenuItems(e: PointerEvent) {
@@ -411,14 +415,26 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   fireMobileItemEvent(e: PointerEvent | KeyboardEvent, category?: string) {
+    const item = e.target as UDExMastheadMenuItem;
+
     this.fireDecoratorEvent("item-click", {
       isMobile: true,
-      item: e.target as UDExMastheadMenuItem,
+      item,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
       ...(category && { category }),
     });
   }
 
+  fireExploreSapMobileButton(e: PointerEvent | KeyboardEvent) {
+    this.fireDecoratorEvent("explorer-menu-click", {
+      originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: (e.target as HTMLElement).shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
+    });
+  }
+
   setFocusItemByIndex(index: number) {
     this._shouldFocusItemByIndex = true;
     this._focusedItemIndex = index;

package/src/MastheadProfileMenu.hbs

@@ -22,6 +22,8 @@
   {{/if}}
   <div class="udex-masthead-profile-menu__links">
     <udex-masthead-menu
+        part="menu"
+        exportparts="badge, menu-item"
         sub-items='{{linksList}}'
         @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
     </udex-masthead-menu>

package/src/MastheadProfileMenu.ts

@@ -11,6 +11,7 @@ import UDExMastheadMenu from "./MastheadMenu.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
 import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -23,13 +24,11 @@ interface UserData {
   avatarInitials?: string
 }
 
-type UDExMastheadProfileMenuLogoutClickEventDetail = {
-  originalEvent: PointerEvent,
-}
-
 type UDExMastheadProfileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   originalEvent: PointerEvent,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -72,7 +71,7 @@ type UDExMastheadProfileMenuItemClickEventDetail = {
 
 class UDExMastheadProfileMenu extends UI5Element {
   eventDetails!: {
-    "logout": UDExMastheadProfileMenuLogoutClickEventDetail,
+    "logout": UDExMastheadProfileMenuItemClickEventDetail,
     "profile-item-click": UDExMastheadProfileMenuItemClickEventDetail
   };
   /**
@@ -122,8 +121,13 @@ class UDExMastheadProfileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   handleUserLogoutItemClick(e: PointerEvent): void {
+    const item = e.target as UDExMastheadMenuItem;
+
     this.fireDecoratorEvent("logout", {
+      item,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
     });
   }
 
@@ -133,6 +137,8 @@ class UDExMastheadProfileMenu extends UI5Element {
     this.fireDecoratorEvent("profile-item-click", {
       item,
       originalEvent,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot.querySelector(".udex-masthead-menu-item") as HTMLElement,
     });
   }
 

package/src/MastheadShell.hbs

@@ -39,6 +39,7 @@
                     class="udex-masthead-shell__close-search-btn"
                     size="Small"
                     icon="decline"
+                    part="search-close-button"
                     tooltip="{{closeButtonAccessibleName}}"
                     accessible-name="{{closeButtonAccessibleName}}"
                     @click="{{handleCloseSearch}}">
@@ -71,6 +72,7 @@
                 <udex-masthead-item
                     class="udex-masthead-shell__search-btn"
                     icon="search"
+                    part="search-button"
                     @click="{{handleSearchClick}}"
                     accessible-name="search">
                 </udex-masthead-item>

package/src/MastheadShell.ts

@@ -25,6 +25,7 @@ import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
@@ -35,6 +36,13 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
 
 type UDExMastheadShellBaseEventDetail = {
   originalEvent: PointerEvent,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
+  item?: UDExMastheadItem,
+}
+
+type UDExMastheadShellAnalyticsNameEventDetail = {
+  analyticsName: AnalyticsName,
 }
 
 /**
@@ -155,10 +163,10 @@ type UDExMastheadShellBaseEventDetail = {
 
 class UDExMastheadShell extends UI5Element {
   eventDetails!: {
-    "mobile-menu-open": void,
-    "mobile-menu-close": void,
-    "search-opened": void,
-    "search-closed": void,
+    "mobile-menu-open": UDExMastheadShellAnalyticsNameEventDetail,
+    "mobile-menu-close": UDExMastheadShellAnalyticsNameEventDetail,
+    "search-opened": UDExMastheadShellAnalyticsNameEventDetail,
+    "search-closed": UDExMastheadShellAnalyticsNameEventDetail,
     "cart-click": UDExMastheadShellBaseEventDetail,
     "support-click": UDExMastheadShellBaseEventDetail,
     "profile-click": UDExMastheadShellBaseEventDetail,
@@ -498,37 +506,37 @@ class UDExMastheadShell extends UI5Element {
   }
 
   handleLogoClick(e: PointerEvent): void {
-    this.fireDecoratorEvent("logo-click", { originalEvent: e });
+    this.fireMastheadEvent("logo-click", e);
   }
 
   handleSiteLabelClick(e: PointerEvent): void {
-    this.fireDecoratorEvent("site-label-click", { originalEvent: e });
+    this.fireMastheadEvent("site-label-click", e);
   }
 
   handleSearchClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("search-click", { originalEvent: e });
+    this.fireMastheadEvent("search-click", e);
     this.openSearch();
   }
 
   handleCartClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("cart-click", { originalEvent: e });
+    this.fireMastheadEvent("cart-click", e);
   }
 
   handleProfileClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("profile-click", { originalEvent: e });
+    this.fireMastheadEvent("profile-click", e);
   }
 
   handleSupportClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("support-click", { originalEvent: e });
+    this.fireMastheadEvent("support-click", e);
   }
 
   handleCountrySelectorClick(e: PointerEvent): void {
     e.stopPropagation();
-    this.fireDecoratorEvent("country-selector-click", { originalEvent: e });
+    this.fireMastheadEvent("country-selector-click", e);
   }
 
   handleOpenMobileMenu(): void {
@@ -549,7 +557,7 @@ class UDExMastheadShell extends UI5Element {
 
   handleCloseSearch(e: PointerEvent): void {
     this._closeBtnClicked = true;
-    this.fireDecoratorEvent("search-close-click", { originalEvent: e });
+    this.fireMastheadEvent("search-close-click", e);
     this.closeSearch();
   }
 
@@ -736,13 +744,22 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  fireMastheadEvent(eventName: keyof this["eventDetails"], e?: PointerEvent): void {
+    const eventDetails = {
+      analyticsName: AnalyticsName.Header,
+      ...(e && { originalEvent: e }),
+      ...(e && { sourceNode: e.currentTarget as HTMLElement }),
+    } as this["eventDetails"][typeof eventName];
+    this.fireDecoratorEvent(eventName, eventDetails);
+  }
+
   /**
    * Close the search panel.
    * @public
    */
   closeSearch(): void {
     this._isSearchOpened = false;
-    this.fireDecoratorEvent("search-closed");
+    this.fireMastheadEvent("search-closed");
   }
 
   /**
@@ -766,7 +783,7 @@ class UDExMastheadShell extends UI5Element {
       this._searchOpener.selected = false;
     }
 
-    this.fireDecoratorEvent("search-opened");
+    this.fireMastheadEvent("search-opened");
   }
 
   /**

package/src/MessageStripTemplate.tsx

@@ -52,6 +52,7 @@ export default function MessageStripTemplate(this: UDExMessageStrip) {
           design="Tertiary"
           onClick={this._closeClick}
           tooltip={this._closeButtonText}
+          part="close-button"
         />
       )}
     </div>