@newskit-render/core 1.42.1 → 1.44.2
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 +68 -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/infrastructure/.circleci/config.yml +1 -0
- package/package.json +7 -7
- package/pages/preview/[articleId]/version/[versionId]/index.tsx +17 -15
- package/temp/_app.tsx +209 -0
- package/temp/header.tsx +32 -18
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,74 @@
|
|
|
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.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.1...@newskit-render/core@1.44.2) (2022-03-30)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @newskit-render/core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.44.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.44.0...@newskit-render/core@1.44.1) (2022-03-30)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **PPDSR-691:** missing styles in temp files ([#658](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/658)) ([2b01484](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/2b01484dba99814d0a9ddb0987e9ba0b48f6401f))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
# [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)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Features
|
|
29
|
+
|
|
30
|
+
* **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))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## [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)
|
|
37
|
+
|
|
38
|
+
**Note:** Version bump only for package @newskit-render/core
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
# [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)
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
### Features
|
|
48
|
+
|
|
49
|
+
* **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))
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
## [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)
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
### Bug Fixes
|
|
59
|
+
|
|
60
|
+
* **PPDSR-697:** add NEXTAUTH_SECRET env var ([#652](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/652)) ([03b9ebc](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/03b9ebce417b66b69e7b5ef7aeb543152b883ba6))
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
## [1.42.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.42.1...@newskit-render/core@1.42.2) (2022-03-28)
|
|
67
|
+
|
|
68
|
+
**Note:** Version bump only for package @newskit-render/core
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
6
74
|
## [1.42.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.42.0...@newskit-render/core@1.42.1) (2022-03-25)
|
|
7
75
|
|
|
8
76
|
**Note:** Version bump only for package @newskit-render/core
|
|
@@ -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
|
+
))
|