@financial-times/dotcom-ui-header 9.0.0-beta.3 → 9.0.0-beta.4

package/package.json

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

package/src/enhanced-search/customList.js

@@ -12,21 +12,19 @@ class CustomSuggestionList extends BaseRenderer {
   }
 
   renderSuggestionChip = (term) => {
-    const WORD_LIMIT = 60
     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.substring(0, WORD_LIMIT)}
-        ${term.length > WORD_LIMIT ? '...' : ''}</span>
+          <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']
+            ${['Will Trump win the next election?', 'Investing in AI', 'Ukraine counteroffensive']
               .map(this.renderSuggestionChip)
               .join('')}
         </div>`
@@ -107,11 +105,13 @@ class CustomSuggestionList extends BaseRenderer {
             : ''
         }
         <div
-          class="n-topic-search n-topic-search__suggestions"
+          class="n-topic-search n-topic-search__suggestions enhanced-search enhanced-search__suggestions"
           data-trackable="typeahead"
         >
           <div class="enhanced-search__wrapper">
-            <h3 class="enhanced-search__title">Enhanced search results for...</h3>
+            <h3 class="enhanced-search__title">${
+              term ? 'Get top results for...' : 'Search tip: Try using questions or phrases like...'
+            }</h3>
             ${term ? this.renderSuggestionChip(term) : this.renderDefaultSuggestionsChips()}
             <div class="o-normalise-visually-hidden">Suggestions include</div>
               ${

package/src/enhanced-search/enhancedSearch.js

@@ -22,9 +22,7 @@ class EnhancedSearch extends TopicSearch {
 
     form.setAttribute('data-attribute-enhanced-search', 'true')
     form.setAttribute('action', options?.enhancedSearchUrl ?? '/search')
-    inputs.forEach((input) =>
-      input.setAttribute('placeholder', 'Search the FT using questions, topics or article titles')
-    )
+    inputs.forEach((input) => input.setAttribute('placeholder', 'Search for stories, topics or securities'))
   }
 
   onFocus(ev) {

package/src/enhanced-search/styles.scss

@@ -4,6 +4,11 @@
 
 @mixin enhancedSearch {
   .enhanced-search {
+    &__suggestions {
+      max-width: 540px;
+      left: - spacing.oSpacingByName('s3');
+    }
+
     &__wrapper {
       display: flex;
       flex-direction: column;
@@ -20,7 +25,7 @@
     &__suggestions {
       display: flex;
       gap: spacing.oSpacingByName('m16');
-      padding-top: spacing.oSpacingByName('s6');
+      padding-top: spacing.oSpacingByName('s4');
       flex-direction: column;
 
       @include oGridRespondTo('L') {