@financial-times/dotcom-ui-header 10.2.0 → 10.3.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 (16) hide show
  1. package/dist/node/components/ask-ft/askFtButton.js +3 -2
  2. package/dist/node/components/drawer/additionalPartials.js +8 -8
  3. package/dist/node/components/drawer/topLevelPartials.js +14 -14
  4. package/dist/node/components/search/partials.js +10 -7
  5. package/dist/tsconfig.tsbuildinfo +16 -4
  6. package/package.json +4 -4
  7. package/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap +224 -232
  8. package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +207 -159
  9. package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +159 -122
  10. package/src/__test__/output/drawer.spec.tsx +2 -2
  11. package/src/components/ask-ft/askFtButton.tsx +10 -9
  12. package/src/components/drawer/additionalPartials.tsx +22 -25
  13. package/src/components/drawer/topLevelPartials.tsx +37 -41
  14. package/src/components/search/partials.tsx +34 -26
  15. package/src/header.scss +9 -1
  16. package/styles.scss +5 -0
package/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap CHANGED
@@ -31,34 +31,30 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
31
31
  Close side navigation menu
32
32
  </span>
33
33
  </button>
34
- <a
35
- className="o-header__drawer-tools-logo"
36
- data-trackable="logo"
37
- href="/"
34
+ <nav
35
+ aria-label="Edition switcher"
36
+ className="o-header__drawer-menu o-header__drawer-edition-switcher"
38
37
  >
39
38
  <span
40
- className="o-header__visually-hidden"
39
+ className="o-header__drawer-menu-item"
41
40
  >
42
- Financial Times
41
+ Edition:
43
42
  </span>
44
- </a>
45
- <p
46
- className="o-header__drawer-current-edition"
47
- >
48
- UK Edition
49
- </p>
50
- </div>
51
- <div
52
- className="o-header__drawer-actions"
53
- >
54
- <a
55
- className="o-header__drawer-button"
56
- data-trackable="subscribe-button"
57
- href="#"
58
- role="button"
59
- >
60
- Subscribe for full access
61
- </a>
43
+ <span
44
+ className="o-header__drawer-menu-item o-header__drawer-current-edition"
45
+ >
46
+ UK
47
+ </span>
48
+ <div
49
+ className="o-header__drawer-divider"
50
+ />
51
+ <a
52
+ className="o-header__drawer-menu-link"
53
+ href="#?edition=international"
54
+ >
55
+ International
56
+ </a>
57
+ </nav>
62
58
  </div>
63
59
  <div
64
60
  className="o-header__drawer-search"
@@ -73,78 +69,82 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
73
69
  role="search"
74
70
  >
75
71
  <label
76
- className="o-header__visually-hidden"
72
+ className="o-forms-field o-forms-field--optional"
77
73
  htmlFor="o-header-drawer-search-term"
78
- >
79
- Search the
80
- <abbr
81
- title="Financial Times"
82
- >
83
- FT
84
- </abbr>
85
- </label>
86
- <input
87
- autoCapitalize="off"
88
- autoComplete="off"
89
- autoCorrect="off"
90
- className="o-header__drawer-search-term"
91
- data-n-topic-search-input={true}
92
- data-trackable="search-term"
93
- id="o-header-drawer-search-term"
94
- name="q"
95
- placeholder="Search the FT"
96
- spellCheck={false}
97
- type="text"
98
- />
99
- <button
100
- className="o-header__drawer-search-submit"
101
- data-trackable="search-submit"
102
- type="submit"
103
74
  >
104
75
  <span
105
- className="o-header__visually-hidden"
76
+ className="o-forms-title o-header__visually-hidden"
106
77
  >
107
- Search
78
+ <span
79
+ className="o-forms-title__main"
80
+ >
81
+ Search the
82
+ <abbr
83
+ title="Financial Times"
84
+ >
85
+ FT
86
+ </abbr>
87
+ </span>
108
88
  </span>
109
- </button>
110
- <a
111
- className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
112
- data-trackable="ask-ft-button-drawer"
113
- href="https://ask.ft.com"
114
- id="ask-ft-button-drawer"
115
- title="ASK FT"
116
- >
117
89
  <span
118
- className="ft-header__ask-ft-button-label"
119
- >
120
- Ask FT
90
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
91
+ >
92
+ <input
93
+ autoCapitalize="off"
94
+ autoComplete="off"
95
+ autoCorrect="off"
96
+ data-n-topic-search-input={true}
97
+ data-trackable="search-term"
98
+ id="o-header-drawer-search-term"
99
+ name="q"
100
+ placeholder="Search for stories, topics or securities"
101
+ spellCheck={false}
102
+ type="text"
103
+ />
104
+ <button
105
+ className="o-header__drawer-search-submit"
106
+ data-trackable="search-submit"
107
+ type="submit"
108
+ >
109
+ <span
110
+ className="o-header__visually-hidden"
111
+ >
112
+ Search
113
+ </span>
114
+ </button>
121
115
  </span>
122
- </a>
116
+ </label>
123
117
  </form>
124
118
  </div>
125
- <nav
126
- aria-label="Edition switcher"
127
- className="o-header__drawer-menu"
119
+ <div
120
+ className="o-header__drawer-actions"
128
121
  >
129
- <ul
130
- className="o-header__drawer-menu-list"
122
+ <a
123
+ className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
124
+ data-trackable="ask-ft-button-drawer"
125
+ href="https://ask.ft.com"
126
+ id="ask-ft-button-drawer"
127
+ title="ASK FT"
131
128
  >
132
- <li
133
- className="o-header__drawer-menu-item"
134
- data-trackable="edition-switcher"
129
+ <span
130
+ className="ft-header__ask-ft-button-label"
135
131
  >
136
- <a
137
- className="o-header__drawer-menu-link"
138
- data-trackable="international"
139
- href="#?edition=international"
140
- >
141
- Switch to
142
- International
143
- Edition
144
- </a>
145
- </li>
146
- </ul>
147
- </nav>
132
+ Ask FT
133
+ </span>
134
+ </a>
135
+ </div>
136
+ <div
137
+ className="o-header__drawer-actions"
138
+ >
139
+ <a
140
+ className="o-header__drawer-button"
141
+ data-trackable="subscribe-button"
142
+ href="#"
143
+ role="button"
144
+ >
145
+ Subscribe for full access
146
+ </a>
147
+ </div>
148
148
  <nav
149
149
  className="o-header__drawer-menu o-header__drawer-menu--primary"
150
150
  >
@@ -1408,34 +1408,30 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
1408
1408
  Close side navigation menu
1409
1409
  </span>
1410
1410
  </button>
1411
- <a
1412
- className="o-header__drawer-tools-logo"
1413
- data-trackable="logo"
1414
- href="/"
1411
+ <nav
1412
+ aria-label="Edition switcher"
1413
+ className="o-header__drawer-menu o-header__drawer-edition-switcher"
1415
1414
  >
1416
1415
  <span
1417
- className="o-header__visually-hidden"
1416
+ className="o-header__drawer-menu-item"
1418
1417
  >
1419
- Financial Times
1418
+ Edition:
1420
1419
  </span>
1421
- </a>
1422
- <p
1423
- className="o-header__drawer-current-edition"
1424
- >
1425
- UK Edition
1426
- </p>
1427
- </div>
1428
- <div
1429
- className="o-header__drawer-actions"
1430
- >
1431
- <a
1432
- className="o-header__drawer-button"
1433
- data-trackable="subscribe-button"
1434
- href="#"
1435
- role="button"
1436
- >
1437
- Subscribe for full access
1438
- </a>
1420
+ <span
1421
+ className="o-header__drawer-menu-item o-header__drawer-current-edition"
1422
+ >
1423
+ UK
1424
+ </span>
1425
+ <div
1426
+ className="o-header__drawer-divider"
1427
+ />
1428
+ <a
1429
+ className="o-header__drawer-menu-link"
1430
+ href="#?edition=international"
1431
+ >
1432
+ International
1433
+ </a>
1434
+ </nav>
1439
1435
  </div>
1440
1436
  <div
1441
1437
  className="o-header__drawer-search"
@@ -1450,65 +1446,65 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
1450
1446
  role="search"
1451
1447
  >
1452
1448
  <label
1453
- className="o-header__visually-hidden"
1449
+ className="o-forms-field o-forms-field--optional"
1454
1450
  htmlFor="o-header-drawer-search-term"
1455
- >
1456
- Search the
1457
- <abbr
1458
- title="Financial Times"
1459
- >
1460
- FT
1461
- </abbr>
1462
- </label>
1463
- <input
1464
- autoCapitalize="off"
1465
- autoComplete="off"
1466
- autoCorrect="off"
1467
- className="o-header__drawer-search-term"
1468
- data-n-topic-search-input={true}
1469
- data-trackable="search-term"
1470
- id="o-header-drawer-search-term"
1471
- name="q"
1472
- placeholder="Search the FT"
1473
- spellCheck={false}
1474
- type="text"
1475
- />
1476
- <button
1477
- className="o-header__drawer-search-submit"
1478
- data-trackable="search-submit"
1479
- type="submit"
1480
1451
  >
1481
1452
  <span
1482
- className="o-header__visually-hidden"
1453
+ className="o-forms-title o-header__visually-hidden"
1483
1454
  >
1484
- Search
1455
+ <span
1456
+ className="o-forms-title__main"
1457
+ >
1458
+ Search the
1459
+ <abbr
1460
+ title="Financial Times"
1461
+ >
1462
+ FT
1463
+ </abbr>
1464
+ </span>
1465
+ </span>
1466
+ <span
1467
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
1468
+ >
1469
+ <input
1470
+ autoCapitalize="off"
1471
+ autoComplete="off"
1472
+ autoCorrect="off"
1473
+ data-n-topic-search-input={true}
1474
+ data-trackable="search-term"
1475
+ id="o-header-drawer-search-term"
1476
+ name="q"
1477
+ placeholder="Search for stories, topics or securities"
1478
+ spellCheck={false}
1479
+ type="text"
1480
+ />
1481
+ <button
1482
+ className="o-header__drawer-search-submit"
1483
+ data-trackable="search-submit"
1484
+ type="submit"
1485
+ >
1486
+ <span
1487
+ className="o-header__visually-hidden"
1488
+ >
1489
+ Search
1490
+ </span>
1491
+ </button>
1485
1492
  </span>
1486
- </button>
1493
+ </label>
1487
1494
  </form>
1488
1495
  </div>
1489
- <nav
1490
- aria-label="Edition switcher"
1491
- className="o-header__drawer-menu"
1496
+ <div
1497
+ className="o-header__drawer-actions"
1492
1498
  >
1493
- <ul
1494
- className="o-header__drawer-menu-list"
1499
+ <a
1500
+ className="o-header__drawer-button"
1501
+ data-trackable="subscribe-button"
1502
+ href="#"
1503
+ role="button"
1495
1504
  >
1496
- <li
1497
- className="o-header__drawer-menu-item"
1498
- data-trackable="edition-switcher"
1499
- >
1500
- <a
1501
- className="o-header__drawer-menu-link"
1502
- data-trackable="international"
1503
- href="#?edition=international"
1504
- >
1505
- Switch to
1506
- International
1507
- Edition
1508
- </a>
1509
- </li>
1510
- </ul>
1511
- </nav>
1505
+ Subscribe for full access
1506
+ </a>
1507
+ </div>
1512
1508
  <nav
1513
1509
  className="o-header__drawer-menu o-header__drawer-menu--primary"
1514
1510
  >
@@ -2772,34 +2768,30 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
2772
2768
  Close side navigation menu
2773
2769
  </span>
2774
2770
  </button>
2775
- <a
2776
- className="o-header__drawer-tools-logo"
2777
- data-trackable="logo"
2778
- href="/"
2771
+ <nav
2772
+ aria-label="Edition switcher"
2773
+ className="o-header__drawer-menu o-header__drawer-edition-switcher"
2779
2774
  >
2780
2775
  <span
2781
- className="o-header__visually-hidden"
2776
+ className="o-header__drawer-menu-item"
2782
2777
  >
2783
- Financial Times
2778
+ Edition:
2784
2779
  </span>
2785
- </a>
2786
- <p
2787
- className="o-header__drawer-current-edition"
2788
- >
2789
- UK Edition
2790
- </p>
2791
- </div>
2792
- <div
2793
- className="o-header__drawer-actions"
2794
- >
2795
- <a
2796
- className="o-header__drawer-button"
2797
- data-trackable="subscribe-button"
2798
- href="#"
2799
- role="button"
2800
- >
2801
- Subscribe for full access
2802
- </a>
2780
+ <span
2781
+ className="o-header__drawer-menu-item o-header__drawer-current-edition"
2782
+ >
2783
+ UK
2784
+ </span>
2785
+ <div
2786
+ className="o-header__drawer-divider"
2787
+ />
2788
+ <a
2789
+ className="o-header__drawer-menu-link"
2790
+ href="#?edition=international"
2791
+ >
2792
+ International
2793
+ </a>
2794
+ </nav>
2803
2795
  </div>
2804
2796
  <div
2805
2797
  className="o-header__drawer-search"
@@ -2814,65 +2806,65 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
2814
2806
  role="search"
2815
2807
  >
2816
2808
  <label
2817
- className="o-header__visually-hidden"
2809
+ className="o-forms-field o-forms-field--optional"
2818
2810
  htmlFor="o-header-drawer-search-term"
2819
- >
2820
- Search the
2821
- <abbr
2822
- title="Financial Times"
2823
- >
2824
- FT
2825
- </abbr>
2826
- </label>
2827
- <input
2828
- autoCapitalize="off"
2829
- autoComplete="off"
2830
- autoCorrect="off"
2831
- className="o-header__drawer-search-term"
2832
- data-n-topic-search-input={true}
2833
- data-trackable="search-term"
2834
- id="o-header-drawer-search-term"
2835
- name="q"
2836
- placeholder="Search the FT"
2837
- spellCheck={false}
2838
- type="text"
2839
- />
2840
- <button
2841
- className="o-header__drawer-search-submit"
2842
- data-trackable="search-submit"
2843
- type="submit"
2844
2811
  >
2845
2812
  <span
2846
- className="o-header__visually-hidden"
2813
+ className="o-forms-title o-header__visually-hidden"
2847
2814
  >
2848
- Search
2815
+ <span
2816
+ className="o-forms-title__main"
2817
+ >
2818
+ Search the
2819
+ <abbr
2820
+ title="Financial Times"
2821
+ >
2822
+ FT
2823
+ </abbr>
2824
+ </span>
2825
+ </span>
2826
+ <span
2827
+ className="o-forms-input o-forms-input--text o-forms-input--suffix"
2828
+ >
2829
+ <input
2830
+ autoCapitalize="off"
2831
+ autoComplete="off"
2832
+ autoCorrect="off"
2833
+ data-n-topic-search-input={true}
2834
+ data-trackable="search-term"
2835
+ id="o-header-drawer-search-term"
2836
+ name="q"
2837
+ placeholder="Search for stories, topics or securities"
2838
+ spellCheck={false}
2839
+ type="text"
2840
+ />
2841
+ <button
2842
+ className="o-header__drawer-search-submit"
2843
+ data-trackable="search-submit"
2844
+ type="submit"
2845
+ >
2846
+ <span
2847
+ className="o-header__visually-hidden"
2848
+ >
2849
+ Search
2850
+ </span>
2851
+ </button>
2849
2852
  </span>
2850
- </button>
2853
+ </label>
2851
2854
  </form>
2852
2855
  </div>
2853
- <nav
2854
- aria-label="Edition switcher"
2855
- className="o-header__drawer-menu"
2856
+ <div
2857
+ className="o-header__drawer-actions"
2856
2858
  >
2857
- <ul
2858
- className="o-header__drawer-menu-list"
2859
+ <a
2860
+ className="o-header__drawer-button"
2861
+ data-trackable="subscribe-button"
2862
+ href="#"
2863
+ role="button"
2859
2864
  >
2860
- <li
2861
- className="o-header__drawer-menu-item"
2862
- data-trackable="edition-switcher"
2863
- >
2864
- <a
2865
- className="o-header__drawer-menu-link"
2866
- data-trackable="international"
2867
- href="#?edition=international"
2868
- >
2869
- Switch to
2870
- International
2871
- Edition
2872
- </a>
2873
- </li>
2874
- </ul>
2875
- </nav>
2865
+ Subscribe for full access
2866
+ </a>
2867
+ </div>
2876
2868
  <nav
2877
2869
  className="o-header__drawer-menu o-header__drawer-menu--primary"
2878
2870
  >