fix(masthead): hide scroller buttons when there are no menuItems (#12059

)

### Related Ticket(s)

[ADMCS-6215](https://jsw.ibm.com/browse/ADCMS-6215)

### Description

This bug fix covers the edge case of the `l0Data` on the `<c4d-masthead-l1>` component being undefined or empty.

### Testing instructions

* Open up the Masthead > With L1 story
* Check off the "Use empty data for L1 menu items". This will employ an L1 dataset that does not have any `menuItems` defined.
* The scroller buttons should be hidden

### Changelog

**Changed**

- Handle the edge case of the `l0Data` being `undefined`.

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

packages/web-components/src/components/masthead/__stories__/links.ts

@@ -472,6 +472,22 @@ const mastheadL1Data: MastheadL1 = {
   },
 };
 
+const mastheadL1EmptyMenuItemsData: MastheadL1 = {
+  title: 'IBM Data Virtualization',
+  url: 'https://www.ibm.com/products/watson\u002Dquery',
+  actions: {
+    login: {
+      title: 'Try it free',
+      url: 'https://dataplatform.cloud.ibm.com/registration/stepone?context=cpdaas\x26uucid=04fff6e19e3bf9ae\x26utm_content=CPDWW',
+    },
+    cta: {
+      title: 'Book a meeting',
+      url: 'https://www.ibm.com/products/watson\u002Dquery?schedulerform=',
+    },
+  },
+  menuItems: [],
+};
+
 const mastheadL0Data: L0MenuItem[] = [
   {
     title: 'Faceted Megamenu',
@@ -2194,4 +2210,9 @@ const mastheadL0Data: L0MenuItem[] = [
 
 /* eslint-enable max-len */
 
-export { mastheadLogoData, mastheadL1Data, mastheadL0Data };
+export {
+  mastheadLogoData,
+  mastheadL1Data,
+  mastheadL1EmptyMenuItemsData,
+  mastheadL0Data,
+};

packages/web-components/src/components/masthead/__stories__/masthead.stories.ts

@@ -17,7 +17,12 @@ import '../masthead-container';
 import { L1_CTA_TYPES } from '../defs';
 import styles from './masthead.stories.scss';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { mastheadL0Data, mastheadL1Data, mastheadLogoData } from './links';
+import {
+  mastheadL0Data,
+  mastheadL1Data,
+  mastheadL1EmptyMenuItemsData,
+  mastheadLogoData,
+} from './links';
 import {
   UNAUTHENTICATED_STATUS,
   MASTHEAD_AUTH_METHOD,
@@ -323,8 +328,13 @@ withPlatform.story = {
 };
 
 export const withL1 = (args) => {
-  const { selectedMenuItem, selectedMenuItemL1, l1CtaType, useMock } =
-    args?.MastheadComposite ?? {};
+  const {
+    selectedMenuItem,
+    selectedMenuItemL1,
+    l1CtaType,
+    useMock,
+    useL1EmptyData,
+  } = args?.MastheadComposite ?? {};
 
   let l1Data = { ...mastheadL1Data };
   if (l1Data?.actions?.cta) {
@@ -347,7 +357,7 @@ export const withL1 = (args) => {
             .unauthenticatedProfileItems="${ifNonEmpty(
               unauthenticatedProfileItems
             )}"
-            .l1Data="${l1Data}"
+            .l1Data="${useL1EmptyData ? mastheadL1EmptyMenuItemsData : l1Data}"
             selected-menu-item="${ifNonEmpty(selectedMenuItem)}"
             selected-menu-item-l1="${ifNonEmpty(
               selectedMenuItemL1
@@ -356,7 +366,7 @@ export const withL1 = (args) => {
       : html`
           <c4d-masthead-container
             data-endpoint="${dataEndpoints['v2.1']}"
-            .l1Data="${l1Data}"
+            .l1Data="${useL1EmptyData ? mastheadL1EmptyMenuItemsData : l1Data}"
             selected-menu-item="${ifNonEmpty(selectedMenuItem)}"
             selected-menu-item-l1="${ifNonEmpty(
               selectedMenuItemL1
@@ -384,6 +394,7 @@ withL1.story = {
           L1_CTA_TYPES.NONE
         ),
         useMock: boolean('use mock nav data (use-mock)', false),
+        useL1EmptyData: boolean('Use empty data for L1 menu items', false),
       }),
     },
     propsSet: {

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

@@ -231,7 +231,12 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
       } = this;
 
       // Only act if all the needed elements are present.
-      if (
+      const menuItems = this.l1Data?.menuItems ?? [];
+      if (menuItems.length === 0) {
+        menuScrollerButtons?.forEach((button) => {
+          button.setAttribute('hidden', '');
+        });
+      } else if (
         menuFirstItem &&
         menuLastItem &&
         menuContainerInner &&