Merge 7020394 into main

carbon-design-system · Jan 20, 2022 · afe20a2 · afe20a2
2 parents 1cb82ee + 7020394
commit afe20a2
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 32 deletions.
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -157,14 +157,24 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
   /**
    * Renders the left nav menus sections
    *
-   * @param menuItems menu items
-   * @param heading heading of menu section
-   * @param isSubmenu determines whether menu section is a submenu section
-   * @param showBackButton Determines whether to show back button
-   * @param sectionTitle title of menu section
-   * @param sectionId id of menu section
+   * @param object heading heading of menu section
+   * @param object.menuItems menu items
+   * @param object.heading heading heading of menu section
+   * @param object.isSubmenu determines whether menu section is a submenu section
+   * @param object.showBackButton Determines whether to show back button
+   * @param object.sectionTitle title of menu section
+   * @param object.sectionUrl section title url of menu section
+   * @param object.sectionId id of menu section
    */
-  protected _renderLeftNavMenuSections(menuItems, heading, isSubmenu, showBackButton, sectionTitle, sectionId) {
+  protected _renderLeftNavMenuSections({
+    menuItems,
+    heading = '',
+    isSubmenu = false,
+    showBackButton = false,
+    sectionTitle = '',
+    sectionUrl = '',
+    sectionId = '',
+  }) {
     const {
       userStatus,
       authenticatedProfileItems,
@@ -235,7 +245,8 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
         section-id="${sectionId}"
         ?is-submenu=${ifNonNull(isSubmenu)}
         title=${ifNonNull(sectionTitle)}
-        show-back-button=${ifNonNull(showBackButton)}
+        titleUrl=${ifNonNull(sectionUrl)}
+        ?show-back-button=${ifNonNull(showBackButton)}
       >
         ${items}
       </dds-left-nav-menu-section>

diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -232,16 +232,25 @@ class DDSMastheadComposite extends LitElement {
   /**
    * Renders the left nav menus sections
    *
-   * @param menuItems menu items
-   * @param heading heading of menu section
-   * @param isSubmenu determines whether menu section is a submenu section
-   * @param showBackButton Determines whether to show back button
-   * @param sectionTitle title of menu section
-   * @param sectionUrl section title url of menu section
-   * @param sectionId id of menu section
+   * @param object heading heading of menu section
+   * @param object.menuItems menu items
+   * @param object.heading heading heading of menu section
+   * @param object.isSubmenu determines whether menu section is a submenu section
+   * @param object.showBackButton Determines whether to show back button
+   * @param object.sectionTitle title of menu section
+   * @param object.sectionUrl section title url of menu section
+   * @param object.sectionId id of menu section
    */
   // eslint-disable-next-line class-methods-use-this
-  protected _renderLeftNavMenuSections(menuItems, heading, isSubmenu, showBackButton, sectionTitle, sectionUrl, sectionId) {
+  protected _renderLeftNavMenuSections({
+    menuItems,
+    heading = '',
+    isSubmenu = false,
+    showBackButton = false,
+    sectionTitle = '',
+    sectionUrl = '',
+    sectionId = '',
+  }) {
     const items = menuItems.map(elem => {
       if (elem.menu) {
         return html`
@@ -281,7 +290,7 @@ class DDSMastheadComposite extends LitElement {
         ?is-submenu=${ifNonNull(isSubmenu)}
         title=${ifNonNull(sectionTitle)}
         titleUrl=${ifNonNull(sectionUrl)}
-        show-back-button=${ifNonNull(showBackButton)}
+        ?show-back-button=${ifNonNull(showBackButton)}
       >
         ${items}
       </dds-left-nav-menu-section>
@@ -402,7 +411,16 @@ class DDSMastheadComposite extends LitElement {
           });
 
           if (level2Items.length !== 0) {
-            menu.push(this._renderLeftNavMenuSections(level2Items, null, true, true, item.title, item.url, `${i}, ${k}`));
+            menu.push(
+              this._renderLeftNavMenuSections({
+                menuItems: level2Items,
+                isSubmenu: true,
+                showBackButton: true,
+                sectionTitle: item.title,
+                sectionUrl: item.url,
+                sectionId: `${i}, ${k}`,
+              })
+            );
           }
 
           return level1Items.push({
@@ -418,15 +436,15 @@ class DDSMastheadComposite extends LitElement {
 
         if (level1Items.length !== 0) {
           menu.push(
-            this._renderLeftNavMenuSections(
-              level1Items,
-              elem.menuSections[0]?.heading,
-              true,
-              true,
-              elem.title,
-              elem.url,
-              `${i}, -1`
-            )
+            this._renderLeftNavMenuSections({
+              menuItems: level1Items,
+              heading: elem.menuSections[0]?.heading,
+              isSubmenu: true,
+              showBackButton: true,
+              sectionTitle: elem.title,
+              sectionUrl: elem.url,
+              sectionId: `${i}, -1`,
+            })
           );
         }
       }
@@ -445,7 +463,7 @@ class DDSMastheadComposite extends LitElement {
     });
 
     return html`
-      ${this._renderLeftNavMenuSections(level0Items, null, false, null, null, null, '-1, -1')} ${menu}
+      ${this._renderLeftNavMenuSections({ menuItems: level0Items, sectionId: '-1, -1' })} ${menu}
     `;
   }
 

diff --git a/packages/web-components/tests/snapshots/dds-masthead-composite.md b/packages/web-components/tests/snapshots/dds-masthead-composite.md
@@ -78,7 +78,11 @@
   data-autoid="dds--masthead__l0-sidenav"
   role="navigation"
 >
-  <dds-left-nav-menu-section section-id="-1, -1">
+  <dds-left-nav-menu-section
+    section-id="-1, -1"
+    title=""
+    titleurl=""
+  >
     <dds-left-nav-menu-item
       data-autoid="dds--masthead__l0--sidenav--nav0"
       href="https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/foo"
@@ -95,8 +99,9 @@
   <dds-left-nav-menu-section
     is-submenu=""
     section-id="1, -1"
-    show-back-button="true"
+    show-back-button=""
     title="menu-title-foo"
+    titleurl=""
   >
     <dds-left-nav-menu-item
       data-autoid="dds--masthead__l0--sidenav--nav1-list0"