fix(cloud-masthead): set unique id for megamenu tabs instead of using…

… title (#7024)

### Related Ticket(s)

[Cloud-masthead]: Adjust tabs to not use title as the identifier for related tab content, use unique ID instead #6975

### Description

Ran into an issue with the cloud megamenu tabs when the same tab title is used in two different megamenus. This causes an issue because the current logic uses the title as the identifier of the tabs. Solution is to use a unique id for the tabs instead so no issues occur if the same title is used in multiple megamenus.

**BEFORE:**
<img width="850" alt="Screen Shot 2021-08-31 at 1 09 35 PM" src="https://user-images.githubusercontent.com/54281166/131546404-3afc520d-cb9a-4fc7-ae08-149c316e9214.png">


**AFTER:**
<img width="837" alt="Screen Shot 2021-08-31 at 1 06 59 PM" src="https://user-images.githubusercontent.com/54281166/131546142-5cb53e96-8bbc-4405-8d0c-a53133c5a404.png">


### Changelog

**Changed**

- set a unique id using the parent menu item key + the tab key


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts

@@ -89,23 +89,20 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
    *  Render MegaMenu content
    *
    * @param sections menu section data object
+   * @param parentKey parent key
    */
   // eslint-disable-next-line class-methods-use-this
-  protected _renderMegaMenu(sections) {
+  protected _renderMegaMenu(sections, parentKey) {
     let viewAllLink;
     type menuItem = MastheadMenuItem & { itemKey: String };
     const sortedMenuItems: menuItem[] = [];
-    sections[0].menuItems?.forEach(item => {
+    sections[0].menuItems?.forEach((item, i) => {
       if (item.megaPanelViewAll) {
         viewAllLink = item;
         return viewAllLink;
       }
-      const title = item.title
-        .replace(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/g, '')
-        .replace(/ +/g, '-')
-        .toLowerCase();
 
-      return sortedMenuItems.push({ ...item, itemKey: title });
+      return sortedMenuItems.push({ ...item, itemKey: `${parentKey}-${i}` });
     });
 
     return html`
@@ -114,10 +111,10 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
           view-all-href="${ifNonNull(viewAllLink?.url)}"
           view-all-title="${ifNonNull(viewAllLink?.title)}"
         >
-          <dds-cloud-megamenu-tabs value="${sortedMenuItems[0]?.itemKey}">
+          <dds-cloud-megamenu-tabs value="${sortedMenuItems[0]?.title}">
             ${sortedMenuItems.map(item => {
               return html`
-                <dds-cloud-megamenu-tab id="tab-${item.itemKey}" target="panel-${item.itemKey}" value="${item.itemKey}"
+                <dds-cloud-megamenu-tab id="tab-${item.itemKey}" target="panel-${item.itemKey}" value="${item.title}"
                   >${item.title}</dds-cloud-megamenu-tab
                 >
               `;

packages/web-components/src/components/masthead/masthead-composite.ts

@@ -158,9 +158,10 @@ class DDSMastheadComposite extends LitElement {
    *  Render MegaMenu content
    *
    * @param sections menu section data object
+   * @param _parentKey parent menu key (used for the cloud-masthead-composite component)
    */
-  // eslint-disable-next-line class-methods-use-this
-  protected _renderMegaMenu(sections) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected _renderMegaMenu(sections, _parentKey) {
     const { viewAllLink, highlightedItems, menu } = this._getHighlightedMenuItems(sections);
 
     const hasHighlights = highlightedItems.length !== 0;
@@ -412,7 +413,7 @@ class DDSMastheadComposite extends LitElement {
             const selected = selectedMenuItem && titleEnglish === selectedMenuItem;
             let sections;
             if (link.hasMegapanel) {
-              sections = this._renderMegaMenu(menuSections);
+              sections = this._renderMegaMenu(menuSections, i);
             } else {
               sections = menuSections
                 // eslint-disable-next-line no-use-before-define