@newskit-render/core 1.42.3 → 1.44.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.
- package/CHANGELOG.md +30 -0
- package/__tests__/pages/__snapshots__/home.test.tsx.snap +46 -21
- package/components/article/__tests__/__snapshots__/index.test.tsx.snap +46 -21
- package/components/common/NewskitLogo.tsx +5 -3
- package/components/common/NewskitLogoShort.tsx +6 -4
- package/components/common/iconNavLink/IconNavLink.tsx +70 -0
- package/components/common/iconNavLink/__tests__/IconNavLink.test.tsx +35 -0
- package/components/common/iconNavLink/index.ts +3 -0
- package/components/common/iconNavLink/types.ts +24 -0
- package/components/common/icons/IconAccount.tsx +13 -0
- package/components/footer/__snapshots__/index.test.tsx.snap +6 -4
- package/components/header/index.test.tsx +17 -0
- package/components/header/index.tsx +32 -18
- package/cypress/e2e/account/account-subscription.spec.js +45 -0
- package/cypress/support/commands.js +5 -1
- package/package.json +4 -4
- package/temp/header.tsx +31 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,36 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.44.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.43.1...@newskit-render/core@1.44.0) (2022-03-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **PPDSR-725:** Add logic to stop cancelation if user is in payment failure ([#653](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/653)) ([7d07e65](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/7d07e65ac0c31186cca1df8d9ae66606148c4797))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.43.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.43.0...@newskit-render/core@1.43.1) (2022-03-29)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @newskit-render/core
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
# [1.43.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.42.3...@newskit-render/core@1.43.0) (2022-03-28)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Features
|
|
29
|
+
|
|
30
|
+
* **PPDSR-691:** add account link ([#646](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/646)) ([5e41f45](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/5e41f45ac200963ab23ea91ed3115edfdd13757a))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
6
36
|
## [1.42.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.42.2...@newskit-render/core@1.42.3) (2022-03-28)
|
|
7
37
|
|
|
8
38
|
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
exports[`getServerSideProps Homepage 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
.emotion-0 {
|
|
6
|
-
height:
|
|
6
|
+
height: 80px;
|
|
7
|
+
background-color: #3358CC;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
.emotion-0 a,
|
|
@@ -15,8 +16,8 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
15
16
|
|
|
16
17
|
@media screen {
|
|
17
18
|
.emotion-0 {
|
|
18
|
-
padding-top:
|
|
19
|
-
padding-bottom:
|
|
19
|
+
padding-top: 16px;
|
|
20
|
+
padding-bottom: 16px;
|
|
20
21
|
padding-left: 0;
|
|
21
22
|
padding-right: 0;
|
|
22
23
|
}
|
|
@@ -24,8 +25,8 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
24
25
|
|
|
25
26
|
@media screen and (min-width: 1024px) {
|
|
26
27
|
.emotion-0 {
|
|
27
|
-
padding-top:
|
|
28
|
-
padding-bottom:
|
|
28
|
+
padding-top: 16px;
|
|
29
|
+
padding-bottom: 16px;
|
|
29
30
|
padding-left: 64px;
|
|
30
31
|
padding-right: 64px;
|
|
31
32
|
}
|
|
@@ -279,16 +280,19 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
279
280
|
overflow: auto;
|
|
280
281
|
width: 100%;
|
|
281
282
|
min-height: 100vh;
|
|
282
|
-
background-color: #
|
|
283
|
+
background-color: #3358CC;
|
|
283
284
|
left: 0;
|
|
284
|
-
top:
|
|
285
|
-
z-index:
|
|
285
|
+
top: 80px;
|
|
286
|
+
z-index: 2;
|
|
286
287
|
display: none;
|
|
287
288
|
}
|
|
288
289
|
|
|
289
290
|
@media screen and (min-width: 768px) {
|
|
290
291
|
.emotion-12 {
|
|
291
|
-
display:
|
|
292
|
+
display: -webkit-box;
|
|
293
|
+
display: -webkit-flex;
|
|
294
|
+
display: -ms-flexbox;
|
|
295
|
+
display: flex;
|
|
292
296
|
position: relative;
|
|
293
297
|
overflow: hidden;
|
|
294
298
|
width: initial;
|
|
@@ -297,6 +301,7 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
297
301
|
left: initial;
|
|
298
302
|
top: initial;
|
|
299
303
|
z-index: 1;
|
|
304
|
+
height: 48px;
|
|
300
305
|
}
|
|
301
306
|
}
|
|
302
307
|
|
|
@@ -341,7 +346,19 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
341
346
|
|
|
342
347
|
@media screen and (min-width: 768px) {
|
|
343
348
|
.emotion-14 {
|
|
344
|
-
margin-right:
|
|
349
|
+
margin-right: 16px;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
@media screen and (max-width: 767px) {
|
|
354
|
+
.emotion-14 {
|
|
355
|
+
margin-bottom: 24px;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
@media screen and (min-width: 768px) {
|
|
360
|
+
.emotion-14 {
|
|
361
|
+
margin-bottom: 0;
|
|
345
362
|
}
|
|
346
363
|
}
|
|
347
364
|
|
|
@@ -432,15 +449,17 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
432
449
|
/>
|
|
433
450
|
<path
|
|
434
451
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
435
|
-
fill="
|
|
452
|
+
fill="white"
|
|
436
453
|
/>
|
|
437
454
|
<path
|
|
438
455
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
439
|
-
fill="
|
|
456
|
+
fill="white"
|
|
457
|
+
fill-opacity="0.4"
|
|
440
458
|
/>
|
|
441
459
|
<path
|
|
442
460
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
443
|
-
fill="
|
|
461
|
+
fill="white"
|
|
462
|
+
fill-opacity="0.701961"
|
|
444
463
|
/>
|
|
445
464
|
</svg>
|
|
446
465
|
</div>
|
|
@@ -449,7 +468,7 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
449
468
|
>
|
|
450
469
|
<svg
|
|
451
470
|
class="emotion-8"
|
|
452
|
-
height="
|
|
471
|
+
height="48px"
|
|
453
472
|
viewBox="0 0 244 40"
|
|
454
473
|
>
|
|
455
474
|
<title>
|
|
@@ -457,15 +476,17 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
457
476
|
</title>
|
|
458
477
|
<path
|
|
459
478
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
460
|
-
fill="
|
|
479
|
+
fill="white"
|
|
461
480
|
/>
|
|
462
481
|
<path
|
|
463
482
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
464
|
-
fill="
|
|
483
|
+
fill="white"
|
|
484
|
+
fill-opacity="0.4"
|
|
465
485
|
/>
|
|
466
486
|
<path
|
|
467
487
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
468
|
-
fill="
|
|
488
|
+
fill="white"
|
|
489
|
+
fill-opacity="0.701961"
|
|
469
490
|
/>
|
|
470
491
|
</svg>
|
|
471
492
|
</div>
|
|
@@ -476,9 +497,11 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
476
497
|
>
|
|
477
498
|
<div
|
|
478
499
|
class="emotion-12"
|
|
500
|
+
data-testid="NavigationContainer"
|
|
479
501
|
>
|
|
480
502
|
<div
|
|
481
503
|
class="emotion-13"
|
|
504
|
+
data-testid="Navigation"
|
|
482
505
|
>
|
|
483
506
|
<span
|
|
484
507
|
class="emotion-14"
|
|
@@ -3045,7 +3068,7 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
3045
3068
|
>
|
|
3046
3069
|
<svg
|
|
3047
3070
|
class="emotion-5"
|
|
3048
|
-
height="
|
|
3071
|
+
height="48px"
|
|
3049
3072
|
viewBox="0 0 244 40"
|
|
3050
3073
|
>
|
|
3051
3074
|
<title>
|
|
@@ -3053,15 +3076,17 @@ exports[`getServerSideProps Homepage 1`] = `
|
|
|
3053
3076
|
</title>
|
|
3054
3077
|
<path
|
|
3055
3078
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
3056
|
-
fill="
|
|
3079
|
+
fill="white"
|
|
3057
3080
|
/>
|
|
3058
3081
|
<path
|
|
3059
3082
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
3060
|
-
fill="
|
|
3083
|
+
fill="white"
|
|
3084
|
+
fill-opacity="0.4"
|
|
3061
3085
|
/>
|
|
3062
3086
|
<path
|
|
3063
3087
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
3064
|
-
fill="
|
|
3088
|
+
fill="white"
|
|
3089
|
+
fill-opacity="0.701961"
|
|
3065
3090
|
/>
|
|
3066
3091
|
</svg>
|
|
3067
3092
|
</div>
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
exports[`Article should render tile and sub title 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
.emotion-0 {
|
|
6
|
-
height:
|
|
6
|
+
height: 80px;
|
|
7
|
+
background-color: #3358CC;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
.emotion-0 a,
|
|
@@ -15,8 +16,8 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
15
16
|
|
|
16
17
|
@media screen {
|
|
17
18
|
.emotion-0 {
|
|
18
|
-
padding-top:
|
|
19
|
-
padding-bottom:
|
|
19
|
+
padding-top: 16px;
|
|
20
|
+
padding-bottom: 16px;
|
|
20
21
|
padding-left: 0;
|
|
21
22
|
padding-right: 0;
|
|
22
23
|
}
|
|
@@ -24,8 +25,8 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
24
25
|
|
|
25
26
|
@media screen and (min-width: 1024px) {
|
|
26
27
|
.emotion-0 {
|
|
27
|
-
padding-top:
|
|
28
|
-
padding-bottom:
|
|
28
|
+
padding-top: 16px;
|
|
29
|
+
padding-bottom: 16px;
|
|
29
30
|
padding-left: 64px;
|
|
30
31
|
padding-right: 64px;
|
|
31
32
|
}
|
|
@@ -279,16 +280,19 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
279
280
|
overflow: auto;
|
|
280
281
|
width: 100%;
|
|
281
282
|
min-height: 100vh;
|
|
282
|
-
background-color: #
|
|
283
|
+
background-color: #3358CC;
|
|
283
284
|
left: 0;
|
|
284
|
-
top:
|
|
285
|
-
z-index:
|
|
285
|
+
top: 80px;
|
|
286
|
+
z-index: 2;
|
|
286
287
|
display: none;
|
|
287
288
|
}
|
|
288
289
|
|
|
289
290
|
@media screen and (min-width: 768px) {
|
|
290
291
|
.emotion-12 {
|
|
291
|
-
display:
|
|
292
|
+
display: -webkit-box;
|
|
293
|
+
display: -webkit-flex;
|
|
294
|
+
display: -ms-flexbox;
|
|
295
|
+
display: flex;
|
|
292
296
|
position: relative;
|
|
293
297
|
overflow: hidden;
|
|
294
298
|
width: initial;
|
|
@@ -297,6 +301,7 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
297
301
|
left: initial;
|
|
298
302
|
top: initial;
|
|
299
303
|
z-index: 1;
|
|
304
|
+
height: 48px;
|
|
300
305
|
}
|
|
301
306
|
}
|
|
302
307
|
|
|
@@ -341,7 +346,19 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
341
346
|
|
|
342
347
|
@media screen and (min-width: 768px) {
|
|
343
348
|
.emotion-14 {
|
|
344
|
-
margin-right:
|
|
349
|
+
margin-right: 16px;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
@media screen and (max-width: 767px) {
|
|
354
|
+
.emotion-14 {
|
|
355
|
+
margin-bottom: 24px;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
@media screen and (min-width: 768px) {
|
|
360
|
+
.emotion-14 {
|
|
361
|
+
margin-bottom: 0;
|
|
345
362
|
}
|
|
346
363
|
}
|
|
347
364
|
|
|
@@ -432,15 +449,17 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
432
449
|
/>
|
|
433
450
|
<path
|
|
434
451
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
435
|
-
fill="
|
|
452
|
+
fill="white"
|
|
436
453
|
/>
|
|
437
454
|
<path
|
|
438
455
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
439
|
-
fill="
|
|
456
|
+
fill="white"
|
|
457
|
+
fill-opacity="0.4"
|
|
440
458
|
/>
|
|
441
459
|
<path
|
|
442
460
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
443
|
-
fill="
|
|
461
|
+
fill="white"
|
|
462
|
+
fill-opacity="0.701961"
|
|
444
463
|
/>
|
|
445
464
|
</svg>
|
|
446
465
|
</div>
|
|
@@ -449,7 +468,7 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
449
468
|
>
|
|
450
469
|
<svg
|
|
451
470
|
class="emotion-8"
|
|
452
|
-
height="
|
|
471
|
+
height="48px"
|
|
453
472
|
viewBox="0 0 244 40"
|
|
454
473
|
>
|
|
455
474
|
<title>
|
|
@@ -457,15 +476,17 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
457
476
|
</title>
|
|
458
477
|
<path
|
|
459
478
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
460
|
-
fill="
|
|
479
|
+
fill="white"
|
|
461
480
|
/>
|
|
462
481
|
<path
|
|
463
482
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
464
|
-
fill="
|
|
483
|
+
fill="white"
|
|
484
|
+
fill-opacity="0.4"
|
|
465
485
|
/>
|
|
466
486
|
<path
|
|
467
487
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
468
|
-
fill="
|
|
488
|
+
fill="white"
|
|
489
|
+
fill-opacity="0.701961"
|
|
469
490
|
/>
|
|
470
491
|
</svg>
|
|
471
492
|
</div>
|
|
@@ -476,9 +497,11 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
476
497
|
>
|
|
477
498
|
<div
|
|
478
499
|
class="emotion-12"
|
|
500
|
+
data-testid="NavigationContainer"
|
|
479
501
|
>
|
|
480
502
|
<div
|
|
481
503
|
class="emotion-13"
|
|
504
|
+
data-testid="Navigation"
|
|
482
505
|
>
|
|
483
506
|
<span
|
|
484
507
|
class="emotion-14"
|
|
@@ -4384,7 +4407,7 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
4384
4407
|
>
|
|
4385
4408
|
<svg
|
|
4386
4409
|
class="emotion-5"
|
|
4387
|
-
height="
|
|
4410
|
+
height="48px"
|
|
4388
4411
|
viewBox="0 0 244 40"
|
|
4389
4412
|
>
|
|
4390
4413
|
<title>
|
|
@@ -4392,15 +4415,17 @@ exports[`Article should render tile and sub title 1`] = `
|
|
|
4392
4415
|
</title>
|
|
4393
4416
|
<path
|
|
4394
4417
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
4395
|
-
fill="
|
|
4418
|
+
fill="white"
|
|
4396
4419
|
/>
|
|
4397
4420
|
<path
|
|
4398
4421
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
4399
|
-
fill="
|
|
4422
|
+
fill="white"
|
|
4423
|
+
fill-opacity="0.4"
|
|
4400
4424
|
/>
|
|
4401
4425
|
<path
|
|
4402
4426
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
4403
|
-
fill="
|
|
4427
|
+
fill="white"
|
|
4428
|
+
fill-opacity="0.701961"
|
|
4404
4429
|
/>
|
|
4405
4430
|
</svg>
|
|
4406
4431
|
</div>
|
|
@@ -33,15 +33,17 @@ const NewsKitLogoFull = React.forwardRef<HTMLDivElement, NewsKitLogoProps>(
|
|
|
33
33
|
/>
|
|
34
34
|
<path
|
|
35
35
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
36
|
-
fill="
|
|
36
|
+
fill="white"
|
|
37
37
|
/>
|
|
38
38
|
<path
|
|
39
39
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
40
|
-
fill="
|
|
40
|
+
fill="white"
|
|
41
|
+
fillOpacity="0.4"
|
|
41
42
|
/>
|
|
42
43
|
<path
|
|
43
44
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
44
|
-
fill="
|
|
45
|
+
fill="white"
|
|
46
|
+
fillOpacity="0.701961"
|
|
45
47
|
/>
|
|
46
48
|
</LogoSvg>
|
|
47
49
|
)
|
|
@@ -25,19 +25,21 @@ const LogoSvg = styled.svg<StyledLogoPorps>`
|
|
|
25
25
|
|
|
26
26
|
const NewsKitLogoShort = React.forwardRef<HTMLDivElement, NewsKitLogoProps>(
|
|
27
27
|
({ color, ...props }, ref) => (
|
|
28
|
-
<LogoSvg viewBox="0 0 244 40" height="
|
|
28
|
+
<LogoSvg viewBox="0 0 244 40" height="48px" $color={color} {...props}>
|
|
29
29
|
<title>NewsKit Logo</title>
|
|
30
30
|
<path
|
|
31
31
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
32
|
-
fill="
|
|
32
|
+
fill="white"
|
|
33
33
|
/>
|
|
34
34
|
<path
|
|
35
35
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
36
|
-
fill="
|
|
36
|
+
fill="white"
|
|
37
|
+
fillOpacity="0.4"
|
|
37
38
|
/>
|
|
38
39
|
<path
|
|
39
40
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
40
|
-
fill="
|
|
41
|
+
fill="white"
|
|
42
|
+
fillOpacity="0.701961"
|
|
41
43
|
/>
|
|
42
44
|
</LogoSvg>
|
|
43
45
|
)
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { NextLink } from '@newskit-render/shared-components'
|
|
3
|
+
import { Divider, TextBlock, Block, Visible, styled } from 'newskit'
|
|
4
|
+
import { IconNavLinkProps } from './types'
|
|
5
|
+
|
|
6
|
+
const StylesVerticalVisible = styled(Visible)`
|
|
7
|
+
height: 100%;
|
|
8
|
+
`
|
|
9
|
+
|
|
10
|
+
const StylesHorizontalVisible = styled(Visible)`
|
|
11
|
+
width: 100%;
|
|
12
|
+
`
|
|
13
|
+
|
|
14
|
+
const IconBlock = styled(Block)<{ top?: string }>`
|
|
15
|
+
position: relative;
|
|
16
|
+
top: ${({ top }) => top || '3'}px;
|
|
17
|
+
`
|
|
18
|
+
|
|
19
|
+
const IconNavLink: React.FC<IconNavLinkProps> = ({
|
|
20
|
+
icon,
|
|
21
|
+
href,
|
|
22
|
+
text,
|
|
23
|
+
showVerticalDivider = { md: true, lg: true, xl: true },
|
|
24
|
+
showHorizontalDivider = { xs: true, sm: true },
|
|
25
|
+
spaceInline,
|
|
26
|
+
typographyPreset,
|
|
27
|
+
stylePreset,
|
|
28
|
+
iconTop,
|
|
29
|
+
}) => (
|
|
30
|
+
<>
|
|
31
|
+
{showVerticalDivider && (
|
|
32
|
+
<StylesVerticalVisible {...showVerticalDivider}>
|
|
33
|
+
<Divider vertical />
|
|
34
|
+
</StylesVerticalVisible>
|
|
35
|
+
)}
|
|
36
|
+
<Block spaceInline={spaceInline} />
|
|
37
|
+
<Block as="span">
|
|
38
|
+
{showHorizontalDivider && (
|
|
39
|
+
<>
|
|
40
|
+
<StylesHorizontalVisible {...showHorizontalDivider}>
|
|
41
|
+
<Divider />
|
|
42
|
+
<Block
|
|
43
|
+
data-testid="myBlock"
|
|
44
|
+
spaceStack={{
|
|
45
|
+
xs: 'space040',
|
|
46
|
+
md: 'space000',
|
|
47
|
+
}}
|
|
48
|
+
/>
|
|
49
|
+
</StylesHorizontalVisible>
|
|
50
|
+
</>
|
|
51
|
+
)}
|
|
52
|
+
<NextLink
|
|
53
|
+
type="standalone"
|
|
54
|
+
overrides={{
|
|
55
|
+
typographyPreset,
|
|
56
|
+
stylePreset,
|
|
57
|
+
}}
|
|
58
|
+
href={href}
|
|
59
|
+
>
|
|
60
|
+
<IconBlock top={iconTop}>{icon}</IconBlock>
|
|
61
|
+
<TextBlock as="span" typographyPreset={typographyPreset}>
|
|
62
|
+
{text}
|
|
63
|
+
</TextBlock>
|
|
64
|
+
</NextLink>
|
|
65
|
+
<Block spaceInline={spaceInline} />
|
|
66
|
+
</Block>
|
|
67
|
+
</>
|
|
68
|
+
)
|
|
69
|
+
|
|
70
|
+
export default IconNavLink
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import IconNavLink from '../IconNavLink'
|
|
3
|
+
import { IconAccount } from '../../icons/IconAccount'
|
|
4
|
+
import { renderWithTheme } from '../../../../helpers/test-utils'
|
|
5
|
+
|
|
6
|
+
describe('IconNavLink', () => {
|
|
7
|
+
test('should render with devider', () => {
|
|
8
|
+
const { getByTestId, getByText, getAllByTestId } = renderWithTheme(
|
|
9
|
+
IconNavLink,
|
|
10
|
+
{
|
|
11
|
+
icon: <IconAccount data-testid="test-icon" />,
|
|
12
|
+
href: '/account',
|
|
13
|
+
text: 'Account',
|
|
14
|
+
}
|
|
15
|
+
)
|
|
16
|
+
expect(getAllByTestId('divider')[0]).toBeInTheDocument()
|
|
17
|
+
expect(getByTestId('test-icon')).toBeInTheDocument()
|
|
18
|
+
expect(getByText('Account')).toBeInTheDocument()
|
|
19
|
+
expect(getByText('Account').closest('a')).toHaveAttribute(
|
|
20
|
+
'href',
|
|
21
|
+
'/account'
|
|
22
|
+
)
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
test('should render without divider', () => {
|
|
26
|
+
const { queryByTestId } = renderWithTheme(IconNavLink, {
|
|
27
|
+
icon: <IconAccount data-testid="test-icon" />,
|
|
28
|
+
href: '/account',
|
|
29
|
+
text: 'Account',
|
|
30
|
+
showVerticalDivider: false,
|
|
31
|
+
showHorizontalDivider: false,
|
|
32
|
+
})
|
|
33
|
+
expect(queryByTestId('divider')).not.toBeInTheDocument()
|
|
34
|
+
})
|
|
35
|
+
})
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ReactElement } from 'react'
|
|
2
|
+
import { NewsKitIcon, MQ } from 'newskit'
|
|
3
|
+
|
|
4
|
+
type ShowDivider =
|
|
5
|
+
| {
|
|
6
|
+
xs?: boolean
|
|
7
|
+
sm?: boolean
|
|
8
|
+
md?: boolean
|
|
9
|
+
lg?: boolean
|
|
10
|
+
xl?: boolean
|
|
11
|
+
}
|
|
12
|
+
| false
|
|
13
|
+
|
|
14
|
+
export interface IconNavLinkProps {
|
|
15
|
+
icon: ReactElement<NewsKitIcon>
|
|
16
|
+
href: string
|
|
17
|
+
text: string
|
|
18
|
+
showVerticalDivider?: ShowDivider
|
|
19
|
+
showHorizontalDivider?: ShowDivider
|
|
20
|
+
spaceInline?: MQ<string>
|
|
21
|
+
typographyPreset?: MQ<string>
|
|
22
|
+
stylePreset?: MQ<string>
|
|
23
|
+
iconTop?: string
|
|
24
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { customToNewsKitIcon, Svg } from 'newskit'
|
|
3
|
+
|
|
4
|
+
export const IconAccount = customToNewsKitIcon('IconAccount', (props) => (
|
|
5
|
+
<Svg {...props} height="24px" width="24px" viewBox="0 0 24 24">
|
|
6
|
+
<path
|
|
7
|
+
fillRule="evenodd"
|
|
8
|
+
clipRule="evenodd"
|
|
9
|
+
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM7.07 18.28C7.5 17.38 10.12 16.5 12 16.5C13.88 16.5 16.51 17.38 16.93 18.28C15.57 19.36 13.86 20 12 20C10.14 20 8.43 19.36 7.07 18.28ZM12 14.5C13.46 14.5 16.93 15.09 18.36 16.83C19.38 15.49 20 13.82 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12C4 13.82 4.62 15.49 5.64 16.83C7.07 15.09 10.54 14.5 12 14.5ZM12 6C10.06 6 8.5 7.56 8.5 9.5C8.5 11.44 10.06 13 12 13C13.94 13 15.5 11.44 15.5 9.5C15.5 7.56 13.94 6 12 6ZM10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8C11.17 8 10.5 8.67 10.5 9.5Z"
|
|
10
|
+
fill="#FFFFFF"
|
|
11
|
+
/>
|
|
12
|
+
</Svg>
|
|
13
|
+
))
|
|
@@ -255,7 +255,7 @@ exports[`Footer tests should render footer 1`] = `
|
|
|
255
255
|
>
|
|
256
256
|
<svg
|
|
257
257
|
class="emotion-5"
|
|
258
|
-
height="
|
|
258
|
+
height="48px"
|
|
259
259
|
viewBox="0 0 244 40"
|
|
260
260
|
>
|
|
261
261
|
<title>
|
|
@@ -263,15 +263,17 @@ exports[`Footer tests should render footer 1`] = `
|
|
|
263
263
|
</title>
|
|
264
264
|
<path
|
|
265
265
|
d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
|
|
266
|
-
fill="
|
|
266
|
+
fill="white"
|
|
267
267
|
/>
|
|
268
268
|
<path
|
|
269
269
|
d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
|
|
270
|
-
fill="
|
|
270
|
+
fill="white"
|
|
271
|
+
fill-opacity="0.4"
|
|
271
272
|
/>
|
|
272
273
|
<path
|
|
273
274
|
d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
|
|
274
|
-
fill="
|
|
275
|
+
fill="white"
|
|
276
|
+
fill-opacity="0.701961"
|
|
275
277
|
/>
|
|
276
278
|
</svg>
|
|
277
279
|
</div>
|
|
@@ -53,4 +53,21 @@ describe('Header tests', () => {
|
|
|
53
53
|
'/section-three'
|
|
54
54
|
)
|
|
55
55
|
})
|
|
56
|
+
|
|
57
|
+
test('render Account link if there is user data', () => {
|
|
58
|
+
const user = {
|
|
59
|
+
firstName: '',
|
|
60
|
+
lastName: '',
|
|
61
|
+
cpn: '',
|
|
62
|
+
email: '',
|
|
63
|
+
hash: '',
|
|
64
|
+
mobile: '',
|
|
65
|
+
phoneNumber: '',
|
|
66
|
+
dateOfBirth: '',
|
|
67
|
+
subscriptions: [],
|
|
68
|
+
paymentFailure: { active: false },
|
|
69
|
+
}
|
|
70
|
+
const { getByTestId } = renderWithTheme(Header, { user })
|
|
71
|
+
expect(getByTestId('account-link')).toBeInTheDocument()
|
|
72
|
+
})
|
|
56
73
|
})
|
|
@@ -31,12 +31,14 @@ import NewsKitLogoShort from '../common/NewskitLogoShort'
|
|
|
31
31
|
import NavLink from '../common/NavLink'
|
|
32
32
|
import { AppContext } from '../../app-context/AppContext'
|
|
33
33
|
import { handleEnterKeyPress } from '../../helpers/a11y'
|
|
34
|
+
import IconNavLink from '../common/iconNavLink'
|
|
35
|
+
import { IconAccount } from '../common/icons/IconAccount'
|
|
34
36
|
|
|
35
|
-
export const headerSize = '
|
|
37
|
+
export const headerSize = 'sizing100'
|
|
36
38
|
|
|
37
39
|
const StyledHeader = styled.div`
|
|
38
40
|
${getSizingCssFromTheme('height', headerSize)}
|
|
39
|
-
${getColorCssFromTheme('backgroundColor', '
|
|
41
|
+
${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
|
|
40
42
|
a,
|
|
41
43
|
a:visited:not(:disabled) {
|
|
42
44
|
${getColorCssFromTheme('color', 'white')};
|
|
@@ -44,14 +46,14 @@ const StyledHeader = styled.div`
|
|
|
44
46
|
line-height: ${getFontsFromTheme('fontLineHeight040')};
|
|
45
47
|
}
|
|
46
48
|
${getMediaQueryFromTheme('xs')} {
|
|
47
|
-
${getSizingCssFromTheme('paddingTop', '
|
|
48
|
-
${getSizingCssFromTheme('paddingBottom', '
|
|
49
|
+
${getSizingCssFromTheme('paddingTop', 'sizing040')};
|
|
50
|
+
${getSizingCssFromTheme('paddingBottom', 'sizing040')};
|
|
49
51
|
${getSizingCssFromTheme('paddingLeft', 'sizing000')};
|
|
50
52
|
${getSizingCssFromTheme('paddingRight', 'sizing000')};
|
|
51
53
|
}
|
|
52
54
|
${getMediaQueryFromTheme('lg')} {
|
|
53
|
-
${getSizingCssFromTheme('paddingTop', '
|
|
54
|
-
${getSizingCssFromTheme('paddingBottom', '
|
|
55
|
+
${getSizingCssFromTheme('paddingTop', 'sizing040')};
|
|
56
|
+
${getSizingCssFromTheme('paddingBottom', 'sizing040')};
|
|
55
57
|
${getSizingCssFromTheme('paddingLeft', 'sizing090')};
|
|
56
58
|
${getSizingCssFromTheme('paddingRight', 'sizing090')};
|
|
57
59
|
}
|
|
@@ -111,14 +113,14 @@ const NavigationContainer = styled.div<NavigationProps>`
|
|
|
111
113
|
overflow: auto;
|
|
112
114
|
width: 100%;
|
|
113
115
|
min-height: 100vh;
|
|
114
|
-
${getColorCssFromTheme('backgroundColor', '
|
|
116
|
+
${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
|
|
115
117
|
left: 0;
|
|
116
118
|
${getSizingCssFromTheme('top', headerSize)}
|
|
117
|
-
z-index:
|
|
119
|
+
z-index: 2;
|
|
118
120
|
display: ${(props) => (props.show ? 'block' : 'none')};
|
|
119
121
|
|
|
120
122
|
${getMediaQueryFromTheme('md')} {
|
|
121
|
-
display:
|
|
123
|
+
display: flex;
|
|
122
124
|
position: relative;
|
|
123
125
|
overflow: hidden;
|
|
124
126
|
width: initial;
|
|
@@ -127,6 +129,7 @@ const NavigationContainer = styled.div<NavigationProps>`
|
|
|
127
129
|
left: initial;
|
|
128
130
|
top: initial;
|
|
129
131
|
z-index: 1;
|
|
132
|
+
${getSizingCssFromTheme('height', 'sizing080')}
|
|
130
133
|
}
|
|
131
134
|
`
|
|
132
135
|
|
|
@@ -146,12 +149,10 @@ const Navigation = styled.div`
|
|
|
146
149
|
const NavButton = ({
|
|
147
150
|
buttonText,
|
|
148
151
|
href,
|
|
149
|
-
isMobile,
|
|
150
152
|
ariaLabel,
|
|
151
153
|
}: {
|
|
152
154
|
buttonText: string
|
|
153
155
|
href: string
|
|
154
|
-
isMobile: boolean
|
|
155
156
|
isLast?: boolean
|
|
156
157
|
ariaLabel?: string
|
|
157
158
|
}) => (
|
|
@@ -159,9 +160,12 @@ const NavButton = ({
|
|
|
159
160
|
as="span"
|
|
160
161
|
spaceInline={{
|
|
161
162
|
xs: 'space000',
|
|
162
|
-
md: '
|
|
163
|
+
md: 'space040',
|
|
164
|
+
}}
|
|
165
|
+
spaceStack={{
|
|
166
|
+
xs: 'space050',
|
|
167
|
+
md: 'space000',
|
|
163
168
|
}}
|
|
164
|
-
spaceStack={isMobile ? 'space050' : ''}
|
|
165
169
|
>
|
|
166
170
|
<NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
|
|
167
171
|
</Block>
|
|
@@ -228,8 +232,11 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
|
|
|
228
232
|
stackDistribution="flex-end"
|
|
229
233
|
wrap="nowrap"
|
|
230
234
|
>
|
|
231
|
-
<NavigationContainer
|
|
232
|
-
|
|
235
|
+
<NavigationContainer
|
|
236
|
+
show={showMenu}
|
|
237
|
+
data-testid="NavigationContainer"
|
|
238
|
+
>
|
|
239
|
+
<Navigation data-testid="Navigation">
|
|
233
240
|
{showMenu && (
|
|
234
241
|
<Block
|
|
235
242
|
spaceStack="space050"
|
|
@@ -239,21 +246,28 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
|
|
|
239
246
|
<NavButton
|
|
240
247
|
buttonText="Section One"
|
|
241
248
|
href="/section-one"
|
|
242
|
-
isMobile={showMenu}
|
|
243
249
|
ariaLabel="Section One Link"
|
|
244
250
|
/>
|
|
245
251
|
<NavButton
|
|
246
252
|
buttonText="Section Two"
|
|
247
253
|
href="/section-two"
|
|
248
|
-
isMobile={showMenu}
|
|
249
254
|
ariaLabel="Section Two Link"
|
|
250
255
|
/>
|
|
251
256
|
<NavButton
|
|
252
257
|
buttonText="Section Three"
|
|
253
258
|
href="/section-three"
|
|
254
|
-
isMobile={showMenu}
|
|
255
259
|
ariaLabel="Section Three Link"
|
|
256
260
|
/>
|
|
261
|
+
{user && (
|
|
262
|
+
<IconNavLink
|
|
263
|
+
icon={<IconAccount data-testid="account-link" />}
|
|
264
|
+
href="/account"
|
|
265
|
+
text="Account"
|
|
266
|
+
spaceInline="space040"
|
|
267
|
+
typographyPreset="utilityMeta020"
|
|
268
|
+
stylePreset="linkStandaloneInverse"
|
|
269
|
+
/>
|
|
270
|
+
)}
|
|
257
271
|
</Navigation>
|
|
258
272
|
</NavigationContainer>
|
|
259
273
|
<Visible xs sm>
|
|
@@ -219,4 +219,49 @@ describe('Account Subscription & Cancellation', () => {
|
|
|
219
219
|
cy.get('[data-testid="banner-container"]').should('not.exist')
|
|
220
220
|
cy.clearLocalStorage()
|
|
221
221
|
})
|
|
222
|
+
|
|
223
|
+
it('should show modal when Cancel subscription link is clicked but user is in payment failure', () => {
|
|
224
|
+
cy.GetAcsSession('withSub')
|
|
225
|
+
cy.mockConsent()
|
|
226
|
+
cy.visit('/account/subscription-and-billing', {
|
|
227
|
+
onBeforeLoad: (win) => {
|
|
228
|
+
let nextData
|
|
229
|
+
|
|
230
|
+
Object.defineProperty(win, '__NEXT_DATA__', {
|
|
231
|
+
set(o) {
|
|
232
|
+
// eslint-disable-next-line no-param-reassign
|
|
233
|
+
o.props.pageProps.user.paymentFailure = {
|
|
234
|
+
active: true,
|
|
235
|
+
startDate: new Date().toISOString(),
|
|
236
|
+
}
|
|
237
|
+
nextData = o
|
|
238
|
+
},
|
|
239
|
+
get() {
|
|
240
|
+
return nextData
|
|
241
|
+
},
|
|
242
|
+
})
|
|
243
|
+
},
|
|
244
|
+
})
|
|
245
|
+
cy.get('a[href="/account/cancellation"]').should('be.visible').click()
|
|
246
|
+
|
|
247
|
+
cy.contains('You have outstanding payments')
|
|
248
|
+
})
|
|
249
|
+
|
|
250
|
+
it('should show paypal subscription', () => {
|
|
251
|
+
cy.GetAcsSession('paypalSub')
|
|
252
|
+
cy.mockConsentAndVisit('/account/subscription-and-billing')
|
|
253
|
+
cy.contains('[data-testid="payment-type"]', 'Paypal account')
|
|
254
|
+
})
|
|
255
|
+
|
|
256
|
+
it('should show inline message for paypal subscription', () => {
|
|
257
|
+
cy.GetAcsSession('paypalSub')
|
|
258
|
+
cy.mockConsentAndVisit('/account/subscription-and-billing')
|
|
259
|
+
cy.get('a[href="/account/payment"]')
|
|
260
|
+
.should('be.visible')
|
|
261
|
+
.click({ force: true })
|
|
262
|
+
cy.contains(
|
|
263
|
+
'[data-testid="Zuora-inline"]',
|
|
264
|
+
'To update your Paypal credentials, please speak to one of our advisors on xxxx-xxx-xxxx or add a new payment method via credit/debit card using the form below.'
|
|
265
|
+
)
|
|
266
|
+
})
|
|
222
267
|
})
|
|
@@ -25,7 +25,11 @@ const userMap = {
|
|
|
25
25
|
withSub: {
|
|
26
26
|
username: 'render.e2e.sub@yopmail.com',
|
|
27
27
|
password: 'Ad45p0-swq151@',
|
|
28
|
-
}
|
|
28
|
+
},
|
|
29
|
+
paypalSub: {
|
|
30
|
+
username: 'render-paypal-payment@yopmail.com',
|
|
31
|
+
password: 'testing123',
|
|
32
|
+
},
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
Cypress.Commands.add('GetAcsSession', (user = 'default') => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@newskit-render/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.44.0",
|
|
4
4
|
"description": "Newskit Render - Core package",
|
|
5
5
|
"author": "",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@apollo/client": "3.4.16",
|
|
36
36
|
"@newskit-render/api": "^0.18.0",
|
|
37
37
|
"@newskit-render/auth": "^0.31.2",
|
|
38
|
-
"@newskit-render/checkout": "^0.26.
|
|
38
|
+
"@newskit-render/checkout": "^0.26.3",
|
|
39
39
|
"@newskit-render/feature-flags": "^0.13.0",
|
|
40
40
|
"@newskit-render/feed": "^0.5.1",
|
|
41
|
-
"@newskit-render/my-account": "^0.
|
|
42
|
-
"@newskit-render/shared-components": "^0.
|
|
41
|
+
"@newskit-render/my-account": "^0.152.0",
|
|
42
|
+
"@newskit-render/shared-components": "^0.45.0",
|
|
43
43
|
"@newskit-render/validation": "^0.39.1",
|
|
44
44
|
"cross-fetch": "3.1.5",
|
|
45
45
|
"graphql": "15.6.0",
|
package/temp/header.tsx
CHANGED
|
@@ -18,8 +18,10 @@ import NewsKitLogoFull from '../common/NewskitLogo'
|
|
|
18
18
|
import NewsKitLogoShort from '../common/NewskitLogoShort'
|
|
19
19
|
import NavLink from '../common/NavLink'
|
|
20
20
|
import { handleEnterKeyPress } from '../../helpers/a11y'
|
|
21
|
+
import IconNavLink from '../common/iconNavLink'
|
|
22
|
+
import { IconAccount } from '../common/icons/IconAccount'
|
|
21
23
|
|
|
22
|
-
export const headerSize = '
|
|
24
|
+
export const headerSize = 'sizing100'
|
|
23
25
|
|
|
24
26
|
const StyledHeader = styled.div`
|
|
25
27
|
${getSizingCssFromTheme('height', headerSize)}
|
|
@@ -31,14 +33,14 @@ const StyledHeader = styled.div`
|
|
|
31
33
|
line-height: ${getFontsFromTheme('fontLineHeight040')};
|
|
32
34
|
}
|
|
33
35
|
${getMediaQueryFromTheme('xs')} {
|
|
34
|
-
${getSizingCssFromTheme('paddingTop', '
|
|
35
|
-
${getSizingCssFromTheme('paddingBottom', '
|
|
36
|
+
${getSizingCssFromTheme('paddingTop', 'sizing040')};
|
|
37
|
+
${getSizingCssFromTheme('paddingBottom', 'sizing040')};
|
|
36
38
|
${getSizingCssFromTheme('paddingLeft', 'sizing000')};
|
|
37
39
|
${getSizingCssFromTheme('paddingRight', 'sizing000')};
|
|
38
40
|
}
|
|
39
41
|
${getMediaQueryFromTheme('lg')} {
|
|
40
|
-
${getSizingCssFromTheme('paddingTop', '
|
|
41
|
-
${getSizingCssFromTheme('paddingBottom', '
|
|
42
|
+
${getSizingCssFromTheme('paddingTop', 'sizing040')};
|
|
43
|
+
${getSizingCssFromTheme('paddingBottom', 'sizing040')};
|
|
42
44
|
${getSizingCssFromTheme('paddingLeft', 'sizing090')};
|
|
43
45
|
${getSizingCssFromTheme('paddingRight', 'sizing090')};
|
|
44
46
|
}
|
|
@@ -53,14 +55,14 @@ const NavigationContainer = styled.div<NavigationProps>`
|
|
|
53
55
|
overflow: auto;
|
|
54
56
|
width: 100%;
|
|
55
57
|
min-height: 100vh;
|
|
56
|
-
${getColorCssFromTheme('backgroundColor', '
|
|
58
|
+
${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
|
|
57
59
|
left: 0;
|
|
58
60
|
${getSizingCssFromTheme('top', headerSize)}
|
|
59
|
-
z-index:
|
|
61
|
+
z-index: 2;
|
|
60
62
|
display: ${(props) => (props.show ? 'block' : 'none')};
|
|
61
63
|
|
|
62
64
|
${getMediaQueryFromTheme('md')} {
|
|
63
|
-
display:
|
|
65
|
+
display: flex;
|
|
64
66
|
position: relative;
|
|
65
67
|
overflow: auto;
|
|
66
68
|
width: initial;
|
|
@@ -69,6 +71,7 @@ const NavigationContainer = styled.div<NavigationProps>`
|
|
|
69
71
|
left: initial;
|
|
70
72
|
top: initial;
|
|
71
73
|
z-index: 1;
|
|
74
|
+
${getSizingCssFromTheme('height', 'sizing080')}
|
|
72
75
|
}
|
|
73
76
|
`
|
|
74
77
|
|
|
@@ -133,12 +136,10 @@ const BannerContainer = styled(Block)`
|
|
|
133
136
|
const NavButton = ({
|
|
134
137
|
buttonText,
|
|
135
138
|
href,
|
|
136
|
-
isMobile,
|
|
137
139
|
ariaLabel,
|
|
138
140
|
}: {
|
|
139
141
|
buttonText: string
|
|
140
142
|
href: string
|
|
141
|
-
isMobile: boolean
|
|
142
143
|
isLast?: boolean
|
|
143
144
|
ariaLabel?: string
|
|
144
145
|
}) => (
|
|
@@ -146,9 +147,12 @@ const NavButton = ({
|
|
|
146
147
|
as="span"
|
|
147
148
|
spaceInline={{
|
|
148
149
|
xs: 'space000',
|
|
149
|
-
md: '
|
|
150
|
+
md: 'space040',
|
|
151
|
+
}}
|
|
152
|
+
spaceStack={{
|
|
153
|
+
xs: 'space050',
|
|
154
|
+
md: 'space000',
|
|
150
155
|
}}
|
|
151
|
-
spaceStack={isMobile && 'space050'}
|
|
152
156
|
>
|
|
153
157
|
<NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
|
|
154
158
|
</Block>
|
|
@@ -191,8 +195,11 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
|
|
|
191
195
|
stackDistribution="flex-end"
|
|
192
196
|
wrap="nowrap"
|
|
193
197
|
>
|
|
194
|
-
<NavigationContainer
|
|
195
|
-
|
|
198
|
+
<NavigationContainer
|
|
199
|
+
show={showMenu}
|
|
200
|
+
data-testid="NavigationContainer"
|
|
201
|
+
>
|
|
202
|
+
<Navigation data-testid="Navigation">
|
|
196
203
|
{showMenu && (
|
|
197
204
|
<Block
|
|
198
205
|
spaceStack="space050"
|
|
@@ -202,21 +209,28 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
|
|
|
202
209
|
<NavButton
|
|
203
210
|
buttonText="Section One"
|
|
204
211
|
href="/section-one"
|
|
205
|
-
isMobile={showMenu}
|
|
206
212
|
ariaLabel="Section One Link"
|
|
207
213
|
/>
|
|
208
214
|
<NavButton
|
|
209
215
|
buttonText="Section Two"
|
|
210
216
|
href="/section-two"
|
|
211
|
-
isMobile={showMenu}
|
|
212
217
|
ariaLabel="Section Two Link"
|
|
213
218
|
/>
|
|
214
219
|
<NavButton
|
|
215
220
|
buttonText="Section Three"
|
|
216
221
|
href="/section-three"
|
|
217
|
-
isMobile={showMenu}
|
|
218
222
|
ariaLabel="Section Three Link"
|
|
219
223
|
/>
|
|
224
|
+
{user && (
|
|
225
|
+
<IconNavLink
|
|
226
|
+
icon={<IconAccount data-testid="account-link" />}
|
|
227
|
+
href="/account"
|
|
228
|
+
text="Account"
|
|
229
|
+
spaceInline="space040"
|
|
230
|
+
typographyPreset="utilityMeta020"
|
|
231
|
+
stylePreset="linkStandaloneInverse"
|
|
232
|
+
/>
|
|
233
|
+
)}
|
|
220
234
|
</Navigation>
|
|
221
235
|
</NavigationContainer>
|
|
222
236
|
<Visible xs sm>
|