@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__/StickyHeader.spec.tsx.snap CHANGED
@@ -258,77 +258,85 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
258
258
  <div
259
259
  className="o-header__container"
260
260
  >
261
- <form
262
- action="/search"
263
- aria-label="Site search"
264
- className="o-header__search-form"
265
- data-n-topic-search={true}
266
- role="search"
261
+ <div
262
+ className="o-header__search-main"
267
263
  >
268
- <label
269
- className="o-header__search-term o-forms-field o-forms-field--optional"
270
- htmlFor="o-header-search-term-sticky"
264
+ <form
265
+ action="/search"
266
+ aria-label="Site search"
267
+ className="o-header__search-form"
268
+ data-n-topic-search={true}
269
+ role="search"
271
270
  >
272
- <span
273
- className="o-forms-title o-header__visually-hidden"
271
+ <label
272
+ className="o-header__search-term o-forms-field o-forms-field--optional"
273
+ htmlFor="o-header-search-term-sticky"
274
274
  >
275
275
  <span
276
- className="o-forms-title__main"
276
+ className="o-forms-title o-header__visually-hidden"
277
277
  >
278
- Search the
279
- <abbr
280
- title="Financial Times"
278
+ <span
279
+ className="o-forms-title__main"
281
280
  >
282
- FT
283
- </abbr>
281
+ Search the
282
+ <abbr
283
+ title="Financial Times"
284
+ >
285
+ FT
286
+ </abbr>
287
+ </span>
284
288
  </span>
285
- </span>
286
- <span
287
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
288
- >
289
- <input
290
- aria-controls="suggestions-o-header-search-term-sticky"
291
- autoCapitalize="off"
292
- autoComplete="off"
293
- autoCorrect="off"
294
- id="o-header-search-term-sticky"
295
- name="q"
296
- placeholder="Search for stories, topics or securities"
297
- role="combobox"
298
- spellCheck={false}
299
- type="search"
300
- />
301
- <button
302
- className="o-header__search-submit"
303
- type="submit"
289
+ <span
290
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
304
291
  >
305
- <span
306
- aria-hidden="true"
307
- className="o-header__search-icon"
292
+ <input
293
+ aria-controls="suggestions-o-header-search-term-sticky"
294
+ autoCapitalize="off"
295
+ autoComplete="off"
296
+ autoCorrect="off"
297
+ id="o-header-search-term-sticky"
298
+ name="q"
299
+ placeholder="Search for stories, topics or securities"
300
+ role="combobox"
301
+ spellCheck={false}
302
+ type="search"
308
303
  />
309
- <span>
310
- Search
311
- </span>
312
- </button>
313
- <button
314
- aria-controls="o-header-search-sticky"
315
- className="o-header__search-close o--if-js"
316
- data-trackable="close"
317
- title="Close search bar"
318
- type="button"
319
- >
320
- <span
321
- className="o-header__visually-hidden"
304
+ <button
305
+ className="o-header__search-submit"
306
+ type="submit"
322
307
  >
323
- Close search bar
324
- </span>
325
- <span>
326
- Close
327
- </span>
328
- </button>
329
- </span>
330
- </label>
331
- </form>
308
+ <span
309
+ aria-hidden="true"
310
+ className="o-header__search-icon"
311
+ />
312
+ <span>
313
+ Search
314
+ </span>
315
+ </button>
316
+ <button
317
+ aria-controls="o-header-search-sticky"
318
+ className="o-header__search-close o--if-js"
319
+ data-trackable="close"
320
+ title="Close search bar"
321
+ type="button"
322
+ >
323
+ <span
324
+ className="o-header__visually-hidden"
325
+ >
326
+ Close search bar
327
+ </span>
328
+ <span>
329
+ Close
330
+ </span>
331
+ </button>
332
+ </span>
333
+ </label>
334
+ </form>
335
+ </div>
336
+ <div
337
+ className="o-header__search-widget-anchor"
338
+ data-o-header-search-widget-anchor="sticky"
339
+ />
332
340
  </div>
333
341
  </div>
334
342
  </header>
@@ -828,77 +836,85 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
828
836
  <div
829
837
  className="o-header__container"
830
838
  >
831
- <form
832
- action="/search"
833
- aria-label="Site search"
834
- className="o-header__search-form"
835
- data-n-topic-search={true}
836
- role="search"
839
+ <div
840
+ className="o-header__search-main"
837
841
  >
838
- <label
839
- className="o-header__search-term o-forms-field o-forms-field--optional"
840
- htmlFor="o-header-search-term-sticky"
842
+ <form
843
+ action="/search"
844
+ aria-label="Site search"
845
+ className="o-header__search-form"
846
+ data-n-topic-search={true}
847
+ role="search"
841
848
  >
842
- <span
843
- className="o-forms-title o-header__visually-hidden"
849
+ <label
850
+ className="o-header__search-term o-forms-field o-forms-field--optional"
851
+ htmlFor="o-header-search-term-sticky"
844
852
  >
845
853
  <span
846
- className="o-forms-title__main"
854
+ className="o-forms-title o-header__visually-hidden"
847
855
  >
848
- Search the
849
- <abbr
850
- title="Financial Times"
856
+ <span
857
+ className="o-forms-title__main"
851
858
  >
852
- FT
853
- </abbr>
859
+ Search the
860
+ <abbr
861
+ title="Financial Times"
862
+ >
863
+ FT
864
+ </abbr>
865
+ </span>
854
866
  </span>
855
- </span>
856
- <span
857
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
858
- >
859
- <input
860
- aria-controls="suggestions-o-header-search-term-sticky"
861
- autoCapitalize="off"
862
- autoComplete="off"
863
- autoCorrect="off"
864
- id="o-header-search-term-sticky"
865
- name="q"
866
- placeholder="Search for stories, topics or securities"
867
- role="combobox"
868
- spellCheck={false}
869
- type="search"
870
- />
871
- <button
872
- className="o-header__search-submit"
873
- type="submit"
867
+ <span
868
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
874
869
  >
875
- <span
876
- aria-hidden="true"
877
- className="o-header__search-icon"
870
+ <input
871
+ aria-controls="suggestions-o-header-search-term-sticky"
872
+ autoCapitalize="off"
873
+ autoComplete="off"
874
+ autoCorrect="off"
875
+ id="o-header-search-term-sticky"
876
+ name="q"
877
+ placeholder="Search for stories, topics or securities"
878
+ role="combobox"
879
+ spellCheck={false}
880
+ type="search"
878
881
  />
879
- <span>
880
- Search
881
- </span>
882
- </button>
883
- <button
884
- aria-controls="o-header-search-sticky"
885
- className="o-header__search-close o--if-js"
886
- data-trackable="close"
887
- title="Close search bar"
888
- type="button"
889
- >
890
- <span
891
- className="o-header__visually-hidden"
882
+ <button
883
+ className="o-header__search-submit"
884
+ type="submit"
892
885
  >
893
- Close search bar
894
- </span>
895
- <span>
896
- Close
897
- </span>
898
- </button>
899
- </span>
900
- </label>
901
- </form>
886
+ <span
887
+ aria-hidden="true"
888
+ className="o-header__search-icon"
889
+ />
890
+ <span>
891
+ Search
892
+ </span>
893
+ </button>
894
+ <button
895
+ aria-controls="o-header-search-sticky"
896
+ className="o-header__search-close o--if-js"
897
+ data-trackable="close"
898
+ title="Close search bar"
899
+ type="button"
900
+ >
901
+ <span
902
+ className="o-header__visually-hidden"
903
+ >
904
+ Close search bar
905
+ </span>
906
+ <span>
907
+ Close
908
+ </span>
909
+ </button>
910
+ </span>
911
+ </label>
912
+ </form>
913
+ </div>
914
+ <div
915
+ className="o-header__search-widget-anchor"
916
+ data-o-header-search-widget-anchor="sticky"
917
+ />
902
918
  </div>
903
919
  </div>
904
920
  </header>
@@ -1152,77 +1168,85 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
1152
1168
  <div
1153
1169
  className="o-header__container"
1154
1170
  >
1155
- <form
1156
- action="/search"
1157
- aria-label="Site search"
1158
- className="o-header__search-form"
1159
- data-n-topic-search={true}
1160
- role="search"
1171
+ <div
1172
+ className="o-header__search-main"
1161
1173
  >
1162
- <label
1163
- className="o-header__search-term o-forms-field o-forms-field--optional"
1164
- htmlFor="o-header-search-term-sticky"
1174
+ <form
1175
+ action="/search"
1176
+ aria-label="Site search"
1177
+ className="o-header__search-form"
1178
+ data-n-topic-search={true}
1179
+ role="search"
1165
1180
  >
1166
- <span
1167
- className="o-forms-title o-header__visually-hidden"
1181
+ <label
1182
+ className="o-header__search-term o-forms-field o-forms-field--optional"
1183
+ htmlFor="o-header-search-term-sticky"
1168
1184
  >
1169
1185
  <span
1170
- className="o-forms-title__main"
1186
+ className="o-forms-title o-header__visually-hidden"
1171
1187
  >
1172
- Search the
1173
- <abbr
1174
- title="Financial Times"
1188
+ <span
1189
+ className="o-forms-title__main"
1175
1190
  >
1176
- FT
1177
- </abbr>
1191
+ Search the
1192
+ <abbr
1193
+ title="Financial Times"
1194
+ >
1195
+ FT
1196
+ </abbr>
1197
+ </span>
1178
1198
  </span>
1179
- </span>
1180
- <span
1181
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
1182
- >
1183
- <input
1184
- aria-controls="suggestions-o-header-search-term-sticky"
1185
- autoCapitalize="off"
1186
- autoComplete="off"
1187
- autoCorrect="off"
1188
- id="o-header-search-term-sticky"
1189
- name="q"
1190
- placeholder="Search for stories, topics or securities"
1191
- role="combobox"
1192
- spellCheck={false}
1193
- type="search"
1194
- />
1195
- <button
1196
- className="o-header__search-submit"
1197
- type="submit"
1199
+ <span
1200
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
1198
1201
  >
1199
- <span
1200
- aria-hidden="true"
1201
- className="o-header__search-icon"
1202
+ <input
1203
+ aria-controls="suggestions-o-header-search-term-sticky"
1204
+ autoCapitalize="off"
1205
+ autoComplete="off"
1206
+ autoCorrect="off"
1207
+ id="o-header-search-term-sticky"
1208
+ name="q"
1209
+ placeholder="Search for stories, topics or securities"
1210
+ role="combobox"
1211
+ spellCheck={false}
1212
+ type="search"
1202
1213
  />
1203
- <span>
1204
- Search
1205
- </span>
1206
- </button>
1207
- <button
1208
- aria-controls="o-header-search-sticky"
1209
- className="o-header__search-close o--if-js"
1210
- data-trackable="close"
1211
- title="Close search bar"
1212
- type="button"
1213
- >
1214
- <span
1215
- className="o-header__visually-hidden"
1214
+ <button
1215
+ className="o-header__search-submit"
1216
+ type="submit"
1216
1217
  >
1217
- Close search bar
1218
- </span>
1219
- <span>
1220
- Close
1221
- </span>
1222
- </button>
1223
- </span>
1224
- </label>
1225
- </form>
1218
+ <span
1219
+ aria-hidden="true"
1220
+ className="o-header__search-icon"
1221
+ />
1222
+ <span>
1223
+ Search
1224
+ </span>
1225
+ </button>
1226
+ <button
1227
+ aria-controls="o-header-search-sticky"
1228
+ className="o-header__search-close o--if-js"
1229
+ data-trackable="close"
1230
+ title="Close search bar"
1231
+ type="button"
1232
+ >
1233
+ <span
1234
+ className="o-header__visually-hidden"
1235
+ >
1236
+ Close search bar
1237
+ </span>
1238
+ <span>
1239
+ Close
1240
+ </span>
1241
+ </button>
1242
+ </span>
1243
+ </label>
1244
+ </form>
1245
+ </div>
1246
+ <div
1247
+ className="o-header__search-widget-anchor"
1248
+ data-o-header-search-widget-anchor="sticky"
1249
+ />
1226
1250
  </div>
1227
1251
  </div>
1228
1252
  </header>
@@ -1476,77 +1500,85 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
1476
1500
  <div
1477
1501
  className="o-header__container"
1478
1502
  >
1479
- <form
1480
- action="/search"
1481
- aria-label="Site search"
1482
- className="o-header__search-form"
1483
- data-n-topic-search={true}
1484
- role="search"
1503
+ <div
1504
+ className="o-header__search-main"
1485
1505
  >
1486
- <label
1487
- className="o-header__search-term o-forms-field o-forms-field--optional"
1488
- htmlFor="o-header-search-term-sticky"
1506
+ <form
1507
+ action="/search"
1508
+ aria-label="Site search"
1509
+ className="o-header__search-form"
1510
+ data-n-topic-search={true}
1511
+ role="search"
1489
1512
  >
1490
- <span
1491
- className="o-forms-title o-header__visually-hidden"
1513
+ <label
1514
+ className="o-header__search-term o-forms-field o-forms-field--optional"
1515
+ htmlFor="o-header-search-term-sticky"
1492
1516
  >
1493
1517
  <span
1494
- className="o-forms-title__main"
1518
+ className="o-forms-title o-header__visually-hidden"
1495
1519
  >
1496
- Search the
1497
- <abbr
1498
- title="Financial Times"
1520
+ <span
1521
+ className="o-forms-title__main"
1499
1522
  >
1500
- FT
1501
- </abbr>
1523
+ Search the
1524
+ <abbr
1525
+ title="Financial Times"
1526
+ >
1527
+ FT
1528
+ </abbr>
1529
+ </span>
1502
1530
  </span>
1503
- </span>
1504
- <span
1505
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
1506
- >
1507
- <input
1508
- aria-controls="suggestions-o-header-search-term-sticky"
1509
- autoCapitalize="off"
1510
- autoComplete="off"
1511
- autoCorrect="off"
1512
- id="o-header-search-term-sticky"
1513
- name="q"
1514
- placeholder="Search for stories, topics or securities"
1515
- role="combobox"
1516
- spellCheck={false}
1517
- type="search"
1518
- />
1519
- <button
1520
- className="o-header__search-submit"
1521
- type="submit"
1531
+ <span
1532
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
1522
1533
  >
1523
- <span
1524
- aria-hidden="true"
1525
- className="o-header__search-icon"
1534
+ <input
1535
+ aria-controls="suggestions-o-header-search-term-sticky"
1536
+ autoCapitalize="off"
1537
+ autoComplete="off"
1538
+ autoCorrect="off"
1539
+ id="o-header-search-term-sticky"
1540
+ name="q"
1541
+ placeholder="Search for stories, topics or securities"
1542
+ role="combobox"
1543
+ spellCheck={false}
1544
+ type="search"
1526
1545
  />
1527
- <span>
1528
- Search
1529
- </span>
1530
- </button>
1531
- <button
1532
- aria-controls="o-header-search-sticky"
1533
- className="o-header__search-close o--if-js"
1534
- data-trackable="close"
1535
- title="Close search bar"
1536
- type="button"
1537
- >
1538
- <span
1539
- className="o-header__visually-hidden"
1546
+ <button
1547
+ className="o-header__search-submit"
1548
+ type="submit"
1540
1549
  >
1541
- Close search bar
1542
- </span>
1543
- <span>
1544
- Close
1545
- </span>
1546
- </button>
1547
- </span>
1548
- </label>
1549
- </form>
1550
+ <span
1551
+ aria-hidden="true"
1552
+ className="o-header__search-icon"
1553
+ />
1554
+ <span>
1555
+ Search
1556
+ </span>
1557
+ </button>
1558
+ <button
1559
+ aria-controls="o-header-search-sticky"
1560
+ className="o-header__search-close o--if-js"
1561
+ data-trackable="close"
1562
+ title="Close search bar"
1563
+ type="button"
1564
+ >
1565
+ <span
1566
+ className="o-header__visually-hidden"
1567
+ >
1568
+ Close search bar
1569
+ </span>
1570
+ <span>
1571
+ Close
1572
+ </span>
1573
+ </button>
1574
+ </span>
1575
+ </label>
1576
+ </form>
1577
+ </div>
1578
+ <div
1579
+ className="o-header__search-widget-anchor"
1580
+ data-o-header-search-widget-anchor="sticky"
1581
+ />
1550
1582
  </div>
1551
1583
  </div>
1552
1584
  </header>
@@ -1800,77 +1832,85 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
1800
1832
  <div
1801
1833
  className="o-header__container"
1802
1834
  >
1803
- <form
1804
- action="/search"
1805
- aria-label="Site search"
1806
- className="o-header__search-form"
1807
- data-n-topic-search={true}
1808
- role="search"
1835
+ <div
1836
+ className="o-header__search-main"
1809
1837
  >
1810
- <label
1811
- className="o-header__search-term o-forms-field o-forms-field--optional"
1812
- htmlFor="o-header-search-term-sticky"
1838
+ <form
1839
+ action="/search"
1840
+ aria-label="Site search"
1841
+ className="o-header__search-form"
1842
+ data-n-topic-search={true}
1843
+ role="search"
1813
1844
  >
1814
- <span
1815
- className="o-forms-title o-header__visually-hidden"
1845
+ <label
1846
+ className="o-header__search-term o-forms-field o-forms-field--optional"
1847
+ htmlFor="o-header-search-term-sticky"
1816
1848
  >
1817
1849
  <span
1818
- className="o-forms-title__main"
1850
+ className="o-forms-title o-header__visually-hidden"
1819
1851
  >
1820
- Search the
1821
- <abbr
1822
- title="Financial Times"
1852
+ <span
1853
+ className="o-forms-title__main"
1823
1854
  >
1824
- FT
1825
- </abbr>
1855
+ Search the
1856
+ <abbr
1857
+ title="Financial Times"
1858
+ >
1859
+ FT
1860
+ </abbr>
1861
+ </span>
1826
1862
  </span>
1827
- </span>
1828
- <span
1829
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
1830
- >
1831
- <input
1832
- aria-controls="suggestions-o-header-search-term-sticky"
1833
- autoCapitalize="off"
1834
- autoComplete="off"
1835
- autoCorrect="off"
1836
- id="o-header-search-term-sticky"
1837
- name="q"
1838
- placeholder="Search for stories, topics or securities"
1839
- role="combobox"
1840
- spellCheck={false}
1841
- type="search"
1842
- />
1843
- <button
1844
- className="o-header__search-submit"
1845
- type="submit"
1863
+ <span
1864
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
1846
1865
  >
1847
- <span
1848
- aria-hidden="true"
1849
- className="o-header__search-icon"
1866
+ <input
1867
+ aria-controls="suggestions-o-header-search-term-sticky"
1868
+ autoCapitalize="off"
1869
+ autoComplete="off"
1870
+ autoCorrect="off"
1871
+ id="o-header-search-term-sticky"
1872
+ name="q"
1873
+ placeholder="Search for stories, topics or securities"
1874
+ role="combobox"
1875
+ spellCheck={false}
1876
+ type="search"
1850
1877
  />
1851
- <span>
1852
- Search
1853
- </span>
1854
- </button>
1855
- <button
1856
- aria-controls="o-header-search-sticky"
1857
- className="o-header__search-close o--if-js"
1858
- data-trackable="close"
1859
- title="Close search bar"
1860
- type="button"
1861
- >
1862
- <span
1863
- className="o-header__visually-hidden"
1878
+ <button
1879
+ className="o-header__search-submit"
1880
+ type="submit"
1864
1881
  >
1865
- Close search bar
1866
- </span>
1867
- <span>
1868
- Close
1869
- </span>
1870
- </button>
1871
- </span>
1872
- </label>
1873
- </form>
1882
+ <span
1883
+ aria-hidden="true"
1884
+ className="o-header__search-icon"
1885
+ />
1886
+ <span>
1887
+ Search
1888
+ </span>
1889
+ </button>
1890
+ <button
1891
+ aria-controls="o-header-search-sticky"
1892
+ className="o-header__search-close o--if-js"
1893
+ data-trackable="close"
1894
+ title="Close search bar"
1895
+ type="button"
1896
+ >
1897
+ <span
1898
+ className="o-header__visually-hidden"
1899
+ >
1900
+ Close search bar
1901
+ </span>
1902
+ <span>
1903
+ Close
1904
+ </span>
1905
+ </button>
1906
+ </span>
1907
+ </label>
1908
+ </form>
1909
+ </div>
1910
+ <div
1911
+ className="o-header__search-widget-anchor"
1912
+ data-o-header-search-widget-anchor="sticky"
1913
+ />
1874
1914
  </div>
1875
1915
  </div>
1876
1916
  </header>