npm - @financial-times/dotcom-ui-header - Versions diffs - 10.3.2 → 11.0.0 - Mend

@financial-times/dotcom-ui-header 10.3.2 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/browser.js +25 -2
package/dist/node/components/ask-ft/askFtButton.d.ts +2 -2
package/dist/node/components/ask-ft/askFtButton.js +1 -3
package/dist/node/components/drawer/topLevelPartials.js +15 -12
package/dist/node/components/search/partials.js +9 -5
package/dist/node/components/sticky/partials.js +1 -1
package/dist/node/components/top/partials.js +1 -1
package/dist/tsconfig.tsbuildinfo +10 -10
package/package.json +4 -4
package/src/__stories__/story.tsx +3 -6
package/src/__test__/components/TypeaheadIntegration.test.tsx +45 -0
package/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap +20 -25
package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +60 -44
package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +47 -37
package/src/components/ask-ft/askFtButton.tsx +11 -12
package/src/components/drawer/topLevelPartials.tsx +46 -43
package/src/components/search/partials.tsx +14 -13
package/src/components/sticky/partials.tsx +1 -5
package/src/components/top/partials.tsx +1 -5
package/src/header.scss +7 -61
package/styles.scss +4 -7

package/browser.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import Header from '@financial-times/o-header'
-import TopicSearch from 'n-topic-search'
+import TypeAhead from 'n-topic-search'
+import { h, render } from 'preact'
 /**
  * @typedef HeaderOptions
@@ -16,7 +17,29 @@ export const init = (headerOptions = {}) => {
     '.o-header [data-n-topic-search], .o-header__drawer [data-n-topic-search]'
   )
   topicSearchElements.forEach((element) => {
-    new TopicSearch(element, headerOptions)
+    const oheaderContainer = element.parentElement
+    const oheaderContainerParent = oheaderContainer?.parentElement
+    const isDrawer = oheaderContainerParent?.parentElement?.getAttribute('data-o-header-drawer') === 'true'
+    const form = oheaderContainer?.querySelector('form')
+    const input = form?.querySelector('input')
+    const typeaheadContainer = document.createElement('div')
+    typeaheadContainer.id = `suggestions-${input?.id}`
+    typeaheadContainer.className = 'typeahead__main-container'
+    typeaheadContainer.role = 'listbox'
+    if (!form || !input) return
+    if (isDrawer) {
+      const mobileDrawer = oheaderContainerParent?.parentElement
+      element.appendChild(typeaheadContainer)
+      render(<TypeAhead container={mobileDrawer} inputId={input.id} />, typeaheadContainer)
+    } else {
+      form.after(typeaheadContainer)
+      render(<TypeAhead container={oheaderContainerParent} inputId={input.id} />, typeaheadContainer)
+    }
   })
   Header.init(headerOptions.rootElement)

package/dist/node/components/ask-ft/askFtButton.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface AskFtButtonProps {
     id: string;
-    className: string;
+    variant: 'top' | 'drawer';
     dataTrackable: string;
 }
-export declare const AskFtButton: ({ id, className, dataTrackable }: AskFtButtonProps) => React.JSX.Element;
+export declare const AskFtButton: ({ id, variant, dataTrackable }: AskFtButtonProps) => React.JSX.Element;

package/dist/node/components/ask-ft/askFtButton.js CHANGED Viewed

@@ -5,7 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AskFtButton = void 0;
 const react_1 = __importDefault(require("react"));
-const AskFtButton = ({ id, className, dataTrackable }) => (react_1.default.createElement("div", { className: "o-header__drawer-actions" },
-    react_1.default.createElement("a", { id: id, className: `ft-header__ask-ft-button ${className}`, "data-trackable": dataTrackable, href: "https://ask.ft.com", title: "ASK FT" },
-        react_1.default.createElement("span", { className: "ft-header__ask-ft-button-label" }, "Ask FT"))));
+const AskFtButton = ({ id, variant, dataTrackable }) => (react_1.default.createElement("a", { id: id, className: `o-header__ask-ft-button o-header__ask-ft-button--${variant}`, "data-trackable": dataTrackable, href: "https://ask.ft.com", title: "ASK FT" }, "Ask FT"));
 exports.AskFtButton = AskFtButton;

package/dist/node/components/drawer/topLevelPartials.js CHANGED Viewed

@@ -18,7 +18,7 @@ const Drawer = (props) => {
         react_1.default.createElement("div", { className: "o-header__drawer-inner" },
             react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
             react_1.default.createElement(Search, null),
-            props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__drawer-ask-ft-button", id: "ask-ft-button-drawer", dataTrackable: "ask-ft-button-drawer" })),
+            props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { variant: "drawer", dataTrackable: "ask-ft-button-drawer", id: "ask-ft-button-drawer" })),
             !props.userIsSubscribed && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary" },
                 primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
@@ -30,17 +30,20 @@ const DrawerTools = (editions) => (react_1.default.createElement("div", { classN
     react_1.default.createElement("button", { type: "button", className: "o-header__drawer-tools-close", title: "Close side navigation menu", "aria-controls": "o-header-drawer", "data-trackable": "close" },
         react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close side navigation menu")),
     editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))));
-const Search = () => (react_1.default.createElement("div", { className: "o-header__drawer-search" },
-    react_1.default.createElement("form", { className: "o-header__drawer-search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true, "data-n-topic-search-categories": "concepts,equities", "data-n-topic-search-view-all": true },
-        react_1.default.createElement("label", { htmlFor: "o-header-drawer-search-term", className: "o-forms-field o-forms-field--optional" },
-            react_1.default.createElement("span", { className: "o-forms-title o-header__visually-hidden" },
-                react_1.default.createElement("span", { className: "o-forms-title__main" },
-                    "Search the ",
-                    react_1.default.createElement("abbr", { title: "Financial Times" }, "FT"))),
-            react_1.default.createElement("span", { className: "o-forms-input o-forms-input--text o-forms-input--suffix" },
-                react_1.default.createElement("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": true, placeholder: "Search for stories, topics or securities" }),
-                react_1.default.createElement("button", { className: "o-header__drawer-search-submit", type: "submit", "data-trackable": "search-submit" },
-                    react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")))))));
+const Search = () => {
+    const inputId = 'o-header-drawer-search-term';
+    return (react_1.default.createElement("div", { className: "o-header__drawer-search" },
+        react_1.default.createElement("form", { className: "o-header__drawer-search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true },
+            react_1.default.createElement("label", { htmlFor: inputId, className: "o-forms-field o-forms-field--optional" },
+                react_1.default.createElement("span", { className: "o-forms-title o-header__visually-hidden" },
+                    react_1.default.createElement("span", { className: "o-forms-title__main" },
+                        "Search the ",
+                        react_1.default.createElement("abbr", { title: "Financial Times" }, "FT"))),
+                react_1.default.createElement("span", { className: "o-forms-input o-forms-input--text o-forms-input--suffix" },
+                    react_1.default.createElement("input", { id: inputId, name: "q", type: "search", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "data-trackable": "search-term", "data-n-topic-search-input": true, placeholder: "Search for stories, topics or securities", role: "combobox", "aria-controls": `suggestions-${inputId}`, "data-n-topic-search-drawer": "true" }),
+                    react_1.default.createElement("button", { className: "o-header__drawer-search-submit", type: "submit", "data-trackable": "search-submit" },
+                        react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")))))));
+};
 const SectionPrimary = (props) => {
     var _a;
     const sectionId = props.label.toLowerCase().replace(' ', '-');

package/dist/node/components/search/partials.js CHANGED Viewed

@@ -6,18 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Search = void 0;
 const react_1 = __importDefault(require("react"));
 const Search = ({ instance }) => {
+    const inputId = `o-header-search-term-${instance}`;
     return (react_1.default.createElement("div", { id: `o-header-search-${instance}`, className: `o-header__row o-header__search o-header__search--${instance}`, "data-trackable": "header-search", "data-o-header-search": true },
         react_1.default.createElement("div", { className: "o-header__container" },
-            react_1.default.createElement("form", { className: "o-header__search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true, "data-n-topic-search-categories": "concepts,equities", "data-n-topic-search-view-all": true },
-                react_1.default.createElement("label", { htmlFor: `o-header-search-term-${instance}`, className: "o-header__search-term o-forms-field o-forms-field--optional" },
+            react_1.default.createElement("form", { className: "o-header__search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true },
+                react_1.default.createElement("label", { htmlFor: inputId, className: "o-header__search-term o-forms-field o-forms-field--optional" },
                     react_1.default.createElement("span", { className: "o-forms-title o-header__visually-hidden" },
                         react_1.default.createElement("span", { className: "o-forms-title__main" },
                             "Search the ",
                             react_1.default.createElement("abbr", { title: "Financial Times" }, "FT"))),
                     react_1.default.createElement("span", { className: "o-forms-input o-forms-input--text o-forms-input--suffix" },
-                        react_1.default.createElement("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": true, placeholder: "Search for stories, topics or securities" }),
-                        react_1.default.createElement("button", { className: "o-header__search-submit", type: "submit" }, "Search"),
+                        react_1.default.createElement("input", { id: inputId, name: "q", type: "search", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, placeholder: "Search for stories, topics or securities", role: "combobox", "aria-controls": `suggestions-${inputId}` }),
+                        react_1.default.createElement("button", { className: "o-header__search-submit", type: "submit" },
+                            react_1.default.createElement("span", { "aria-hidden": "true", className: "o-header__search-icon" }),
+                            react_1.default.createElement("span", null, "Search")),
                         react_1.default.createElement("button", { className: "o-header__search-close o--if-js", type: "button", "aria-controls": `o-header-search-${instance}`, title: "Close search bar", "data-trackable": "close" },
-                            react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close search bar"))))))));
+                            react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close search bar"),
+                            react_1.default.createElement("span", null, "Close"))))))));
 };
 exports.Search = Search;

package/dist/node/components/sticky/partials.js CHANGED Viewed

@@ -32,7 +32,7 @@ const TopColumnLeftSticky = (props) => {
     return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--left" },
         react_1.default.createElement(DrawerIconSticky, null),
         react_1.default.createElement(SearchIconSticky, null),
-        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", id: "ask-ft-button-sticky", dataTrackable: "ask-ft-button-sticky" }))));
+        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { variant: "top", dataTrackable: "ask-ft-button-sticky", id: "ask-ft-button-sticky" }))));
 };
 exports.TopColumnLeftSticky = TopColumnLeftSticky;
 const TopColumnCenterSticky = (props) => {

package/dist/node/components/top/partials.js CHANGED Viewed

@@ -27,7 +27,7 @@ exports.TopWrapper = TopWrapper;
 const TopColumnLeft = (props) => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--left" },
     react_1.default.createElement(DrawerIcon, null),
     react_1.default.createElement(SearchIcon, null),
-    props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", id: "ask-ft-button-header", dataTrackable: "ask-ft-button-header" }))));
+    props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { variant: "top", dataTrackable: "ask-ft-button-header", id: "ask-ft-button-header" }))));
 exports.TopColumnLeft = TopColumnLeft;
 const TopColumnCenter = () => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--center" },
     react_1.default.createElement("a", { className: "o-header__top-logo", style: { backgroundImage: 'none' }, "data-trackable": "logo", href: "/", title: "Go to Financial Times homepage" },

package/dist/tsconfig.tsbuildinfo CHANGED Viewed

@@ -182,12 +182,12 @@
         "affectsGlobalScope": false
       },
       "../src/components/ask-ft/askFtButton.tsx": {
-        "version": "a827235e62e71862d2899c28707befaca960138bafadc50f71a5feac74294f61",
-        "signature": "478e79eef989a22fe3dc976337d53a5e3ea146b07304c45620b8b91560dd106b",
+        "version": "e64ae88724dad2d4da7b35d7940e1577ebf43abbbae97a865d60ef09b3d1504d",
+        "signature": "dfec79c572502e515a70389181784d0ac90bdb70693e76820b3fdd04bf176ecc",
         "affectsGlobalScope": false
       },
       "../src/components/top/partials.tsx": {
-        "version": "f40214092408dfe8a12e842668caa94faecb31b460d015e34567e5dcc1445307",
+        "version": "6a03f79c6e07e80c005313ff4b918443f15fcf628b685faa727c98c03742e58d",
         "signature": "76906372a1b286f93aa80f146a97782d3fa965ceb5e5314d8ae9da20ac3aa28c",
         "affectsGlobalScope": false
       },
@@ -202,7 +202,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/sticky/partials.tsx": {
-        "version": "77aadd42305d77b0692de540e5ecde571dbcae237489a2631a874f5bbcead2b6",
+        "version": "a1fda4543af3876ab17becf355fb70b9532b2e90ae1584a25122a9552b01d171",
         "signature": "8fbeb8e68c5be0e2f41a60731bb91f6c54327ecca0d18857c3feeaa06e1cd389",
         "affectsGlobalScope": false
       },
@@ -217,12 +217,12 @@
         "affectsGlobalScope": false
       },
       "../src/components/drawer/topLevelPartials.tsx": {
-        "version": "7310d5c055bea7e85677276877bf82cf04d9b472eaf0189c9cae8876ce05c844",
+        "version": "2eb7036c49b2297a7afb7aca1dc20c6f8d5cd5ebbc4e17d811622320012efe4a",
         "signature": "9d1b0a09950f10403acbd59a85db578c3d6d0eec6d4fd6b26deacd7fc69b5bb4",
         "affectsGlobalScope": false
       },
       "../src/components/search/partials.tsx": {
-        "version": "f2a8b056d48b25b6211e0975fef8fa78fd4160caeb89b0afe70a1b8339092181",
+        "version": "360e4452a282c9a415b1dd7621ea107a159d1144a471bf3df6f1c877ec7cf3be",
         "signature": "95cc7b856ca35f4cf26ee51afe536bfedb47e2bf354d9dc0d25e2d57f96d848e",
         "affectsGlobalScope": false
       },
@@ -237,8 +237,8 @@
         "affectsGlobalScope": false
       },
       "../../../node_modules/@babel/types/lib/index.d.ts": {
-        "version": "f713064ca751dc588bc13832137c418cb70cf0446de92ade60ad631071558fca",
-        "signature": "f713064ca751dc588bc13832137c418cb70cf0446de92ade60ad631071558fca",
+        "version": "e74998d5cefc2f29d583c10b99c1478fb810f1e46fbb06535bfb0bbba3c84aa5",
+        "signature": "e74998d5cefc2f29d583c10b99c1478fb810f1e46fbb06535bfb0bbba3c84aa5",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/babel__generator/index.d.ts": {
@@ -247,8 +247,8 @@
         "affectsGlobalScope": false
       },
       "../../../node_modules/@babel/parser/typings/babel-parser.d.ts": {
-        "version": "96c23535f4f9dd15beb767e070559ea672f6a35f103152836a67100605136a96",
-        "signature": "96c23535f4f9dd15beb767e070559ea672f6a35f103152836a67100605136a96",
+        "version": "43d058146b002d075f5d0033a6870321048297f1658eb0db559ba028383803a6",
+        "signature": "43d058146b002d075f5d0033a6870321048297f1658eb0db559ba028383803a6",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/babel__template/index.d.ts": {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "10.3.2",
+  "version": "11.0.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,8 +22,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^10.3.2",
-    "n-topic-search": "^4.0.0"
+    "@financial-times/dotcom-types-navigation": "^11.0.0",
+    "n-topic-search": "^8.0.0"
   },
   "devDependencies": {
     "@financial-times/logo-images": "^1.10.1",
@@ -33,7 +33,7 @@
   },
   "peerDependencies": {
     "@financial-times/logo-images": "^1.10.1",
-    "@financial-times/o-header": "13.0.3",
+    "@financial-times/o-header": "^14.0.1",
     "n-ui-foundations": "^9.0.0 || ^10.0.0",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"

package/src/__stories__/story.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import * as header from '../../browser.js'
+import Header from '@financial-times/o-header'
 import { OnReady } from '../../../../.storybook/components/OnReady'
 import {
   Header as HeaderSimple,
@@ -15,10 +15,7 @@ import '../../styles.scss'
 import './demos.scss'
 const onReadyCallback = () => {
-  // Passing a cors-anywhere hostname to n-topic-search
-  // An 'origin' request header will be set on the subsequent fetch request to next-search-api
-  // This satisfies the api's cors rules allowing a response to be sent and rendered on localhost
-  header.init({ hostName: 'cors-anywhere.herokuapp.com/www.ft.com' })
+  Header.init()
 }
 export default {
@@ -98,7 +95,7 @@ LargeHeaderWithDrawer.args = {
 }
 export const _StickyHeader = (args) => (
-  <OnReady callback={() => header.init()}>
+  <OnReady callback={onReadyCallback}>
     <StickyHeader {...storyData} {...args} />
     <p className="demo-sticky-message demo-sticky-message--scroll">Scroll down</p>
   </OnReady>

package/src/__test__/components/TypeaheadIntegration.test.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import fixture from '../../__stories__/story-data/index'
+import { Drawer, MainHeader } from '../../index'
+const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
+const components = [
+  { name: 'Drawer', Component: Drawer },
+  { name: 'MainHeader', Component: MainHeader }
+]
+describe('page-kit-header and typeahead (n-topic-search) integration', () => {
+  components.forEach(({ name, Component }) => {
+    describe(`${name} component`, () => {
+      it(`should render the Typeahead component with the correct attribute that indicates the input field is inside the ${name.toLowerCase()}`, () => {
+        render(<Component {...propsAnonymous} />)
+        const searchInput = screen.getByRole('combobox')
+        expect(searchInput).toBeInTheDocument()
+        expect(searchInput).toHaveAttribute('type', 'search')
+      })
+      it('should semantically connect the suggestions wrapper by setting aria-controls attribute', () => {
+        render(<Component {...propsAnonymous} />)
+        const searchInput = screen.getByRole('combobox')
+        expect(searchInput).toHaveAttribute('aria-controls', `suggestions-${searchInput.id}`)
+      })
+      if (name === 'Drawer') {
+        it('should indicate that search input belongs inside a drawer', () => {
+          render(<Component {...propsAnonymous} />)
+          const searchInput = screen.getByRole('combobox')
+          expect(searchInput).toHaveAttribute('data-n-topic-search-drawer')
+        })
+      }
+    })
+  })
+})

package/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap CHANGED Viewed

@@ -64,8 +64,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
         aria-label="Site search"
         className="o-header__drawer-search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -90,16 +88,19 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-drawer-search-term"
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
+              data-n-topic-search-drawer="true"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__drawer-search-submit"
@@ -116,23 +117,15 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
         </label>
       </form>
     </div>
-    <div
-      className="o-header__drawer-actions"
+    <a
+      className="o-header__ask-ft-button o-header__ask-ft-button--drawer"
+      data-trackable="ask-ft-button-drawer"
+      href="https://ask.ft.com"
+      id="ask-ft-button-drawer"
+      title="ASK FT"
     >
-      <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>
+      Ask FT
+    </a>
     <div
       className="o-header__drawer-actions"
     >
@@ -1441,8 +1434,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
         aria-label="Site search"
         className="o-header__drawer-search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -1467,16 +1458,19 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-drawer-search-term"
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
+              data-n-topic-search-drawer="true"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__drawer-search-submit"
@@ -2801,8 +2795,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
         aria-label="Site search"
         className="o-header__drawer-search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -2827,16 +2819,19 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-drawer-search-term"
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
+              data-n-topic-search-drawer="true"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__drawer-search-submit"

package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap CHANGED Viewed

@@ -47,23 +47,15 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
               Open search bar
             </span>
           </a>
-          <div
-            className="o-header__drawer-actions"
+          <a
+            className="o-header__ask-ft-button o-header__ask-ft-button--top"
+            data-trackable="ask-ft-button-header"
+            href="https://ask.ft.com"
+            id="ask-ft-button-header"
+            title="ASK FT"
           >
-            <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"
-            >
-              <span
-                className="ft-header__ask-ft-button-label"
-              >
-                Ask FT
-              </span>
-            </a>
-          </div>
+            Ask FT
+          </a>
         </div>
         <div
           className="o-header__top-column o-header__top-column--center"
@@ -132,8 +124,6 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
         aria-label="Site search"
         className="o-header__search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -158,23 +148,28 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-search-term-primary"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__search-submit"
               type="submit"
             >
-              Search
+              <span
+                aria-hidden="true"
+                className="o-header__search-icon"
+              />
+              <span>
+                Search
+              </span>
             </button>
             <button
               aria-controls="o-header-search-primary"
@@ -188,6 +183,9 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
               >
                 Close search bar
               </span>
+              <span>
+                Close
+              </span>
             </button>
           </span>
         </label>
@@ -1987,8 +1985,6 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
         aria-label="Site search"
         className="o-header__search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -2013,23 +2009,28 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-search-term-primary"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__search-submit"
               type="submit"
             >
-              Search
+              <span
+                aria-hidden="true"
+                className="o-header__search-icon"
+              />
+              <span>
+                Search
+              </span>
             </button>
             <button
               aria-controls="o-header-search-primary"
@@ -2043,6 +2044,9 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
               >
                 Close search bar
               </span>
+              <span>
+                Close
+              </span>
             </button>
           </span>
         </label>
@@ -3837,8 +3841,6 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
         aria-label="Site search"
         className="o-header__search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -3863,23 +3865,28 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-search-term-primary"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__search-submit"
               type="submit"
             >
-              Search
+              <span
+                aria-hidden="true"
+                className="o-header__search-icon"
+              />
+              <span>
+                Search
+              </span>
             </button>
             <button
               aria-controls="o-header-search-primary"
@@ -3893,6 +3900,9 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
               >
                 Close search bar
               </span>
+              <span>
+                Close
+              </span>
             </button>
           </span>
         </label>
@@ -5692,8 +5702,6 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
         aria-label="Site search"
         className="o-header__search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -5718,23 +5726,28 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-search-term-primary"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__search-submit"
               type="submit"
             >
-              Search
+              <span
+                aria-hidden="true"
+                className="o-header__search-icon"
+              />
+              <span>
+                Search
+              </span>
             </button>
             <button
               aria-controls="o-header-search-primary"
@@ -5748,6 +5761,9 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
               >
                 Close search bar
               </span>
+              <span>
+                Close
+              </span>
             </button>
           </span>
         </label>

package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap CHANGED Viewed

@@ -46,23 +46,15 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
               Search
             </span>
           </a>
-          <div
-            className="o-header__drawer-actions"
+          <a
+            className="o-header__ask-ft-button o-header__ask-ft-button--top"
+            data-trackable="ask-ft-button-sticky"
+            href="https://ask.ft.com"
+            id="ask-ft-button-sticky"
+            title="ASK FT"
           >
-            <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"
-            >
-              <span
-                className="ft-header__ask-ft-button-label"
-              >
-                Ask FT
-              </span>
-            </a>
-          </div>
+            Ask FT
+          </a>
         </div>
         <div
           className="o-header__top-column o-header__top-column--center"
@@ -267,8 +259,6 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
         aria-label="Site search"
         className="o-header__search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -293,23 +283,28 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-search-term-sticky"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__search-submit"
               type="submit"
             >
-              Search
+              <span
+                aria-hidden="true"
+                className="o-header__search-icon"
+              />
+              <span>
+                Search
+              </span>
             </button>
             <button
               aria-controls="o-header-search-sticky"
@@ -323,6 +318,9 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
               >
                 Close search bar
               </span>
+              <span>
+                Close
+              </span>
             </button>
           </span>
         </label>
@@ -582,8 +580,6 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
         aria-label="Site search"
         className="o-header__search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -608,23 +604,28 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-search-term-sticky"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__search-submit"
               type="submit"
             >
-              Search
+              <span
+                aria-hidden="true"
+                className="o-header__search-icon"
+              />
+              <span>
+                Search
+              </span>
             </button>
             <button
               aria-controls="o-header-search-sticky"
@@ -638,6 +639,9 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
               >
                 Close search bar
               </span>
+              <span>
+                Close
+              </span>
             </button>
           </span>
         </label>
@@ -896,8 +900,6 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
         aria-label="Site search"
         className="o-header__search-form"
         data-n-topic-search={true}
-        data-n-topic-search-categories="concepts,equities"
-        data-n-topic-search-view-all={true}
         role="search"
       >
         <label
@@ -922,23 +924,28 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
             className="o-forms-input o-forms-input--text o-forms-input--suffix"
           >
             <input
+              aria-controls="suggestions-o-header-search-term-sticky"
               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"
+              role="combobox"
               spellCheck={false}
-              type="text"
+              type="search"
             />
             <button
               className="o-header__search-submit"
               type="submit"
             >
-              Search
+              <span
+                aria-hidden="true"
+                className="o-header__search-icon"
+              />
+              <span>
+                Search
+              </span>
             </button>
             <button
               aria-controls="o-header-search-sticky"
@@ -952,6 +959,9 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
               >
                 Close search bar
               </span>
+              <span>
+                Close
+              </span>
             </button>
           </span>
         </label>

package/src/components/ask-ft/askFtButton.tsx CHANGED Viewed

@@ -2,19 +2,18 @@ import React from 'react'
 export interface AskFtButtonProps {
   id: string
-  className: string
+  variant: 'top' | 'drawer'
   dataTrackable: string
 }
-export const AskFtButton = ({ id, className, dataTrackable }: AskFtButtonProps) => (
-  <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>
+export const AskFtButton = ({ id, variant, dataTrackable }: AskFtButtonProps) => (
+  <a
+    id={id}
+    className={`o-header__ask-ft-button o-header__ask-ft-button--${variant}`}
+    data-trackable={dataTrackable}
+    href="https://ask.ft.com"
+    title="ASK FT"
+  >
+    Ask FT
+  </a>
 )

package/src/components/drawer/topLevelPartials.tsx CHANGED Viewed

@@ -28,16 +28,13 @@ 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} />
         <Search />
         {props.showAskButton && (
-          <AskFtButton
-            className="ft-header__drawer-ask-ft-button"
-            id="ask-ft-button-drawer"
-            dataTrackable="ask-ft-button-drawer"
-          />
+          <AskFtButton variant="drawer" dataTrackable="ask-ft-button-drawer" id="ask-ft-button-drawer" />
         )}
         {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
         <nav className="o-header__drawer-menu o-header__drawer-menu--primary">
@@ -58,50 +55,56 @@ const DrawerTools = (editions: TNavEditions) => (
       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>
     {editions && <EditionsSwitcher {...editions} />}
   </div>
 )
-const Search = () => (
-  <div className="o-header__drawer-search">
-    <form
-      className="o-header__drawer-search-form"
-      action="/search"
-      role="search"
-      aria-label="Site search"
-      data-n-topic-search
-      data-n-topic-search-categories="concepts,equities"
-      data-n-topic-search-view-all>
-      <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>
+const Search = () => {
+  const inputId = 'o-header-drawer-search-term'
+  return (
+    <div className="o-header__drawer-search">
+      <form
+        className="o-header__drawer-search-form"
+        action="/search"
+        role="search"
+        aria-label="Site search"
+        data-n-topic-search
+      >
+        <label htmlFor={inputId} 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>
-        <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>
-    </form>
-  </div>
-)
+          <span className="o-forms-input o-forms-input--text o-forms-input--suffix">
+            <input
+              id={inputId}
+              name="q"
+              type="search"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              data-trackable="search-term"
+              data-n-topic-search-input
+              placeholder="Search for stories, topics or securities"
+              role="combobox"
+              aria-controls={`suggestions-${inputId}`}
+              data-n-topic-search-drawer="true"
+            />
+            <button className="o-header__drawer-search-submit" type="submit" data-trackable="search-submit">
+              <span className="o-header__visually-hidden">Search</span>
+            </button>
+          </span>
+        </label>
+      </form>
+    </div>
+  )
+}
 const SectionPrimary = (props: TNavMenuItem) => {
   const sectionId = props.label.toLowerCase().replace(' ', '-')

package/src/components/search/partials.tsx CHANGED Viewed

@@ -1,12 +1,14 @@
 import React from 'react'
 const Search = ({ instance }) => {
+  const inputId = `o-header-search-term-${instance}`
   return (
     <div
       id={`o-header-search-${instance}`}
       className={`o-header__row o-header__search o-header__search--${instance}`}
       data-trackable="header-search"
-      data-o-header-search>
+      data-o-header-search
+    >
       <div className="o-header__container">
         <form
           className="o-header__search-form"
@@ -14,11 +16,8 @@ const Search = ({ instance }) => {
           role="search"
           aria-label="Site search"
           data-n-topic-search
-          data-n-topic-search-categories="concepts,equities"
-          data-n-topic-search-view-all>
-          <label
-            htmlFor={`o-header-search-term-${instance}`}
-            className="o-header__search-term o-forms-field o-forms-field--optional">
+        >
+          <label htmlFor={inputId} 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>
@@ -26,28 +25,30 @@ const Search = ({ instance }) => {
             </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}`}
+                id={inputId}
                 name="q"
-                type="text"
+                type="search"
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck={false}
-                data-trackable="search-term"
-                data-n-topic-search-input
                 placeholder="Search for stories, topics or securities"
+                role="combobox"
+                aria-controls={`suggestions-${inputId}`}
               />
               <button className="o-header__search-submit" type="submit">
-                Search
+                <span aria-hidden="true" className="o-header__search-icon"></span>
+                <span>Search</span>
               </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">
+                data-trackable="close"
+              >
                 <span className="o-header__visually-hidden">Close search bar</span>
+                <span>Close</span>
               </button>
             </span>
           </label>

package/src/components/sticky/partials.tsx CHANGED Viewed

@@ -88,11 +88,7 @@ const TopColumnLeftSticky = (props: Pick<THeaderProps, 'showAskButton'>) => {
       <DrawerIconSticky />
       <SearchIconSticky />
       {props.showAskButton && (
-        <AskFtButton
-          className="ft-header__top-ask-ft-button"
-          id="ask-ft-button-sticky"
-          dataTrackable="ask-ft-button-sticky"
-        />
+        <AskFtButton variant="top" dataTrackable="ask-ft-button-sticky" id="ask-ft-button-sticky" />
       )}
     </div>
   )

package/src/components/top/partials.tsx CHANGED Viewed

@@ -79,11 +79,7 @@ const TopColumnLeft = (props: Pick<THeaderProps, 'showAskButton'>) => (
     <DrawerIcon />
     <SearchIcon />
     {props.showAskButton && (
-      <AskFtButton
-        className="ft-header__top-ask-ft-button"
-        id="ask-ft-button-header"
-        dataTrackable="ask-ft-button-header"
-      />
+      <AskFtButton variant="top" dataTrackable="ask-ft-button-header" id="ask-ft-button-header" />
     )}
   </div>
 )

package/src/header.scss CHANGED Viewed

@@ -9,73 +9,19 @@
   display: block;
 }
-// z-indexes
-.o-header__mega {
-  @include nUiZIndexFor('meganav');
-}
-.o-header__drawer {
-  @include nUiZIndexFor('drawer');
-  display: block;
-  .o-header__drawer-search {
-    margin-bottom: 8px;
-  }
-}
-.o-header--sticky {
-  @include nUiZIndexFor('sticky-header');
-}
 // Search typeahead
 .n-typeahead {
   display: none;
 }
-.o-header__drawer-search-term {
-  width: 100%;
-}
-.o-header__top-wrapper .ft-header__ask-ft-button {
-  padding: 8px;
-}
-.ft-header__ask-ft-button {
-  @include oTypographySans(-1, $weight: 'semibold');
-  color: oColorsByName('ft-grey');
-  background-color: oColorsMix('black', 'paper', 5);
-  border-radius: 4px;
-  padding-right: 8px;
-  text-transform: uppercase;
-  text-decoration: none;
-  white-space: nowrap;
-  &::before {
-    content: '';
-    display: block;
-    @include oIconsContent(
-      $icon-name: 'sparkles',
-      $color: oColorsByName('black'),
-      $size: 32
-    );
-    vertical-align: top;
-  }
-  .ft-header__ask-ft-button-label {
-    display: inline-block;
-    padding: 8px 0;
-    line-height: 15px;
-  }
+// Please remove this rule once the following PR (https://github.com/Financial-Times/origami/pull/1808) is merged and o-header version is updated
+#site-navigation {
+  position: relative;
 }
-.ft-header__top-ask-ft-button {
-  @include oGridRespondTo($until: 'L') {
-    display: none;
+// Overrides <a> color style set by n-ui-foundations
+.o-header__ask-ft-button {
+  &, &:hover {
+    color: oColorsByName('black-80');
   }
 }
-.ft-header__drawer-ask-ft-button {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  text-align: center;
-}

package/styles.scss CHANGED Viewed

@@ -1,17 +1,14 @@
 // This will be overridden by dotcom-ui-layout, it's necessary here for storybook builds
 $system-code: 'page-kit-header' !default;
-@import "n-ui-foundations/mixins";
+@import 'n-ui-foundations/mixins';
 // We don't need the sub-brand or transparent header styles so disable them.
 // TODO: move drawer styles into a separate stylesheet which can be lazy loaded?
-@import "@financial-times/o-header/main";
+@import '@financial-times/o-header/main';
 @include oHeader(('top', 'nav', 'subnav', 'search', 'megamenu', 'drawer', 'anon', 'sticky', 'simple'));
-@import "src/header";
+@import 'src/header';
-@import "n-topic-search/main";
+@import 'n-topic-search/main';
 @include nTopicSearch;
-.o-header__search--primary .n-topic-search, .o-header__search--sticky .n-topic-search {
-  margin: 24px 0 0;
-}