@financial-times/dotcom-ui-header 13.8.1-beta.0 → 13.9.0

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 (10) hide show
  1. package/README.md +14 -0
  2. package/browser.js +13 -13
  3. package/dist/node/components/search/partials.js +16 -14
  4. package/dist/tsconfig.tsbuildinfo +1 -1
  5. package/package.json +2 -2
  6. package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +552 -488
  7. package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +345 -305
  8. package/src/__test__/output/component.spec.tsx +32 -0
  9. package/src/components/search/partials.tsx +46 -42
  10. package/src/header.scss +32 -0
package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap CHANGED
@@ -113,77 +113,85 @@ 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
+ <label
127
+ className="o-header__search-term o-forms-field o-forms-field--optional"
128
+ htmlFor="o-header-search-term-primary"
129
129
  >
130
130
  <span
131
- className="o-forms-title__main"
131
+ className="o-forms-title o-header__visually-hidden"
132
132
  >
133
- Search the
134
- <abbr
135
- title="Financial Times"
133
+ <span
134
+ className="o-forms-title__main"
136
135
  >
137
- FT
138
- </abbr>
136
+ Search the
137
+ <abbr
138
+ title="Financial Times"
139
+ >
140
+ FT
141
+ </abbr>
142
+ </span>
139
143
  </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"
144
+ <span
145
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
159
146
  >
160
- <span
161
- aria-hidden="true"
162
- className="o-header__search-icon"
147
+ <input
148
+ aria-controls="suggestions-o-header-search-term-primary"
149
+ autoCapitalize="off"
150
+ autoComplete="off"
151
+ autoCorrect="off"
152
+ id="o-header-search-term-primary"
153
+ name="q"
154
+ placeholder="Search for stories, topics or securities"
155
+ role="combobox"
156
+ spellCheck={false}
157
+ type="search"
163
158
  />
164
- <span>
165
- Search
166
- </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"
174
- >
175
- <span
176
- className="o-header__visually-hidden"
159
+ <button
160
+ className="o-header__search-submit"
161
+ type="submit"
177
162
  >
178
- Close search bar
179
- </span>
180
- <span>
181
- Close
182
- </span>
183
- </button>
184
- </span>
185
- </label>
186
- </form>
163
+ <span
164
+ aria-hidden="true"
165
+ className="o-header__search-icon"
166
+ />
167
+ <span>
168
+ Search
169
+ </span>
170
+ </button>
171
+ <button
172
+ aria-controls="o-header-search-primary"
173
+ className="o-header__search-close o--if-js"
174
+ data-trackable="close"
175
+ title="Close search bar"
176
+ type="button"
177
+ >
178
+ <span
179
+ className="o-header__visually-hidden"
180
+ >
181
+ Close search bar
182
+ </span>
183
+ <span>
184
+ Close
185
+ </span>
186
+ </button>
187
+ </span>
188
+ </label>
189
+ </form>
190
+ </div>
191
+ <div
192
+ className="o-header__search-widget-anchor"
193
+ data-o-header-search-widget-anchor="primary"
194
+ />
187
195
  </div>
188
196
  </div>
189
197
  <nav
@@ -1994,77 +2002,85 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
1994
2002
  <div
1995
2003
  className="o-header__container"
1996
2004
  >
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"
2005
+ <div
2006
+ className="o-header__search-main"
2003
2007
  >
2004
- <label
2005
- className="o-header__search-term o-forms-field o-forms-field--optional"
2006
- htmlFor="o-header-search-term-primary"
2008
+ <form
2009
+ action="/search"
2010
+ aria-label="Site search"
2011
+ className="o-header__search-form"
2012
+ data-n-topic-search={true}
2013
+ role="search"
2007
2014
  >
2008
- <span
2009
- className="o-forms-title o-header__visually-hidden"
2015
+ <label
2016
+ className="o-header__search-term o-forms-field o-forms-field--optional"
2017
+ htmlFor="o-header-search-term-primary"
2010
2018
  >
2011
2019
  <span
2012
- className="o-forms-title__main"
2020
+ className="o-forms-title o-header__visually-hidden"
2013
2021
  >
2014
- Search the
2015
- <abbr
2016
- title="Financial Times"
2022
+ <span
2023
+ className="o-forms-title__main"
2017
2024
  >
2018
- FT
2019
- </abbr>
2025
+ Search the
2026
+ <abbr
2027
+ title="Financial Times"
2028
+ >
2029
+ FT
2030
+ </abbr>
2031
+ </span>
2020
2032
  </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"
2033
+ <span
2034
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
2040
2035
  >
2041
- <span
2042
- aria-hidden="true"
2043
- className="o-header__search-icon"
2036
+ <input
2037
+ aria-controls="suggestions-o-header-search-term-primary"
2038
+ autoCapitalize="off"
2039
+ autoComplete="off"
2040
+ autoCorrect="off"
2041
+ id="o-header-search-term-primary"
2042
+ name="q"
2043
+ placeholder="Search for stories, topics or securities"
2044
+ role="combobox"
2045
+ spellCheck={false}
2046
+ type="search"
2044
2047
  />
2045
- <span>
2046
- Search
2047
- </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"
2055
- >
2056
- <span
2057
- className="o-header__visually-hidden"
2048
+ <button
2049
+ className="o-header__search-submit"
2050
+ type="submit"
2058
2051
  >
2059
- Close search bar
2060
- </span>
2061
- <span>
2062
- Close
2063
- </span>
2064
- </button>
2065
- </span>
2066
- </label>
2067
- </form>
2052
+ <span
2053
+ aria-hidden="true"
2054
+ className="o-header__search-icon"
2055
+ />
2056
+ <span>
2057
+ Search
2058
+ </span>
2059
+ </button>
2060
+ <button
2061
+ aria-controls="o-header-search-primary"
2062
+ className="o-header__search-close o--if-js"
2063
+ data-trackable="close"
2064
+ title="Close search bar"
2065
+ type="button"
2066
+ >
2067
+ <span
2068
+ className="o-header__visually-hidden"
2069
+ >
2070
+ Close search bar
2071
+ </span>
2072
+ <span>
2073
+ Close
2074
+ </span>
2075
+ </button>
2076
+ </span>
2077
+ </label>
2078
+ </form>
2079
+ </div>
2080
+ <div
2081
+ className="o-header__search-widget-anchor"
2082
+ data-o-header-search-widget-anchor="primary"
2083
+ />
2068
2084
  </div>
2069
2085
  </div>
2070
2086
  <nav
@@ -4113,77 +4129,85 @@ exports[`dotcom-ui-header/src/components/MainHeader renders FT Pro Dropdown menu
4113
4129
  <div
4114
4130
  className="o-header__container"
4115
4131
  >
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"
4132
+ <div
4133
+ className="o-header__search-main"
4122
4134
  >
4123
- <label
4124
- className="o-header__search-term o-forms-field o-forms-field--optional"
4125
- htmlFor="o-header-search-term-primary"
4135
+ <form
4136
+ action="/search"
4137
+ aria-label="Site search"
4138
+ className="o-header__search-form"
4139
+ data-n-topic-search={true}
4140
+ role="search"
4126
4141
  >
4127
- <span
4128
- className="o-forms-title o-header__visually-hidden"
4142
+ <label
4143
+ className="o-header__search-term o-forms-field o-forms-field--optional"
4144
+ htmlFor="o-header-search-term-primary"
4129
4145
  >
4130
4146
  <span
4131
- className="o-forms-title__main"
4147
+ className="o-forms-title o-header__visually-hidden"
4132
4148
  >
4133
- Search the
4134
- <abbr
4135
- title="Financial Times"
4149
+ <span
4150
+ className="o-forms-title__main"
4136
4151
  >
4137
- FT
4138
- </abbr>
4152
+ Search the
4153
+ <abbr
4154
+ title="Financial Times"
4155
+ >
4156
+ FT
4157
+ </abbr>
4158
+ </span>
4139
4159
  </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"
4160
+ <span
4161
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
4159
4162
  >
4160
- <span
4161
- aria-hidden="true"
4162
- className="o-header__search-icon"
4163
+ <input
4164
+ aria-controls="suggestions-o-header-search-term-primary"
4165
+ autoCapitalize="off"
4166
+ autoComplete="off"
4167
+ autoCorrect="off"
4168
+ id="o-header-search-term-primary"
4169
+ name="q"
4170
+ placeholder="Search for stories, topics or securities"
4171
+ role="combobox"
4172
+ spellCheck={false}
4173
+ type="search"
4163
4174
  />
4164
- <span>
4165
- Search
4166
- </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"
4174
- >
4175
- <span
4176
- className="o-header__visually-hidden"
4175
+ <button
4176
+ className="o-header__search-submit"
4177
+ type="submit"
4177
4178
  >
4178
- Close search bar
4179
- </span>
4180
- <span>
4181
- Close
4182
- </span>
4183
- </button>
4184
- </span>
4185
- </label>
4186
- </form>
4179
+ <span
4180
+ aria-hidden="true"
4181
+ className="o-header__search-icon"
4182
+ />
4183
+ <span>
4184
+ Search
4185
+ </span>
4186
+ </button>
4187
+ <button
4188
+ aria-controls="o-header-search-primary"
4189
+ className="o-header__search-close o--if-js"
4190
+ data-trackable="close"
4191
+ title="Close search bar"
4192
+ type="button"
4193
+ >
4194
+ <span
4195
+ className="o-header__visually-hidden"
4196
+ >
4197
+ Close search bar
4198
+ </span>
4199
+ <span>
4200
+ Close
4201
+ </span>
4202
+ </button>
4203
+ </span>
4204
+ </label>
4205
+ </form>
4206
+ </div>
4207
+ <div
4208
+ className="o-header__search-widget-anchor"
4209
+ data-o-header-search-widget-anchor="primary"
4210
+ />
4187
4211
  </div>
4188
4212
  </div>
4189
4213
  <nav
@@ -5995,77 +6019,85 @@ exports[`dotcom-ui-header/src/components/MainHeader renders MPR button 1`] = `
5995
6019
  <div
5996
6020
  className="o-header__container"
5997
6021
  >
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"
6022
+ <div
6023
+ className="o-header__search-main"
6004
6024
  >
6005
- <label
6006
- className="o-header__search-term o-forms-field o-forms-field--optional"
6007
- htmlFor="o-header-search-term-primary"
6025
+ <form
6026
+ action="/search"
6027
+ aria-label="Site search"
6028
+ className="o-header__search-form"
6029
+ data-n-topic-search={true}
6030
+ role="search"
6008
6031
  >
6009
- <span
6010
- className="o-forms-title o-header__visually-hidden"
6032
+ <label
6033
+ className="o-header__search-term o-forms-field o-forms-field--optional"
6034
+ htmlFor="o-header-search-term-primary"
6011
6035
  >
6012
6036
  <span
6013
- className="o-forms-title__main"
6037
+ className="o-forms-title o-header__visually-hidden"
6014
6038
  >
6015
- Search the
6016
- <abbr
6017
- title="Financial Times"
6039
+ <span
6040
+ className="o-forms-title__main"
6018
6041
  >
6019
- FT
6020
- </abbr>
6042
+ Search the
6043
+ <abbr
6044
+ title="Financial Times"
6045
+ >
6046
+ FT
6047
+ </abbr>
6048
+ </span>
6021
6049
  </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
+ <span
6051
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
6041
6052
  >
6042
- <span
6043
- aria-hidden="true"
6044
- className="o-header__search-icon"
6053
+ <input
6054
+ aria-controls="suggestions-o-header-search-term-primary"
6055
+ autoCapitalize="off"
6056
+ autoComplete="off"
6057
+ autoCorrect="off"
6058
+ id="o-header-search-term-primary"
6059
+ name="q"
6060
+ placeholder="Search for stories, topics or securities"
6061
+ role="combobox"
6062
+ spellCheck={false}
6063
+ type="search"
6045
6064
  />
6046
- <span>
6047
- Search
6048
- </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"
6056
- >
6057
- <span
6058
- className="o-header__visually-hidden"
6065
+ <button
6066
+ className="o-header__search-submit"
6067
+ type="submit"
6059
6068
  >
6060
- Close search bar
6061
- </span>
6062
- <span>
6063
- Close
6064
- </span>
6065
- </button>
6066
- </span>
6067
- </label>
6068
- </form>
6069
+ <span
6070
+ aria-hidden="true"
6071
+ className="o-header__search-icon"
6072
+ />
6073
+ <span>
6074
+ Search
6075
+ </span>
6076
+ </button>
6077
+ <button
6078
+ aria-controls="o-header-search-primary"
6079
+ className="o-header__search-close o--if-js"
6080
+ data-trackable="close"
6081
+ title="Close search bar"
6082
+ type="button"
6083
+ >
6084
+ <span
6085
+ className="o-header__visually-hidden"
6086
+ >
6087
+ Close search bar
6088
+ </span>
6089
+ <span>
6090
+ Close
6091
+ </span>
6092
+ </button>
6093
+ </span>
6094
+ </label>
6095
+ </form>
6096
+ </div>
6097
+ <div
6098
+ className="o-header__search-widget-anchor"
6099
+ data-o-header-search-widget-anchor="primary"
6100
+ />
6069
6101
  </div>
6070
6102
  </div>
6071
6103
  <nav
@@ -7867,77 +7899,85 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
7867
7899
  <div
7868
7900
  className="o-header__container"
7869
7901
  >
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"
7902
+ <div
7903
+ className="o-header__search-main"
7876
7904
  >
7877
- <label
7878
- className="o-header__search-term o-forms-field o-forms-field--optional"
7879
- htmlFor="o-header-search-term-primary"
7905
+ <form
7906
+ action="/search"
7907
+ aria-label="Site search"
7908
+ className="o-header__search-form"
7909
+ data-n-topic-search={true}
7910
+ role="search"
7880
7911
  >
7881
- <span
7882
- className="o-forms-title o-header__visually-hidden"
7912
+ <label
7913
+ className="o-header__search-term o-forms-field o-forms-field--optional"
7914
+ htmlFor="o-header-search-term-primary"
7883
7915
  >
7884
7916
  <span
7885
- className="o-forms-title__main"
7917
+ className="o-forms-title o-header__visually-hidden"
7886
7918
  >
7887
- Search the
7888
- <abbr
7889
- title="Financial Times"
7919
+ <span
7920
+ className="o-forms-title__main"
7890
7921
  >
7891
- FT
7892
- </abbr>
7922
+ Search the
7923
+ <abbr
7924
+ title="Financial Times"
7925
+ >
7926
+ FT
7927
+ </abbr>
7928
+ </span>
7893
7929
  </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"
7930
+ <span
7931
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
7913
7932
  >
7914
- <span
7915
- aria-hidden="true"
7916
- className="o-header__search-icon"
7933
+ <input
7934
+ aria-controls="suggestions-o-header-search-term-primary"
7935
+ autoCapitalize="off"
7936
+ autoComplete="off"
7937
+ autoCorrect="off"
7938
+ id="o-header-search-term-primary"
7939
+ name="q"
7940
+ placeholder="Search for stories, topics or securities"
7941
+ role="combobox"
7942
+ spellCheck={false}
7943
+ type="search"
7917
7944
  />
7918
- <span>
7919
- Search
7920
- </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"
7928
- >
7929
- <span
7930
- className="o-header__visually-hidden"
7945
+ <button
7946
+ className="o-header__search-submit"
7947
+ type="submit"
7931
7948
  >
7932
- Close search bar
7933
- </span>
7934
- <span>
7935
- Close
7936
- </span>
7937
- </button>
7938
- </span>
7939
- </label>
7940
- </form>
7949
+ <span
7950
+ aria-hidden="true"
7951
+ className="o-header__search-icon"
7952
+ />
7953
+ <span>
7954
+ Search
7955
+ </span>
7956
+ </button>
7957
+ <button
7958
+ aria-controls="o-header-search-primary"
7959
+ className="o-header__search-close o--if-js"
7960
+ data-trackable="close"
7961
+ title="Close search bar"
7962
+ type="button"
7963
+ >
7964
+ <span
7965
+ className="o-header__visually-hidden"
7966
+ >
7967
+ Close search bar
7968
+ </span>
7969
+ <span>
7970
+ Close
7971
+ </span>
7972
+ </button>
7973
+ </span>
7974
+ </label>
7975
+ </form>
7976
+ </div>
7977
+ <div
7978
+ className="o-header__search-widget-anchor"
7979
+ data-o-header-search-widget-anchor="primary"
7980
+ />
7941
7981
  </div>
7942
7982
  </div>
7943
7983
  <nav
@@ -9734,77 +9774,85 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
9734
9774
  <div
9735
9775
  className="o-header__container"
9736
9776
  >
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"
9777
+ <div
9778
+ className="o-header__search-main"
9743
9779
  >
9744
- <label
9745
- className="o-header__search-term o-forms-field o-forms-field--optional"
9746
- htmlFor="o-header-search-term-primary"
9780
+ <form
9781
+ action="/search"
9782
+ aria-label="Site search"
9783
+ className="o-header__search-form"
9784
+ data-n-topic-search={true}
9785
+ role="search"
9747
9786
  >
9748
- <span
9749
- className="o-forms-title o-header__visually-hidden"
9787
+ <label
9788
+ className="o-header__search-term o-forms-field o-forms-field--optional"
9789
+ htmlFor="o-header-search-term-primary"
9750
9790
  >
9751
9791
  <span
9752
- className="o-forms-title__main"
9792
+ className="o-forms-title o-header__visually-hidden"
9753
9793
  >
9754
- Search the
9755
- <abbr
9756
- title="Financial Times"
9794
+ <span
9795
+ className="o-forms-title__main"
9757
9796
  >
9758
- FT
9759
- </abbr>
9797
+ Search the
9798
+ <abbr
9799
+ title="Financial Times"
9800
+ >
9801
+ FT
9802
+ </abbr>
9803
+ </span>
9760
9804
  </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"
9805
+ <span
9806
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
9780
9807
  >
9781
- <span
9782
- aria-hidden="true"
9783
- className="o-header__search-icon"
9808
+ <input
9809
+ aria-controls="suggestions-o-header-search-term-primary"
9810
+ autoCapitalize="off"
9811
+ autoComplete="off"
9812
+ autoCorrect="off"
9813
+ id="o-header-search-term-primary"
9814
+ name="q"
9815
+ placeholder="Search for stories, topics or securities"
9816
+ role="combobox"
9817
+ spellCheck={false}
9818
+ type="search"
9784
9819
  />
9785
- <span>
9786
- Search
9787
- </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"
9795
- >
9796
- <span
9797
- className="o-header__visually-hidden"
9820
+ <button
9821
+ className="o-header__search-submit"
9822
+ type="submit"
9798
9823
  >
9799
- Close search bar
9800
- </span>
9801
- <span>
9802
- Close
9803
- </span>
9804
- </button>
9805
- </span>
9806
- </label>
9807
- </form>
9824
+ <span
9825
+ aria-hidden="true"
9826
+ className="o-header__search-icon"
9827
+ />
9828
+ <span>
9829
+ Search
9830
+ </span>
9831
+ </button>
9832
+ <button
9833
+ aria-controls="o-header-search-primary"
9834
+ className="o-header__search-close o--if-js"
9835
+ data-trackable="close"
9836
+ title="Close search bar"
9837
+ type="button"
9838
+ >
9839
+ <span
9840
+ className="o-header__visually-hidden"
9841
+ >
9842
+ Close search bar
9843
+ </span>
9844
+ <span>
9845
+ Close
9846
+ </span>
9847
+ </button>
9848
+ </span>
9849
+ </label>
9850
+ </form>
9851
+ </div>
9852
+ <div
9853
+ className="o-header__search-widget-anchor"
9854
+ data-o-header-search-widget-anchor="primary"
9855
+ />
9808
9856
  </div>
9809
9857
  </div>
9810
9858
  <nav
@@ -11606,77 +11654,85 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
11606
11654
  <div
11607
11655
  className="o-header__container"
11608
11656
  >
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"
11657
+ <div
11658
+ className="o-header__search-main"
11615
11659
  >
11616
- <label
11617
- className="o-header__search-term o-forms-field o-forms-field--optional"
11618
- htmlFor="o-header-search-term-primary"
11660
+ <form
11661
+ action="/search"
11662
+ aria-label="Site search"
11663
+ className="o-header__search-form"
11664
+ data-n-topic-search={true}
11665
+ role="search"
11619
11666
  >
11620
- <span
11621
- className="o-forms-title o-header__visually-hidden"
11667
+ <label
11668
+ className="o-header__search-term o-forms-field o-forms-field--optional"
11669
+ htmlFor="o-header-search-term-primary"
11622
11670
  >
11623
11671
  <span
11624
- className="o-forms-title__main"
11672
+ className="o-forms-title o-header__visually-hidden"
11625
11673
  >
11626
- Search the
11627
- <abbr
11628
- title="Financial Times"
11674
+ <span
11675
+ className="o-forms-title__main"
11629
11676
  >
11630
- FT
11631
- </abbr>
11677
+ Search the
11678
+ <abbr
11679
+ title="Financial Times"
11680
+ >
11681
+ FT
11682
+ </abbr>
11683
+ </span>
11632
11684
  </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"
11685
+ <span
11686
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
11652
11687
  >
11653
- <span
11654
- aria-hidden="true"
11655
- className="o-header__search-icon"
11688
+ <input
11689
+ aria-controls="suggestions-o-header-search-term-primary"
11690
+ autoCapitalize="off"
11691
+ autoComplete="off"
11692
+ autoCorrect="off"
11693
+ id="o-header-search-term-primary"
11694
+ name="q"
11695
+ placeholder="Search for stories, topics or securities"
11696
+ role="combobox"
11697
+ spellCheck={false}
11698
+ type="search"
11656
11699
  />
11657
- <span>
11658
- Search
11659
- </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"
11667
- >
11668
- <span
11669
- className="o-header__visually-hidden"
11700
+ <button
11701
+ className="o-header__search-submit"
11702
+ type="submit"
11670
11703
  >
11671
- Close search bar
11672
- </span>
11673
- <span>
11674
- Close
11675
- </span>
11676
- </button>
11677
- </span>
11678
- </label>
11679
- </form>
11704
+ <span
11705
+ aria-hidden="true"
11706
+ className="o-header__search-icon"
11707
+ />
11708
+ <span>
11709
+ Search
11710
+ </span>
11711
+ </button>
11712
+ <button
11713
+ aria-controls="o-header-search-primary"
11714
+ className="o-header__search-close o--if-js"
11715
+ data-trackable="close"
11716
+ title="Close search bar"
11717
+ type="button"
11718
+ >
11719
+ <span
11720
+ className="o-header__visually-hidden"
11721
+ >
11722
+ Close search bar
11723
+ </span>
11724
+ <span>
11725
+ Close
11726
+ </span>
11727
+ </button>
11728
+ </span>
11729
+ </label>
11730
+ </form>
11731
+ </div>
11732
+ <div
11733
+ className="o-header__search-widget-anchor"
11734
+ data-o-header-search-widget-anchor="primary"
11735
+ />
11680
11736
  </div>
11681
11737
  </div>
11682
11738
  <nav
@@ -13478,77 +13534,85 @@ exports[`dotcom-ui-header/src/components/MainHeader renders restart subscription
13478
13534
  <div
13479
13535
  className="o-header__container"
13480
13536
  >
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"
13537
+ <div
13538
+ className="o-header__search-main"
13487
13539
  >
13488
- <label
13489
- className="o-header__search-term o-forms-field o-forms-field--optional"
13490
- htmlFor="o-header-search-term-primary"
13540
+ <form
13541
+ action="/search"
13542
+ aria-label="Site search"
13543
+ className="o-header__search-form"
13544
+ data-n-topic-search={true}
13545
+ role="search"
13491
13546
  >
13492
- <span
13493
- className="o-forms-title o-header__visually-hidden"
13547
+ <label
13548
+ className="o-header__search-term o-forms-field o-forms-field--optional"
13549
+ htmlFor="o-header-search-term-primary"
13494
13550
  >
13495
13551
  <span
13496
- className="o-forms-title__main"
13552
+ className="o-forms-title o-header__visually-hidden"
13497
13553
  >
13498
- Search the
13499
- <abbr
13500
- title="Financial Times"
13554
+ <span
13555
+ className="o-forms-title__main"
13501
13556
  >
13502
- FT
13503
- </abbr>
13557
+ Search the
13558
+ <abbr
13559
+ title="Financial Times"
13560
+ >
13561
+ FT
13562
+ </abbr>
13563
+ </span>
13504
13564
  </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"
13565
+ <span
13566
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
13524
13567
  >
13525
- <span
13526
- aria-hidden="true"
13527
- className="o-header__search-icon"
13568
+ <input
13569
+ aria-controls="suggestions-o-header-search-term-primary"
13570
+ autoCapitalize="off"
13571
+ autoComplete="off"
13572
+ autoCorrect="off"
13573
+ id="o-header-search-term-primary"
13574
+ name="q"
13575
+ placeholder="Search for stories, topics or securities"
13576
+ role="combobox"
13577
+ spellCheck={false}
13578
+ type="search"
13528
13579
  />
13529
- <span>
13530
- Search
13531
- </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"
13539
- >
13540
- <span
13541
- className="o-header__visually-hidden"
13580
+ <button
13581
+ className="o-header__search-submit"
13582
+ type="submit"
13542
13583
  >
13543
- Close search bar
13544
- </span>
13545
- <span>
13546
- Close
13547
- </span>
13548
- </button>
13549
- </span>
13550
- </label>
13551
- </form>
13584
+ <span
13585
+ aria-hidden="true"
13586
+ className="o-header__search-icon"
13587
+ />
13588
+ <span>
13589
+ Search
13590
+ </span>
13591
+ </button>
13592
+ <button
13593
+ aria-controls="o-header-search-primary"
13594
+ className="o-header__search-close o--if-js"
13595
+ data-trackable="close"
13596
+ title="Close search bar"
13597
+ type="button"
13598
+ >
13599
+ <span
13600
+ className="o-header__visually-hidden"
13601
+ >
13602
+ Close search bar
13603
+ </span>
13604
+ <span>
13605
+ Close
13606
+ </span>
13607
+ </button>
13608
+ </span>
13609
+ </label>
13610
+ </form>
13611
+ </div>
13612
+ <div
13613
+ className="o-header__search-widget-anchor"
13614
+ data-o-header-search-widget-anchor="primary"
13615
+ />
13552
13616
  </div>
13553
13617
  </div>
13554
13618
  <nav