From a7a5837d30a03f0ffcb56505d430ce4502c6dcea Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Thu, 1 Oct 2020 11:36:10 -0400 Subject: [PATCH] feat(Masthead): add support for megamenu in masthead l1 (#4099) ### Related Ticket(s) React: Change Masthead L1 from behind the feature flag #4010 ### Description Add support for megamenu in Masthead L1 Screen Shot 2020-09-30 at 5 42 19 PM ### Changelog **New** - add MegaMenu to the `` --- .../__snapshots__/storyshots.test.js.snap | 1605 +++++++++++++---- .../src/components/Masthead/MastheadL1.js | 47 +- .../UIShell/HeaderMenu.js | 1 + .../masthead/_masthead-megamenu.scss | 21 +- .../scss/components/masthead/_masthead.scss | 12 +- 5 files changed, 1349 insertions(+), 337 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 32c2f0b70e8..46ff87b833d 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -93727,20 +93727,23 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` >
  • @@ -93793,57 +93796,200 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` className="bx--header__menu" role="menu" > - -
  • - - - - Link 1 - - - -
    • - + +
    +
    + +
    +
    +

    + Link 1 +

    +
    + + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 + + +
    +     +
    +
    +     + + + + +
  • @@ -93896,292 +94042,1141 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` className="bx--header__menu" role="menu" > - -
  • - - - - Link 2 - - - -
    • - - -
  • - - - - Financing - - - -
    • -     - - -     -     - -
  • - - - - Industries - - - -
    • -     - - -
  • - - Link 3 - - - - - - - - - - - +
    • +     +     + +
  • + + + -
  • + + +
    • +     + + +
  • + + Link 3 + + - - - - Analytics - - - -
    • - + + + + + + +     diff --git a/packages/react/src/components/Masthead/MastheadL1.js b/packages/react/src/components/Masthead/MastheadL1.js index c17ba987944..56dff54cff7 100644 --- a/packages/react/src/components/Masthead/MastheadL1.js +++ b/packages/react/src/components/Masthead/MastheadL1.js @@ -10,6 +10,7 @@ import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/setti import HeaderMenu from '../carbon-components-react/UIShell/HeaderMenu'; import HeaderMenuItem from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderMenuItem'; import HeaderNavigation from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderNavigation'; +import MegaMenu from './MastheadMegaMenu/MegaMenu'; import PropTypes from 'prop-types'; import React from 'react'; import settings from 'carbon-components/es/globals/js/settings'; @@ -26,22 +27,23 @@ const MastheadL1 = ({ title, titleLink, navigationL1, ...rest }) => { }); const mastheadL1Links = navigationL1.map((link, index) => { - if (link.hasMenu) { + const autoid = `${stablePrefix}--masthead-${rest.navType}__l1-nav${index}`; + if (link.hasMenu || link.hasMegapanel) { return ( - {renderNav(link.menuSections, rest.navType)} + {renderNav(link, rest.navType, autoid)} ); } else { return ( - + {link.title} ); @@ -65,24 +67,29 @@ const MastheadL1 = ({ title, titleLink, navigationL1, ...rest }) => { /** * Loops through and renders a list of links for the masthead nav * - * @param {Array} sections A list of links to be rendered + * @param {object} link A list of links to be rendered * @param {string} navType navigation type for autoids + * @param {string} autoid autoid predecessor for megamenu items/menu items data-autoids * @returns {object} JSX object */ -function renderNav(sections, navType) { +function renderNav(link, navType, autoid) { const navItems = []; - sections.forEach((section, i) => { - section.menuItems.forEach((item, j) => { - navItems.push( - - {item.title} - - ); + if (link.hasMegapanel) { + navItems.push(); + } else { + link.menuSections.forEach((section, i) => { + section.menuItems.forEach((item, j) => { + navItems.push( + + {item.title} + + ); + }); }); - }); + } return navItems; } diff --git a/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js b/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js index 2e88deab876..8441c3b4547 100644 --- a/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js +++ b/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js @@ -140,6 +140,7 @@ class HeaderMenu extends React.Component { `${prefix}--masthead__megamenu__category-group`, `${prefix}--masthead__megamenu__view-all-cta`, `${prefix}--masthead__megamenu__l0-nav`, + `${prefix}--masthead__megamenu__l1-nav`, `${prefix}--header__menu`, ]; diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss index bcbdd3dc131..aefc7c06cc9 100644 --- a/packages/styles/scss/components/masthead/_masthead-megamenu.scss +++ b/packages/styles/scss/components/masthead/_masthead-megamenu.scss @@ -7,6 +7,7 @@ @mixin masthead-megamenu { $l0-nav-height: $spacing-09; + $l1-nav-height: rem(98px); @keyframes expand { 0% { @@ -31,6 +32,10 @@ .#{$prefix}--header__nav .#{$prefix}--masthead__megamenu__l0-nav .#{$prefix}--header__menu-title[aria-expanded='true'] + + .#{$prefix}--header__menu, + .#{$prefix}--header__nav + .#{$prefix}--masthead__megamenu__l1-nav + .#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu { background-color: transparent; bottom: 0; @@ -48,7 +53,8 @@ @include box-shadow; } - .#{$prefix}--masthead__megamenu__l0-nav { + .#{$prefix}--masthead__megamenu__l0-nav, + .#{$prefix}--masthead__megamenu__l1-nav { .#{$prefix}--header__menu { position: fixed; display: block; @@ -68,7 +74,6 @@ .#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu { position: fixed; - top: $l0-nav-height; left: 0; transform: translateZ(0); visibility: visible; @@ -82,6 +87,18 @@ } } + .#{$prefix}--masthead__megamenu__l0-nav + .#{$prefix}--header__menu-title[aria-expanded='true'] + + .#{$prefix}--header__menu { + top: $l0-nav-height; + } + + .#{$prefix}--masthead__megamenu__l1-nav + .#{$prefix}--header__menu-title[aria-expanded='true'] + + .#{$prefix}--header__menu { + top: $l1-nav-height; + } + .#{$prefix}--masthead__megamenu__container { width: 100%; @include carbon--make-container; diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss index 852272ae4a4..281ab1ae9ec 100755 --- a/packages/styles/scss/components/masthead/_masthead.scss +++ b/packages/styles/scss/components/masthead/_masthead.scss @@ -173,16 +173,8 @@ $search-transition-timing: 95ms; } } - .#{$prefix}--masthead__l0-nav--selected a:first-of-type::after { - position: absolute; - display: block; - content: ''; - bottom: -2px; - width: 100%; - height: 3px; - left: 0; - right: 0; - background-color: $interactive-01; + .#{$prefix}--masthead__l0-nav--selected a[aria-expanded='false'] { + border-bottom: solid 3px $interactive-01; } .#{$prefix}--header,