@financial-times/dotcom-ui-header 13.8.1 → 13.9.1-beta.1

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.
Files changed (17) hide show
  1. package/README.md +14 -0
  2. package/browser.js +13 -13
  3. package/dist/node/components/search/partials.js +17 -14
  4. package/dist/node/components/sub-navigation/SubNavDropdown.d.ts +2 -0
  5. package/dist/node/components/sub-navigation/SubNavDropdown.js +3 -3
  6. package/dist/node/components/sub-navigation/SubNavWithDropdown.js +7 -3
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/package.json +3 -3
  9. package/src/__test__/components/SubNavDropdown.spec.tsx +16 -15
  10. package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +608 -504
  11. package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +380 -315
  12. package/src/__test__/output/component.spec.tsx +32 -0
  13. package/src/components/search/partials.tsx +22 -15
  14. package/src/components/sub-navigation/SubNavDropdown.tsx +9 -8
  15. package/src/components/sub-navigation/SubNavWithDropdown.tsx +19 -10
  16. package/src/components/sub-navigation/subNavDropdown.scss +18 -5
  17. package/src/header.scss +32 -0
package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap CHANGED
@@ -113,77 +113,90 @@ exports[`dotcom-ui-header/src/components/MainHeader not renders MPR button by de
113
113
  <div
114
114
  className="o-header__container"
115
115
  >
116
- <form
117
- action="/search"
118
- aria-label="Site search"
119
- className="o-header__search-form"
120
- data-n-topic-search={true}
121
- role="search"
116
+ <div
117
+ className="o-header__search-main"
122
118
  >
123
- <label
124
- className="o-header__search-term o-forms-field o-forms-field--optional"
125
- htmlFor="o-header-search-term-primary"
119
+ <form
120
+ action="/search"
121
+ aria-label="Site search"
122
+ className="o-header__search-form"
123
+ data-n-topic-search={true}
124
+ role="search"
126
125
  >
127
- <span
128
- className="o-forms-title o-header__visually-hidden"
126
+ <div
127
+ className="o-header__search-term o-forms-field o-forms-field--optional"
129
128
  >
130
- <span
131
- className="o-forms-title__main"
132
- >
133
- Search the
134
- <abbr
135
- title="Financial Times"
136
- >
137
- FT
138
- </abbr>
139
- </span>
140
- </span>
141
- <span
142
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
143
- >
144
- <input
145
- aria-controls="suggestions-o-header-search-term-primary"
146
- autoCapitalize="off"
147
- autoComplete="off"
148
- autoCorrect="off"
149
- id="o-header-search-term-primary"
150
- name="q"
151
- placeholder="Search for stories, topics or securities"
152
- role="combobox"
153
- spellCheck={false}
154
- type="search"
155
- />
156
- <button
157
- className="o-header__search-submit"
158
- type="submit"
129
+ <label
130
+ htmlFor="o-header-search-term-primary"
159
131
  >
160
132
  <span
161
- aria-hidden="true"
162
- className="o-header__search-icon"
163
- />
164
- <span>
165
- Search
133
+ className="o-forms-title o-header__visually-hidden"
134
+ >
135
+ <span
136
+ className="o-forms-title__main"
137
+ >
138
+ Search the
139
+ <abbr
140
+ title="Financial Times"
141
+ >
142
+ FT
143
+ </abbr>
144
+ </span>
166
145
  </span>
167
- </button>
168
- <button
169
- aria-controls="o-header-search-primary"
170
- className="o-header__search-close o--if-js"
171
- data-trackable="close"
172
- title="Close search bar"
173
- type="button"
146
+ </label>
147
+ <span
148
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
174
149
  >
175
- <span
176
- className="o-header__visually-hidden"
150
+ <input
151
+ aria-controls="suggestions-o-header-search-term-primary"
152
+ autoCapitalize="off"
153
+ autoComplete="off"
154
+ autoCorrect="off"
155
+ id="o-header-search-term-primary"
156
+ name="q"
157
+ placeholder="Search for stories, topics or securities"
158
+ role="combobox"
159
+ spellCheck={false}
160
+ type="search"
161
+ />
162
+ <button
163
+ aria-label="search"
164
+ className="o-header__search-submit"
165
+ type="submit"
177
166
  >
178
- Close search bar
179
- </span>
180
- <span>
181
- Close
182
- </span>
183
- </button>
184
- </span>
185
- </label>
186
- </form>
167
+ <span
168
+ aria-hidden="true"
169
+ className="o-header__search-icon"
170
+ />
171
+ <span>
172
+ Search
173
+ </span>
174
+ </button>
175
+ <button
176
+ aria-controls="o-header-search-primary"
177
+ aria-label="close"
178
+ className="o-header__search-close o--if-js"
179
+ data-trackable="close"
180
+ title="Close search bar"
181
+ type="button"
182
+ >
183
+ <span
184
+ className="o-header__visually-hidden"
185
+ >
186
+ Close search bar
187
+ </span>
188
+ <span>
189
+ Close
190
+ </span>
191
+ </button>
192
+ </span>
193
+ </div>
194
+ </form>
195
+ </div>
196
+ <div
197
+ className="o-header__search-widget-anchor"
198
+ data-o-header-search-widget-anchor="primary"
199
+ />
187
200
  </div>
188
201
  </div>
189
202
  <nav
@@ -1994,77 +2007,90 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
1994
2007
  <div
1995
2008
  className="o-header__container"
1996
2009
  >
1997
- <form
1998
- action="/search"
1999
- aria-label="Site search"
2000
- className="o-header__search-form"
2001
- data-n-topic-search={true}
2002
- role="search"
2010
+ <div
2011
+ className="o-header__search-main"
2003
2012
  >
2004
- <label
2005
- className="o-header__search-term o-forms-field o-forms-field--optional"
2006
- htmlFor="o-header-search-term-primary"
2013
+ <form
2014
+ action="/search"
2015
+ aria-label="Site search"
2016
+ className="o-header__search-form"
2017
+ data-n-topic-search={true}
2018
+ role="search"
2007
2019
  >
2008
- <span
2009
- className="o-forms-title o-header__visually-hidden"
2020
+ <div
2021
+ className="o-header__search-term o-forms-field o-forms-field--optional"
2010
2022
  >
2011
- <span
2012
- className="o-forms-title__main"
2013
- >
2014
- Search the
2015
- <abbr
2016
- title="Financial Times"
2017
- >
2018
- FT
2019
- </abbr>
2020
- </span>
2021
- </span>
2022
- <span
2023
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
2024
- >
2025
- <input
2026
- aria-controls="suggestions-o-header-search-term-primary"
2027
- autoCapitalize="off"
2028
- autoComplete="off"
2029
- autoCorrect="off"
2030
- id="o-header-search-term-primary"
2031
- name="q"
2032
- placeholder="Search for stories, topics or securities"
2033
- role="combobox"
2034
- spellCheck={false}
2035
- type="search"
2036
- />
2037
- <button
2038
- className="o-header__search-submit"
2039
- type="submit"
2023
+ <label
2024
+ htmlFor="o-header-search-term-primary"
2040
2025
  >
2041
2026
  <span
2042
- aria-hidden="true"
2043
- className="o-header__search-icon"
2044
- />
2045
- <span>
2046
- Search
2027
+ className="o-forms-title o-header__visually-hidden"
2028
+ >
2029
+ <span
2030
+ className="o-forms-title__main"
2031
+ >
2032
+ Search the
2033
+ <abbr
2034
+ title="Financial Times"
2035
+ >
2036
+ FT
2037
+ </abbr>
2038
+ </span>
2047
2039
  </span>
2048
- </button>
2049
- <button
2050
- aria-controls="o-header-search-primary"
2051
- className="o-header__search-close o--if-js"
2052
- data-trackable="close"
2053
- title="Close search bar"
2054
- type="button"
2040
+ </label>
2041
+ <span
2042
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
2055
2043
  >
2056
- <span
2057
- className="o-header__visually-hidden"
2044
+ <input
2045
+ aria-controls="suggestions-o-header-search-term-primary"
2046
+ autoCapitalize="off"
2047
+ autoComplete="off"
2048
+ autoCorrect="off"
2049
+ id="o-header-search-term-primary"
2050
+ name="q"
2051
+ placeholder="Search for stories, topics or securities"
2052
+ role="combobox"
2053
+ spellCheck={false}
2054
+ type="search"
2055
+ />
2056
+ <button
2057
+ aria-label="search"
2058
+ className="o-header__search-submit"
2059
+ type="submit"
2058
2060
  >
2059
- Close search bar
2060
- </span>
2061
- <span>
2062
- Close
2063
- </span>
2064
- </button>
2065
- </span>
2066
- </label>
2067
- </form>
2061
+ <span
2062
+ aria-hidden="true"
2063
+ className="o-header__search-icon"
2064
+ />
2065
+ <span>
2066
+ Search
2067
+ </span>
2068
+ </button>
2069
+ <button
2070
+ aria-controls="o-header-search-primary"
2071
+ aria-label="close"
2072
+ className="o-header__search-close o--if-js"
2073
+ data-trackable="close"
2074
+ title="Close search bar"
2075
+ type="button"
2076
+ >
2077
+ <span
2078
+ className="o-header__visually-hidden"
2079
+ >
2080
+ Close search bar
2081
+ </span>
2082
+ <span>
2083
+ Close
2084
+ </span>
2085
+ </button>
2086
+ </span>
2087
+ </div>
2088
+ </form>
2089
+ </div>
2090
+ <div
2091
+ className="o-header__search-widget-anchor"
2092
+ data-o-header-search-widget-anchor="primary"
2093
+ />
2068
2094
  </div>
2069
2095
  </div>
2070
2096
  <nav
@@ -4113,77 +4139,90 @@ exports[`dotcom-ui-header/src/components/MainHeader renders FT Pro Dropdown menu
4113
4139
  <div
4114
4140
  className="o-header__container"
4115
4141
  >
4116
- <form
4117
- action="/search"
4118
- aria-label="Site search"
4119
- className="o-header__search-form"
4120
- data-n-topic-search={true}
4121
- role="search"
4142
+ <div
4143
+ className="o-header__search-main"
4122
4144
  >
4123
- <label
4124
- className="o-header__search-term o-forms-field o-forms-field--optional"
4125
- htmlFor="o-header-search-term-primary"
4145
+ <form
4146
+ action="/search"
4147
+ aria-label="Site search"
4148
+ className="o-header__search-form"
4149
+ data-n-topic-search={true}
4150
+ role="search"
4126
4151
  >
4127
- <span
4128
- className="o-forms-title o-header__visually-hidden"
4152
+ <div
4153
+ className="o-header__search-term o-forms-field o-forms-field--optional"
4129
4154
  >
4130
- <span
4131
- className="o-forms-title__main"
4132
- >
4133
- Search the
4134
- <abbr
4135
- title="Financial Times"
4136
- >
4137
- FT
4138
- </abbr>
4139
- </span>
4140
- </span>
4141
- <span
4142
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
4143
- >
4144
- <input
4145
- aria-controls="suggestions-o-header-search-term-primary"
4146
- autoCapitalize="off"
4147
- autoComplete="off"
4148
- autoCorrect="off"
4149
- id="o-header-search-term-primary"
4150
- name="q"
4151
- placeholder="Search for stories, topics or securities"
4152
- role="combobox"
4153
- spellCheck={false}
4154
- type="search"
4155
- />
4156
- <button
4157
- className="o-header__search-submit"
4158
- type="submit"
4155
+ <label
4156
+ htmlFor="o-header-search-term-primary"
4159
4157
  >
4160
4158
  <span
4161
- aria-hidden="true"
4162
- className="o-header__search-icon"
4163
- />
4164
- <span>
4165
- Search
4159
+ className="o-forms-title o-header__visually-hidden"
4160
+ >
4161
+ <span
4162
+ className="o-forms-title__main"
4163
+ >
4164
+ Search the
4165
+ <abbr
4166
+ title="Financial Times"
4167
+ >
4168
+ FT
4169
+ </abbr>
4170
+ </span>
4166
4171
  </span>
4167
- </button>
4168
- <button
4169
- aria-controls="o-header-search-primary"
4170
- className="o-header__search-close o--if-js"
4171
- data-trackable="close"
4172
- title="Close search bar"
4173
- type="button"
4172
+ </label>
4173
+ <span
4174
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
4174
4175
  >
4175
- <span
4176
- className="o-header__visually-hidden"
4176
+ <input
4177
+ aria-controls="suggestions-o-header-search-term-primary"
4178
+ autoCapitalize="off"
4179
+ autoComplete="off"
4180
+ autoCorrect="off"
4181
+ id="o-header-search-term-primary"
4182
+ name="q"
4183
+ placeholder="Search for stories, topics or securities"
4184
+ role="combobox"
4185
+ spellCheck={false}
4186
+ type="search"
4187
+ />
4188
+ <button
4189
+ aria-label="search"
4190
+ className="o-header__search-submit"
4191
+ type="submit"
4177
4192
  >
4178
- Close search bar
4179
- </span>
4180
- <span>
4181
- Close
4182
- </span>
4183
- </button>
4184
- </span>
4185
- </label>
4186
- </form>
4193
+ <span
4194
+ aria-hidden="true"
4195
+ className="o-header__search-icon"
4196
+ />
4197
+ <span>
4198
+ Search
4199
+ </span>
4200
+ </button>
4201
+ <button
4202
+ aria-controls="o-header-search-primary"
4203
+ aria-label="close"
4204
+ className="o-header__search-close o--if-js"
4205
+ data-trackable="close"
4206
+ title="Close search bar"
4207
+ type="button"
4208
+ >
4209
+ <span
4210
+ className="o-header__visually-hidden"
4211
+ >
4212
+ Close search bar
4213
+ </span>
4214
+ <span>
4215
+ Close
4216
+ </span>
4217
+ </button>
4218
+ </span>
4219
+ </div>
4220
+ </form>
4221
+ </div>
4222
+ <div
4223
+ className="o-header__search-widget-anchor"
4224
+ data-o-header-search-widget-anchor="primary"
4225
+ />
4187
4226
  </div>
4188
4227
  </div>
4189
4228
  <nav
@@ -5995,77 +6034,90 @@ exports[`dotcom-ui-header/src/components/MainHeader renders MPR button 1`] = `
5995
6034
  <div
5996
6035
  className="o-header__container"
5997
6036
  >
5998
- <form
5999
- action="/search"
6000
- aria-label="Site search"
6001
- className="o-header__search-form"
6002
- data-n-topic-search={true}
6003
- role="search"
6037
+ <div
6038
+ className="o-header__search-main"
6004
6039
  >
6005
- <label
6006
- className="o-header__search-term o-forms-field o-forms-field--optional"
6007
- htmlFor="o-header-search-term-primary"
6040
+ <form
6041
+ action="/search"
6042
+ aria-label="Site search"
6043
+ className="o-header__search-form"
6044
+ data-n-topic-search={true}
6045
+ role="search"
6008
6046
  >
6009
- <span
6010
- className="o-forms-title o-header__visually-hidden"
6047
+ <div
6048
+ className="o-header__search-term o-forms-field o-forms-field--optional"
6011
6049
  >
6012
- <span
6013
- className="o-forms-title__main"
6014
- >
6015
- Search the
6016
- <abbr
6017
- title="Financial Times"
6018
- >
6019
- FT
6020
- </abbr>
6021
- </span>
6022
- </span>
6023
- <span
6024
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
6025
- >
6026
- <input
6027
- aria-controls="suggestions-o-header-search-term-primary"
6028
- autoCapitalize="off"
6029
- autoComplete="off"
6030
- autoCorrect="off"
6031
- id="o-header-search-term-primary"
6032
- name="q"
6033
- placeholder="Search for stories, topics or securities"
6034
- role="combobox"
6035
- spellCheck={false}
6036
- type="search"
6037
- />
6038
- <button
6039
- className="o-header__search-submit"
6040
- type="submit"
6050
+ <label
6051
+ htmlFor="o-header-search-term-primary"
6041
6052
  >
6042
6053
  <span
6043
- aria-hidden="true"
6044
- className="o-header__search-icon"
6045
- />
6046
- <span>
6047
- Search
6054
+ className="o-forms-title o-header__visually-hidden"
6055
+ >
6056
+ <span
6057
+ className="o-forms-title__main"
6058
+ >
6059
+ Search the
6060
+ <abbr
6061
+ title="Financial Times"
6062
+ >
6063
+ FT
6064
+ </abbr>
6065
+ </span>
6048
6066
  </span>
6049
- </button>
6050
- <button
6051
- aria-controls="o-header-search-primary"
6052
- className="o-header__search-close o--if-js"
6053
- data-trackable="close"
6054
- title="Close search bar"
6055
- type="button"
6067
+ </label>
6068
+ <span
6069
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
6056
6070
  >
6057
- <span
6058
- className="o-header__visually-hidden"
6071
+ <input
6072
+ aria-controls="suggestions-o-header-search-term-primary"
6073
+ autoCapitalize="off"
6074
+ autoComplete="off"
6075
+ autoCorrect="off"
6076
+ id="o-header-search-term-primary"
6077
+ name="q"
6078
+ placeholder="Search for stories, topics or securities"
6079
+ role="combobox"
6080
+ spellCheck={false}
6081
+ type="search"
6082
+ />
6083
+ <button
6084
+ aria-label="search"
6085
+ className="o-header__search-submit"
6086
+ type="submit"
6059
6087
  >
6060
- Close search bar
6061
- </span>
6062
- <span>
6063
- Close
6064
- </span>
6065
- </button>
6066
- </span>
6067
- </label>
6068
- </form>
6088
+ <span
6089
+ aria-hidden="true"
6090
+ className="o-header__search-icon"
6091
+ />
6092
+ <span>
6093
+ Search
6094
+ </span>
6095
+ </button>
6096
+ <button
6097
+ aria-controls="o-header-search-primary"
6098
+ aria-label="close"
6099
+ className="o-header__search-close o--if-js"
6100
+ data-trackable="close"
6101
+ title="Close search bar"
6102
+ type="button"
6103
+ >
6104
+ <span
6105
+ className="o-header__visually-hidden"
6106
+ >
6107
+ Close search bar
6108
+ </span>
6109
+ <span>
6110
+ Close
6111
+ </span>
6112
+ </button>
6113
+ </span>
6114
+ </div>
6115
+ </form>
6116
+ </div>
6117
+ <div
6118
+ className="o-header__search-widget-anchor"
6119
+ data-o-header-search-widget-anchor="primary"
6120
+ />
6069
6121
  </div>
6070
6122
  </div>
6071
6123
  <nav
@@ -7867,77 +7919,90 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
7867
7919
  <div
7868
7920
  className="o-header__container"
7869
7921
  >
7870
- <form
7871
- action="/search"
7872
- aria-label="Site search"
7873
- className="o-header__search-form"
7874
- data-n-topic-search={true}
7875
- role="search"
7922
+ <div
7923
+ className="o-header__search-main"
7876
7924
  >
7877
- <label
7878
- className="o-header__search-term o-forms-field o-forms-field--optional"
7879
- htmlFor="o-header-search-term-primary"
7925
+ <form
7926
+ action="/search"
7927
+ aria-label="Site search"
7928
+ className="o-header__search-form"
7929
+ data-n-topic-search={true}
7930
+ role="search"
7880
7931
  >
7881
- <span
7882
- className="o-forms-title o-header__visually-hidden"
7932
+ <div
7933
+ className="o-header__search-term o-forms-field o-forms-field--optional"
7883
7934
  >
7884
- <span
7885
- className="o-forms-title__main"
7886
- >
7887
- Search the
7888
- <abbr
7889
- title="Financial Times"
7890
- >
7891
- FT
7892
- </abbr>
7893
- </span>
7894
- </span>
7895
- <span
7896
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
7897
- >
7898
- <input
7899
- aria-controls="suggestions-o-header-search-term-primary"
7900
- autoCapitalize="off"
7901
- autoComplete="off"
7902
- autoCorrect="off"
7903
- id="o-header-search-term-primary"
7904
- name="q"
7905
- placeholder="Search for stories, topics or securities"
7906
- role="combobox"
7907
- spellCheck={false}
7908
- type="search"
7909
- />
7910
- <button
7911
- className="o-header__search-submit"
7912
- type="submit"
7935
+ <label
7936
+ htmlFor="o-header-search-term-primary"
7913
7937
  >
7914
7938
  <span
7915
- aria-hidden="true"
7916
- className="o-header__search-icon"
7917
- />
7918
- <span>
7919
- Search
7939
+ className="o-forms-title o-header__visually-hidden"
7940
+ >
7941
+ <span
7942
+ className="o-forms-title__main"
7943
+ >
7944
+ Search the
7945
+ <abbr
7946
+ title="Financial Times"
7947
+ >
7948
+ FT
7949
+ </abbr>
7950
+ </span>
7920
7951
  </span>
7921
- </button>
7922
- <button
7923
- aria-controls="o-header-search-primary"
7924
- className="o-header__search-close o--if-js"
7925
- data-trackable="close"
7926
- title="Close search bar"
7927
- type="button"
7952
+ </label>
7953
+ <span
7954
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
7928
7955
  >
7929
- <span
7930
- className="o-header__visually-hidden"
7956
+ <input
7957
+ aria-controls="suggestions-o-header-search-term-primary"
7958
+ autoCapitalize="off"
7959
+ autoComplete="off"
7960
+ autoCorrect="off"
7961
+ id="o-header-search-term-primary"
7962
+ name="q"
7963
+ placeholder="Search for stories, topics or securities"
7964
+ role="combobox"
7965
+ spellCheck={false}
7966
+ type="search"
7967
+ />
7968
+ <button
7969
+ aria-label="search"
7970
+ className="o-header__search-submit"
7971
+ type="submit"
7931
7972
  >
7932
- Close search bar
7933
- </span>
7934
- <span>
7935
- Close
7936
- </span>
7937
- </button>
7938
- </span>
7939
- </label>
7940
- </form>
7973
+ <span
7974
+ aria-hidden="true"
7975
+ className="o-header__search-icon"
7976
+ />
7977
+ <span>
7978
+ Search
7979
+ </span>
7980
+ </button>
7981
+ <button
7982
+ aria-controls="o-header-search-primary"
7983
+ aria-label="close"
7984
+ className="o-header__search-close o--if-js"
7985
+ data-trackable="close"
7986
+ title="Close search bar"
7987
+ type="button"
7988
+ >
7989
+ <span
7990
+ className="o-header__visually-hidden"
7991
+ >
7992
+ Close search bar
7993
+ </span>
7994
+ <span>
7995
+ Close
7996
+ </span>
7997
+ </button>
7998
+ </span>
7999
+ </div>
8000
+ </form>
8001
+ </div>
8002
+ <div
8003
+ className="o-header__search-widget-anchor"
8004
+ data-o-header-search-widget-anchor="primary"
8005
+ />
7941
8006
  </div>
7942
8007
  </div>
7943
8008
  <nav
@@ -9734,77 +9799,90 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
9734
9799
  <div
9735
9800
  className="o-header__container"
9736
9801
  >
9737
- <form
9738
- action="/search"
9739
- aria-label="Site search"
9740
- className="o-header__search-form"
9741
- data-n-topic-search={true}
9742
- role="search"
9802
+ <div
9803
+ className="o-header__search-main"
9743
9804
  >
9744
- <label
9745
- className="o-header__search-term o-forms-field o-forms-field--optional"
9746
- htmlFor="o-header-search-term-primary"
9805
+ <form
9806
+ action="/search"
9807
+ aria-label="Site search"
9808
+ className="o-header__search-form"
9809
+ data-n-topic-search={true}
9810
+ role="search"
9747
9811
  >
9748
- <span
9749
- className="o-forms-title o-header__visually-hidden"
9812
+ <div
9813
+ className="o-header__search-term o-forms-field o-forms-field--optional"
9750
9814
  >
9751
- <span
9752
- className="o-forms-title__main"
9753
- >
9754
- Search the
9755
- <abbr
9756
- title="Financial Times"
9757
- >
9758
- FT
9759
- </abbr>
9760
- </span>
9761
- </span>
9762
- <span
9763
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
9764
- >
9765
- <input
9766
- aria-controls="suggestions-o-header-search-term-primary"
9767
- autoCapitalize="off"
9768
- autoComplete="off"
9769
- autoCorrect="off"
9770
- id="o-header-search-term-primary"
9771
- name="q"
9772
- placeholder="Search for stories, topics or securities"
9773
- role="combobox"
9774
- spellCheck={false}
9775
- type="search"
9776
- />
9777
- <button
9778
- className="o-header__search-submit"
9779
- type="submit"
9815
+ <label
9816
+ htmlFor="o-header-search-term-primary"
9780
9817
  >
9781
9818
  <span
9782
- aria-hidden="true"
9783
- className="o-header__search-icon"
9784
- />
9785
- <span>
9786
- Search
9819
+ className="o-forms-title o-header__visually-hidden"
9820
+ >
9821
+ <span
9822
+ className="o-forms-title__main"
9823
+ >
9824
+ Search the
9825
+ <abbr
9826
+ title="Financial Times"
9827
+ >
9828
+ FT
9829
+ </abbr>
9830
+ </span>
9787
9831
  </span>
9788
- </button>
9789
- <button
9790
- aria-controls="o-header-search-primary"
9791
- className="o-header__search-close o--if-js"
9792
- data-trackable="close"
9793
- title="Close search bar"
9794
- type="button"
9832
+ </label>
9833
+ <span
9834
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
9795
9835
  >
9796
- <span
9797
- className="o-header__visually-hidden"
9836
+ <input
9837
+ aria-controls="suggestions-o-header-search-term-primary"
9838
+ autoCapitalize="off"
9839
+ autoComplete="off"
9840
+ autoCorrect="off"
9841
+ id="o-header-search-term-primary"
9842
+ name="q"
9843
+ placeholder="Search for stories, topics or securities"
9844
+ role="combobox"
9845
+ spellCheck={false}
9846
+ type="search"
9847
+ />
9848
+ <button
9849
+ aria-label="search"
9850
+ className="o-header__search-submit"
9851
+ type="submit"
9798
9852
  >
9799
- Close search bar
9800
- </span>
9801
- <span>
9802
- Close
9803
- </span>
9804
- </button>
9805
- </span>
9806
- </label>
9807
- </form>
9853
+ <span
9854
+ aria-hidden="true"
9855
+ className="o-header__search-icon"
9856
+ />
9857
+ <span>
9858
+ Search
9859
+ </span>
9860
+ </button>
9861
+ <button
9862
+ aria-controls="o-header-search-primary"
9863
+ aria-label="close"
9864
+ className="o-header__search-close o--if-js"
9865
+ data-trackable="close"
9866
+ title="Close search bar"
9867
+ type="button"
9868
+ >
9869
+ <span
9870
+ className="o-header__visually-hidden"
9871
+ >
9872
+ Close search bar
9873
+ </span>
9874
+ <span>
9875
+ Close
9876
+ </span>
9877
+ </button>
9878
+ </span>
9879
+ </div>
9880
+ </form>
9881
+ </div>
9882
+ <div
9883
+ className="o-header__search-widget-anchor"
9884
+ data-o-header-search-widget-anchor="primary"
9885
+ />
9808
9886
  </div>
9809
9887
  </div>
9810
9888
  <nav
@@ -11606,77 +11684,90 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
11606
11684
  <div
11607
11685
  className="o-header__container"
11608
11686
  >
11609
- <form
11610
- action="/search"
11611
- aria-label="Site search"
11612
- className="o-header__search-form"
11613
- data-n-topic-search={true}
11614
- role="search"
11687
+ <div
11688
+ className="o-header__search-main"
11615
11689
  >
11616
- <label
11617
- className="o-header__search-term o-forms-field o-forms-field--optional"
11618
- htmlFor="o-header-search-term-primary"
11690
+ <form
11691
+ action="/search"
11692
+ aria-label="Site search"
11693
+ className="o-header__search-form"
11694
+ data-n-topic-search={true}
11695
+ role="search"
11619
11696
  >
11620
- <span
11621
- className="o-forms-title o-header__visually-hidden"
11697
+ <div
11698
+ className="o-header__search-term o-forms-field o-forms-field--optional"
11622
11699
  >
11623
- <span
11624
- className="o-forms-title__main"
11625
- >
11626
- Search the
11627
- <abbr
11628
- title="Financial Times"
11629
- >
11630
- FT
11631
- </abbr>
11632
- </span>
11633
- </span>
11634
- <span
11635
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
11636
- >
11637
- <input
11638
- aria-controls="suggestions-o-header-search-term-primary"
11639
- autoCapitalize="off"
11640
- autoComplete="off"
11641
- autoCorrect="off"
11642
- id="o-header-search-term-primary"
11643
- name="q"
11644
- placeholder="Search for stories, topics or securities"
11645
- role="combobox"
11646
- spellCheck={false}
11647
- type="search"
11648
- />
11649
- <button
11650
- className="o-header__search-submit"
11651
- type="submit"
11700
+ <label
11701
+ htmlFor="o-header-search-term-primary"
11652
11702
  >
11653
11703
  <span
11654
- aria-hidden="true"
11655
- className="o-header__search-icon"
11656
- />
11657
- <span>
11658
- Search
11704
+ className="o-forms-title o-header__visually-hidden"
11705
+ >
11706
+ <span
11707
+ className="o-forms-title__main"
11708
+ >
11709
+ Search the
11710
+ <abbr
11711
+ title="Financial Times"
11712
+ >
11713
+ FT
11714
+ </abbr>
11715
+ </span>
11659
11716
  </span>
11660
- </button>
11661
- <button
11662
- aria-controls="o-header-search-primary"
11663
- className="o-header__search-close o--if-js"
11664
- data-trackable="close"
11665
- title="Close search bar"
11666
- type="button"
11717
+ </label>
11718
+ <span
11719
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
11667
11720
  >
11668
- <span
11669
- className="o-header__visually-hidden"
11721
+ <input
11722
+ aria-controls="suggestions-o-header-search-term-primary"
11723
+ autoCapitalize="off"
11724
+ autoComplete="off"
11725
+ autoCorrect="off"
11726
+ id="o-header-search-term-primary"
11727
+ name="q"
11728
+ placeholder="Search for stories, topics or securities"
11729
+ role="combobox"
11730
+ spellCheck={false}
11731
+ type="search"
11732
+ />
11733
+ <button
11734
+ aria-label="search"
11735
+ className="o-header__search-submit"
11736
+ type="submit"
11670
11737
  >
11671
- Close search bar
11672
- </span>
11673
- <span>
11674
- Close
11675
- </span>
11676
- </button>
11677
- </span>
11678
- </label>
11679
- </form>
11738
+ <span
11739
+ aria-hidden="true"
11740
+ className="o-header__search-icon"
11741
+ />
11742
+ <span>
11743
+ Search
11744
+ </span>
11745
+ </button>
11746
+ <button
11747
+ aria-controls="o-header-search-primary"
11748
+ aria-label="close"
11749
+ className="o-header__search-close o--if-js"
11750
+ data-trackable="close"
11751
+ title="Close search bar"
11752
+ type="button"
11753
+ >
11754
+ <span
11755
+ className="o-header__visually-hidden"
11756
+ >
11757
+ Close search bar
11758
+ </span>
11759
+ <span>
11760
+ Close
11761
+ </span>
11762
+ </button>
11763
+ </span>
11764
+ </div>
11765
+ </form>
11766
+ </div>
11767
+ <div
11768
+ className="o-header__search-widget-anchor"
11769
+ data-o-header-search-widget-anchor="primary"
11770
+ />
11680
11771
  </div>
11681
11772
  </div>
11682
11773
  <nav
@@ -13478,77 +13569,90 @@ exports[`dotcom-ui-header/src/components/MainHeader renders restart subscription
13478
13569
  <div
13479
13570
  className="o-header__container"
13480
13571
  >
13481
- <form
13482
- action="/search"
13483
- aria-label="Site search"
13484
- className="o-header__search-form"
13485
- data-n-topic-search={true}
13486
- role="search"
13572
+ <div
13573
+ className="o-header__search-main"
13487
13574
  >
13488
- <label
13489
- className="o-header__search-term o-forms-field o-forms-field--optional"
13490
- htmlFor="o-header-search-term-primary"
13575
+ <form
13576
+ action="/search"
13577
+ aria-label="Site search"
13578
+ className="o-header__search-form"
13579
+ data-n-topic-search={true}
13580
+ role="search"
13491
13581
  >
13492
- <span
13493
- className="o-forms-title o-header__visually-hidden"
13582
+ <div
13583
+ className="o-header__search-term o-forms-field o-forms-field--optional"
13494
13584
  >
13495
- <span
13496
- className="o-forms-title__main"
13497
- >
13498
- Search the
13499
- <abbr
13500
- title="Financial Times"
13501
- >
13502
- FT
13503
- </abbr>
13504
- </span>
13505
- </span>
13506
- <span
13507
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
13508
- >
13509
- <input
13510
- aria-controls="suggestions-o-header-search-term-primary"
13511
- autoCapitalize="off"
13512
- autoComplete="off"
13513
- autoCorrect="off"
13514
- id="o-header-search-term-primary"
13515
- name="q"
13516
- placeholder="Search for stories, topics or securities"
13517
- role="combobox"
13518
- spellCheck={false}
13519
- type="search"
13520
- />
13521
- <button
13522
- className="o-header__search-submit"
13523
- type="submit"
13585
+ <label
13586
+ htmlFor="o-header-search-term-primary"
13524
13587
  >
13525
13588
  <span
13526
- aria-hidden="true"
13527
- className="o-header__search-icon"
13528
- />
13529
- <span>
13530
- Search
13589
+ className="o-forms-title o-header__visually-hidden"
13590
+ >
13591
+ <span
13592
+ className="o-forms-title__main"
13593
+ >
13594
+ Search the
13595
+ <abbr
13596
+ title="Financial Times"
13597
+ >
13598
+ FT
13599
+ </abbr>
13600
+ </span>
13531
13601
  </span>
13532
- </button>
13533
- <button
13534
- aria-controls="o-header-search-primary"
13535
- className="o-header__search-close o--if-js"
13536
- data-trackable="close"
13537
- title="Close search bar"
13538
- type="button"
13602
+ </label>
13603
+ <span
13604
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
13539
13605
  >
13540
- <span
13541
- className="o-header__visually-hidden"
13606
+ <input
13607
+ aria-controls="suggestions-o-header-search-term-primary"
13608
+ autoCapitalize="off"
13609
+ autoComplete="off"
13610
+ autoCorrect="off"
13611
+ id="o-header-search-term-primary"
13612
+ name="q"
13613
+ placeholder="Search for stories, topics or securities"
13614
+ role="combobox"
13615
+ spellCheck={false}
13616
+ type="search"
13617
+ />
13618
+ <button
13619
+ aria-label="search"
13620
+ className="o-header__search-submit"
13621
+ type="submit"
13542
13622
  >
13543
- Close search bar
13544
- </span>
13545
- <span>
13546
- Close
13547
- </span>
13548
- </button>
13549
- </span>
13550
- </label>
13551
- </form>
13623
+ <span
13624
+ aria-hidden="true"
13625
+ className="o-header__search-icon"
13626
+ />
13627
+ <span>
13628
+ Search
13629
+ </span>
13630
+ </button>
13631
+ <button
13632
+ aria-controls="o-header-search-primary"
13633
+ aria-label="close"
13634
+ className="o-header__search-close o--if-js"
13635
+ data-trackable="close"
13636
+ title="Close search bar"
13637
+ type="button"
13638
+ >
13639
+ <span
13640
+ className="o-header__visually-hidden"
13641
+ >
13642
+ Close search bar
13643
+ </span>
13644
+ <span>
13645
+ Close
13646
+ </span>
13647
+ </button>
13648
+ </span>
13649
+ </div>
13650
+ </form>
13651
+ </div>
13652
+ <div
13653
+ className="o-header__search-widget-anchor"
13654
+ data-o-header-search-widget-anchor="primary"
13655
+ />
13552
13656
  </div>
13553
13657
  </div>
13554
13658
  <nav