[Masthead] Web Component: Change component to include logic that highlights the current and parent menu items within the Masthead dropdown + Mega Menu based on the URL

User Story

As a [user role below]: Carbon for ibm.com developer

I need to: create/change the Masthead

so that I can: provide the ibm.com adopter developers components they can use to build ibm.com web pages

Additional information

• Story within Storybook with corresponding knobs
• Utilize Carbon
• Create with Shadow DOM and Custom Elements standards
• See the Epic for the Design and Functional specs information
• No visual changes and visual QA testing required.
• The manual option stays in place. The automatic mapping is added.
• Web Components Prod QA testing issue (#6765)

---

Hybrid Cloud developer: Hunter MacDermut

• HC Jira ticket
• Dev estimate: 5
• DDS consultant: Anna

---

Incremented func spec number to 1.2.5 https://ibm.ent.box.com/file/781809973704?s=89qwjyjy6kwbi69qnz4nzatwfv3mh2kc

Acceptance criteria

• Include README for the web component and corresponding styles
• Create Web Components styles in styles package
• Do not create knobs in Storybook that include JSON objects
• Break out Storybook stories into multiple variation stories, if applicable
• Create codesandbox example under /packages/web-components/examples/codesandbox and include in README
• Minimum 80% unit test coverage
• Update the Carbon for ibm.com website component data file to be sure the web site Component Status and Storybook links are correct
• A comment is posted in the Prod QA issue, tagging Praveen when development is finished

[RobertaJHahn]

Moving Hunter’s comments in the epic #6638 to this dev issue. @proeung @annawen1

---

Making good progress on this work. A couple issues came up I’d like to bring attention to.

1. Certain links in the Cloud version of the masthead, like https://www.ibm.com/cloud/ai are present both under Products and Solutions. Unlike links in the non-Cloud version of the masthead, which have identifiers, like ?lnk=hpmps_buai, Cloud masthead links have no identifier that can be used to distinguish under which heading they should be highlighted. How should we distinguish between the two?

1. Certain links in the non-Cloud version of the masthead, like https://www.ibm.com/docs/en?lnk=hpmls_budc, are used both for the link with icon that heads the section as well as an underlying link. How might we decide which to highlight?

[proeung]

@RobertaJHahn Sounds good! Thanks for the update!