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

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.
package/browser.js CHANGED
@@ -5,6 +5,7 @@ import EnhancedSearch from './src/enhanced-search/enhancedSearch'
5
5
  * @typedef HeaderOptions
6
6
  * @property { HTMLElement } [rootElement] - the root element passed to o-header
7
7
  * @property { string } [hostName]
8
+ * @property { 'open' | 'close' } [searchState]
8
9
  * @property { string } [enhancedSearchUrl]
9
10
  */
10
11
 
@@ -22,7 +23,7 @@ export const init = (headerOptions = {}) => {
22
23
  : new TopicSearch(element, headerOptions)
23
24
  })
24
25
 
25
- Header.init(headerOptions.rootElement)
26
+ Header.init(headerOptions.rootElement, { searchState: headerOptions.searchState })
26
27
  }
27
28
 
28
29
  export { Header as OrigamiHeader }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/dotcom-ui-header",
3
- "version": "9.0.0-beta.4",
3
+ "version": "9.0.0-beta.5",
4
4
  "description": "",
5
5
  "browser": "browser.js",
6
6
  "main": "component.js",
@@ -22,7 +22,7 @@
22
22
  "author": "",
23
23
  "license": "MIT",
24
24
  "dependencies": {
25
- "@financial-times/dotcom-types-navigation": "^9.0.0-beta.4",
25
+ "@financial-times/dotcom-types-navigation": "^9.0.0-beta.5",
26
26
  "n-topic-search": "^4.0.0",
27
27
  "n-ui-foundations": "^9.0.0"
28
28
  },
@@ -31,7 +31,7 @@
31
31
  "@svgr/core": "^5.0.0",
32
32
  "camelcase": "^6.0.0",
33
33
  "check-engine": "^1.10.1",
34
- "@financial-times/o-header": "^11.0.4",
34
+ "@financial-times/o-header": "^11.1.0",
35
35
  "react": "^16.8.6"
36
36
  },
37
37
  "peerDependencies": {
@@ -55,9 +55,9 @@ class CustomSuggestionList extends BaseRenderer {
55
55
  }
56
56
 
57
57
  createHtml() {
58
- const term = this.state.searchTerm
59
- const hasConcepts = this.state.suggestions.concepts && this.state.suggestions.concepts.length
60
- const hasEquities = this.state.suggestions.equities && this.state.suggestions.equities.length
58
+ const term = this.state?.searchTerm
59
+ const hasConcepts = this.state?.suggestions?.concepts && this.state.suggestions.concepts.length
60
+ const hasEquities = this.state?.suggestions?.equities && this.state.suggestions.equities.length
61
61
  const hasSuggestions = hasConcepts || hasEquities
62
62
  const suggestions = []
63
63
  this.items = []
@@ -116,7 +116,7 @@ class CustomSuggestionList extends BaseRenderer {
116
116
  <div class="o-normalise-visually-hidden">Suggestions include</div>
117
117
  ${
118
118
  hasSuggestions
119
- ? `<div class="enhanced-search__suggestions">
119
+ ? `<div class="enhanced-search__suggestions-items">
120
120
  ${suggestions.map(this.renderSuggestionGroup).join('')}
121
121
  </div>
122
122
  `
@@ -23,6 +23,8 @@ class EnhancedSearch extends TopicSearch {
23
23
  form.setAttribute('data-attribute-enhanced-search', 'true')
24
24
  form.setAttribute('action', options?.enhancedSearchUrl ?? '/search')
25
25
  inputs.forEach((input) => input.setAttribute('placeholder', 'Search for stories, topics or securities'))
26
+
27
+ this.hide()
26
28
  }
27
29
 
28
30
  onFocus(ev) {
@@ -22,7 +22,7 @@
22
22
  margin: 0 0 spacing.oSpacingByName('s3') 0;
23
23
  }
24
24
 
25
- &__suggestions {
25
+ &__suggestions-items {
26
26
  display: flex;
27
27
  gap: spacing.oSpacingByName('m16');
28
28
  padding-top: spacing.oSpacingByName('s4');