Bolt 335 sub nav improvements

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',

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

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

packages/dotcom-ui-header/package.json

@@ -30,7 +30,7 @@
   },
   "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",
     "n-topic-search": "^10.1.1",
     "preact": "^10.23.2",

packages/dotcom-ui-header/src/components/sub-navigation/SubNavDropdown.tsx

@@ -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>
   )
 }

packages/dotcom-ui-header/src/components/sub-navigation/subNavDropdown.scss

@@ -1,5 +1,14 @@
 @import '@financial-times/o3-foundation/css/professional.css';
 
+@keyframes o-header-subnav-animation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 [data-o-header-subnav-dropdown-parent] {
   cursor: default;
   display: inline-block;
@@ -8,44 +17,65 @@
 
 .o-header__subnav-dropdown {
   position: fixed;
-  transform: translate(-50%, -50%);
-  border: 1px solid var(--o3-color-palette-black-10, #E6D9CE);
-  background: var(--o3-color-palette-white, #FFF);
-  box-shadow: 0 var(--o3-spacing-5xs) var(--o3-spacing-5xs) 0 rgba(0, 0, 0, 0.25);
+  top: var(--o3-spacing-2xs);
+  left: var(--o3-spacing-2xs);
+  right: var(--o3-spacing-2xs);
+  bottom: var(--o3-spacing-2xs);
+  border: 1px solid var(--o3-color-palette-black-10, #e6d9ce);
+  background: var(--o3-color-palette-white, #fff);
+  padding: var(--o3-spacing-s);
   z-index: var(--o3-z-message-service-popover, 9999);
-  width: 177px;
-  padding: var(--o3-spacing-xs) 72px var(--o3-spacing-l) var(--o3-spacing-m);
   display: none;
+  width: auto;
+  max-width: none;
+  height: auto;
+  transform: none;
+  overflow-y: auto;
+  box-shadow: 2px 2px var(--o3-spacing-4xs) 0 rgba(15, 10, 46, 0.09);
+  animation: o-header-subnav-animation 0.5s ease-out;
+}
+
+.o-header__subnav-dropdown-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--o3-spacing-s);
 }
 
 .o-header__subnav-dropdown-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--o3-spacing-s);
   list-style: none;
-  margin: 0;
   padding: 0;
 }
 
-.o-header__subnav-dropdown-item {
-  &:not(:last-child) {
-    margin-bottom: var(--o3-spacing-l);
-  }
-}
-
 .o-header__subnav-dropdown-link {
-  display: block;
-  width: 177px;
-  height: 20px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  font-weight: var(--o3-font-weight-regular);
+  font-size: var(--o3-spacing-2xs);
   color: var(--o3-color-palette-black, #000);
-  line-height: var(--o3-type-body-base-line-height);
-  font-weight: var(--o3-type-body-base-font-weight);
-  font-family: var(--o3-type-body-base-font-family);
-  font-size: var(--o3-type-body-base-font-size);
+  font-family: var(--o3-font-family-metric);
+  line-height: var(--o3-type-headline-sm-line-height);
   text-decoration: none;
-  transition: text-decoration 0.2s ease;
 
-  @media (hover: hover) and (pointer: fine) {
+  &:active,
+  &:focus,
+  &:focus-visible,
+  &:hover {
+    text-decoration: underline;
+    color: var(--o3-color-palette-black, #000);
+  }
+
+  &--selected {
+    color: var(--o3-color-palette-teal-40);
+
+    &:focus-visible,
     &:hover {
       text-decoration: underline;
-      color: var(--o3-color-palette-black, #000);
+      color: var(--o3-color-palette-teal-40);
     }
   }
 }
@@ -62,104 +92,88 @@
   cursor: default !important; // On desktop the hover action will open the modal with click doing nothing additional. Therefore the pointer is misleading.
 }
 
-@media (hover: none) {
-  [data-o-header-subnav-dropdown-parent] {
-    -webkit-tap-highlight-color: transparent;
-  }
+.o-header__subnav-dropdown-title {
+  font-size: var(--o3-spacing-2xs);
+  color: var(--o3-color-palette-black, #000);
+  font-family: var(--o3-type-heading-3-font-family);
+  line-height: var(--o3-type-headline-sm-line-height);
+  margin: 0;
+  padding-bottom: 10px;
+  border-bottom: 6px solid var(--o3-color-palette-black, #000);
+  font-weight: var(--o3-font-weight-semibold);
+}
 
-  /*
-  * iOS: fix clipping of fixed-position dropdown inside horizontally scrollable subnav.
-  * This will cause the subnav items to spill out horitontally so the override is
-  * limited to iOS to prevent android widening the layout when items overflow.
-  */
-  @supports (-webkit-touch-callout: none) {
-    .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true']) .o-header__subnav-wrap-outside,
-    .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true']) .o-header__subnav-wrap-inside {
-      overflow: visible;
-    }
-  }
+.o-header__subnav-dropdown-close {
+  align-self: flex-end;
+  width: var(--o3-spacing-xs);
+  height: var(--o3-spacing-xs);
+  border: none;
+  background: transparent;
+  padding: 0;
+  z-index: 1;
+  cursor: pointer;
 
-  .o-header__subnav-dropdown {
-    position: fixed;
-    top: var(--o3-spacing-3xs);
-    left: var(--o3-spacing-3xs);
-    right: var(--o3-spacing-3xs);
-    bottom: var(--o3-spacing-3xs);
-    width: auto;
-    max-width: none;
-    height: auto;
-    transform: none;
-    padding: 0;
-    overflow-y: auto;
-    box-shadow: 0 var(--o3-spacing-5xs) var(--o3-spacing-s) 0 rgba(0, 0, 0, 0.3);
+  &-icon {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background-color: var(--o3-color-palette-black);
+    mask-image: var(--o3-icon-cross);
+    mask-repeat: no-repeat;
+    mask-size: contain;
   }
+}
 
-  .o-header__subnav-dropdown-title,
-  .o-header__subnav-dropdown-link {
-    font-size: var(--o3-spacing-2xs);
-    color: var(--o3-color-palette-black, #000);
-    font-family: var(--o3-type-heading-3-font-family);
-    line-height: var(--o3-type-heading-3-line-height);
+@media (min-width: 740px) {
+  .o-header__subnav-dropdown-content {
+    gap: var(--o3-spacing-2xs);
   }
 
-  .o-header__subnav-dropdown-title {
-    display: block;
-    margin: 64px var(--o3-spacing-xs) 0 var(--o3-spacing-l);
-    padding-bottom: var(--o3-spacing-2xs);
-    border-bottom: 6px solid var(--o3-color-palette-black, #000);
-    padding-left: 2px;
-    font-weight: var(--o3-font-weight-semibold);
+  .o-header__subnav-dropdown {
+    transform: translate(-50%, -50%);
+    width: 177px;
+    padding: var(--o3-spacing-2xs);
   }
 
-  .o-header__subnav-dropdown-close {
-    display: block;
-    position: absolute;
-    top: var(--o3-spacing-xs);
-    right: var(--o3-spacing-xs);
-    width: var(--o3-spacing-xs);
-    height: var(--o3-spacing-xs);
-    border: none;
-    background: transparent;
+  .o-header__subnav-dropdown-list {
+    margin: 0;
     padding: 0;
-    z-index: 1;
-    cursor: pointer;
-
-    &-icon {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-      background-color: var(--o3-color-palette-black);
-      mask-image: var(--o3-icon-cross);
-      mask-repeat: no-repeat;
-      mask-size: contain;
-    }
+    gap: var(--o3-spacing-2xs);
   }
 
-  .o-header__subnav-dropdown-list {
-    margin: 0 var(--o3-spacing-xs) var(--o3-spacing-xs) var(--o3-spacing-l);
-    padding-top: var(--o3-spacing-xs);
-    padding-left: 2px;
-  }
-
   .o-header__subnav-dropdown-link {
-    height: 20px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    font-weight: var(--o3-font-weight-regular);
-    &:active,
-    &:focus,
-    &:focus-visible {
-      text-decoration: underline;
-      color: var(--o3-color-palette-black, #000);
-    }
+    display: block;
+    width: 177px;
+    line-height: var(--o3-type-detail-line-height);
+    font-weight: var(--o3-type-body-base-font-weight);
+    font-family: var(--o3-type-detail-font-family);
+    font-size: var(--o3-type-detail-font-size);
+    text-decoration: none;
+    transition: text-decoration 0.2s ease;
   }
-}
 
-@media (hover: hover) and (pointer: fine) {
   .o-header__subnav-dropdown-title,
   .o-header__subnav-dropdown-close {
     display: none;
   }
 }
+
+@media (hover: none) {
+  [data-o-header-subnav-dropdown-parent] {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /*
+  * iOS: fix clipping of fixed-position dropdown inside horizontally scrollable subnav.
+  * This will cause the subnav items to spill out horitontally so the override is
+  * limited to iOS to prevent android widening the layout when items overflow.
+  */
+  @supports (-webkit-touch-callout: none) {
+    .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true'])
+      .o-header__subnav-wrap-outside,
+    .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true'])
+      .o-header__subnav-wrap-inside {
+      overflow: visible;
+    }
+  }
+}