@financial-times/dotcom-ui-header 8.1.0 → 9.0.0-beta.2

package/browser.js

@@ -1,10 +1,11 @@
 import Header from '@financial-times/o-header'
 import TopicSearch from 'n-topic-search'
-
+import EnhancedSearch from './src/enhanced-search/enhancedSearch'
 /**
  * @typedef HeaderOptions
  * @property { HTMLElement } [rootElement] - the root element passed to o-header
  * @property { string } [hostName]
+ * @property { string } [enhancedSearchUrl]
  */
 
 /**
@@ -16,7 +17,9 @@ export const init = (headerOptions = {}) => {
     '.o-header [data-n-topic-search], .o-header__drawer [data-n-topic-search]'
   )
   topicSearchElements.forEach((element) => {
-    new TopicSearch(element, headerOptions)
+    headerOptions.enhancedSearchUrl
+      ? new EnhancedSearch(element, headerOptions)
+      : new TopicSearch(element, headerOptions)
   })
 
   Header.init(headerOptions.rootElement)

package/dist/tsconfig.tsbuildinfo

@@ -222,7 +222,7 @@
         "affectsGlobalScope": false
       },
       "../src/index.tsx": {
-        "version": "f076cad62acf3ca2bca2348a445aeef886e7c0db4ae610eafba754942df1fbec",
+        "version": "a8079d2415c7f843d4b61f63b855b5b7f2bada6d6952ff1af818e4e22cc9aa4d",
         "signature": "193a1c1b82fe624c251dd16b488b6b90a155e072da0ace6b843ec85f99df0c6e",
         "affectsGlobalScope": false
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "8.1.0",
+  "version": "9.0.0-beta.2",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^8.1.0",
+    "@financial-times/dotcom-types-navigation": "^9.0.0-beta.2",
     "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },

package/src/enhanced-search/customList.js

@@ -0,0 +1,135 @@
+import BaseRenderer from 'n-topic-search/src/renderers/base-renderer'
+
+const DISPLAY_ITEMS = 5
+
+class CustomSuggestionList extends BaseRenderer {
+  constructor(container, options, enhancedSearchUrl) {
+    super(container, options)
+    this.renderSuggestionGroup = this.renderSuggestionGroup.bind(this)
+    this.enhancedSearchUrl = enhancedSearchUrl
+    this.createHtml()
+    this.render()
+  }
+
+  renderSuggestionChip = (term) => {
+    return `<a
+        data-trackable="link"
+        data-suggestion-id="${term}"
+        href="${this.enhancedSearchUrl}${term}"
+        class="n-topic-search__target enhanced-search__chip">
+        <span class="enhanced-search__chip-text">${term}</span>
+        </a>`
+  }
+
+  renderDefaultSuggestionsChips() {
+    return `
+        <div class="enhanced-search__default-results">
+            ${['US China trade dispute', 'When is UK inflation likely to fall?', 'Greenwashing']
+              .map(this.renderSuggestionChip)
+              .join('')}
+        </div>`
+  }
+
+  renderSuggestionLink(suggestion, group) {
+    return `<li class="n-topic-search__item">
+			<a class="n-topic-search__target enhanced-search__target ${group.linkClassName}"
+				href="${suggestion.url}"
+				tabindex="0"
+				data-trackable="link"
+				data-suggestion-id="${suggestion.id}"
+				data-suggestion-type="${suggestion.type}"
+			>${suggestion.html}</a>
+		</li>`
+  }
+
+  renderSuggestionGroup(group) {
+    let html = `<div class="enhanced-search__group ${group.linkClassName}" data-trackable="${group.trackable}">`
+
+    if (group.suggestions.length || group.emptyHtml) {
+      html += `<ul class="n-topic-search__item-list">
+				${group.suggestions.map((suggestion) => this.renderSuggestionLink(suggestion, group)).join('')}
+			</ul>`
+    }
+    html += '</div>'
+    return html
+  }
+
+  createHtml() {
+    const term = this.state.searchTerm
+    const hasConcepts = this.state.suggestions.concepts && this.state.suggestions.concepts.length
+    const hasEquities = this.state.suggestions.equities && this.state.suggestions.equities.length
+    const hasSuggestions = hasConcepts || hasEquities
+    const suggestions = []
+    this.items = []
+    if (this.options.categories.includes('concepts')) {
+      suggestions.push({
+        linkClassName: 'enhanced-search__target--news',
+        trackable: 'enhanced-search-news',
+        suggestions: this.state.suggestions.concepts.slice(0, DISPLAY_ITEMS).map((suggestion) => ({
+          html: this.highlight(suggestion.prefLabel),
+          url: suggestion.url,
+          id: suggestion.id,
+          type: 'enhanced-search-tag'
+        }))
+      })
+    }
+
+    if (this.options.categories.includes('equities')) {
+      suggestions.push({
+        trackable: 'enhanced-search-equities',
+        linkClassName: 'enhanced-search__target--equities',
+        emptyHtml: '<div className="enhanced-search__no-results-message">No equities found</div>',
+        suggestions: this.state.suggestions.equities.slice(0, DISPLAY_ITEMS).map((suggestion) => ({
+          html: `<span class="enhanced-search__target__equity-name">${this.highlight(
+            suggestion.name
+          )}</span><abbr>${this.highlight(suggestion.symbol)}</abbr>`,
+          url: suggestion.url,
+          id: suggestion.symbol,
+          type: 'enhanced-search-equity'
+        }))
+      })
+    }
+
+    this.newHtml = `
+        <div aria-live="assertive">
+        ${
+          hasSuggestions
+            ? `
+        <div
+          class="o-normalise-visually-hidden n-topic-search__suggestions_explanation"
+        >
+          Search results have been displayed. To jump to the list of suggestions press
+          the down arrow key.
+        </div>
+        `
+            : ''
+        }
+        <div
+          class="n-topic-search n-topic-search__suggestions"
+          data-trackable="typeahead"
+        >
+          <div class="enhanced-search__wrapper">
+            <h3 class="enhanced-search__title">Enhanced search results for...</h3>
+            ${term ? this.renderSuggestionChip(term) : this.renderDefaultSuggestionsChips()}
+            <div class="o-normalise-visually-hidden">Suggestions include</div>
+              ${
+                hasSuggestions
+                  ? `<div class="enhanced-search__suggestions">
+                ${suggestions.map(this.renderSuggestionGroup).join('')}
+            </div>
+            `
+                  : ''
+              }
+          </div>
+        </div>
+      </div>`
+  }
+
+  handleSelection(el, ev) {
+    ev.stopPropagation()
+    // we don't prevent default as the link's url is a link to the relevant stream page
+    return
+  }
+}
+
+export default CustomSuggestionList

package/src/enhanced-search/enhancedSearch.js

@@ -0,0 +1,31 @@
+import TopicSearch from 'n-topic-search'
+import CustomSuggestionList from './customList'
+
+class EnhancedSearch extends TopicSearch {
+  constructor(containerEl, options) {
+    super(containerEl, {
+      ...options,
+      listComponent: (...args) => new CustomSuggestionList(...args.concat(options?.enhancedSearchUrl))
+    })
+
+    const inputs = [
+      document.querySelector('#o-header-search-term-primary'),
+      document.querySelector('#o-header-search-term-sticky'),
+      document.querySelector('#o-header-drawer-search-term')
+    ]
+    inputs[0].parentElement.setAttribute('data-attribute-enhanced-search', 'true')
+    inputs.forEach((input) =>
+      input.setAttribute('placeholder', 'Search the FT using questions, topics or article titles')
+    )
+  }
+
+  onFocus(ev) {
+    super.onFocus(ev)
+    this.show()
+    this.suggestionTargets = Array.from(
+      this.suggestionListContainer.querySelectorAll('.n-topic-search__target')
+    )
+  }
+}
+
+export default EnhancedSearch

package/src/enhanced-search/styles.scss

@@ -0,0 +1,117 @@
+@use '@financial-times/o-colors/main' as colors;
+@use '@financial-times/o-spacing/main' as spacing;
+@use '@financial-times/o-typography/main' as typography;
+
+@mixin enhancedSearch {
+  .enhanced-search {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: spacing.oSpacingByName('s6');
+    }
+
+    &__title {
+      color: colors.oColorsByName('black');
+      @include typography.oTypographySans($scale: 0, $style: 'normal', $weight: 'semibold');
+      margin: 0 0 spacing.oSpacingByName('s3') 0;
+    }
+
+    &__suggestions {
+      display: flex;
+      gap: spacing.oSpacingByName('m16');
+      padding-top: spacing.oSpacingByName('s6');
+      flex-direction: column;
+
+      @include oGridRespondTo('L') {
+        flex-direction: row;
+      }
+    }
+
+    &__target {
+      padding: 0;
+      padding-block: spacing.oSpacingByName('s2');
+    }
+
+    &__target::before,
+    &__chip::before {
+      border-bottom: unset !important;
+    }
+
+    &__target:hover,
+    &__target:focus {
+      background-color: transparent;
+      color: oColorsByName('teal');
+    }
+
+    &__target:hover:before,
+    &__target:focus:before {
+      opacity: 0;
+    }
+
+    &__target--news {
+      color: colors.oColorsByName('claret-70');
+    }
+
+    &__target--news:hover,
+    &__target--news:focus {
+      color: colors.oColorsByName('claret-30');
+    }
+
+    &__target--equities {
+      display: flex;
+      align-items: flex-start;
+      gap: spacing.oSpacingByName('s3');
+      color: colors.oColorsByName('black');
+    }
+
+    &__target--equities:hover,
+    &__target--equities:focus {
+      color: colors.oColorsByName('slate');
+    }
+
+    &__chip {
+      border-radius: spacing.oSpacingByName('s1');
+      background: colors.oColorsMix('ft-grey', 'white', 10);
+      padding: spacing.oSpacingByName('s2') spacing.oSpacingByName('s3');
+      width: fit-content;
+      cursor: pointer;
+      text-decoration: none;
+      display: block;
+    }
+
+    &__chip:hover,
+    &__chip:focus {
+      background: colors.oColorsMix('ft-grey', 'white', 20);
+    }
+
+    &__chip:focus-visible {
+      box-shadow: 0 0 0 spacing.oSpacingByIncrement(0.5) colors.oColorsByName('white'),
+        0 0 0 spacing.oSpacingByName('s1') colors.oColorsByName('black-70');
+      color: colors.oColorsByName('white');
+      border-color: transparent;
+      border-radius: 0;
+      outline: none;
+    }
+
+    &__chip-text {
+      margin: 0;
+      color: colors.oColorsByName('black');
+      @include typography.oTypographySans($scale: -1, $style: 'normal', $weight: 'regular');
+      outline: none;
+    }
+
+    &__default-results {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      gap: spacing.oSpacingByName('s2');
+      flex-direction: column;
+
+      @include oGridRespondTo('L') {
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+}

package/src/index.tsx

@@ -48,7 +48,9 @@ function MainHeader(props: THeaderProps) {
         {props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}
         <TopColumnRight {...props} />
       </TopWrapper>
+
       <Search instance="primary" />
+
       <MobileNav {...props} />
       <NavDesktop>
         <NavListLeft {...props} />

package/styles.scss

@@ -1,14 +1,18 @@
 // 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;
+
+@import './src/enhanced-search/styles';
+@include enhancedSearch;