@ndla/ui 55.0.15-alpha.0 → 55.0.16-alpha.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/dist/panda.buildinfo.json +18 -13
- package/dist/styles.css +74 -54
- package/es/Article/ArticleByline.js +80 -47
- package/es/Article/ArticleFootNotes.js +31 -19
- package/es/ContentTypeBadge/ContentTypeBadgeNew.js +1 -0
- package/es/FrontpageArticle/FrontpageArticle.js +1 -2
- package/es/index.js +0 -1
- package/es/model/ContentType.js +3 -1
- package/es/styles.css +74 -54
- package/lib/Article/ArticleByline.d.ts +1 -3
- package/lib/Article/ArticleByline.js +82 -49
- package/lib/Article/ArticleFootNotes.js +31 -20
- package/lib/ContentTypeBadge/ContentTypeBadgeNew.d.ts +1 -2
- package/lib/ContentTypeBadge/ContentTypeBadgeNew.js +1 -0
- package/lib/FrontpageArticle/FrontpageArticle.js +1 -2
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -7
- package/lib/model/ContentType.d.ts +1 -0
- package/lib/model/ContentType.js +4 -2
- package/lib/styles.css +74 -54
- package/package.json +2 -3
- package/src/Article/ArticleByline.tsx +82 -69
- package/src/Article/ArticleFootNotes.tsx +32 -36
- package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx +3 -1
- package/src/FrontpageArticle/FrontpageArticle.tsx +1 -1
- package/src/index.ts +0 -2
- package/src/model/ContentType.ts +2 -0
- package/es/CreatedBy/CreatedBy.js +0 -73
- package/es/CreatedBy/index.js +0 -10
- package/lib/CreatedBy/CreatedBy.d.ts +0 -15
- package/lib/CreatedBy/CreatedBy.js +0 -78
- package/lib/CreatedBy/index.d.ts +0 -9
- package/lib/CreatedBy/index.js +0 -16
- package/src/CreatedBy/CreatedBy.stories.tsx +0 -36
- package/src/CreatedBy/CreatedBy.tsx +0 -63
- package/src/CreatedBy/index.ts +0 -11
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
"schemaVersion": "0.42.0",
|
|
3
3
|
"styles": {
|
|
4
4
|
"atomic": [
|
|
5
|
+
"marginBlockStart]___[value:medium",
|
|
6
|
+
"paddingBlockStart]___[value:xsmall",
|
|
7
|
+
"borderTop]___[value:1px solid",
|
|
8
|
+
"borderColor]___[value:stroke.subtle",
|
|
9
|
+
"display]___[value:flex",
|
|
10
|
+
"flexDirection]___[value:column-reverse",
|
|
11
|
+
"gap]___[value:3xsmall",
|
|
12
|
+
"width]___[value:100%",
|
|
13
|
+
"justifyContent]___[value:space-between",
|
|
14
|
+
"paddingBlock]___[value:xsmall",
|
|
15
|
+
"textStyle]___[value:body.medium",
|
|
16
|
+
"flexDirection]___[value:row]___[cond:tabletWide",
|
|
17
|
+
"gap]___[value:xsmall",
|
|
18
|
+
"paddingBlockStart]___[value:xxlarge",
|
|
19
|
+
"alignItems]___[value:center",
|
|
20
|
+
"flexDirection]___[value:column",
|
|
21
|
+
"gap]___[value:medium",
|
|
22
|
+
"listStyle]___[value:none",
|
|
5
23
|
"textAlign]___[value:center]___[cond:&[data-align=\"center\"]",
|
|
6
24
|
"direction]___[value:rtl]___[cond:&:has(span[dir=\"rtl\"])",
|
|
7
25
|
"border]___[value:1px solid",
|
|
@@ -10,9 +28,7 @@
|
|
|
10
28
|
"boxShadow]___[value:full",
|
|
11
29
|
"marginBlockEnd]___[value:4xsmall",
|
|
12
30
|
"overflow]___[value:hidden",
|
|
13
|
-
"display]___[value:flex",
|
|
14
31
|
"display]___[value:block]___[cond:tabletWideDown",
|
|
15
|
-
"alignItems]___[value:center",
|
|
16
32
|
"flex]___[value:1 0 auto",
|
|
17
33
|
"width]___[value:surface.4xsmall",
|
|
18
34
|
"height]___[value:surface.4xsmall",
|
|
@@ -26,14 +42,10 @@
|
|
|
26
42
|
"width]___[value:100%]___[cond:tabletWideDown",
|
|
27
43
|
"height]___[value:auto]___[cond:tabletWideDown",
|
|
28
44
|
"alignItems]___[value:flex-start",
|
|
29
|
-
"flexDirection]___[value:column",
|
|
30
|
-
"gap]___[value:xsmall",
|
|
31
45
|
"padding]___[value:xsmall",
|
|
32
|
-
"width]___[value:100%",
|
|
33
46
|
"paddingBlock]___[value:xsmall]___[cond:&[data-has-image='true']<___>tablet",
|
|
34
47
|
"paddingInline]___[value:medium]___[cond:&[data-has-image='true']<___>tablet",
|
|
35
48
|
"width]___[value:100%]___[cond:tabletWide",
|
|
36
|
-
"flexDirection]___[value:row]___[cond:tabletWide",
|
|
37
49
|
"justifyContent]___[value:space-between]___[cond:tabletWide",
|
|
38
50
|
"borderBlockStart]___[value:1px solid",
|
|
39
51
|
"paddingBlock]___[value:medium",
|
|
@@ -45,7 +57,6 @@
|
|
|
45
57
|
"borderBottomRadius]___[value:xsmall",
|
|
46
58
|
"justifyContent]___[value:center",
|
|
47
59
|
"background]___[value:background.default",
|
|
48
|
-
"paddingBlock]___[value:xsmall",
|
|
49
60
|
"paddingInline]___[value:medium",
|
|
50
61
|
"display]___[value:grid]___[cond:tabletWideDown",
|
|
51
62
|
"paddingBlock]___[value:xsmall]___[cond:tabletWideDown",
|
|
@@ -72,8 +83,6 @@
|
|
|
72
83
|
"srOnly]___[value:true",
|
|
73
84
|
"color]___[value:text.default",
|
|
74
85
|
"backgroundColor]___[value:background.default",
|
|
75
|
-
"gap]___[value:medium",
|
|
76
|
-
"borderColor]___[value:stroke.subtle",
|
|
77
86
|
"transitionDuration]___[value:fast",
|
|
78
87
|
"transitionProperty]___[value:background-color, border-color, max-width",
|
|
79
88
|
"transitionTimingFunction]___[value:default",
|
|
@@ -207,7 +216,6 @@
|
|
|
207
216
|
"outlineColor]___[value:stroke.default]___[cond:_focusVisible<___>_after",
|
|
208
217
|
"outlineOffset]___[value:3px]___[cond:_focusVisible<___>_after",
|
|
209
218
|
"outlineStyle]___[value:solid]___[cond:_focusVisible<___>_after",
|
|
210
|
-
"textStyle]___[value:body.medium",
|
|
211
219
|
"textAlign]___[value:center",
|
|
212
220
|
"color]___[value:text.strong]___[cond:& a",
|
|
213
221
|
"marginTop]___[value:0]___[cond:& h1",
|
|
@@ -248,12 +256,10 @@
|
|
|
248
256
|
"transitionDuration]___[value:fast]___[cond:& svg",
|
|
249
257
|
"transform]___[value:rotate(180deg)]___[cond:_open<___>& svg",
|
|
250
258
|
"display]___[value:none]___[cond:_print",
|
|
251
|
-
"justifyContent]___[value:space-between",
|
|
252
259
|
"gap]___[value:small",
|
|
253
260
|
"paddingInline]___[value:0",
|
|
254
261
|
"marginBlockStart]___[value:3xsmall",
|
|
255
262
|
"paddingBlock]___[value:small",
|
|
256
|
-
"borderTop]___[value:1px solid",
|
|
257
263
|
"background]___[value:surface.brand.1.subtle]___[cond:_first",
|
|
258
264
|
"borderColor]___[value:stroke.default]___[cond:_first",
|
|
259
265
|
"fontWeight]___[value:bold]___[cond:_first<___>& p",
|
|
@@ -288,7 +294,6 @@
|
|
|
288
294
|
"width]___[value:large]___[cond:_hover<___>& [data-forward]",
|
|
289
295
|
"height]___[value:large]___[cond:_hover<___>& [data-forward]",
|
|
290
296
|
"color]___[value:icon.strong",
|
|
291
|
-
"listStyle]___[value:none",
|
|
292
297
|
"content]___[value:\"\"]___[cond:_before",
|
|
293
298
|
"position]___[value:absolute]___[cond:_before",
|
|
294
299
|
"inset]___[value:0]___[cond:_before",
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
2
|
@layer compositions {
|
|
3
|
+
.textStyle_body\.medium {
|
|
4
|
+
font-family: var(--fonts-sans);
|
|
5
|
+
font-weight: var(--font-weights-normal);
|
|
6
|
+
font-size: var(--font-sizes-small);
|
|
7
|
+
line-height: var(--line-heights-small);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
11
|
+
font-size: calc(var(--font-sizes-small) * 1.11);
|
|
12
|
+
line-height: calc(var(--line-heights-small) * 1.11);
|
|
13
|
+
}
|
|
14
|
+
|
|
3
15
|
.textStyle_body\.large {
|
|
4
16
|
font-family: var(--fonts-sans);
|
|
5
17
|
font-weight: var(--font-weights-normal);
|
|
@@ -36,18 +48,6 @@
|
|
|
36
48
|
line-height: calc(var(--line-heights-medium) * 1.11);
|
|
37
49
|
}
|
|
38
50
|
|
|
39
|
-
.textStyle_body\.medium {
|
|
40
|
-
font-family: var(--fonts-sans);
|
|
41
|
-
font-weight: var(--font-weights-normal);
|
|
42
|
-
font-size: var(--font-sizes-small);
|
|
43
|
-
line-height: var(--line-heights-small);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
47
|
-
font-size: calc(var(--font-sizes-small) * 1.11);
|
|
48
|
-
line-height: calc(var(--line-heights-small) * 1.11);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
51
|
.\[\&_a\]\:textStyle_label\.xsmall a {
|
|
52
52
|
font-family: var(--fonts-sans);
|
|
53
53
|
font-weight: var(--font-weights-normal);
|
|
@@ -61,6 +61,50 @@
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
.mbs_medium {
|
|
65
|
+
margin-block-start: var(--spacing-medium);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.pbs_xsmall {
|
|
69
|
+
padding-block-start: var(--spacing-xsmall);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.bd-t_1px_solid {
|
|
73
|
+
border-top: 1px solid;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.d_flex {
|
|
77
|
+
display: flex;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.gap_3xsmall {
|
|
81
|
+
gap: var(--spacing-3xsmall);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.w_100\% {
|
|
85
|
+
width: 100%;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.py_xsmall {
|
|
89
|
+
padding-block: var(--spacing-xsmall);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.gap_xsmall {
|
|
93
|
+
gap: var(--spacing-xsmall);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.pbs_xxlarge {
|
|
97
|
+
padding-block-start: var(--spacing-xxlarge);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.gap_medium {
|
|
101
|
+
gap: var(--spacing-medium);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.li-s_none {
|
|
105
|
+
list-style: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
64
108
|
.bd_1px_solid {
|
|
65
109
|
border: 1px solid;
|
|
66
110
|
}
|
|
@@ -81,10 +125,6 @@
|
|
|
81
125
|
overflow: hidden;
|
|
82
126
|
}
|
|
83
127
|
|
|
84
|
-
.d_flex {
|
|
85
|
-
display: flex;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
128
|
.flex_1_0_auto {
|
|
89
129
|
flex: 1 0 auto;
|
|
90
130
|
}
|
|
@@ -97,18 +137,10 @@
|
|
|
97
137
|
height: var(--sizes-surface-4xsmall);
|
|
98
138
|
}
|
|
99
139
|
|
|
100
|
-
.gap_xsmall {
|
|
101
|
-
gap: var(--spacing-xsmall);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
140
|
.p_xsmall {
|
|
105
141
|
padding: var(--spacing-xsmall);
|
|
106
142
|
}
|
|
107
143
|
|
|
108
|
-
.w_100\% {
|
|
109
|
-
width: 100%;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
144
|
.bd-bs_1px_solid {
|
|
113
145
|
border-block-start: 1px solid;
|
|
114
146
|
}
|
|
@@ -134,10 +166,6 @@
|
|
|
134
166
|
background: var(--colors-background-default);
|
|
135
167
|
}
|
|
136
168
|
|
|
137
|
-
.py_xsmall {
|
|
138
|
-
padding-block: var(--spacing-xsmall);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
169
|
.px_medium {
|
|
142
170
|
padding-inline: var(--spacing-medium);
|
|
143
171
|
}
|
|
@@ -214,10 +242,6 @@
|
|
|
214
242
|
color: var(--colors-text-default);
|
|
215
243
|
}
|
|
216
244
|
|
|
217
|
-
.gap_medium {
|
|
218
|
-
gap: var(--spacing-medium);
|
|
219
|
-
}
|
|
220
|
-
|
|
221
245
|
.h_100\% {
|
|
222
246
|
height: 100%;
|
|
223
247
|
}
|
|
@@ -411,10 +435,6 @@
|
|
|
411
435
|
padding-block: var(--spacing-small);
|
|
412
436
|
}
|
|
413
437
|
|
|
414
|
-
.bd-t_1px_solid {
|
|
415
|
-
border-top: 1px solid;
|
|
416
|
-
}
|
|
417
|
-
|
|
418
438
|
.bg_surface\.default {
|
|
419
439
|
background: var(--colors-surface-default);
|
|
420
440
|
}
|
|
@@ -443,10 +463,6 @@
|
|
|
443
463
|
color: var(--colors-icon-strong);
|
|
444
464
|
}
|
|
445
465
|
|
|
446
|
-
.li-s_none {
|
|
447
|
-
list-style: none;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
466
|
.d_grid {
|
|
451
467
|
display: grid;
|
|
452
468
|
}
|
|
@@ -459,22 +475,34 @@
|
|
|
459
475
|
aspect-ratio: 1/1;
|
|
460
476
|
}
|
|
461
477
|
|
|
462
|
-
.bd-c_stroke\.
|
|
463
|
-
border-color: var(--colors-stroke-
|
|
478
|
+
.bd-c_stroke\.subtle {
|
|
479
|
+
border-color: var(--colors-stroke-subtle);
|
|
464
480
|
}
|
|
465
481
|
|
|
466
|
-
.
|
|
467
|
-
|
|
482
|
+
.flex-d_column-reverse {
|
|
483
|
+
flex-direction: column-reverse;
|
|
468
484
|
}
|
|
469
485
|
|
|
470
|
-
.
|
|
471
|
-
|
|
486
|
+
.jc_space-between {
|
|
487
|
+
justify-content: space-between;
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.ai_center {
|
|
491
|
+
align-items: center;
|
|
472
492
|
}
|
|
473
493
|
|
|
474
494
|
.flex-d_column {
|
|
475
495
|
flex-direction: column;
|
|
476
496
|
}
|
|
477
497
|
|
|
498
|
+
.bd-c_stroke\.default {
|
|
499
|
+
border-color: var(--colors-stroke-default);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.ai_flex-start {
|
|
503
|
+
align-items: flex-start;
|
|
504
|
+
}
|
|
505
|
+
|
|
478
506
|
.as_flex-start {
|
|
479
507
|
align-self: flex-start;
|
|
480
508
|
}
|
|
@@ -487,10 +515,6 @@
|
|
|
487
515
|
background-color: var(--colors-background-default);
|
|
488
516
|
}
|
|
489
517
|
|
|
490
|
-
.bd-c_stroke\.subtle {
|
|
491
|
-
border-color: var(--colors-stroke-subtle);
|
|
492
|
-
}
|
|
493
|
-
|
|
494
518
|
.trs-dur_fast {
|
|
495
519
|
--transition-duration: var(--durations-fast);
|
|
496
520
|
transition-duration: var(--durations-fast);
|
|
@@ -620,10 +644,6 @@
|
|
|
620
644
|
bottom: calc(var(--spacing-medium) * -1);
|
|
621
645
|
}
|
|
622
646
|
|
|
623
|
-
.jc_space-between {
|
|
624
|
-
justify-content: space-between;
|
|
625
|
-
}
|
|
626
|
-
|
|
627
647
|
.font-style_italic {
|
|
628
648
|
font-style: italic;
|
|
629
649
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
1
|
/**
|
|
3
2
|
* Copyright (c) 2020-present, NDLA.
|
|
4
3
|
*
|
|
@@ -10,26 +9,46 @@ import _styled from "@emotion/styled/base";
|
|
|
10
9
|
import { useCallback, useEffect, useState } from "react";
|
|
11
10
|
import { useTranslation } from "react-i18next";
|
|
12
11
|
import { useLocation } from "react-router-dom";
|
|
13
|
-
import {
|
|
14
|
-
import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
|
|
12
|
+
import { ChevronDown } from "@ndla/icons/common";
|
|
15
13
|
import { getLicenseByAbbreviation } from "@ndla/licenses";
|
|
14
|
+
import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
|
|
15
|
+
import { styled } from "@ndla/styled-system/jsx";
|
|
16
16
|
import ArticleFootNotes from "./ArticleFootNotes";
|
|
17
17
|
import { LicenseLink } from "../LicenseByline/LicenseLink";
|
|
18
18
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
19
|
-
const Wrapper =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
const Wrapper = styled("div", {
|
|
20
|
+
base: {
|
|
21
|
+
// TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.
|
|
22
|
+
marginBlockStart: "medium",
|
|
23
|
+
paddingBlockStart: "xsmall",
|
|
24
|
+
borderTop: "1px solid",
|
|
25
|
+
borderColor: "stroke.subtle"
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// TODO: This is designed with 24px of inline padding. If you do this, most bylines will break into two lines.
|
|
30
|
+
// Should reconsider.
|
|
31
|
+
const TextWrapper = styled("div", {
|
|
32
|
+
base: {
|
|
33
|
+
display: "flex",
|
|
34
|
+
flexDirection: "column-reverse",
|
|
35
|
+
gap: "3xsmall",
|
|
36
|
+
width: "100%",
|
|
37
|
+
justifyContent: "space-between",
|
|
38
|
+
paddingBlock: "xsmall",
|
|
39
|
+
textStyle: "body.medium"
|
|
40
|
+
},
|
|
41
|
+
variants: {
|
|
42
|
+
learningpath: {
|
|
43
|
+
true: {},
|
|
44
|
+
false: {
|
|
45
|
+
tabletWide: {
|
|
46
|
+
flexDirection: "row"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
});
|
|
33
52
|
const renderContributors = (contributors, t) => {
|
|
34
53
|
const contributorsArray = contributors.map((contributor, index) => {
|
|
35
54
|
if (index < 1) return contributor.name;
|
|
@@ -54,18 +73,17 @@ const getSuppliersText = (suppliers, t) => {
|
|
|
54
73
|
}
|
|
55
74
|
});
|
|
56
75
|
};
|
|
57
|
-
const LicenseWrapper =
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
})("&[data-background-color=\"white\"]{background-color:", colors.background.default, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFydGljbGVCeWxpbmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtIdUQiLCJmaWxlIjoiQXJ0aWNsZUJ5bGluZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFRGdW5jdGlvbiB9IGZyb20gXCJpMThuZXh0XCI7XG5pbXBvcnQgeyBSZWFjdE5vZGUsIHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgeyB1c2VMb2NhdGlvbiB9IGZyb20gXCJyZWFjdC1yb3V0ZXItZG9tXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEFjY29yZGlvblJvb3QsIEFjY29yZGlvbkhlYWRlciwgQWNjb3JkaW9uQ29udGVudCwgQWNjb3JkaW9uSXRlbSB9IGZyb20gXCJAbmRsYS9hY2NvcmRpb25cIjtcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBnZXRMaWNlbnNlQnlBYmJyZXZpYXRpb24gfSBmcm9tIFwiQG5kbGEvbGljZW5zZXNcIjtcbmltcG9ydCBBcnRpY2xlRm9vdE5vdGVzIGZyb20gXCIuL0FydGljbGVGb290Tm90ZXNcIjtcbmltcG9ydCB7IExpY2Vuc2VMaW5rIH0gZnJvbSBcIi4uL0xpY2Vuc2VCeWxpbmUvTGljZW5zZUxpbmtcIjtcbmltcG9ydCB7IEZvb3ROb3RlIH0gZnJvbSBcIi4uL3R5cGVzXCI7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5ub3JtYWx9O1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHR9O1xuICAke2ZvbnRzLnNpemVzKFwiMTZweFwiLCBcIjI0cHhcIil9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlEYXJrfTtcbmA7XG5cbmNvbnN0IFRleHRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZy1ib3R0b206ICR7c3BhY2luZy5tZWRpdW1sYXJnZX07XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbi1yZXZlcnNlO1xuICAgIGdhcDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cbiAgJltkYXRhLWxlYXJuaW5nLXBhdGg9XCJ0cnVlXCJdIHtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW4tcmV2ZXJzZTtcbiAgICBnYXA6ICR7c3BhY2luZy54c21hbGx9O1xuICB9XG5gO1xuXG5jb25zdCBQcmltYXJ5Q29udHJpYnV0b3JzV3JhcHBlciA9IHN0eWxlZC5zcGFuYFxuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnh4c21hbGx9O1xuYDtcblxudHlwZSBBdXRob3JQcm9wcyA9IHtcbiAgbmFtZTogc3RyaW5nO1xufTtcblxudHlwZSBTdXBwbGllclByb3BzID0ge1xuICBuYW1lOiBzdHJpbmc7XG59O1xuXG50eXBlIEFjY29yZGlvbkhlYWRlclZhcmlhbnRzID0gXCJ3aGl0ZVwiIHwgXCJibHVlXCI7XG5cbnR5cGUgUHJvcHMgPSB7XG4gIGF1dGhvcnM/OiBBdXRob3JQcm9wc1tdO1xuICBzdXBwbGllcnM/OiBTdXBwbGllclByb3BzW107XG4gIHB1Ymxpc2hlZD86IHN0cmluZztcbiAgbGljZW5zZT86IHN0cmluZztcbiAgbGljZW5zZUJveD86IFJlYWN0Tm9kZTtcbiAgbG9jYWxlPzogc3RyaW5nO1xuICBmb290bm90ZXM/OiBGb290Tm90ZVtdO1xuICBhY2NvcmRpb25IZWFkZXJWYXJpYW50PzogQWNjb3JkaW9uSGVhZGVyVmFyaWFudHM7XG4gIGRpc3BsYXlCeWxpbmU/OiBib29sZWFuO1xuICBieWxpbmVUeXBlPzogXCJhcnRpY2xlXCIgfCBcImxlYXJuaW5nUGF0aFwiO1xufTtcblxuY29uc3QgcmVuZGVyQ29udHJpYnV0b3JzID0gKGNvbnRyaWJ1dG9yczogU3VwcGxpZXJQcm9wc1tdIHwgQXV0aG9yUHJvcHNbXSwgdDogVEZ1bmN0aW9uKSA9PiB7XG4gIGNvbnN0IGNvbnRyaWJ1dG9yc0FycmF5ID0gY29udHJpYnV0b3JzLm1hcCgoY29udHJpYnV0b3IsIGluZGV4KSA9PiB7XG4gICAgaWYgKGluZGV4IDwgMSkgcmV0dXJuIGNvbnRyaWJ1dG9yLm5hbWU7XG4gICAgY29uc3Qgc2VwID0gaW5kZXggPT09IGNvbnRyaWJ1dG9ycy5sZW5ndGggLSAxID8gYCAke3QoXCJhcnRpY2xlLmNvbmp1bmN0aW9uXCIpfSBgIDogXCIsIFwiO1xuICAgIHJldHVybiBgJHtzZXB9JHtjb250cmlidXRvci5uYW1lfWA7XG4gIH0pO1xuICByZXR1cm4gY29udHJpYnV0b3JzQXJyYXkuam9pbihcIlwiKTtcbn07XG5cbmNvbnN0IGdldFN1cHBsaWVyc1RleHQgPSAoc3VwcGxpZXJzOiBTdXBwbGllclByb3BzW10sIHQ6IFRGdW5jdGlvbikgPT4ge1xuICBpZiAoc3VwcGxpZXJzLmxlbmd0aCA9PT0gMCkge1xuICAgIHJldHVybiBcIlwiO1xuICB9XG4gIHJldHVybiBzdXBwbGllcnMubGVuZ3RoID4gMVxuICAgID8gdChcImFydGljbGUubXVsdGlwbGVTdXBwbGllcnNMYWJlbFwiLCB7XG4gICAgICAgIG5hbWVzOiByZW5kZXJDb250cmlidXRvcnMoc3VwcGxpZXJzLCB0KSxcbiAgICAgICAgaW50ZXJwb2xhdGlvbjogeyBlc2NhcGVWYWx1ZTogZmFsc2UgfSxcbiAgICAgIH0pXG4gICAgOiB0KFwiYXJ0aWNsZS5zdXBwbGllckxhYmVsXCIsIHtcbiAgICAgICAgbmFtZTogcmVuZGVyQ29udHJpYnV0b3JzKHN1cHBsaWVycywgdCksXG4gICAgICAgIGludGVycG9sYXRpb246IHsgZXNjYXBlVmFsdWU6IGZhbHNlIH0sXG4gICAgICB9KTtcbn07XG5cbmNvbnN0IExpY2Vuc2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcueHNtYWxsfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEFjY29yZGlvbkhlYWRlciA9IHN0eWxlZChBY2NvcmRpb25IZWFkZXIpYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5icmFuZC5saWdodGVzdH07XG4gICR7Zm9udHMuc2l6ZXMoXCIxNnB4XCIsIFwiMjlweFwiKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG5cbiAgJltkYXRhLWJhY2tncm91bmQtY29sb3I9XCJ3aGl0ZVwiXVtkYXRhLXN0YXRlPVwiY2xvc2VkXCJdIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmRlZmF1bHR9O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRBY2NvcmRpb25Db250ZW50ID0gc3R5bGVkKEFjY29yZGlvbkNvbnRlbnQpYFxuICAmW2RhdGEtYmFja2dyb3VuZC1jb2xvcj1cIndoaXRlXCJdIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmRlZmF1bHR9O1xuICB9XG5gO1xuXG5jb25zdCByZWZSZWdleHAgPSAvbm90ZVxcZC87XG5jb25zdCBmb290bm90ZXNBY2NvcmRpb25JZCA9IFwiZm9vdG5vdGVzXCI7XG5cbmNvbnN0IEFydGljbGVCeWxpbmUgPSAoe1xuICBhdXRob3JzID0gW10sXG4gIHN1cHBsaWVycyA9IFtdLFxuICBmb290bm90ZXMsXG4gIGxpY2Vuc2U6IGxpY2Vuc2VTdHJpbmcsXG4gIGxpY2Vuc2VCb3gsXG4gIHB1Ymxpc2hlZCxcbiAgbG9jYWxlLFxuICBhY2NvcmRpb25IZWFkZXJWYXJpYW50ID0gXCJibHVlXCIsXG4gIGRpc3BsYXlCeWxpbmUgPSB0cnVlLFxuICBieWxpbmVUeXBlID0gXCJhcnRpY2xlXCIsXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHsgcGF0aG5hbWUgfSA9IHVzZUxvY2F0aW9uKCk7XG4gIGNvbnN0IFtvcGVuQWNjb3JkaW9ucywgc2V0T3BlbkFjY29yZGlvbnNdID0gdXNlU3RhdGU8c3RyaW5nW10+KFtdKTtcbiAgY29uc3QgYWNjb3JkaW9uSXRlbVZhbHVlID0gXCJydWxlc0ZvclVzZVwiO1xuXG4gIGNvbnN0IG9uSGFzaENoYW5nZSA9IHVzZUNhbGxiYWNrKFxuICAgIChlOiBIYXNoQ2hhbmdlRXZlbnQpID0+IHtcbiAgICAgIGNvbnN0IGhhc2ggPSBlLm5ld1VSTC5zcGxpdChcIiNcIilbMV07XG4gICAgICBpZiAoaGFzaC5tYXRjaChyZWZSZWdleHApICYmICFvcGVuQWNjb3JkaW9ucy5pbmNsdWRlcyhmb290bm90ZXNBY2NvcmRpb25JZCkpIHtcbiAgICAgICAgc2V0T3BlbkFjY29yZGlvbnMoWy4uLm9wZW5BY2NvcmRpb25zLCBmb290bm90ZXNBY2NvcmRpb25JZF0pO1xuICAgICAgICBjb25zdCBlbCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGAjJHtoYXNofWApO1xuICAgICAgICBlbD8uY2xpY2soKTtcbiAgICAgICAgZWw/LmZvY3VzKCk7XG4gICAgICB9XG4gICAgfSxcbiAgICBbb3BlbkFjY29yZGlvbnNdLFxuICApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0T3BlbkFjY29yZGlvbnMoKHByZXYpID0+IHByZXYuZmlsdGVyKChzdGF0ZSkgPT4gc3RhdGUgIT09IGFjY29yZGlvbkl0ZW1WYWx1ZSkpO1xuICB9LCBbcGF0aG5hbWVdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKFwiaGFzaGNoYW5nZVwiLCBvbkhhc2hDaGFuZ2UpO1xuICAgIHJldHVybiAoKSA9PiB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcihcImhhc2hjaGFuZ2VcIiwgb25IYXNoQ2hhbmdlKTtcbiAgfSwgW29uSGFzaENoYW5nZV0pO1xuXG4gIGNvbnN0IGxpY2Vuc2UgPSBsaWNlbnNlU3RyaW5nICYmIGdldExpY2Vuc2VCeUFiYnJldmlhdGlvbihsaWNlbnNlU3RyaW5nLCBsb2NhbGUpO1xuXG4gIGNvbnN0IHNob3dQcmltYXJ5Q29udHJpYnV0b3JzID0gc3VwcGxpZXJzLmxlbmd0aCA+IDAgfHwgYXV0aG9ycy5sZW5ndGggPiAwO1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXI+XG4gICAgICB7ZGlzcGxheUJ5bGluZSAmJiAoXG4gICAgICAgIDxUZXh0V3JhcHBlciBkYXRhLWxlYXJuaW5nLXBhdGg9e2J5bGluZVR5cGUgPT09IFwibGVhcm5pbmdQYXRoXCJ9PlxuICAgICAgICAgIDxMaWNlbnNlV3JhcHBlcj5cbiAgICAgICAgICAgIHtsaWNlbnNlICYmIDxMaWNlbnNlTGluayBsaWNlbnNlPXtsaWNlbnNlfSAvPn1cbiAgICAgICAgICAgIHtzaG93UHJpbWFyeUNvbnRyaWJ1dG9ycyAmJiAoXG4gICAgICAgICAgICAgIDxQcmltYXJ5Q29udHJpYnV0b3JzV3JhcHBlcj5cbiAgICAgICAgICAgICAgICB7YXV0aG9ycy5sZW5ndGggPiAwICYmXG4gICAgICAgICAgICAgICAgICBgJHt0KFwiYXJ0aWNsZS5hdXRob3JzTGFiZWxcIiwge1xuICAgICAgICAgICAgICAgICAgICBuYW1lczogcmVuZGVyQ29udHJpYnV0b3JzKGF1dGhvcnMsIHQpLFxuICAgICAgICAgICAgICAgICAgICBpbnRlcnBvbGF0aW9uOiB7IGVzY2FwZVZhbHVlOiBmYWxzZSB9LFxuICAgICAgICAgICAgICAgICAgfSl9LiBgfVxuICAgICAgICAgICAgICAgIHtnZXRTdXBwbGllcnNUZXh0KHN1cHBsaWVycywgdCl9XG4gICAgICAgICAgICAgIDwvUHJpbWFyeUNvbnRyaWJ1dG9yc1dyYXBwZXI+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvTGljZW5zZVdyYXBwZXI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIHt0KGAke2J5bGluZVR5cGV9Lmxhc3RVcGRhdGVkYCl9IHtwdWJsaXNoZWR9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvVGV4dFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPEFjY29yZGlvblJvb3QgdHlwZT1cIm11bHRpcGxlXCIgb25WYWx1ZUNoYW5nZT17c2V0T3BlbkFjY29yZGlvbnN9IHZhbHVlPXtvcGVuQWNjb3JkaW9uc30+XG4gICAgICAgIHtsaWNlbnNlQm94ICYmIChcbiAgICAgICAgICA8QWNjb3JkaW9uSXRlbSB2YWx1ZT17YWNjb3JkaW9uSXRlbVZhbHVlfT5cbiAgICAgICAgICAgIDxTdHlsZWRBY2NvcmRpb25IZWFkZXIgaGVhZGluZ0xldmVsPVwiaDJcIiBkYXRhLWJhY2tncm91bmQtY29sb3I9e2FjY29yZGlvbkhlYWRlclZhcmlhbnR9PlxuICAgICAgICAgICAgICB7dChcImFydGljbGUudXNlQ29udGVudFwiKX1cbiAgICAgICAgICAgIDwvU3R5bGVkQWNjb3JkaW9uSGVhZGVyPlxuICAgICAgICAgICAgPFN0eWxlZEFjY29yZGlvbkNvbnRlbnQgZGF0YS1iYWNrZ3JvdW5kLWNvbG9yPXthY2NvcmRpb25IZWFkZXJWYXJpYW50fT57bGljZW5zZUJveH08L1N0eWxlZEFjY29yZGlvbkNvbnRlbnQ+XG4gICAgICAgICAgPC9BY2NvcmRpb25JdGVtPlxuICAgICAgICApfVxuXG4gICAgICAgIHshIWZvb3Rub3Rlcz8ubGVuZ3RoICYmIChcbiAgICAgICAgICA8QWNjb3JkaW9uSXRlbSB2YWx1ZT17Zm9vdG5vdGVzQWNjb3JkaW9uSWR9PlxuICAgICAgICAgICAgPFN0eWxlZEFjY29yZGlvbkhlYWRlciBoZWFkaW5nTGV2ZWw9XCJoMlwiPnt0KFwiYXJ0aWNsZS5mb290bm90ZXNcIil9PC9TdHlsZWRBY2NvcmRpb25IZWFkZXI+XG4gICAgICAgICAgICA8U3R5bGVkQWNjb3JkaW9uQ29udGVudCBmb3JjZU1vdW50IGRhdGEtYmFja2dyb3VuZC1jb2xvcj17YWNjb3JkaW9uSGVhZGVyVmFyaWFudH0+XG4gICAgICAgICAgICAgIDxBcnRpY2xlRm9vdE5vdGVzIGZvb3ROb3Rlcz17Zm9vdG5vdGVzfSAvPlxuICAgICAgICAgICAgPC9TdHlsZWRBY2NvcmRpb25Db250ZW50PlxuICAgICAgICAgIDwvQWNjb3JkaW9uSXRlbT5cbiAgICAgICAgKX1cbiAgICAgIDwvQWNjb3JkaW9uUm9vdD5cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcnRpY2xlQnlsaW5lO1xuIl19 */"));
|
|
76
|
+
const LicenseWrapper = styled("div", {
|
|
77
|
+
base: {
|
|
78
|
+
display: "flex",
|
|
79
|
+
gap: "xsmall"
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
const StyledAccordionRoot = styled(AccordionRoot, {
|
|
83
|
+
base: {
|
|
84
|
+
paddingBlockStart: "xxlarge"
|
|
85
|
+
}
|
|
86
|
+
});
|
|
69
87
|
const refRegexp = /note\d/;
|
|
70
88
|
const footnotesAccordionId = "footnotes";
|
|
71
89
|
const ArticleByline = _ref => {
|
|
@@ -77,7 +95,6 @@ const ArticleByline = _ref => {
|
|
|
77
95
|
licenseBox,
|
|
78
96
|
published,
|
|
79
97
|
locale,
|
|
80
|
-
accordionHeaderVariant = "blue",
|
|
81
98
|
displayByline = true,
|
|
82
99
|
bylineType = "article"
|
|
83
100
|
} = _ref;
|
|
@@ -109,11 +126,11 @@ const ArticleByline = _ref => {
|
|
|
109
126
|
const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
|
|
110
127
|
return _jsxs(Wrapper, {
|
|
111
128
|
children: [displayByline && _jsxs(TextWrapper, {
|
|
112
|
-
|
|
129
|
+
learningpath: bylineType === "learningPath",
|
|
113
130
|
children: [_jsxs(LicenseWrapper, {
|
|
114
131
|
children: [license && _jsx(LicenseLink, {
|
|
115
132
|
license: license
|
|
116
|
-
}), showPrimaryContributors && _jsxs(
|
|
133
|
+
}), showPrimaryContributors && _jsxs("span", {
|
|
117
134
|
children: [authors.length > 0 && `${t("article.authorsLabel", {
|
|
118
135
|
names: renderContributors(authors, t),
|
|
119
136
|
interpolation: {
|
|
@@ -124,28 +141,44 @@ const ArticleByline = _ref => {
|
|
|
124
141
|
}), _jsxs("div", {
|
|
125
142
|
children: [t(`${bylineType}.lastUpdated`), " ", published]
|
|
126
143
|
})]
|
|
127
|
-
}), _jsxs(
|
|
128
|
-
|
|
129
|
-
onValueChange: setOpenAccordions,
|
|
144
|
+
}), _jsxs(StyledAccordionRoot, {
|
|
145
|
+
multiple: true,
|
|
130
146
|
value: openAccordions,
|
|
147
|
+
onValueChange: details => setOpenAccordions(details.value),
|
|
131
148
|
children: [licenseBox && _jsxs(AccordionItem, {
|
|
132
149
|
value: accordionItemValue,
|
|
133
|
-
children: [
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
150
|
+
children: [_jsxs(AccordionItemTrigger, {
|
|
151
|
+
children: [_jsx(Heading, {
|
|
152
|
+
asChild: true,
|
|
153
|
+
consumeCss: true,
|
|
154
|
+
textStyle: "label.medium",
|
|
155
|
+
fontWeight: "bold",
|
|
156
|
+
children: _jsx("h2", {
|
|
157
|
+
children: t("article.useContent")
|
|
158
|
+
})
|
|
159
|
+
}), _jsx(AccordionItemIndicator, {
|
|
160
|
+
asChild: true,
|
|
161
|
+
children: _jsx(ChevronDown, {})
|
|
162
|
+
})]
|
|
163
|
+
}), _jsx(AccordionItemContent, {
|
|
139
164
|
children: licenseBox
|
|
140
165
|
})]
|
|
141
166
|
}), !!footnotes?.length && _jsxs(AccordionItem, {
|
|
142
167
|
value: footnotesAccordionId,
|
|
143
|
-
children: [
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
168
|
+
children: [_jsxs(AccordionItemTrigger, {
|
|
169
|
+
children: [_jsx(Heading, {
|
|
170
|
+
asChild: true,
|
|
171
|
+
consumeCss: true,
|
|
172
|
+
textStyle: "label.medium",
|
|
173
|
+
fontWeight: "bold",
|
|
174
|
+
children: _jsx("h2", {
|
|
175
|
+
children: t("article.footnotes")
|
|
176
|
+
})
|
|
177
|
+
}), _jsx(AccordionItemIndicator, {
|
|
178
|
+
asChild: true,
|
|
179
|
+
children: _jsx(ChevronDown, {})
|
|
180
|
+
})]
|
|
181
|
+
}), _jsx(AccordionItemContent, {
|
|
149
182
|
children: _jsx(ArticleFootNotes, {
|
|
150
183
|
footNotes: footnotes
|
|
151
184
|
})
|