From 71fe70bd1fd0de68e6831610856d6af845a2d808 Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Fri, 14 Jun 2024 12:23:55 +0200
Subject: [PATCH 01/12] CON-3426: design changes on ask button, edition
 switcher and subscribe button

---
 .../__snapshots__/Drawer.spec.tsx.snap        | 156 ++++++++++--------
 .../__snapshots__/MainHeader.spec.tsx.snap    |  26 +--
 .../__snapshots__/StickyHeader.spec.tsx.snap  |  26 +--
 .../src/__test__/output/drawer.spec.tsx       |   2 +-
 .../src/components/ask-ft/askFtButton.tsx     |  19 ++-
 .../components/drawer/additionalPartials.tsx  |  25 ++-
 .../components/drawer/topLevelPartials.tsx    |  37 ++---
 packages/dotcom-ui-header/src/header.scss     |  31 +++-
 8 files changed, 189 insertions(+), 133 deletions(-)

diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
index 6fd337869..6dd8c23b1 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
@@ -42,23 +42,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
           Financial Times
         </span>
       </a>
-      <p
-        className="o-header__drawer-current-edition"
-      >
-        UK Edition
-      </p>
-    </div>
-    <div
-      className="o-header__drawer-actions"
-    >
-      <a
-        className="o-header__drawer-button"
-        data-trackable="subscribe-button"
-        href="#"
-        role="button"
-      >
-        Subscribe for full access
-      </a>
     </div>
     <div
       className="o-header__drawer-search"
@@ -107,19 +90,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
             Search
           </span>
         </button>
-        <a
-          className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
-          data-trackable="ask-ft-button-drawer"
-          href="https://ask.ft.com"
-          id="ask-ft-button-drawer"
-          title="ASK FT"
-        >
-          <span
-            className="ft-header__ask-ft-button-label"
-          >
-            Ask FT
-          </span>
-        </a>
       </form>
     </div>
     <nav
@@ -130,9 +100,20 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
         className="o-header__drawer-menu-list"
       >
         <li
-          className="o-header__drawer-menu-item"
+          className="o-header__drawer-menu-item edition-switcher"
           data-trackable="edition-switcher"
         >
+          <span
+            className="current-edition"
+          >
+            UK
+             Edition
+          </span>
+          <span
+            className="divider"
+          >
+            |
+          </span>
           <a
             className="o-header__drawer-menu-link"
             data-trackable="international"
@@ -145,6 +126,35 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
         </li>
       </ul>
     </nav>
+    <div
+      className="o-header__drawer-actions"
+    >
+      <a
+        className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
+        data-trackable="ask-ft-button-drawer"
+        href="https://ask.ft.com"
+        id="ask-ft-button-drawer"
+        title="ASK FT"
+      >
+        <span
+          className="ft-header__ask-ft-button-label"
+        >
+          Ask FT
+        </span>
+      </a>
+    </div>
+    <div
+      className="o-header__drawer-actions"
+    >
+      <a
+        className="o-header__drawer-button"
+        data-trackable="subscribe-button"
+        href="#"
+        role="button"
+      >
+        Subscribe for full access
+      </a>
+    </div>
     <nav
       className="o-header__drawer-menu o-header__drawer-menu--primary"
     >
@@ -1419,23 +1429,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
           Financial Times
         </span>
       </a>
-      <p
-        className="o-header__drawer-current-edition"
-      >
-        UK Edition
-      </p>
-    </div>
-    <div
-      className="o-header__drawer-actions"
-    >
-      <a
-        className="o-header__drawer-button"
-        data-trackable="subscribe-button"
-        href="#"
-        role="button"
-      >
-        Subscribe for full access
-      </a>
     </div>
     <div
       className="o-header__drawer-search"
@@ -1494,9 +1487,20 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
         className="o-header__drawer-menu-list"
       >
         <li
-          className="o-header__drawer-menu-item"
+          className="o-header__drawer-menu-item edition-switcher"
           data-trackable="edition-switcher"
         >
+          <span
+            className="current-edition"
+          >
+            UK
+             Edition
+          </span>
+          <span
+            className="divider"
+          >
+            |
+          </span>
           <a
             className="o-header__drawer-menu-link"
             data-trackable="international"
@@ -1509,6 +1513,18 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
         </li>
       </ul>
     </nav>
+    <div
+      className="o-header__drawer-actions"
+    >
+      <a
+        className="o-header__drawer-button"
+        data-trackable="subscribe-button"
+        href="#"
+        role="button"
+      >
+        Subscribe for full access
+      </a>
+    </div>
     <nav
       className="o-header__drawer-menu o-header__drawer-menu--primary"
     >
@@ -2783,23 +2799,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
           Financial Times
         </span>
       </a>
-      <p
-        className="o-header__drawer-current-edition"
-      >
-        UK Edition
-      </p>
-    </div>
-    <div
-      className="o-header__drawer-actions"
-    >
-      <a
-        className="o-header__drawer-button"
-        data-trackable="subscribe-button"
-        href="#"
-        role="button"
-      >
-        Subscribe for full access
-      </a>
     </div>
     <div
       className="o-header__drawer-search"
@@ -2858,9 +2857,20 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
         className="o-header__drawer-menu-list"
       >
         <li
-          className="o-header__drawer-menu-item"
+          className="o-header__drawer-menu-item edition-switcher"
           data-trackable="edition-switcher"
         >
+          <span
+            className="current-edition"
+          >
+            UK
+             Edition
+          </span>
+          <span
+            className="divider"
+          >
+            |
+          </span>
           <a
             className="o-header__drawer-menu-link"
             data-trackable="international"
@@ -2873,6 +2883,18 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
         </li>
       </ul>
     </nav>
+    <div
+      className="o-header__drawer-actions"
+    >
+      <a
+        className="o-header__drawer-button"
+        data-trackable="subscribe-button"
+        href="#"
+        role="button"
+      >
+        Subscribe for full access
+      </a>
+    </div>
     <nav
       className="o-header__drawer-menu o-header__drawer-menu--primary"
     >
diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
index 4351f2738..e60a38b6c 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
@@ -47,19 +47,23 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
               Open search bar
             </span>
           </a>
-          <a
-            className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
-            data-trackable="ask-ft-button-header"
-            href="https://ask.ft.com"
-            id="ask-ft-button-header"
-            title="ASK FT"
+          <div
+            className="o-header__drawer-actions"
           >
-            <span
-              className="ft-header__ask-ft-button-label"
+            <a
+              className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
+              data-trackable="ask-ft-button-header"
+              href="https://ask.ft.com"
+              id="ask-ft-button-header"
+              title="ASK FT"
             >
-              Ask FT
-            </span>
-          </a>
+              <span
+                className="ft-header__ask-ft-button-label"
+              >
+                Ask FT
+              </span>
+            </a>
+          </div>
         </div>
         <div
           className="o-header__top-column o-header__top-column--center"
diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
index e7e8e6a21..a26001d01 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
@@ -46,19 +46,23 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
               Search
             </span>
           </a>
-          <a
-            className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
-            data-trackable="ask-ft-button-sticky"
-            href="https://ask.ft.com"
-            id="ask-ft-button-sticky"
-            title="ASK FT"
+          <div
+            className="o-header__drawer-actions"
           >
-            <span
-              className="ft-header__ask-ft-button-label"
+            <a
+              className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
+              data-trackable="ask-ft-button-sticky"
+              href="https://ask.ft.com"
+              id="ask-ft-button-sticky"
+              title="ASK FT"
             >
-              Ask FT
-            </span>
-          </a>
+              <span
+                className="ft-header__ask-ft-button-label"
+              >
+                Ask FT
+              </span>
+            </a>
+          </div>
         </div>
         <div
           className="o-header__top-column o-header__top-column--center"
diff --git a/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx b/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx
index 0d964b922..1ad733f1e 100644
--- a/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx
+++ b/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx
@@ -28,7 +28,7 @@ describe('dotcom-ui-header/src/components/drawer', () => {
     it('renders the current edition text', () => {
       const { container } = render(<Subject {...fixture} />)
 
-      expect(container.getElementsByClassName('o-header__drawer-current-edition')[0].innerHTML).toContain(
+      expect(container.getElementsByClassName('current-edition')[0].innerHTML).toContain(
         'UK Edition'
       )
     })
diff --git a/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx b/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx
index f1e49f4df..55b271f4f 100644
--- a/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx
+++ b/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx
@@ -7,13 +7,14 @@ export interface AskFtButtonProps {
 }
 
 export const AskFtButton = ({ id, className, dataTrackable }: AskFtButtonProps) => (
-  <a
-    id={id}
-    className={`ft-header__ask-ft-button ${className}`}
-    data-trackable={dataTrackable}
-    href="https://ask.ft.com"
-    title="ASK FT"
-  >
-    <span className="ft-header__ask-ft-button-label">Ask FT</span>
-  </a>
+  <div className="o-header__drawer-actions">
+    <a
+      id={id}
+      className={`ft-header__ask-ft-button ${className}`}
+      data-trackable={dataTrackable}
+      href="https://ask.ft.com"
+      title="ASK FT">
+      <span className="ft-header__ask-ft-button-label">Ask FT</span>
+    </a>
+  </div>
 )
diff --git a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
index 81d1147b8..d2138a8c6 100644
--- a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
@@ -16,23 +16,20 @@ export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) =>
           className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`}
           href={item.url ?? undefined}
           {...ariaSelected(item)}
-          data-trackable={item.label}
-        >
+          data-trackable={item.label}>
           {item.label}
         </a>
         <button
           className={`o-header__drawer-menu-toggle o-header__drawer-menu-toggle--${selected}`}
           aria-controls={`o-header-drawer-child-${idSuffix}`}
-          data-trackable={`sub-level-toggle | ${item.label}`}
-        >
+          data-trackable={`sub-level-toggle | ${item.label}`}>
           {`Show more ${item.label}`}
         </button>
       </div>
       <ul
         className="o-header__drawer-menu-list o-header__drawer-menu-list--child"
         id={`o-header-drawer-child-${idSuffix}`}
-        data-trackable="sub-level"
-      >
+        data-trackable="sub-level">
         {(item.submenu?.items as TNavMenuItem[]).map((item) => {
           const selected = item.selected ? 'selected' : 'unselected'
           return (
@@ -41,8 +38,7 @@ export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) =>
                 className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`}
                 href={item.url ?? undefined}
                 data-trackable={item.label}
-                {...ariaSelected(item)}
-              >
+                {...ariaSelected(item)}>
                 {item.label}
               </a>
             </li>
@@ -60,8 +56,7 @@ export const DrawerSingleItem = (item: TNavMenuItem) => {
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`}
       href={item.url ?? undefined}
       data-trackable={item.label}
-      {...ariaSelected(item)}
-    >
+      {...ariaSelected(item)}>
       {item.label}
     </a>
   )
@@ -74,8 +69,7 @@ export const DrawerSpecialItem = (item: TNavMenuItem) => {
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`}
       href={item.url ?? undefined}
       data-trackable={item.label}
-      {...ariaSelected(item)}
-    >
+      {...ariaSelected(item)}>
       {item.label}
     </a>
   )
@@ -86,7 +80,12 @@ export const EditionsSwitcher = (editions: TNavEditions) => (
     {editions.others.map(({ id, name, url }) => {
       const href = `${url}?edition=${id}`
       return (
-        <li key={id} className="o-header__drawer-menu-item" data-trackable="edition-switcher">
+        <li
+          key={id}
+          className="o-header__drawer-menu-item edition-switcher"
+          data-trackable="edition-switcher">
+          <span className="current-edition">{editions.current.name} Edition</span>
+          <span className="divider">|</span>
           <a className="o-header__drawer-menu-link" href={href} data-trackable={id}>
             Switch to {name} Edition
           </a>
diff --git a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
index f04720741..69e7b0e44 100644
--- a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
@@ -7,7 +7,7 @@ import {
   SubscribeButton
 } from './additionalPartials'
 import { THeaderProps } from '../../interfaces'
-import { TNavMenuItem, TNavMenu, TNavEditions } from '@financial-times/dotcom-types-navigation'
+import { TNavMenuItem, TNavMenu } from '@financial-times/dotcom-types-navigation'
 import { AskFtButton } from '../ask-ft/askFtButton'
 
 const IncludeDrawer = (props) => <Drawer {...props} />
@@ -28,15 +28,22 @@ const Drawer = (props: THeaderProps) => {
       data-o-header-drawer
       data-o-header-drawer--no-js
       data-trackable="drawer"
-      data-trackable-terminate
-    >
+      data-trackable-terminate>
       <div className="o-header__drawer-inner">
-        <DrawerTools {...editions} />
-        {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
-        <Search {...props} />
+        <DrawerTools />
+        <Search />
+
         <nav className="o-header__drawer-menu" aria-label="Edition switcher">
           {editions && <EditionsSwitcher {...editions} />}
         </nav>
+        {props.showAskButton && (
+          <AskFtButton
+            className="ft-header__drawer-ask-ft-button"
+            id="ask-ft-button-drawer"
+            dataTrackable="ask-ft-button-drawer"
+          />
+        )}
+        {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
         <nav className="o-header__drawer-menu o-header__drawer-menu--primary">
           {primary ? <SectionPrimary {...primary} /> : null}
           {secondary ? <SectionSecondary {...secondary} /> : null}
@@ -48,25 +55,23 @@ const Drawer = (props: THeaderProps) => {
   )
 }
 
-const DrawerTools = (props: TNavEditions) => (
+const DrawerTools = () => (
   <div className="o-header__drawer-tools">
     <button
       type="button"
       className="o-header__drawer-tools-close"
       title="Close side navigation menu"
       aria-controls="o-header-drawer"
-      data-trackable="close"
-    >
+      data-trackable="close">
       <span className="o-header__visually-hidden">Close side navigation menu</span>
     </button>
     <a className="o-header__drawer-tools-logo" href="/" data-trackable="logo">
       <span className="o-header__visually-hidden">Financial Times</span>
     </a>
-    {props.current && <p className="o-header__drawer-current-edition">{`${props.current.name} Edition`}</p>}
   </div>
 )
 
-const Search = (props: Pick<THeaderProps, 'showAskButton'>) => (
+const Search = () => (
   <div className="o-header__drawer-search">
     <form
       className="o-header__drawer-search-form"
@@ -75,8 +80,7 @@ const Search = (props: Pick<THeaderProps, 'showAskButton'>) => (
       aria-label="Site search"
       data-n-topic-search
       data-n-topic-search-categories="concepts,equities"
-      data-n-topic-search-view-all
-    >
+      data-n-topic-search-view-all>
       <label className="o-header__visually-hidden" htmlFor="o-header-drawer-search-term">
         Search the <abbr title="Financial Times">FT</abbr>
       </label>
@@ -96,13 +100,6 @@ const Search = (props: Pick<THeaderProps, 'showAskButton'>) => (
       <button className="o-header__drawer-search-submit" type="submit" data-trackable="search-submit">
         <span className="o-header__visually-hidden">Search</span>
       </button>
-      {props.showAskButton && (
-        <AskFtButton
-          className="ft-header__drawer-ask-ft-button"
-          id="ask-ft-button-drawer"
-          dataTrackable="ask-ft-button-drawer"
-        />
-      )}
     </form>
   </div>
 )
diff --git a/packages/dotcom-ui-header/src/header.scss b/packages/dotcom-ui-header/src/header.scss
index 212461c0a..2c968c123 100644
--- a/packages/dotcom-ui-header/src/header.scss
+++ b/packages/dotcom-ui-header/src/header.scss
@@ -67,5 +67,34 @@
 }
 
 .ft-header__drawer-ask-ft-button {
-  margin-left: 16px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  text-align: center;
+
+}
+
+.edition-switcher {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  padding-left: 16px;
+  font-family: MetricWeb;
+
+  .o-header__drawer-menu-link {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    font-size: 16px;
+    font-family: MetricWeb;
+    padding-left: 8px;
+    text-decoration: underline;
+    color: var(--Black-Tints-Black-60, #66605C);
+  }
+
+  .current-edition {
+    font-weight: 500;
+    padding-right: 8px;
+    color: var(--Black-Tints-Black-60, #66605C);
+  }
 }

From 0670467eebafd9ecbde91bf16687e0c5f3ccd45d Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Fri, 14 Jun 2024 13:09:29 +0200
Subject: [PATCH 02/12] CON-3426: update integration tests

---
 examples/kitchen-sink/__test__/integration.test.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/kitchen-sink/__test__/integration.test.js b/examples/kitchen-sink/__test__/integration.test.js
index 1ff413a18..05c324718 100644
--- a/examples/kitchen-sink/__test__/integration.test.js
+++ b/examples/kitchen-sink/__test__/integration.test.js
@@ -1,5 +1,6 @@
 const app = require('../server/app')
 const request = require('supertest')
+const React = require("react");
 
 describe('examples/kitchen-sink/integration', () => {
   let response
@@ -47,7 +48,7 @@ describe('examples/kitchen-sink/integration', () => {
   })
 
   it('renders edition with current edition selected', () => {
-    expect(response.text).toContain('<p class="o-header__drawer-current-edition">International Edition</p>')
+    expect(response.text).toContain('<span class="current-edition">International Edition</span>')
   })
 
   it('renders app context data as embedded JSON', () => {

From 376069bc400c4860ce89a837be2f79b0d0c8c827 Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 17 Jun 2024 10:19:20 +0200
Subject: [PATCH 03/12] CON-3426: change not required styles and add
 aria-hidden

---
 examples/kitchen-sink/__test__/integration.test.js           | 1 -
 .../src/components/drawer/additionalPartials.tsx             | 2 +-
 packages/dotcom-ui-header/src/header.scss                    | 5 ++---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/examples/kitchen-sink/__test__/integration.test.js b/examples/kitchen-sink/__test__/integration.test.js
index 05c324718..0ee544072 100644
--- a/examples/kitchen-sink/__test__/integration.test.js
+++ b/examples/kitchen-sink/__test__/integration.test.js
@@ -1,6 +1,5 @@
 const app = require('../server/app')
 const request = require('supertest')
-const React = require("react");
 
 describe('examples/kitchen-sink/integration', () => {
   let response
diff --git a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
index d2138a8c6..12910110c 100644
--- a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
@@ -85,7 +85,7 @@ export const EditionsSwitcher = (editions: TNavEditions) => (
           className="o-header__drawer-menu-item edition-switcher"
           data-trackable="edition-switcher">
           <span className="current-edition">{editions.current.name} Edition</span>
-          <span className="divider">|</span>
+          <span aria-hidden="true">|</span>
           <a className="o-header__drawer-menu-link" href={href} data-trackable={id}>
             Switch to {name} Edition
           </a>
diff --git a/packages/dotcom-ui-header/src/header.scss b/packages/dotcom-ui-header/src/header.scss
index 2c968c123..91db45eb4 100644
--- a/packages/dotcom-ui-header/src/header.scss
+++ b/packages/dotcom-ui-header/src/header.scss
@@ -80,7 +80,7 @@
   align-items: center;
   font-size: 16px;
   padding-left: 16px;
-  font-family: MetricWeb;
+  color: var(--Black-Tints-Black-60, #66605C);
 
   .o-header__drawer-menu-link {
     padding-top: 6px;
@@ -89,12 +89,11 @@
     font-family: MetricWeb;
     padding-left: 8px;
     text-decoration: underline;
-    color: var(--Black-Tints-Black-60, #66605C);
+
   }
 
   .current-edition {
     font-weight: 500;
     padding-right: 8px;
-    color: var(--Black-Tints-Black-60, #66605C);
   }
 }

From a6ec661a17d67f0148c0b1ab3a316923e6ceff17 Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 17 Jun 2024 10:23:34 +0200
Subject: [PATCH 04/12] CON-3426: update snapshot

---
 .../__test__/components/__snapshots__/Drawer.spec.tsx.snap  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
index 6dd8c23b1..15c467c96 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
@@ -110,7 +110,7 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
              Edition
           </span>
           <span
-            className="divider"
+            aria-hidden="true"
           >
             |
           </span>
@@ -1497,7 +1497,7 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
              Edition
           </span>
           <span
-            className="divider"
+            aria-hidden="true"
           >
             |
           </span>
@@ -2867,7 +2867,7 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
              Edition
           </span>
           <span
-            className="divider"
+            aria-hidden="true"
           >
             |
           </span>

From 14fdd18c4b530c01502e1fde06c0e0f0043ffe59 Mon Sep 17 00:00:00 2001
From: danieleruiz <98393608+danieleruiz@users.noreply.github.com>
Date: Tue, 18 Jun 2024 19:01:56 +0200
Subject: [PATCH 05/12] Update packages/dotcom-ui-header/src/header.scss

Co-authored-by: Artem Metelskyi <artem.metelskyi@ft.com>
---
 packages/dotcom-ui-header/src/header.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dotcom-ui-header/src/header.scss b/packages/dotcom-ui-header/src/header.scss
index 91db45eb4..881929525 100644
--- a/packages/dotcom-ui-header/src/header.scss
+++ b/packages/dotcom-ui-header/src/header.scss
@@ -86,7 +86,6 @@
     padding-top: 6px;
     padding-bottom: 6px;
     font-size: 16px;
-    font-family: MetricWeb;
     padding-left: 8px;
     text-decoration: underline;
 

From f2d8d39d09ae8debf55035a14662cc3410678dee Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 8 Jul 2024 10:39:52 +0200
Subject: [PATCH 06/12] CON-3426: update styles using new version of o-header,
 update test and snapshots

---
 package-lock.json                             |  55 ++-
 packages/dotcom-ui-header/package.json        |   4 +-
 .../__snapshots__/Drawer.spec.tsx.snap        | 381 +++++++++---------
 .../__snapshots__/MainHeader.spec.tsx.snap    | 340 +++++++++-------
 .../__snapshots__/StickyHeader.spec.tsx.snap  | 255 +++++++-----
 .../src/__test__/output/drawer.spec.tsx       |   6 +-
 .../components/drawer/additionalPartials.tsx  |  34 +-
 .../components/drawer/topLevelPartials.tsx    |  52 +--
 .../src/components/search/partials.tsx        |  60 +--
 packages/dotcom-ui-header/src/header.scss     |  22 -
 packages/dotcom-ui-header/styles.scss         |   1 +
 11 files changed, 661 insertions(+), 549 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 040254e29..e2943d007 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2667,6 +2667,33 @@
         "@financial-times/o-viewport": "^5.0.0"
       }
     },
+    "node_modules/@financial-times/o-forms": {
+      "version": "9.12.1",
+      "resolved": "https://registry.npmjs.org/@financial-times/o-forms/-/o-forms-9.12.1.tgz",
+      "integrity": "sha512-qnlLZYwdysDt7HNRZjy890gQZ+bWRBAAIGra/qm5MjXO2D23R1+3L+WUZLQ62Xo5kEmp0k2e2wjoj2oANNLXFg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/lodash.uniqueid": "^4.0.7",
+        "lodash.uniqueid": "^4.0.1"
+      },
+      "engines": {
+        "npm": ">7"
+      },
+      "peerDependencies": {
+        "@financial-times/math": "^1.0.0",
+        "@financial-times/o-brand": "^4.1.0",
+        "@financial-times/o-buttons": "^7.2.0",
+        "@financial-times/o-colors": "^6.5.0",
+        "@financial-times/o-grid": "^6.0.0",
+        "@financial-times/o-icons": "^7.0.0",
+        "@financial-times/o-loading": "^5.0.0",
+        "@financial-times/o-normalise": "^3.3.0",
+        "@financial-times/o-spacing": "^3.0.0",
+        "@financial-times/o-typography": "^7.4.1",
+        "@financial-times/o-utils": "^2.2.0"
+      }
+    },
     "node_modules/@financial-times/o-grid": {
       "version": "6.1.8",
       "resolved": "https://registry.npmjs.org/@financial-times/o-grid/-/o-grid-6.1.8.tgz",
@@ -2681,9 +2708,9 @@
       }
     },
     "node_modules/@financial-times/o-header": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@financial-times/o-header/-/o-header-12.0.0.tgz",
-      "integrity": "sha512-FRYJlaJvmJukO1yH1KnNETxT3RK5l+4lKUXtzvwT2N5Qr7PfqvtFKbALjlFZb35EfaA45bSVE9BOZF3DwazO3Q==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@financial-times/o-header/-/o-header-13.0.0.tgz",
+      "integrity": "sha512-z+DhtvGNxj5X2lZXIzXdZfE3LKc6pJNr3SBfWdyF/yCaCR/ynG+VKCUhD/nAzQ0yOA1PUUMyGcZ4tnb6TLhM1Q==",
       "dev": true,
       "engines": {
         "npm": ">7"
@@ -2693,6 +2720,7 @@
         "@financial-times/o-brand": "^4.1.0",
         "@financial-times/o-buttons": "^7.8.0",
         "@financial-times/o-colors": "^6.5.0",
+        "@financial-times/o-forms": "^9.12.1",
         "@financial-times/o-grid": "^6.1.1",
         "@financial-times/o-icons": "^7.0.1",
         "@financial-times/o-normalise": "^3.3.0",
@@ -7907,6 +7935,16 @@
       "integrity": "sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==",
       "dev": true
     },
+    "node_modules/@types/lodash.uniqueid": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.uniqueid/-/lodash.uniqueid-4.0.9.tgz",
+      "integrity": "sha512-SEzkJBS8t+tqAUnSmyqbuWqxKU+Z/Xu2cgPtD+Ik0l+M7L2q7So9VoN2rQ8H0mmL87lJ00ykxal8oB54QRet6g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.14",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.14.tgz",
@@ -22159,6 +22197,13 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "node_modules/lodash.uniqueid": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz",
+      "integrity": "sha512-GQQWaIeGlL6DIIr06kj1j6sSmBxyNMwI8kaX9aKpHR/XsMTiaXDVPNPAkiboOTK9OJpTJF/dXT3xYoFQnj386Q==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -34683,7 +34728,7 @@
       },
       "devDependencies": {
         "@financial-times/logo-images": "^1.10.1",
-        "@financial-times/o-header": "^12.0.0",
+        "@financial-times/o-header": "^13.0.0",
         "@svgr/core": "^5.0.0",
         "camelcase": "^6.0.0",
         "check-engine": "^1.10.1"
@@ -34694,7 +34739,7 @@
       },
       "peerDependencies": {
         "@financial-times/logo-images": "^1.10.1",
-        "@financial-times/o-header": "^12.0.0",
+        "@financial-times/o-header": "^13.0.0",
         "n-ui-foundations": "^9.0.0 || ^10.0.0",
         "react": "17.x || 18.x",
         "react-dom": "17.x || 18.x"
diff --git a/packages/dotcom-ui-header/package.json b/packages/dotcom-ui-header/package.json
index ad544a55d..6eba5034c 100644
--- a/packages/dotcom-ui-header/package.json
+++ b/packages/dotcom-ui-header/package.json
@@ -30,10 +30,10 @@
     "@svgr/core": "^5.0.0",
     "camelcase": "^6.0.0",
     "check-engine": "^1.10.1",
-    "@financial-times/o-header": "^12.0.0"
+    "@financial-times/o-header": "^13.0.0"
   },
   "peerDependencies": {
-    "@financial-times/o-header": "^12.0.0",
+    "@financial-times/o-header": "^13.0.0",
     "@financial-times/logo-images": "^1.10.1",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",
diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
index 15c467c96..287e130ed 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
@@ -42,6 +42,30 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
           Financial Times
         </span>
       </a>
+      <nav
+        aria-label="Edition switcher"
+        className="o-header__drawer-menu o-header__drawer-edition-switcher"
+      >
+        <span
+          className="o-header__drawer-menu-item"
+        >
+          Edition:
+        </span>
+        <span
+          className="o-header__drawer-menu-item o-header__drawer-current-edition"
+        >
+          UK
+        </span>
+        <div
+          className="o-header__drawer-divider"
+        />
+        <a
+          className="o-header__drawer-menu-link"
+          href="#?edition=international"
+        >
+          International
+        </a>
+      </nav>
     </div>
     <div
       className="o-header__drawer-search"
@@ -56,76 +80,53 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-forms-field o-forms-field--optional"
           htmlFor="o-header-drawer-search-term"
-        >
-          Search the 
-          <abbr
-            title="Financial Times"
-          >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__drawer-search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-drawer-search-term"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__drawer-search-submit"
-          data-trackable="search-submit"
-          type="submit"
         >
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-title o-header__visually-hidden"
           >
-            Search
-          </span>
-        </button>
-      </form>
-    </div>
-    <nav
-      aria-label="Edition switcher"
-      className="o-header__drawer-menu"
-    >
-      <ul
-        className="o-header__drawer-menu-list"
-      >
-        <li
-          className="o-header__drawer-menu-item edition-switcher"
-          data-trackable="edition-switcher"
-        >
-          <span
-            className="current-edition"
-          >
-            UK
-             Edition
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
           </span>
           <span
-            aria-hidden="true"
-          >
-            |
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-drawer-search-term"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__drawer-search-submit"
+              data-trackable="search-submit"
+              type="submit"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Search
+              </span>
+            </button>
           </span>
-          <a
-            className="o-header__drawer-menu-link"
-            data-trackable="international"
-            href="#?edition=international"
-          >
-            Switch to 
-            International
-             Edition
-          </a>
-        </li>
-      </ul>
-    </nav>
+        </label>
+      </form>
+    </div>
     <div
       className="o-header__drawer-actions"
     >
@@ -1429,6 +1430,30 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
           Financial Times
         </span>
       </a>
+      <nav
+        aria-label="Edition switcher"
+        className="o-header__drawer-menu o-header__drawer-edition-switcher"
+      >
+        <span
+          className="o-header__drawer-menu-item"
+        >
+          Edition:
+        </span>
+        <span
+          className="o-header__drawer-menu-item o-header__drawer-current-edition"
+        >
+          UK
+        </span>
+        <div
+          className="o-header__drawer-divider"
+        />
+        <a
+          className="o-header__drawer-menu-link"
+          href="#?edition=international"
+        >
+          International
+        </a>
+      </nav>
     </div>
     <div
       className="o-header__drawer-search"
@@ -1443,76 +1468,53 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-forms-field o-forms-field--optional"
           htmlFor="o-header-drawer-search-term"
-        >
-          Search the 
-          <abbr
-            title="Financial Times"
-          >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__drawer-search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-drawer-search-term"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__drawer-search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          <span
-            className="o-header__visually-hidden"
-          >
-            Search
-          </span>
-        </button>
-      </form>
-    </div>
-    <nav
-      aria-label="Edition switcher"
-      className="o-header__drawer-menu"
-    >
-      <ul
-        className="o-header__drawer-menu-list"
-      >
-        <li
-          className="o-header__drawer-menu-item edition-switcher"
-          data-trackable="edition-switcher"
         >
           <span
-            className="current-edition"
+            className="o-forms-title o-header__visually-hidden"
           >
-            UK
-             Edition
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
           </span>
           <span
-            aria-hidden="true"
-          >
-            |
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-drawer-search-term"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__drawer-search-submit"
+              data-trackable="search-submit"
+              type="submit"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Search
+              </span>
+            </button>
           </span>
-          <a
-            className="o-header__drawer-menu-link"
-            data-trackable="international"
-            href="#?edition=international"
-          >
-            Switch to 
-            International
-             Edition
-          </a>
-        </li>
-      </ul>
-    </nav>
+        </label>
+      </form>
+    </div>
     <div
       className="o-header__drawer-actions"
     >
@@ -2799,6 +2801,30 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
           Financial Times
         </span>
       </a>
+      <nav
+        aria-label="Edition switcher"
+        className="o-header__drawer-menu o-header__drawer-edition-switcher"
+      >
+        <span
+          className="o-header__drawer-menu-item"
+        >
+          Edition:
+        </span>
+        <span
+          className="o-header__drawer-menu-item o-header__drawer-current-edition"
+        >
+          UK
+        </span>
+        <div
+          className="o-header__drawer-divider"
+        />
+        <a
+          className="o-header__drawer-menu-link"
+          href="#?edition=international"
+        >
+          International
+        </a>
+      </nav>
     </div>
     <div
       className="o-header__drawer-search"
@@ -2813,76 +2839,53 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-forms-field o-forms-field--optional"
           htmlFor="o-header-drawer-search-term"
-        >
-          Search the 
-          <abbr
-            title="Financial Times"
-          >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__drawer-search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-drawer-search-term"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__drawer-search-submit"
-          data-trackable="search-submit"
-          type="submit"
         >
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-title o-header__visually-hidden"
           >
-            Search
-          </span>
-        </button>
-      </form>
-    </div>
-    <nav
-      aria-label="Edition switcher"
-      className="o-header__drawer-menu"
-    >
-      <ul
-        className="o-header__drawer-menu-list"
-      >
-        <li
-          className="o-header__drawer-menu-item edition-switcher"
-          data-trackable="edition-switcher"
-        >
-          <span
-            className="current-edition"
-          >
-            UK
-             Edition
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
           </span>
           <span
-            aria-hidden="true"
-          >
-            |
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-drawer-search-term"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__drawer-search-submit"
+              data-trackable="search-submit"
+              type="submit"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Search
+              </span>
+            </button>
           </span>
-          <a
-            className="o-header__drawer-menu-link"
-            data-trackable="international"
-            href="#?edition=international"
-          >
-            Switch to 
-            International
-             Edition
-          </a>
-        </li>
-      </ul>
-    </nav>
+        </label>
+      </form>
+    </div>
     <div
       className="o-header__drawer-actions"
     >
diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
index e60a38b6c..457380506 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
@@ -137,49 +137,60 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-header__search-term o-forms-field o-forms-field--optional"
           htmlFor="o-header-search-term-primary"
         >
-          Search the 
-          <abbr
-            title="Financial Times"
+          <span
+            className="o-forms-title o-header__visually-hidden"
           >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-search-term-primary"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          Search
-        </button>
-        <button
-          aria-controls="o-header-search-primary"
-          className="o-header__search-close o--if-js"
-          data-trackable="close"
-          title="Close search bar"
-          type="button"
-        >
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
+          </span>
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
-            Close search bar
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="o-header__search-term"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-search-term-primary"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__search-submit"
+              type="submit"
+            >
+              Search
+            </button>
+            <button
+              aria-controls="o-header-search-primary"
+              className="o-header__search-close o--if-js"
+              data-trackable="close"
+              title="Close search bar"
+              type="button"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Close search bar
+              </span>
+            </button>
           </span>
-        </button>
+        </label>
       </form>
     </div>
   </div>
@@ -1981,49 +1992,60 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-header__search-term o-forms-field o-forms-field--optional"
           htmlFor="o-header-search-term-primary"
         >
-          Search the 
-          <abbr
-            title="Financial Times"
+          <span
+            className="o-forms-title o-header__visually-hidden"
           >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-search-term-primary"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          Search
-        </button>
-        <button
-          aria-controls="o-header-search-primary"
-          className="o-header__search-close o--if-js"
-          data-trackable="close"
-          title="Close search bar"
-          type="button"
-        >
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
+          </span>
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
-            Close search bar
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="o-header__search-term"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-search-term-primary"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__search-submit"
+              type="submit"
+            >
+              Search
+            </button>
+            <button
+              aria-controls="o-header-search-primary"
+              className="o-header__search-close o--if-js"
+              data-trackable="close"
+              title="Close search bar"
+              type="button"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Close search bar
+              </span>
+            </button>
           </span>
-        </button>
+        </label>
       </form>
     </div>
   </div>
@@ -3820,49 +3842,60 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-header__search-term o-forms-field o-forms-field--optional"
           htmlFor="o-header-search-term-primary"
         >
-          Search the 
-          <abbr
-            title="Financial Times"
+          <span
+            className="o-forms-title o-header__visually-hidden"
           >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-search-term-primary"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          Search
-        </button>
-        <button
-          aria-controls="o-header-search-primary"
-          className="o-header__search-close o--if-js"
-          data-trackable="close"
-          title="Close search bar"
-          type="button"
-        >
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
+          </span>
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
-            Close search bar
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="o-header__search-term"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-search-term-primary"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__search-submit"
+              type="submit"
+            >
+              Search
+            </button>
+            <button
+              aria-controls="o-header-search-primary"
+              className="o-header__search-close o--if-js"
+              data-trackable="close"
+              title="Close search bar"
+              type="button"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Close search bar
+              </span>
+            </button>
           </span>
-        </button>
+        </label>
       </form>
     </div>
   </div>
@@ -5664,49 +5697,60 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-header__search-term o-forms-field o-forms-field--optional"
           htmlFor="o-header-search-term-primary"
         >
-          Search the 
-          <abbr
-            title="Financial Times"
+          <span
+            className="o-forms-title o-header__visually-hidden"
           >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-search-term-primary"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          Search
-        </button>
-        <button
-          aria-controls="o-header-search-primary"
-          className="o-header__search-close o--if-js"
-          data-trackable="close"
-          title="Close search bar"
-          type="button"
-        >
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
+          </span>
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
-            Close search bar
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="o-header__search-term"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-search-term-primary"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__search-submit"
+              type="submit"
+            >
+              Search
+            </button>
+            <button
+              aria-controls="o-header-search-primary"
+              className="o-header__search-close o--if-js"
+              data-trackable="close"
+              title="Close search bar"
+              type="button"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Close search bar
+              </span>
+            </button>
           </span>
-        </button>
+        </label>
       </form>
     </div>
   </div>
diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
index a26001d01..047b8c783 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
@@ -272,49 +272,60 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-header__search-term o-forms-field o-forms-field--optional"
           htmlFor="o-header-search-term-sticky"
         >
-          Search the 
-          <abbr
-            title="Financial Times"
+          <span
+            className="o-forms-title o-header__visually-hidden"
           >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-search-term-sticky"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          Search
-        </button>
-        <button
-          aria-controls="o-header-search-sticky"
-          className="o-header__search-close o--if-js"
-          data-trackable="close"
-          title="Close search bar"
-          type="button"
-        >
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
+          </span>
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
-            Close search bar
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="o-header__search-term"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-search-term-sticky"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__search-submit"
+              type="submit"
+            >
+              Search
+            </button>
+            <button
+              aria-controls="o-header-search-sticky"
+              className="o-header__search-close o--if-js"
+              data-trackable="close"
+              title="Close search bar"
+              type="button"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Close search bar
+              </span>
+            </button>
           </span>
-        </button>
+        </label>
       </form>
     </div>
   </div>
@@ -576,49 +587,60 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-header__search-term o-forms-field o-forms-field--optional"
           htmlFor="o-header-search-term-sticky"
         >
-          Search the 
-          <abbr
-            title="Financial Times"
+          <span
+            className="o-forms-title o-header__visually-hidden"
           >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-search-term-sticky"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          Search
-        </button>
-        <button
-          aria-controls="o-header-search-sticky"
-          className="o-header__search-close o--if-js"
-          data-trackable="close"
-          title="Close search bar"
-          type="button"
-        >
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
+          </span>
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
-            Close search bar
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="o-header__search-term"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-search-term-sticky"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__search-submit"
+              type="submit"
+            >
+              Search
+            </button>
+            <button
+              aria-controls="o-header-search-sticky"
+              className="o-header__search-close o--if-js"
+              data-trackable="close"
+              title="Close search bar"
+              type="button"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Close search bar
+              </span>
+            </button>
           </span>
-        </button>
+        </label>
       </form>
     </div>
   </div>
@@ -879,49 +901,60 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
         role="search"
       >
         <label
-          className="o-header__visually-hidden"
+          className="o-header__search-term o-forms-field o-forms-field--optional"
           htmlFor="o-header-search-term-sticky"
         >
-          Search the 
-          <abbr
-            title="Financial Times"
+          <span
+            className="o-forms-title o-header__visually-hidden"
           >
-            FT
-          </abbr>
-        </label>
-        <input
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          className="o-header__search-term"
-          data-n-topic-search-input={true}
-          data-trackable="search-term"
-          id="o-header-search-term-sticky"
-          name="q"
-          placeholder="Search the FT"
-          spellCheck={false}
-          type="text"
-        />
-        <button
-          className="o-header__search-submit"
-          data-trackable="search-submit"
-          type="submit"
-        >
-          Search
-        </button>
-        <button
-          aria-controls="o-header-search-sticky"
-          className="o-header__search-close o--if-js"
-          data-trackable="close"
-          title="Close search bar"
-          type="button"
-        >
+            <span
+              className="o-forms-title__main"
+            >
+              Search the 
+              <abbr
+                title="Financial Times"
+              >
+                FT
+              </abbr>
+            </span>
+          </span>
           <span
-            className="o-header__visually-hidden"
+            className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
-            Close search bar
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="o-header__search-term"
+              data-n-topic-search-input={true}
+              data-trackable="search-term"
+              id="o-header-search-term-sticky"
+              name="q"
+              placeholder="Search for stories, topics or securities"
+              spellCheck={false}
+              type="text"
+            />
+            <button
+              className="o-header__search-submit"
+              type="submit"
+            >
+              Search
+            </button>
+            <button
+              aria-controls="o-header-search-sticky"
+              className="o-header__search-close o--if-js"
+              data-trackable="close"
+              title="Close search bar"
+              type="button"
+            >
+              <span
+                className="o-header__visually-hidden"
+              >
+                Close search bar
+              </span>
+            </button>
           </span>
-        </button>
+        </label>
       </form>
     </div>
   </div>
diff --git a/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx b/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx
index 1ad733f1e..5d0173441 100644
--- a/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx
+++ b/packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx
@@ -28,8 +28,8 @@ describe('dotcom-ui-header/src/components/drawer', () => {
     it('renders the current edition text', () => {
       const { container } = render(<Subject {...fixture} />)
 
-      expect(container.getElementsByClassName('current-edition')[0].innerHTML).toContain(
-        'UK Edition'
+      expect(container.getElementsByClassName('o-header__drawer-current-edition')[0].innerHTML).toContain(
+        'UK'
       )
     })
 
@@ -37,7 +37,7 @@ describe('dotcom-ui-header/src/components/drawer', () => {
       const { container } = render(<Subject {...fixture} />)
 
       const [firstLink] = Array.from(container.getElementsByClassName('o-header__drawer-menu-link'))
-      expect(firstLink.innerHTML).toContain('Switch to International Edition')
+      expect(firstLink.innerHTML).toContain('International')
     })
   })
 
diff --git a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
index 12910110c..b69b105b7 100644
--- a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
@@ -76,24 +76,22 @@ export const DrawerSpecialItem = (item: TNavMenuItem) => {
 }
 
 export const EditionsSwitcher = (editions: TNavEditions) => (
-  <ul className="o-header__drawer-menu-list">
-    {editions.others.map(({ id, name, url }) => {
-      const href = `${url}?edition=${id}`
-      return (
-        <li
-          key={id}
-          className="o-header__drawer-menu-item edition-switcher"
-          data-trackable="edition-switcher">
-          <span className="current-edition">{editions.current.name} Edition</span>
-          <span aria-hidden="true">|</span>
-          <a className="o-header__drawer-menu-link" href={href} data-trackable={id}>
-            Switch to {name} Edition
-          </a>
-        </li>
-      )
-    })}
-  </ul>
-)
+  <nav
+    className="o-header__drawer-menu o-header__drawer-edition-switcher"
+    aria-label="Edition switcher">
+    <span className="o-header__drawer-menu-item">Edition:</span>
+    <span className="o-header__drawer-menu-item o-header__drawer-current-edition">
+      {editions.current?.name}
+    </span>
+    <div className="o-header__drawer-divider"></div>
+    {editions.others?.map(({name, id, url}) => ( // Asegúrate de que `items` sea el nombre correcto de la propiedad del array
+      <a key={id} className="o-header__drawer-menu-link" href={`${url}?edition=${id}`}>
+        {name}
+      </a>
+    ))}
+  </nav>
+);
+
 
 export const SubscribeButton = (action: TNavAction) => (
   <div className="o-header__drawer-actions">
diff --git a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
index 69e7b0e44..7574c6878 100644
--- a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
@@ -7,7 +7,7 @@ import {
   SubscribeButton
 } from './additionalPartials'
 import { THeaderProps } from '../../interfaces'
-import { TNavMenuItem, TNavMenu } from '@financial-times/dotcom-types-navigation'
+import {TNavMenuItem, TNavMenu, TNavEditions} from '@financial-times/dotcom-types-navigation'
 import { AskFtButton } from '../ask-ft/askFtButton'
 
 const IncludeDrawer = (props) => <Drawer {...props} />
@@ -30,12 +30,8 @@ const Drawer = (props: THeaderProps) => {
       data-trackable="drawer"
       data-trackable-terminate>
       <div className="o-header__drawer-inner">
-        <DrawerTools />
+        <DrawerTools {...editions}/>
         <Search />
-
-        <nav className="o-header__drawer-menu" aria-label="Edition switcher">
-          {editions && <EditionsSwitcher {...editions} />}
-        </nav>
         {props.showAskButton && (
           <AskFtButton
             className="ft-header__drawer-ask-ft-button"
@@ -55,7 +51,7 @@ const Drawer = (props: THeaderProps) => {
   )
 }
 
-const DrawerTools = () => (
+const DrawerTools = (editions: TNavEditions) => (
   <div className="o-header__drawer-tools">
     <button
       type="button"
@@ -68,6 +64,7 @@ const DrawerTools = () => (
     <a className="o-header__drawer-tools-logo" href="/" data-trackable="logo">
       <span className="o-header__visually-hidden">Financial Times</span>
     </a>
+    {editions && <EditionsSwitcher {...editions} />}
   </div>
 )
 
@@ -81,25 +78,30 @@ const Search = () => (
       data-n-topic-search
       data-n-topic-search-categories="concepts,equities"
       data-n-topic-search-view-all>
-      <label className="o-header__visually-hidden" htmlFor="o-header-drawer-search-term">
-        Search the <abbr title="Financial Times">FT</abbr>
+      <label htmlFor="o-header-drawer-search-term" className="o-forms-field o-forms-field--optional">
+        <span className="o-forms-title o-header__visually-hidden">
+          <span className="o-forms-title__main">
+            Search the <abbr title="Financial Times">FT</abbr>
+          </span>
+        </span>
+        <span className="o-forms-input o-forms-input--text o-forms-input--suffix">
+          <input
+            id="o-header-drawer-search-term"
+            name="q"
+            type="text"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck={false}
+            data-trackable="search-term"
+            data-n-topic-search-input
+            placeholder="Search for stories, topics or securities"
+          />
+          <button className="o-header__drawer-search-submit" type="submit" data-trackable="search-submit">
+            <span className="o-header__visually-hidden">Search</span>
+          </button>
+        </span>
       </label>
-      <input
-        className="o-header__drawer-search-term"
-        id="o-header-drawer-search-term"
-        name="q"
-        type="text"
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="off"
-        spellCheck={false}
-        placeholder="Search the FT"
-        data-trackable="search-term"
-        data-n-topic-search-input
-      />
-      <button className="o-header__drawer-search-submit" type="submit" data-trackable="search-submit">
-        <span className="o-header__visually-hidden">Search</span>
-      </button>
     </form>
   </div>
 )
diff --git a/packages/dotcom-ui-header/src/components/search/partials.tsx b/packages/dotcom-ui-header/src/components/search/partials.tsx
index 12d5011bf..397927ba7 100644
--- a/packages/dotcom-ui-header/src/components/search/partials.tsx
+++ b/packages/dotcom-ui-header/src/components/search/partials.tsx
@@ -16,33 +16,41 @@ const Search = ({ instance }) => {
           data-n-topic-search
           data-n-topic-search-categories="concepts,equities"
           data-n-topic-search-view-all>
-          <label className="o-header__visually-hidden" htmlFor={`o-header-search-term-${instance}`}>
-            Search the <abbr title="Financial Times">FT</abbr>
+          <label
+            htmlFor={`o-header-search-term-${instance}`}
+            className="o-header__search-term o-forms-field o-forms-field--optional">
+            <span className="o-forms-title o-header__visually-hidden">
+              <span className="o-forms-title__main">
+                Search the <abbr title="Financial Times">FT</abbr>
+              </span>
+            </span>
+            <span className="o-forms-input o-forms-input--text o-forms-input--suffix">
+              <input
+                className="o-header__search-term"
+                id={`o-header-search-term-${instance}`}
+                name="q"
+                type="text"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck={false}
+                data-trackable="search-term"
+                data-n-topic-search-input
+                placeholder="Search for stories, topics or securities"
+              />
+              <button className="o-header__search-submit" type="submit">
+                Search
+              </button>
+              <button
+                className="o-header__search-close o--if-js"
+                type="button"
+                aria-controls={`o-header-search-${instance}`}
+                title="Close search bar"
+                data-trackable="close">
+                <span className="o-header__visually-hidden">Close search bar</span>
+              </button>
+            </span>
           </label>
-          <input
-            className="o-header__search-term"
-            id={`o-header-search-term-${instance}`}
-            name="q"
-            type="text"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck={false}
-            data-trackable="search-term"
-            placeholder="Search the FT"
-            data-n-topic-search-input
-          />
-          <button className="o-header__search-submit" type="submit" data-trackable="search-submit">
-            Search
-          </button>
-          <button
-            className="o-header__search-close o--if-js"
-            type="button"
-            aria-controls={`o-header-search-${instance}`}
-            title="Close search bar"
-            data-trackable="close">
-            <span className="o-header__visually-hidden">Close search bar</span>
-          </button>
         </form>
       </div>
     </div>
diff --git a/packages/dotcom-ui-header/src/header.scss b/packages/dotcom-ui-header/src/header.scss
index 881929525..8f779b40a 100644
--- a/packages/dotcom-ui-header/src/header.scss
+++ b/packages/dotcom-ui-header/src/header.scss
@@ -74,25 +74,3 @@
   text-align: center;
 
 }
-
-.edition-switcher {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  padding-left: 16px;
-  color: var(--Black-Tints-Black-60, #66605C);
-
-  .o-header__drawer-menu-link {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    font-size: 16px;
-    padding-left: 8px;
-    text-decoration: underline;
-
-  }
-
-  .current-edition {
-    font-weight: 500;
-    padding-right: 8px;
-  }
-}
diff --git a/packages/dotcom-ui-header/styles.scss b/packages/dotcom-ui-header/styles.scss
index 122f72334..767953ecf 100644
--- a/packages/dotcom-ui-header/styles.scss
+++ b/packages/dotcom-ui-header/styles.scss
@@ -10,5 +10,6 @@ $system-code: 'page-kit-header' !default;
 
 @import "src/header";
 
+@import "n-topic-search/main";
 @import "n-topic-search/main";
 @include nTopicSearch;

From b2a4ce34af3a78a75ed69198ecd4e61f02f6ec59 Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 8 Jul 2024 10:59:37 +0200
Subject: [PATCH 07/12] CON-3426: update examples tests

---
 examples/ft-ui/__test__/integration.test.js        | 2 +-
 examples/kitchen-sink/__test__/integration.test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/ft-ui/__test__/integration.test.js b/examples/ft-ui/__test__/integration.test.js
index 0f202e550..1444f4e2d 100644
--- a/examples/ft-ui/__test__/integration.test.js
+++ b/examples/ft-ui/__test__/integration.test.js
@@ -61,7 +61,7 @@ describe('examples/ft-ui', () => {
     })
 
     it('renders the drawer menu', async () => {
-      await expect(page).toMatchElement('#o-header-drawer', { text: 'Switch to International Edition' })
+      await expect(page).toMatchElement('#o-header-drawer', { text: 'International' })
       await expect(page).toMatchElement(
         '#o-header-drawer',
         { text: 'Top sections' },
diff --git a/examples/kitchen-sink/__test__/integration.test.js b/examples/kitchen-sink/__test__/integration.test.js
index 0ee544072..130e6429e 100644
--- a/examples/kitchen-sink/__test__/integration.test.js
+++ b/examples/kitchen-sink/__test__/integration.test.js
@@ -47,7 +47,7 @@ describe('examples/kitchen-sink/integration', () => {
   })
 
   it('renders edition with current edition selected', () => {
-    expect(response.text).toContain('<span class="current-edition">International Edition</span>')
+    expect(response.text).toContain('<span class="o-header__drawer-menu-item o-header__drawer-current-edition">International</span>')
   })
 
   it('renders app context data as embedded JSON', () => {

From b1c2071cc353b02d325df69af31179610395d63e Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 8 Jul 2024 12:53:03 +0200
Subject: [PATCH 08/12] CON-3426: remove comment and reformat code

---
 .../src/components/drawer/additionalPartials.tsx              | 2 +-
 .../src/components/drawer/topLevelPartials.tsx                | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
index b69b105b7..0dddba050 100644
--- a/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/additionalPartials.tsx
@@ -84,7 +84,7 @@ export const EditionsSwitcher = (editions: TNavEditions) => (
       {editions.current?.name}
     </span>
     <div className="o-header__drawer-divider"></div>
-    {editions.others?.map(({name, id, url}) => ( // Asegúrate de que `items` sea el nombre correcto de la propiedad del array
+    {editions.others?.map(({name, id, url}) => (
       <a key={id} className="o-header__drawer-menu-link" href={`${url}?edition=${id}`}>
         {name}
       </a>
diff --git a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
index 7574c6878..1bd3b4755 100644
--- a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
@@ -7,7 +7,7 @@ import {
   SubscribeButton
 } from './additionalPartials'
 import { THeaderProps } from '../../interfaces'
-import {TNavMenuItem, TNavMenu, TNavEditions} from '@financial-times/dotcom-types-navigation'
+import { TNavMenuItem, TNavMenu, TNavEditions } from '@financial-times/dotcom-types-navigation'
 import { AskFtButton } from '../ask-ft/askFtButton'
 
 const IncludeDrawer = (props) => <Drawer {...props} />
@@ -30,7 +30,7 @@ const Drawer = (props: THeaderProps) => {
       data-trackable="drawer"
       data-trackable-terminate>
       <div className="o-header__drawer-inner">
-        <DrawerTools {...editions}/>
+        <DrawerTools {...editions} />
         <Search />
         {props.showAskButton && (
           <AskFtButton

From 7c4ea5d57e8605281fc715f212cbac2e9acb3e81 Mon Sep 17 00:00:00 2001
From: danieleruiz <98393608+danieleruiz@users.noreply.github.com>
Date: Mon, 8 Jul 2024 12:54:16 +0200
Subject: [PATCH 09/12] Update packages/dotcom-ui-header/styles.scss

Co-authored-by: Artem Metelskyi <artem.metelskyi@ft.com>
---
 packages/dotcom-ui-header/styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dotcom-ui-header/styles.scss b/packages/dotcom-ui-header/styles.scss
index 767953ecf..122f72334 100644
--- a/packages/dotcom-ui-header/styles.scss
+++ b/packages/dotcom-ui-header/styles.scss
@@ -10,6 +10,5 @@ $system-code: 'page-kit-header' !default;
 
 @import "src/header";
 
-@import "n-topic-search/main";
 @import "n-topic-search/main";
 @include nTopicSearch;

From 2b33a56fd6c6e2f6c136450ed1829d25fbe2b8a0 Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 8 Jul 2024 15:12:08 +0200
Subject: [PATCH 10/12] CON-3426: remove logo element

---
 .../src/components/drawer/topLevelPartials.tsx                 | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
index 1bd3b4755..f31015c70 100644
--- a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
+++ b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
@@ -61,9 +61,6 @@ const DrawerTools = (editions: TNavEditions) => (
       data-trackable="close">
       <span className="o-header__visually-hidden">Close side navigation menu</span>
     </button>
-    <a className="o-header__drawer-tools-logo" href="/" data-trackable="logo">
-      <span className="o-header__visually-hidden">Financial Times</span>
-    </a>
     {editions && <EditionsSwitcher {...editions} />}
   </div>
 )

From 296cbf6e19b6fad7afac7430fceaafe35a19cc78 Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 8 Jul 2024 15:17:02 +0200
Subject: [PATCH 11/12] CON-3426: update snapshot

---
 .../__snapshots__/Drawer.spec.tsx.snap        | 33 -------------------
 1 file changed, 33 deletions(-)

diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
index 287e130ed..f276f8120 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
@@ -31,17 +31,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
           Close side navigation menu
         </span>
       </button>
-      <a
-        className="o-header__drawer-tools-logo"
-        data-trackable="logo"
-        href="/"
-      >
-        <span
-          className="o-header__visually-hidden"
-        >
-          Financial Times
-        </span>
-      </a>
       <nav
         aria-label="Edition switcher"
         className="o-header__drawer-menu o-header__drawer-edition-switcher"
@@ -1419,17 +1408,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
           Close side navigation menu
         </span>
       </button>
-      <a
-        className="o-header__drawer-tools-logo"
-        data-trackable="logo"
-        href="/"
-      >
-        <span
-          className="o-header__visually-hidden"
-        >
-          Financial Times
-        </span>
-      </a>
       <nav
         aria-label="Edition switcher"
         className="o-header__drawer-menu o-header__drawer-edition-switcher"
@@ -2790,17 +2768,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
           Close side navigation menu
         </span>
       </button>
-      <a
-        className="o-header__drawer-tools-logo"
-        data-trackable="logo"
-        href="/"
-      >
-        <span
-          className="o-header__visually-hidden"
-        >
-          Financial Times
-        </span>
-      </a>
       <nav
         aria-label="Edition switcher"
         className="o-header__drawer-menu o-header__drawer-edition-switcher"

From 0e2c980a5a8ecc7fff59d23390de16f07a7d9305 Mon Sep 17 00:00:00 2001
From: daniel <>
Date: Mon, 8 Jul 2024 16:16:28 +0200
Subject: [PATCH 12/12] CON-3426: increase margin for typehead fix

---
 packages/dotcom-ui-header/src/header.scss | 3 +++
 packages/dotcom-ui-header/styles.scss     | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/packages/dotcom-ui-header/src/header.scss b/packages/dotcom-ui-header/src/header.scss
index 8f779b40a..cb51f3f0b 100644
--- a/packages/dotcom-ui-header/src/header.scss
+++ b/packages/dotcom-ui-header/src/header.scss
@@ -17,6 +17,9 @@
 .o-header__drawer {
   @include nUiZIndexFor('drawer');
   display: block;
+  .o-header__drawer-search {
+    margin-bottom: 8px;
+  }
 }
 
 .o-header--sticky {
diff --git a/packages/dotcom-ui-header/styles.scss b/packages/dotcom-ui-header/styles.scss
index 122f72334..ed0892999 100644
--- a/packages/dotcom-ui-header/styles.scss
+++ b/packages/dotcom-ui-header/styles.scss
@@ -12,3 +12,8 @@ $system-code: 'page-kit-header' !default;
 
 @import "n-topic-search/main";
 @include nTopicSearch;
+.n-topic-search {
+  @include oGridRespondTo($from: 'M') {
+    margin: 24px 0 0;
+  }
+}