Merge pull request #1209 from Financial-Times/BOLT-335-sub-nav-improvements

Bolt 335 sub nav improvements

Author: markdoran-ft

examples/ft-ui/constants.js

@@ -39,7 +39,7 @@ export const subnavData = [
   {
     label: 'European Central Bank',
     url: null,
-    selected: false,
+    selected: true,
     subnavDropdownOptions: [
       { label: 'Coverage', url: '/banks/european-central-bank/coverage', trackable: 'ECB_DROPDOWN_COVERAGE' },
       {
@@ -50,7 +50,8 @@ export const subnavData = [
       {
         label: 'Doves and Hawks',
         url: '/banks/european-central-bank/doves-and-hawks',
-        trackable: 'ECB_DROPDOWN_DOVES_AND_HAWKS'
+        trackable: 'ECB_DROPDOWN_DOVES_AND_HAWKS',
+        selected: true
       },
       {
         label: 'Central bankers views',

package-lock.json

@@ -52,6 +52,7 @@ export type TNavDropdownOption = {
   label: string
   url: string
   trackable: string
+  selected?: boolean
 }
 
 export type TNavMenuItem = {

packages/dotcom-types-navigation/index.d.ts

@@ -30,8 +30,9 @@
   },
   "peerDependencies": {
     "@financial-times/logo-images": "^1.10.1",
-    "@financial-times/o-header": "^15.4.1",
+    "@financial-times/o-header": "^15.5.0",
     "@financial-times/o3-button": "^3.15.0",
+    "@financial-times/o-visual-effects": "^5.0.2",
     "n-topic-search": "^10.1.1",
     "preact": "^10.23.2",
     "react": "17.x || 18.x",

packages/dotcom-ui-header/package.json

@@ -4,6 +4,7 @@ interface DropdownItem {
   label: string
   url: string
   trackable: string
+  selected?: boolean
 }
 
 interface SubNavDropdownProps {
@@ -23,24 +24,33 @@ const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ id, items, ariaLabelled
       aria-modal="true"
       aria-labelledby={ariaLabelledBy}
     >
-      {title && <h2 className="o-header__subnav-dropdown-title">{title}</h2>}
-      <button
-        className="o-header__subnav-dropdown-close"
-        data-o-header-subnav-dropdown-close
-        aria-label="Close menu"
-        type="button"
-      >
-        <span className="o-header__subnav-dropdown-close-icon" />
-      </button>
-      <ul className="o-header__subnav-dropdown-list">
-        {items.map((item, index) => (
-          <li key={index} className="o-header__subnav-dropdown-item">
-            <a href={item.url} data-trackable={item.trackable} className="o-header__subnav-dropdown-link">
-              {item.label}
-            </a>
-          </li>
-        ))}
-      </ul>
+      <div className="o-header__subnav-dropdown-content">
+        <button
+          className="o-header__subnav-dropdown-close"
+          data-o-header-subnav-dropdown-close
+          aria-label="Close menu"
+          type="button"
+        >
+          <span className="o-header__subnav-dropdown-close-icon" />
+        </button>
+        {title && <h2 className="o-header__subnav-dropdown-title">{title}</h2>}
+
+        <ul className="o-header__subnav-dropdown-list">
+          {items.map((item, index) => (
+            <li key={index} className="o-header__subnav-dropdown-item">
+              <a
+                href={item.url}
+                data-trackable={item.trackable}
+                className={`o-header__subnav-dropdown-link ${
+                  item.selected ? 'o-header__subnav-dropdown-link--selected' : ''
+                }`}
+              >
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   )
 }