@financial-times/dotcom-ui-header 10.1.0 → 10.3.0

package/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"
@@ -268,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>
@@ -572,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>
@@ -875,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>

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

@@ -29,7 +29,7 @@ describe('dotcom-ui-header/src/components/drawer', () => {
       const { container } = render(<Subject {...fixture} />)
 
       expect(container.getElementsByClassName('o-header__drawer-current-edition')[0].innerHTML).toContain(
-        'UK Edition'
+        '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')
     })
   })
 

package/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>
 )

package/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,27 +69,29 @@ 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>
   )
 }
 
 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" data-trackable="edition-switcher">
-          <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}) => (
+      <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">

package/src/components/drawer/topLevelPartials.tsx

@@ -28,15 +28,18 @@ 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"
+          />
+        )}
         {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
-        <Search {...props} />
-        <nav className="o-header__drawer-menu" aria-label="Edition switcher">
-          {editions && <EditionsSwitcher {...editions} />}
-        </nav>
         <nav className="o-header__drawer-menu o-header__drawer-menu--primary">
           {primary ? <SectionPrimary {...primary} /> : null}
           {secondary ? <SectionSecondary {...secondary} /> : null}
@@ -48,25 +51,21 @@ const Drawer = (props: THeaderProps) => {
   )
 }
 
-const DrawerTools = (props: TNavEditions) => (
+const DrawerTools = (editions: TNavEditions) => (
   <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>}
+    {editions && <EditionsSwitcher {...editions} />}
   </div>
 )
 
-const Search = (props: Pick<THeaderProps, 'showAskButton'>) => (
+const Search = () => (
   <div className="o-header__drawer-search">
     <form
       className="o-header__drawer-search-form"
@@ -75,34 +74,31 @@ 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
-    >
-      <label className="o-header__visually-hidden" htmlFor="o-header-drawer-search-term">
-        Search the <abbr title="Financial Times">FT</abbr>
+      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>
+          </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>
-      {props.showAskButton && (
-        <AskFtButton
-          className="ft-header__drawer-ask-ft-button"
-          id="ask-ft-button-drawer"
-          dataTrackable="ask-ft-button-drawer"
-        />
-      )}
     </form>
   </div>
 )

package/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>

package/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 {
@@ -67,5 +70,10 @@
 }
 
 .ft-header__drawer-ask-ft-button {
-  margin-left: 16px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  text-align: center;
+
 }

package/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;
+  }
+}