@financial-times/dotcom-ui-header 13.9.0 → 13.9.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 (13) hide show
  1. package/dist/node/components/search/partials.js +8 -7
  2. package/dist/node/components/sub-navigation/SubNavDropdown.d.ts +2 -0
  3. package/dist/node/components/sub-navigation/SubNavDropdown.js +3 -3
  4. package/dist/node/components/sub-navigation/SubNavWithDropdown.js +7 -3
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +3 -3
  7. package/src/__test__/components/SubNavDropdown.spec.tsx +16 -15
  8. package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +136 -96
  9. package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +85 -60
  10. package/src/components/search/partials.tsx +32 -29
  11. package/src/components/sub-navigation/SubNavDropdown.tsx +9 -8
  12. package/src/components/sub-navigation/SubNavWithDropdown.tsx +19 -10
  13. package/src/components/sub-navigation/subNavDropdown.scss +18 -5
package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap CHANGED
@@ -123,24 +123,27 @@ exports[`dotcom-ui-header/src/components/MainHeader not renders MPR button by de
123
123
  data-n-topic-search={true}
124
124
  role="search"
125
125
  >
126
- <label
126
+ <div
127
127
  className="o-header__search-term o-forms-field o-forms-field--optional"
128
- htmlFor="o-header-search-term-primary"
129
128
  >
130
- <span
131
- className="o-forms-title o-header__visually-hidden"
129
+ <label
130
+ htmlFor="o-header-search-term-primary"
132
131
  >
133
132
  <span
134
- className="o-forms-title__main"
133
+ className="o-forms-title o-header__visually-hidden"
135
134
  >
136
- Search the
137
- <abbr
138
- title="Financial Times"
135
+ <span
136
+ className="o-forms-title__main"
139
137
  >
140
- FT
141
- </abbr>
138
+ Search the
139
+ <abbr
140
+ title="Financial Times"
141
+ >
142
+ FT
143
+ </abbr>
144
+ </span>
142
145
  </span>
143
- </span>
146
+ </label>
144
147
  <span
145
148
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
146
149
  >
@@ -157,6 +160,7 @@ exports[`dotcom-ui-header/src/components/MainHeader not renders MPR button by de
157
160
  type="search"
158
161
  />
159
162
  <button
163
+ aria-label="search"
160
164
  className="o-header__search-submit"
161
165
  type="submit"
162
166
  >
@@ -170,6 +174,7 @@ exports[`dotcom-ui-header/src/components/MainHeader not renders MPR button by de
170
174
  </button>
171
175
  <button
172
176
  aria-controls="o-header-search-primary"
177
+ aria-label="close"
173
178
  className="o-header__search-close o--if-js"
174
179
  data-trackable="close"
175
180
  title="Close search bar"
@@ -185,7 +190,7 @@ exports[`dotcom-ui-header/src/components/MainHeader not renders MPR button by de
185
190
  </span>
186
191
  </button>
187
192
  </span>
188
- </label>
193
+ </div>
189
194
  </form>
190
195
  </div>
191
196
  <div
@@ -2012,24 +2017,27 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
2012
2017
  data-n-topic-search={true}
2013
2018
  role="search"
2014
2019
  >
2015
- <label
2020
+ <div
2016
2021
  className="o-header__search-term o-forms-field o-forms-field--optional"
2017
- htmlFor="o-header-search-term-primary"
2018
2022
  >
2019
- <span
2020
- className="o-forms-title o-header__visually-hidden"
2023
+ <label
2024
+ htmlFor="o-header-search-term-primary"
2021
2025
  >
2022
2026
  <span
2023
- className="o-forms-title__main"
2027
+ className="o-forms-title o-header__visually-hidden"
2024
2028
  >
2025
- Search the
2026
- <abbr
2027
- title="Financial Times"
2029
+ <span
2030
+ className="o-forms-title__main"
2028
2031
  >
2029
- FT
2030
- </abbr>
2032
+ Search the
2033
+ <abbr
2034
+ title="Financial Times"
2035
+ >
2036
+ FT
2037
+ </abbr>
2038
+ </span>
2031
2039
  </span>
2032
- </span>
2040
+ </label>
2033
2041
  <span
2034
2042
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
2035
2043
  >
@@ -2046,6 +2054,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
2046
2054
  type="search"
2047
2055
  />
2048
2056
  <button
2057
+ aria-label="search"
2049
2058
  className="o-header__search-submit"
2050
2059
  type="submit"
2051
2060
  >
@@ -2059,6 +2068,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
2059
2068
  </button>
2060
2069
  <button
2061
2070
  aria-controls="o-header-search-primary"
2071
+ aria-label="close"
2062
2072
  className="o-header__search-close o--if-js"
2063
2073
  data-trackable="close"
2064
2074
  title="Close search bar"
@@ -2074,7 +2084,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
2074
2084
  </span>
2075
2085
  </button>
2076
2086
  </span>
2077
- </label>
2087
+ </div>
2078
2088
  </form>
2079
2089
  </div>
2080
2090
  <div
@@ -4139,24 +4149,27 @@ exports[`dotcom-ui-header/src/components/MainHeader renders FT Pro Dropdown menu
4139
4149
  data-n-topic-search={true}
4140
4150
  role="search"
4141
4151
  >
4142
- <label
4152
+ <div
4143
4153
  className="o-header__search-term o-forms-field o-forms-field--optional"
4144
- htmlFor="o-header-search-term-primary"
4145
4154
  >
4146
- <span
4147
- className="o-forms-title o-header__visually-hidden"
4155
+ <label
4156
+ htmlFor="o-header-search-term-primary"
4148
4157
  >
4149
4158
  <span
4150
- className="o-forms-title__main"
4159
+ className="o-forms-title o-header__visually-hidden"
4151
4160
  >
4152
- Search the
4153
- <abbr
4154
- title="Financial Times"
4161
+ <span
4162
+ className="o-forms-title__main"
4155
4163
  >
4156
- FT
4157
- </abbr>
4164
+ Search the
4165
+ <abbr
4166
+ title="Financial Times"
4167
+ >
4168
+ FT
4169
+ </abbr>
4170
+ </span>
4158
4171
  </span>
4159
- </span>
4172
+ </label>
4160
4173
  <span
4161
4174
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
4162
4175
  >
@@ -4173,6 +4186,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders FT Pro Dropdown menu
4173
4186
  type="search"
4174
4187
  />
4175
4188
  <button
4189
+ aria-label="search"
4176
4190
  className="o-header__search-submit"
4177
4191
  type="submit"
4178
4192
  >
@@ -4186,6 +4200,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders FT Pro Dropdown menu
4186
4200
  </button>
4187
4201
  <button
4188
4202
  aria-controls="o-header-search-primary"
4203
+ aria-label="close"
4189
4204
  className="o-header__search-close o--if-js"
4190
4205
  data-trackable="close"
4191
4206
  title="Close search bar"
@@ -4201,7 +4216,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders FT Pro Dropdown menu
4201
4216
  </span>
4202
4217
  </button>
4203
4218
  </span>
4204
- </label>
4219
+ </div>
4205
4220
  </form>
4206
4221
  </div>
4207
4222
  <div
@@ -6029,24 +6044,27 @@ exports[`dotcom-ui-header/src/components/MainHeader renders MPR button 1`] = `
6029
6044
  data-n-topic-search={true}
6030
6045
  role="search"
6031
6046
  >
6032
- <label
6047
+ <div
6033
6048
  className="o-header__search-term o-forms-field o-forms-field--optional"
6034
- htmlFor="o-header-search-term-primary"
6035
6049
  >
6036
- <span
6037
- className="o-forms-title o-header__visually-hidden"
6050
+ <label
6051
+ htmlFor="o-header-search-term-primary"
6038
6052
  >
6039
6053
  <span
6040
- className="o-forms-title__main"
6054
+ className="o-forms-title o-header__visually-hidden"
6041
6055
  >
6042
- Search the
6043
- <abbr
6044
- title="Financial Times"
6056
+ <span
6057
+ className="o-forms-title__main"
6045
6058
  >
6046
- FT
6047
- </abbr>
6059
+ Search the
6060
+ <abbr
6061
+ title="Financial Times"
6062
+ >
6063
+ FT
6064
+ </abbr>
6065
+ </span>
6048
6066
  </span>
6049
- </span>
6067
+ </label>
6050
6068
  <span
6051
6069
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
6052
6070
  >
@@ -6063,6 +6081,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders MPR button 1`] = `
6063
6081
  type="search"
6064
6082
  />
6065
6083
  <button
6084
+ aria-label="search"
6066
6085
  className="o-header__search-submit"
6067
6086
  type="submit"
6068
6087
  >
@@ -6076,6 +6095,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders MPR button 1`] = `
6076
6095
  </button>
6077
6096
  <button
6078
6097
  aria-controls="o-header-search-primary"
6098
+ aria-label="close"
6079
6099
  className="o-header__search-close o--if-js"
6080
6100
  data-trackable="close"
6081
6101
  title="Close search bar"
@@ -6091,7 +6111,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders MPR button 1`] = `
6091
6111
  </span>
6092
6112
  </button>
6093
6113
  </span>
6094
- </label>
6114
+ </div>
6095
6115
  </form>
6096
6116
  </div>
6097
6117
  <div
@@ -7909,24 +7929,27 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
7909
7929
  data-n-topic-search={true}
7910
7930
  role="search"
7911
7931
  >
7912
- <label
7932
+ <div
7913
7933
  className="o-header__search-term o-forms-field o-forms-field--optional"
7914
- htmlFor="o-header-search-term-primary"
7915
7934
  >
7916
- <span
7917
- className="o-forms-title o-header__visually-hidden"
7935
+ <label
7936
+ htmlFor="o-header-search-term-primary"
7918
7937
  >
7919
7938
  <span
7920
- className="o-forms-title__main"
7939
+ className="o-forms-title o-header__visually-hidden"
7921
7940
  >
7922
- Search the
7923
- <abbr
7924
- title="Financial Times"
7941
+ <span
7942
+ className="o-forms-title__main"
7925
7943
  >
7926
- FT
7927
- </abbr>
7944
+ Search the
7945
+ <abbr
7946
+ title="Financial Times"
7947
+ >
7948
+ FT
7949
+ </abbr>
7950
+ </span>
7928
7951
  </span>
7929
- </span>
7952
+ </label>
7930
7953
  <span
7931
7954
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
7932
7955
  >
@@ -7943,6 +7966,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
7943
7966
  type="search"
7944
7967
  />
7945
7968
  <button
7969
+ aria-label="search"
7946
7970
  className="o-header__search-submit"
7947
7971
  type="submit"
7948
7972
  >
@@ -7956,6 +7980,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
7956
7980
  </button>
7957
7981
  <button
7958
7982
  aria-controls="o-header-search-primary"
7983
+ aria-label="close"
7959
7984
  className="o-header__search-close o--if-js"
7960
7985
  data-trackable="close"
7961
7986
  title="Close search bar"
@@ -7971,7 +7996,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
7971
7996
  </span>
7972
7997
  </button>
7973
7998
  </span>
7974
- </label>
7999
+ </div>
7975
8000
  </form>
7976
8001
  </div>
7977
8002
  <div
@@ -9784,24 +9809,27 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
9784
9809
  data-n-topic-search={true}
9785
9810
  role="search"
9786
9811
  >
9787
- <label
9812
+ <div
9788
9813
  className="o-header__search-term o-forms-field o-forms-field--optional"
9789
- htmlFor="o-header-search-term-primary"
9790
9814
  >
9791
- <span
9792
- className="o-forms-title o-header__visually-hidden"
9815
+ <label
9816
+ htmlFor="o-header-search-term-primary"
9793
9817
  >
9794
9818
  <span
9795
- className="o-forms-title__main"
9819
+ className="o-forms-title o-header__visually-hidden"
9796
9820
  >
9797
- Search the
9798
- <abbr
9799
- title="Financial Times"
9821
+ <span
9822
+ className="o-forms-title__main"
9800
9823
  >
9801
- FT
9802
- </abbr>
9824
+ Search the
9825
+ <abbr
9826
+ title="Financial Times"
9827
+ >
9828
+ FT
9829
+ </abbr>
9830
+ </span>
9803
9831
  </span>
9804
- </span>
9832
+ </label>
9805
9833
  <span
9806
9834
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
9807
9835
  >
@@ -9818,6 +9846,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
9818
9846
  type="search"
9819
9847
  />
9820
9848
  <button
9849
+ aria-label="search"
9821
9850
  className="o-header__search-submit"
9822
9851
  type="submit"
9823
9852
  >
@@ -9831,6 +9860,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
9831
9860
  </button>
9832
9861
  <button
9833
9862
  aria-controls="o-header-search-primary"
9863
+ aria-label="close"
9834
9864
  className="o-header__search-close o--if-js"
9835
9865
  data-trackable="close"
9836
9866
  title="Close search bar"
@@ -9846,7 +9876,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
9846
9876
  </span>
9847
9877
  </button>
9848
9878
  </span>
9849
- </label>
9879
+ </div>
9850
9880
  </form>
9851
9881
  </div>
9852
9882
  <div
@@ -11664,24 +11694,27 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
11664
11694
  data-n-topic-search={true}
11665
11695
  role="search"
11666
11696
  >
11667
- <label
11697
+ <div
11668
11698
  className="o-header__search-term o-forms-field o-forms-field--optional"
11669
- htmlFor="o-header-search-term-primary"
11670
11699
  >
11671
- <span
11672
- className="o-forms-title o-header__visually-hidden"
11700
+ <label
11701
+ htmlFor="o-header-search-term-primary"
11673
11702
  >
11674
11703
  <span
11675
- className="o-forms-title__main"
11704
+ className="o-forms-title o-header__visually-hidden"
11676
11705
  >
11677
- Search the
11678
- <abbr
11679
- title="Financial Times"
11706
+ <span
11707
+ className="o-forms-title__main"
11680
11708
  >
11681
- FT
11682
- </abbr>
11709
+ Search the
11710
+ <abbr
11711
+ title="Financial Times"
11712
+ >
11713
+ FT
11714
+ </abbr>
11715
+ </span>
11683
11716
  </span>
11684
- </span>
11717
+ </label>
11685
11718
  <span
11686
11719
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
11687
11720
  >
@@ -11698,6 +11731,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
11698
11731
  type="search"
11699
11732
  />
11700
11733
  <button
11734
+ aria-label="search"
11701
11735
  className="o-header__search-submit"
11702
11736
  type="submit"
11703
11737
  >
@@ -11711,6 +11745,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
11711
11745
  </button>
11712
11746
  <button
11713
11747
  aria-controls="o-header-search-primary"
11748
+ aria-label="close"
11714
11749
  className="o-header__search-close o--if-js"
11715
11750
  data-trackable="close"
11716
11751
  title="Close search bar"
@@ -11726,7 +11761,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
11726
11761
  </span>
11727
11762
  </button>
11728
11763
  </span>
11729
- </label>
11764
+ </div>
11730
11765
  </form>
11731
11766
  </div>
11732
11767
  <div
@@ -13544,24 +13579,27 @@ exports[`dotcom-ui-header/src/components/MainHeader renders restart subscription
13544
13579
  data-n-topic-search={true}
13545
13580
  role="search"
13546
13581
  >
13547
- <label
13582
+ <div
13548
13583
  className="o-header__search-term o-forms-field o-forms-field--optional"
13549
- htmlFor="o-header-search-term-primary"
13550
13584
  >
13551
- <span
13552
- className="o-forms-title o-header__visually-hidden"
13585
+ <label
13586
+ htmlFor="o-header-search-term-primary"
13553
13587
  >
13554
13588
  <span
13555
- className="o-forms-title__main"
13589
+ className="o-forms-title o-header__visually-hidden"
13556
13590
  >
13557
- Search the
13558
- <abbr
13559
- title="Financial Times"
13591
+ <span
13592
+ className="o-forms-title__main"
13560
13593
  >
13561
- FT
13562
- </abbr>
13594
+ Search the
13595
+ <abbr
13596
+ title="Financial Times"
13597
+ >
13598
+ FT
13599
+ </abbr>
13600
+ </span>
13563
13601
  </span>
13564
- </span>
13602
+ </label>
13565
13603
  <span
13566
13604
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
13567
13605
  >
@@ -13578,6 +13616,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders restart subscription
13578
13616
  type="search"
13579
13617
  />
13580
13618
  <button
13619
+ aria-label="search"
13581
13620
  className="o-header__search-submit"
13582
13621
  type="submit"
13583
13622
  >
@@ -13591,6 +13630,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders restart subscription
13591
13630
  </button>
13592
13631
  <button
13593
13632
  aria-controls="o-header-search-primary"
13633
+ aria-label="close"
13594
13634
  className="o-header__search-close o--if-js"
13595
13635
  data-trackable="close"
13596
13636
  title="Close search bar"
@@ -13606,7 +13646,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders restart subscription
13606
13646
  </span>
13607
13647
  </button>
13608
13648
  </span>
13609
- </label>
13649
+ </div>
13610
13650
  </form>
13611
13651
  </div>
13612
13652
  <div