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'); } }