@financial-times/dotcom-ui-header 13.8.1-beta.0 → 13.9.0

package/src/__test__/output/component.spec.tsx

@@ -67,6 +67,38 @@ describe('dotcom-ui-header', () => {
     expect(mobileHeader).not.toBeNull()
   })
 
+  it('renders one search widget anchor in the primary search row', () => {
+    const { container } = render(commonHeader)
+    const primarySearch = container.querySelector('#o-header-search-primary')
+    const primarySearchMain = primarySearch?.querySelector('.o-header__search-main')
+    const primaryForm = primarySearch?.querySelector('.o-header__search-form')
+    const primaryAnchor = primarySearch?.querySelector('[data-o-header-search-widget-anchor="primary"]')
+    const primaryAnchors = container.querySelectorAll('[data-o-header-search-widget-anchor="primary"]')
+    const widgetAnchors = container.querySelectorAll('[data-o-header-search-widget-anchor]')
+
+    expect(primarySearchMain).not.toBeNull()
+    expect(primaryForm?.parentElement).toBe(primarySearchMain)
+    expect(primarySearchMain?.nextElementSibling).toBe(primaryAnchor)
+    expect(primaryAnchors).toHaveLength(1)
+    expect(widgetAnchors).toHaveLength(2)
+  })
+
+  it('renders one search widget anchor in sticky search', () => {
+    const { container } = render(commonHeader)
+    const searchMainNodes = container.querySelectorAll('.o-header__search-main')
+    const stickySearch = container.querySelector('#o-header-search-sticky')
+    const stickySearchMain = stickySearch?.querySelector('.o-header__search-main')
+    const stickyForm = stickySearch?.querySelector('.o-header__search-form')
+    const stickyAnchor = stickySearch?.querySelector('[data-o-header-search-widget-anchor="sticky"]')
+    const stickyAnchors = container.querySelectorAll('[data-o-header-search-widget-anchor="sticky"]')
+
+    expect(searchMainNodes).toHaveLength(2)
+    expect(stickySearchMain).not.toBeNull()
+    expect(stickyForm?.parentElement).toBe(stickySearchMain)
+    expect(stickySearchMain?.nextElementSibling).toBe(stickyAnchor)
+    expect(stickyAnchors).toHaveLength(1)
+  })
+
   describe('When the user is subscribed', () => {
     it('renders the expected logged in user header links', () => {
       const { container } = render(subscribedUserHeader)

package/src/components/search/partials.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 const Search = ({ instance }) => {
   const inputId = `o-header-search-term-${instance}`
+
   return (
     <div
       id={`o-header-search-${instance}`}
@@ -11,49 +12,52 @@ const Search = ({ instance }) => {
       data-o-header-search
     >
       <div className="o-header__container">
-        <form
-          className="o-header__search-form"
-          action="/search"
-          role="search"
-          aria-label="Site search"
-          data-n-topic-search
-        >
-          <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>
+        <div className="o-header__search-main">
+          <form
+            className="o-header__search-form"
+            action="/search"
+            role="search"
+            aria-label="Site search"
+            data-n-topic-search
+          >
+            <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>
+                </span>
+              </span>
+              <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}
+                  placeholder="Search for stories, topics or securities"
+                  role="combobox"
+                  aria-controls={`suggestions-${inputId}`}
+                />
+                <button className="o-header__search-submit" type="submit">
+                  <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"
+                >
+                  <span className="o-header__visually-hidden">Close search bar</span>
+                  <span>Close</span>
+                </button>
               </span>
-            </span>
-            <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}
-                placeholder="Search for stories, topics or securities"
-                role="combobox"
-                aria-controls={`suggestions-${inputId}`}
-              />
-              <button className="o-header__search-submit" type="submit">
-                <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"
-              >
-                <span className="o-header__visually-hidden">Close search bar</span>
-                <span>Close</span>
-              </button>
-            </span>
-          </label>
-        </form>
+            </label>
+          </form>
+        </div>
+        <div className="o-header__search-widget-anchor" data-o-header-search-widget-anchor={instance} />
       </div>
     </div>
   )

package/src/header.scss

@@ -16,6 +16,38 @@
   display: none;
 }
 
+.o-header__search-widget-anchor[data-o-header-search-widget-anchor] {
+  display: none;
+}
+
+// Grid layout on large sizes to create right hand rail for widget anchor
+@include oGridRespondTo('L') {
+  .o-header__search--primary .o-header__container,
+  .o-header__search--sticky .o-header__container {
+    max-width: none;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 840px) minmax(0, 1fr);
+    column-gap: var(--o3-spacing-3xs);
+  }
+
+  .o-header__search--primary .o-header__search-main,
+  .o-header__search--sticky .o-header__search-main {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+  }
+
+  .o-header__search--primary .o-header__search-widget-anchor[data-o-header-search-widget-anchor='primary'],
+  .o-header__search--sticky .o-header__search-widget-anchor[data-o-header-search-widget-anchor='sticky'] {
+    grid-column: 3;
+    display: block;
+    width: 100%;
+    min-width: 0;
+    overflow-x: hidden;
+    overflow-y: visible;
+  }
+}
+
 // Import the dropdown navigation styles
 @import 'components/dropdown-navigation/dropdownNavigation.scss';