@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__/StickyHeader.spec.tsx.snap CHANGED
@@ -258,77 +258,90 @@ 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"
274
- >
275
- <span
276
- className="o-forms-title__main"
277
- >
278
- Search the
279
- <abbr
280
- title="Financial Times"
281
- >
282
- FT
283
- </abbr>
284
- </span>
285
- </span>
286
- <span
287
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
271
+ <div
272
+ className="o-header__search-term o-forms-field o-forms-field--optional"
288
273
  >
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"
274
+ <label
275
+ htmlFor="o-header-search-term-sticky"
304
276
  >
305
277
  <span
306
- aria-hidden="true"
307
- className="o-header__search-icon"
308
- />
309
- <span>
310
- Search
278
+ className="o-forms-title o-header__visually-hidden"
279
+ >
280
+ <span
281
+ className="o-forms-title__main"
282
+ >
283
+ Search the
284
+ <abbr
285
+ title="Financial Times"
286
+ >
287
+ FT
288
+ </abbr>
289
+ </span>
311
290
  </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"
291
+ </label>
292
+ <span
293
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
319
294
  >
320
- <span
321
- className="o-header__visually-hidden"
295
+ <input
296
+ aria-controls="suggestions-o-header-search-term-sticky"
297
+ autoCapitalize="off"
298
+ autoComplete="off"
299
+ autoCorrect="off"
300
+ id="o-header-search-term-sticky"
301
+ name="q"
302
+ placeholder="Search for stories, topics or securities"
303
+ role="combobox"
304
+ spellCheck={false}
305
+ type="search"
306
+ />
307
+ <button
308
+ aria-label="search"
309
+ className="o-header__search-submit"
310
+ type="submit"
322
311
  >
323
- Close search bar
324
- </span>
325
- <span>
326
- Close
327
- </span>
328
- </button>
329
- </span>
330
- </label>
331
- </form>
312
+ <span
313
+ aria-hidden="true"
314
+ className="o-header__search-icon"
315
+ />
316
+ <span>
317
+ Search
318
+ </span>
319
+ </button>
320
+ <button
321
+ aria-controls="o-header-search-sticky"
322
+ aria-label="close"
323
+ className="o-header__search-close o--if-js"
324
+ data-trackable="close"
325
+ title="Close search bar"
326
+ type="button"
327
+ >
328
+ <span
329
+ className="o-header__visually-hidden"
330
+ >
331
+ Close search bar
332
+ </span>
333
+ <span>
334
+ Close
335
+ </span>
336
+ </button>
337
+ </span>
338
+ </div>
339
+ </form>
340
+ </div>
341
+ <div
342
+ className="o-header__search-widget-anchor"
343
+ data-o-header-search-widget-anchor="sticky"
344
+ />
332
345
  </div>
333
346
  </div>
334
347
  </header>
@@ -828,77 +841,90 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
828
841
  <div
829
842
  className="o-header__container"
830
843
  >
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"
844
+ <div
845
+ className="o-header__search-main"
837
846
  >
838
- <label
839
- className="o-header__search-term o-forms-field o-forms-field--optional"
840
- htmlFor="o-header-search-term-sticky"
847
+ <form
848
+ action="/search"
849
+ aria-label="Site search"
850
+ className="o-header__search-form"
851
+ data-n-topic-search={true}
852
+ role="search"
841
853
  >
842
- <span
843
- className="o-forms-title o-header__visually-hidden"
844
- >
845
- <span
846
- className="o-forms-title__main"
847
- >
848
- Search the
849
- <abbr
850
- title="Financial Times"
851
- >
852
- FT
853
- </abbr>
854
- </span>
855
- </span>
856
- <span
857
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
854
+ <div
855
+ className="o-header__search-term o-forms-field o-forms-field--optional"
858
856
  >
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"
857
+ <label
858
+ htmlFor="o-header-search-term-sticky"
874
859
  >
875
860
  <span
876
- aria-hidden="true"
877
- className="o-header__search-icon"
878
- />
879
- <span>
880
- Search
861
+ className="o-forms-title o-header__visually-hidden"
862
+ >
863
+ <span
864
+ className="o-forms-title__main"
865
+ >
866
+ Search the
867
+ <abbr
868
+ title="Financial Times"
869
+ >
870
+ FT
871
+ </abbr>
872
+ </span>
881
873
  </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"
874
+ </label>
875
+ <span
876
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
889
877
  >
890
- <span
891
- className="o-header__visually-hidden"
878
+ <input
879
+ aria-controls="suggestions-o-header-search-term-sticky"
880
+ autoCapitalize="off"
881
+ autoComplete="off"
882
+ autoCorrect="off"
883
+ id="o-header-search-term-sticky"
884
+ name="q"
885
+ placeholder="Search for stories, topics or securities"
886
+ role="combobox"
887
+ spellCheck={false}
888
+ type="search"
889
+ />
890
+ <button
891
+ aria-label="search"
892
+ className="o-header__search-submit"
893
+ type="submit"
892
894
  >
893
- Close search bar
894
- </span>
895
- <span>
896
- Close
897
- </span>
898
- </button>
899
- </span>
900
- </label>
901
- </form>
895
+ <span
896
+ aria-hidden="true"
897
+ className="o-header__search-icon"
898
+ />
899
+ <span>
900
+ Search
901
+ </span>
902
+ </button>
903
+ <button
904
+ aria-controls="o-header-search-sticky"
905
+ aria-label="close"
906
+ className="o-header__search-close o--if-js"
907
+ data-trackable="close"
908
+ title="Close search bar"
909
+ type="button"
910
+ >
911
+ <span
912
+ className="o-header__visually-hidden"
913
+ >
914
+ Close search bar
915
+ </span>
916
+ <span>
917
+ Close
918
+ </span>
919
+ </button>
920
+ </span>
921
+ </div>
922
+ </form>
923
+ </div>
924
+ <div
925
+ className="o-header__search-widget-anchor"
926
+ data-o-header-search-widget-anchor="sticky"
927
+ />
902
928
  </div>
903
929
  </div>
904
930
  </header>
@@ -1152,77 +1178,90 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
1152
1178
  <div
1153
1179
  className="o-header__container"
1154
1180
  >
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"
1181
+ <div
1182
+ className="o-header__search-main"
1161
1183
  >
1162
- <label
1163
- className="o-header__search-term o-forms-field o-forms-field--optional"
1164
- htmlFor="o-header-search-term-sticky"
1184
+ <form
1185
+ action="/search"
1186
+ aria-label="Site search"
1187
+ className="o-header__search-form"
1188
+ data-n-topic-search={true}
1189
+ role="search"
1165
1190
  >
1166
- <span
1167
- className="o-forms-title o-header__visually-hidden"
1168
- >
1169
- <span
1170
- className="o-forms-title__main"
1171
- >
1172
- Search the
1173
- <abbr
1174
- title="Financial Times"
1175
- >
1176
- FT
1177
- </abbr>
1178
- </span>
1179
- </span>
1180
- <span
1181
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
1191
+ <div
1192
+ className="o-header__search-term o-forms-field o-forms-field--optional"
1182
1193
  >
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"
1194
+ <label
1195
+ htmlFor="o-header-search-term-sticky"
1198
1196
  >
1199
1197
  <span
1200
- aria-hidden="true"
1201
- className="o-header__search-icon"
1202
- />
1203
- <span>
1204
- Search
1198
+ className="o-forms-title o-header__visually-hidden"
1199
+ >
1200
+ <span
1201
+ className="o-forms-title__main"
1202
+ >
1203
+ Search the
1204
+ <abbr
1205
+ title="Financial Times"
1206
+ >
1207
+ FT
1208
+ </abbr>
1209
+ </span>
1205
1210
  </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"
1211
+ </label>
1212
+ <span
1213
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
1213
1214
  >
1214
- <span
1215
- className="o-header__visually-hidden"
1215
+ <input
1216
+ aria-controls="suggestions-o-header-search-term-sticky"
1217
+ autoCapitalize="off"
1218
+ autoComplete="off"
1219
+ autoCorrect="off"
1220
+ id="o-header-search-term-sticky"
1221
+ name="q"
1222
+ placeholder="Search for stories, topics or securities"
1223
+ role="combobox"
1224
+ spellCheck={false}
1225
+ type="search"
1226
+ />
1227
+ <button
1228
+ aria-label="search"
1229
+ className="o-header__search-submit"
1230
+ type="submit"
1216
1231
  >
1217
- Close search bar
1218
- </span>
1219
- <span>
1220
- Close
1221
- </span>
1222
- </button>
1223
- </span>
1224
- </label>
1225
- </form>
1232
+ <span
1233
+ aria-hidden="true"
1234
+ className="o-header__search-icon"
1235
+ />
1236
+ <span>
1237
+ Search
1238
+ </span>
1239
+ </button>
1240
+ <button
1241
+ aria-controls="o-header-search-sticky"
1242
+ aria-label="close"
1243
+ className="o-header__search-close o--if-js"
1244
+ data-trackable="close"
1245
+ title="Close search bar"
1246
+ type="button"
1247
+ >
1248
+ <span
1249
+ className="o-header__visually-hidden"
1250
+ >
1251
+ Close search bar
1252
+ </span>
1253
+ <span>
1254
+ Close
1255
+ </span>
1256
+ </button>
1257
+ </span>
1258
+ </div>
1259
+ </form>
1260
+ </div>
1261
+ <div
1262
+ className="o-header__search-widget-anchor"
1263
+ data-o-header-search-widget-anchor="sticky"
1264
+ />
1226
1265
  </div>
1227
1266
  </div>
1228
1267
  </header>
@@ -1476,77 +1515,90 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
1476
1515
  <div
1477
1516
  className="o-header__container"
1478
1517
  >
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"
1518
+ <div
1519
+ className="o-header__search-main"
1485
1520
  >
1486
- <label
1487
- className="o-header__search-term o-forms-field o-forms-field--optional"
1488
- htmlFor="o-header-search-term-sticky"
1521
+ <form
1522
+ action="/search"
1523
+ aria-label="Site search"
1524
+ className="o-header__search-form"
1525
+ data-n-topic-search={true}
1526
+ role="search"
1489
1527
  >
1490
- <span
1491
- className="o-forms-title o-header__visually-hidden"
1492
- >
1493
- <span
1494
- className="o-forms-title__main"
1495
- >
1496
- Search the
1497
- <abbr
1498
- title="Financial Times"
1499
- >
1500
- FT
1501
- </abbr>
1502
- </span>
1503
- </span>
1504
- <span
1505
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
1528
+ <div
1529
+ className="o-header__search-term o-forms-field o-forms-field--optional"
1506
1530
  >
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
+ <label
1532
+ htmlFor="o-header-search-term-sticky"
1522
1533
  >
1523
1534
  <span
1524
- aria-hidden="true"
1525
- className="o-header__search-icon"
1526
- />
1527
- <span>
1528
- Search
1535
+ className="o-forms-title o-header__visually-hidden"
1536
+ >
1537
+ <span
1538
+ className="o-forms-title__main"
1539
+ >
1540
+ Search the
1541
+ <abbr
1542
+ title="Financial Times"
1543
+ >
1544
+ FT
1545
+ </abbr>
1546
+ </span>
1529
1547
  </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"
1548
+ </label>
1549
+ <span
1550
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
1537
1551
  >
1538
- <span
1539
- className="o-header__visually-hidden"
1552
+ <input
1553
+ aria-controls="suggestions-o-header-search-term-sticky"
1554
+ autoCapitalize="off"
1555
+ autoComplete="off"
1556
+ autoCorrect="off"
1557
+ id="o-header-search-term-sticky"
1558
+ name="q"
1559
+ placeholder="Search for stories, topics or securities"
1560
+ role="combobox"
1561
+ spellCheck={false}
1562
+ type="search"
1563
+ />
1564
+ <button
1565
+ aria-label="search"
1566
+ className="o-header__search-submit"
1567
+ type="submit"
1540
1568
  >
1541
- Close search bar
1542
- </span>
1543
- <span>
1544
- Close
1545
- </span>
1546
- </button>
1547
- </span>
1548
- </label>
1549
- </form>
1569
+ <span
1570
+ aria-hidden="true"
1571
+ className="o-header__search-icon"
1572
+ />
1573
+ <span>
1574
+ Search
1575
+ </span>
1576
+ </button>
1577
+ <button
1578
+ aria-controls="o-header-search-sticky"
1579
+ aria-label="close"
1580
+ className="o-header__search-close o--if-js"
1581
+ data-trackable="close"
1582
+ title="Close search bar"
1583
+ type="button"
1584
+ >
1585
+ <span
1586
+ className="o-header__visually-hidden"
1587
+ >
1588
+ Close search bar
1589
+ </span>
1590
+ <span>
1591
+ Close
1592
+ </span>
1593
+ </button>
1594
+ </span>
1595
+ </div>
1596
+ </form>
1597
+ </div>
1598
+ <div
1599
+ className="o-header__search-widget-anchor"
1600
+ data-o-header-search-widget-anchor="sticky"
1601
+ />
1550
1602
  </div>
1551
1603
  </div>
1552
1604
  </header>
@@ -1800,77 +1852,90 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
1800
1852
  <div
1801
1853
  className="o-header__container"
1802
1854
  >
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"
1855
+ <div
1856
+ className="o-header__search-main"
1809
1857
  >
1810
- <label
1811
- className="o-header__search-term o-forms-field o-forms-field--optional"
1812
- htmlFor="o-header-search-term-sticky"
1858
+ <form
1859
+ action="/search"
1860
+ aria-label="Site search"
1861
+ className="o-header__search-form"
1862
+ data-n-topic-search={true}
1863
+ role="search"
1813
1864
  >
1814
- <span
1815
- className="o-forms-title o-header__visually-hidden"
1816
- >
1817
- <span
1818
- className="o-forms-title__main"
1819
- >
1820
- Search the
1821
- <abbr
1822
- title="Financial Times"
1823
- >
1824
- FT
1825
- </abbr>
1826
- </span>
1827
- </span>
1828
- <span
1829
- className="o-forms-input o-forms-input--text o-forms-input--suffix"
1865
+ <div
1866
+ className="o-header__search-term o-forms-field o-forms-field--optional"
1830
1867
  >
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"
1868
+ <label
1869
+ htmlFor="o-header-search-term-sticky"
1846
1870
  >
1847
1871
  <span
1848
- aria-hidden="true"
1849
- className="o-header__search-icon"
1850
- />
1851
- <span>
1852
- Search
1872
+ className="o-forms-title o-header__visually-hidden"
1873
+ >
1874
+ <span
1875
+ className="o-forms-title__main"
1876
+ >
1877
+ Search the
1878
+ <abbr
1879
+ title="Financial Times"
1880
+ >
1881
+ FT
1882
+ </abbr>
1883
+ </span>
1853
1884
  </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"
1885
+ </label>
1886
+ <span
1887
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
1861
1888
  >
1862
- <span
1863
- className="o-header__visually-hidden"
1889
+ <input
1890
+ aria-controls="suggestions-o-header-search-term-sticky"
1891
+ autoCapitalize="off"
1892
+ autoComplete="off"
1893
+ autoCorrect="off"
1894
+ id="o-header-search-term-sticky"
1895
+ name="q"
1896
+ placeholder="Search for stories, topics or securities"
1897
+ role="combobox"
1898
+ spellCheck={false}
1899
+ type="search"
1900
+ />
1901
+ <button
1902
+ aria-label="search"
1903
+ className="o-header__search-submit"
1904
+ type="submit"
1864
1905
  >
1865
- Close search bar
1866
- </span>
1867
- <span>
1868
- Close
1869
- </span>
1870
- </button>
1871
- </span>
1872
- </label>
1873
- </form>
1906
+ <span
1907
+ aria-hidden="true"
1908
+ className="o-header__search-icon"
1909
+ />
1910
+ <span>
1911
+ Search
1912
+ </span>
1913
+ </button>
1914
+ <button
1915
+ aria-controls="o-header-search-sticky"
1916
+ aria-label="close"
1917
+ className="o-header__search-close o--if-js"
1918
+ data-trackable="close"
1919
+ title="Close search bar"
1920
+ type="button"
1921
+ >
1922
+ <span
1923
+ className="o-header__visually-hidden"
1924
+ >
1925
+ Close search bar
1926
+ </span>
1927
+ <span>
1928
+ Close
1929
+ </span>
1930
+ </button>
1931
+ </span>
1932
+ </div>
1933
+ </form>
1934
+ </div>
1935
+ <div
1936
+ className="o-header__search-widget-anchor"
1937
+ data-o-header-search-widget-anchor="sticky"
1938
+ />
1874
1939
  </div>
1875
1940
  </div>
1876
1941
  </header>