From c52aff6e3ce0613a9a77a24755426f76d70677c4 Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Fri, 22 Jan 2021 14:34:28 -0500 Subject: [PATCH] fix(Masthead): make sure last selected menu item has selected styles in mobile nav (#4973) ### Related Ticket(s) menu item doesn't show active state in hamburg menu in masthead #4971 ### Description If selected menu item is a link (not a dropdown or has megamenu panel) and is the last menu item in the nav, it currently does not get the selected styles applied on the mobile nav. Compare correctly the titleEnglish and selected prop from adopter and set classname. ### Changelog **Changed** - create a `selected` const so we don't have the same comparison statement in multiple places - add `titleEnglish` field to last menu item in the custom nav data json file so we can test on storybook --- .../__tests__/__snapshots__/storyshots.test.js.snap | 13 +++++++++++++ .../src/components/Masthead/MastheadLeftNav.js | 13 ++++++------- .../Masthead/__stories__/data/MastheadLinks.js | 3 ++- .../scss/components/masthead/_masthead-leftnav.scss | 3 ++- 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 4d67576bb19..a59cc30f224 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -56874,6 +56874,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -57245,6 +57246,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -57568,6 +57570,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -57886,6 +57889,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -58549,6 +58553,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ] @@ -114443,6 +114448,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -114811,6 +114817,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -115132,6 +115139,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ] @@ -115565,6 +115573,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ] @@ -117554,6 +117563,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -117923,6 +117933,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -118244,6 +118255,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ], @@ -118907,6 +118919,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` "hasMenu": false, "menuSections": Array [], "title": "Sed cursus ante dapibus diam", + "titleEnglish": "Sed cursus ante dapibus diam", "url": "https://www.ibm.com/support/home/?lnk=msu_usen", }, ] diff --git a/packages/react/src/components/Masthead/MastheadLeftNav.js b/packages/react/src/components/Masthead/MastheadLeftNav.js index 16cfc528005..1db9abafe08 100755 --- a/packages/react/src/components/Masthead/MastheadLeftNav.js +++ b/packages/react/src/components/Masthead/MastheadLeftNav.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -37,6 +37,7 @@ const MastheadLeftNav = ({ * @returns {*} Left side navigation */ const sideNav = navigation.map((link, i) => { + const selected = rest.selectedMenuItem === link.titleEnglish; if (link.hasMenu || link.hasMegaPanel) { const autoid = `${stablePrefix}--masthead-${rest.navType}-sidenav__l0-nav${i}`; const dataTitle = link.titleEnglish @@ -54,7 +55,7 @@ const MastheadLeftNav = ({ backButtonText={backButtonText} key={i} autoid={autoid} - selected={rest.selectedMenuItem === link.titleEnglish} + selected={selected} navType={rest.navType} dataTitle={dataTitle}> {renderNavSections( @@ -84,7 +85,7 @@ const MastheadLeftNav = ({ backButtonText={backButtonText} key={i} autoid={autoid} - selected={rest.selectedMenuItem === link.titleEnglish} + selected={selected} navType={rest.navType} dataTitle={dataTitle}> {renderNavSections( @@ -102,8 +103,7 @@ const MastheadLeftNav = ({ @@ -127,8 +127,7 @@ const MastheadLeftNav = ({ diff --git a/packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js b/packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js index 46961fc2a36..860ced8e51e 100644 --- a/packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js +++ b/packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020 + * Copyright IBM Corp. 2020, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -344,6 +344,7 @@ const mastheadLinks = [ }, { title: 'Sed cursus ante dapibus diam', + titleEnglish: 'Sed cursus ante dapibus diam', url: 'https://www.ibm.com/support/home/?lnk=msu_usen', hasMenu: false, hasMegapanel: false, diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss index 88bac9d0b02..f9b53f075d2 100644 --- a/packages/styles/scss/components/masthead/_masthead-leftnav.scss +++ b/packages/styles/scss/components/masthead/_masthead-leftnav.scss @@ -242,7 +242,8 @@ .#{$prefix}--masthead__side-nav--submemu--selected { border-left: 3px solid $interactive-01; - .#{$prefix}--side-nav__submenu-title { + .#{$prefix}--side-nav__submenu-title, + &.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text { font-weight: carbon--font-weight('semibold'); } }