@ndla/ui 56.0.14-alpha.0 → 56.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 +24 -21
- package/dist/styles.css +82 -67
- package/es/Article/Article.js +22 -94
- package/es/Article/index.js +1 -1
- package/es/CampaignBlock/CampaignBlock.js +33 -5
- package/es/ContentTypeBadge/ContentTypeBadge.js +2 -0
- package/es/TreeStructure/TreeStructure.js +292 -181
- package/es/TreeStructure/helperFunctions.js +0 -3
- package/es/TreeStructure/index.js +1 -2
- package/es/index.js +1 -1
- package/es/locale/messages-en.js +3 -3
- package/es/locale/messages-nb.js +3 -3
- package/es/locale/messages-nn.js +3 -3
- package/es/locale/messages-se.js +3 -3
- package/es/locale/messages-sma.js +3 -3
- package/es/styles.css +82 -67
- package/lib/Article/Article.d.ts +3 -18
- package/lib/Article/Article.js +22 -94
- package/lib/Article/index.d.ts +1 -1
- package/lib/Article/index.js +0 -12
- package/lib/CampaignBlock/CampaignBlock.js +33 -5
- package/lib/ContentTypeBadge/ContentTypeBadge.js +2 -0
- package/lib/TreeStructure/TreeStructure.d.ts +7 -6
- package/lib/TreeStructure/TreeStructure.js +293 -180
- package/lib/TreeStructure/helperFunctions.d.ts +0 -2
- package/lib/TreeStructure/helperFunctions.js +2 -6
- package/lib/TreeStructure/index.d.ts +1 -2
- package/lib/TreeStructure/index.js +2 -3
- package/lib/TreeStructure/types.d.ts +4 -22
- package/lib/index.d.ts +1 -1
- package/lib/index.js +0 -12
- package/lib/locale/messages-en.js +3 -3
- package/lib/locale/messages-nb.js +3 -3
- package/lib/locale/messages-nn.js +3 -3
- package/lib/locale/messages-se.js +3 -3
- package/lib/locale/messages-sma.js +3 -3
- package/lib/styles.css +82 -67
- package/package.json +7 -8
- package/src/Article/Article.tsx +22 -107
- package/src/Article/index.ts +0 -2
- package/src/CampaignBlock/CampaignBlock.tsx +35 -4
- package/src/ContentTypeBadge/ContentTypeBadge.tsx +2 -0
- package/src/TreeStructure/TreeStructure.stories.tsx +38 -68
- package/src/TreeStructure/TreeStructure.tsx +307 -194
- package/src/TreeStructure/helperFunctions.ts +0 -5
- package/src/TreeStructure/index.ts +1 -2
- package/src/TreeStructure/types.ts +4 -25
- package/src/index.ts +0 -2
- package/src/locale/messages-en.ts +3 -3
- package/src/locale/messages-nb.ts +3 -3
- package/src/locale/messages-nn.ts +3 -3
- package/src/locale/messages-se.ts +3 -3
- package/src/locale/messages-sma.ts +3 -3
- package/es/TreeStructure/AddFolderButton.js +0 -80
- package/es/TreeStructure/ComboboxButton.js +0 -127
- package/es/TreeStructure/FolderItem.js +0 -225
- package/es/TreeStructure/FolderItems.js +0 -95
- package/es/TreeStructure/arrowNavigation.js +0 -35
- package/lib/TreeStructure/AddFolderButton.d.ts +0 -17
- package/lib/TreeStructure/AddFolderButton.js +0 -85
- package/lib/TreeStructure/ComboboxButton.d.ts +0 -27
- package/lib/TreeStructure/ComboboxButton.js +0 -134
- package/lib/TreeStructure/FolderItem.d.ts +0 -17
- package/lib/TreeStructure/FolderItem.js +0 -230
- package/lib/TreeStructure/FolderItems.d.ts +0 -22
- package/lib/TreeStructure/FolderItems.js +0 -100
- package/lib/TreeStructure/arrowNavigation.d.ts +0 -10
- package/lib/TreeStructure/arrowNavigation.js +0 -42
- package/src/TreeStructure/AddFolderButton.tsx +0 -79
- package/src/TreeStructure/ComboboxButton.tsx +0 -172
- package/src/TreeStructure/FolderItem.tsx +0 -307
- package/src/TreeStructure/FolderItems.tsx +0 -121
- package/src/TreeStructure/arrowNavigation.ts +0 -54
package/es/index.js
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed } from "./Embed";
|
|
13
13
|
export { LicenseLink, EmbedByline } from "./LicenseByline";
|
|
14
|
-
export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup,
|
|
14
|
+
export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle } from "./Article";
|
|
15
15
|
export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
|
|
16
16
|
export { default as ContentLoader } from "./ContentLoader";
|
|
17
17
|
export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
|
package/es/locale/messages-en.js
CHANGED
|
@@ -1068,9 +1068,9 @@ const messages = {
|
|
|
1068
1068
|
},
|
|
1069
1069
|
fetchMore: "Fetch more answers",
|
|
1070
1070
|
deleted: "This post has been deleted by the author.",
|
|
1071
|
-
upvote: "
|
|
1071
|
+
upvote: "Like",
|
|
1072
1072
|
numberOfUpvotes: "{{ count }} people have upvoted this.",
|
|
1073
|
-
removeUpvote: "
|
|
1073
|
+
removeUpvote: "Stop liking",
|
|
1074
1074
|
reply: "Write a reply to {{ name }}"
|
|
1075
1075
|
},
|
|
1076
1076
|
flag: {
|
|
@@ -1232,7 +1232,7 @@ const messages = {
|
|
|
1232
1232
|
loginTerms: "Log in with Feide to receive access. By logging on your accept your terms of service",
|
|
1233
1233
|
loginResourcePitch: "Do you want to favorite this resource?",
|
|
1234
1234
|
loginWelcome: "Welcome to My NDLA!",
|
|
1235
|
-
deleteAccount: "Delete
|
|
1235
|
+
deleteAccount: "Delete profile",
|
|
1236
1236
|
loginPitch: "Welcome to My NDLA! Here you can save your favourite resources from NDLA, organize them and share them with others. Log in with your Feide account to get started.",
|
|
1237
1237
|
loginPitchButton: "Log in to My NDLA",
|
|
1238
1238
|
welcome: "Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags",
|
package/es/locale/messages-nb.js
CHANGED
|
@@ -1068,9 +1068,9 @@ const messages = {
|
|
|
1068
1068
|
},
|
|
1069
1069
|
fetchMore: "Hent flere svar",
|
|
1070
1070
|
deleted: "Dette innlegget er slettet av forfatteren.",
|
|
1071
|
-
upvote: "
|
|
1071
|
+
upvote: "Liker",
|
|
1072
1072
|
numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
|
|
1073
|
-
removeUpvote: "
|
|
1073
|
+
removeUpvote: "Slutt å like",
|
|
1074
1074
|
reply: "Skriv et svar til {{ name }}"
|
|
1075
1075
|
},
|
|
1076
1076
|
flag: {
|
|
@@ -1225,7 +1225,7 @@ const messages = {
|
|
|
1225
1225
|
confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
|
|
1226
1226
|
confirmDeleteAccountButton: "Slett konto",
|
|
1227
1227
|
myPage: "Min side",
|
|
1228
|
-
deleteAccount: "Slett
|
|
1228
|
+
deleteAccount: "Slett brukerprofil",
|
|
1229
1229
|
loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursene dine fra NDLA, organisere dem og dele dem med andre. Logg inn med din Feide-konto for å komme i gang.",
|
|
1230
1230
|
loginPitchButton: "Logg inn i Min NDLA",
|
|
1231
1231
|
logout: "Logg ut av Min NDLA",
|
package/es/locale/messages-nn.js
CHANGED
|
@@ -1068,9 +1068,9 @@ const messages = {
|
|
|
1068
1068
|
},
|
|
1069
1069
|
fetchMore: "Hent fleire svar",
|
|
1070
1070
|
deleted: "Dette innlegget er sletta av forfatteren.",
|
|
1071
|
-
upvote: "
|
|
1071
|
+
upvote: "Liker",
|
|
1072
1072
|
numberOfUpvotes: "{{ count }} personar har stemt opp denne.",
|
|
1073
|
-
removeUpvote: "
|
|
1073
|
+
removeUpvote: "Slutt å like",
|
|
1074
1074
|
reply: "Skriv eit svar til {{ name }}"
|
|
1075
1075
|
},
|
|
1076
1076
|
flag: {
|
|
@@ -1225,7 +1225,7 @@ const messages = {
|
|
|
1225
1225
|
confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
|
|
1226
1226
|
confirmDeleteAccountButton: "Slett konto",
|
|
1227
1227
|
myPage: "Mi side",
|
|
1228
|
-
deleteAccount: "Slett
|
|
1228
|
+
deleteAccount: "Slett brukarprofil",
|
|
1229
1229
|
loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursane dine frå NDLA, organisere dei og dele dei med andre. Logg inn med din Feide-konto for å komme i gang.",
|
|
1230
1230
|
loginPitchButton: "Logg inn i Min NDLA",
|
|
1231
1231
|
logout: "Logg ut av Min NDLA",
|
package/es/locale/messages-se.js
CHANGED
|
@@ -1068,9 +1068,9 @@ const messages = {
|
|
|
1068
1068
|
},
|
|
1069
1069
|
fetchMore: "Hent flere svar",
|
|
1070
1070
|
deleted: "Dette innlegget er slettet av forfatteren.",
|
|
1071
|
-
upvote: "
|
|
1071
|
+
upvote: "Liker",
|
|
1072
1072
|
numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
|
|
1073
|
-
removeUpvote: "
|
|
1073
|
+
removeUpvote: "Slutt å like",
|
|
1074
1074
|
reply: "Skriv et svar til {{ name }}"
|
|
1075
1075
|
},
|
|
1076
1076
|
flag: {
|
|
@@ -1225,7 +1225,7 @@ const messages = {
|
|
|
1225
1225
|
confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
|
|
1226
1226
|
confirmDeleteAccountButton: "Slett konto",
|
|
1227
1227
|
myPage: "Min side",
|
|
1228
|
-
deleteAccount: "Slett
|
|
1228
|
+
deleteAccount: "Slett brukerprofil",
|
|
1229
1229
|
loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursene dine fra NDLA, organisere dem og dele dem med andre. Logg inn med din Feide-konto for å komme i gang.",
|
|
1230
1230
|
loginPitchButton: "Logg inn i Min NDLA",
|
|
1231
1231
|
logout: "Logg ut av Min NDLA",
|
|
@@ -1068,9 +1068,9 @@ const messages = {
|
|
|
1068
1068
|
},
|
|
1069
1069
|
fetchMore: "Hent flere svar",
|
|
1070
1070
|
deleted: "Dette innlegget er slettet av forfatteren.",
|
|
1071
|
-
upvote: "
|
|
1071
|
+
upvote: "Liker",
|
|
1072
1072
|
numberOfUpvotes: "{{ count }} personer har stemt opp denne.",
|
|
1073
|
-
removeUpvote: "
|
|
1073
|
+
removeUpvote: "Slutt å like",
|
|
1074
1074
|
reply: "Skriv et svar til {{ name }}"
|
|
1075
1075
|
},
|
|
1076
1076
|
flag: {
|
|
@@ -1225,7 +1225,7 @@ const messages = {
|
|
|
1225
1225
|
confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
|
|
1226
1226
|
confirmDeleteAccountButton: "Slett konto",
|
|
1227
1227
|
myPage: "Min side",
|
|
1228
|
-
deleteAccount: "Slett
|
|
1228
|
+
deleteAccount: "Slett brukerprofil",
|
|
1229
1229
|
loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursene dine fra NDLA, organisere dem og dele dem med andre. Logg inn med din Feide-konto for å komme i gang.",
|
|
1230
1230
|
loginPitchButton: "Logg inn i Min NDLA",
|
|
1231
1231
|
logout: "Logg ut av Min NDLA",
|
package/es/styles.css
CHANGED
|
@@ -85,34 +85,26 @@
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.w_100\% {
|
|
93
|
-
width: 100%;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.pbs_xsmall {
|
|
97
|
-
padding-block-start: var(--spacing-xsmall);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.pbe_xsmall {
|
|
101
|
-
padding-block-end: var(--spacing-xsmall);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.bg_surface\.default {
|
|
105
|
-
background: var(--colors-surface-default);
|
|
88
|
+
.bg_background\.default {
|
|
89
|
+
background: var(--colors-background-default);
|
|
106
90
|
}
|
|
107
91
|
|
|
108
92
|
.d_flex {
|
|
109
93
|
display: flex;
|
|
110
94
|
}
|
|
111
95
|
|
|
96
|
+
.gap_xxlarge {
|
|
97
|
+
gap: var(--spacing-xxlarge);
|
|
98
|
+
}
|
|
99
|
+
|
|
112
100
|
.c_text\.default {
|
|
113
101
|
color: var(--colors-text-default);
|
|
114
102
|
}
|
|
115
103
|
|
|
104
|
+
.w_100\% {
|
|
105
|
+
width: 100%;
|
|
106
|
+
}
|
|
107
|
+
|
|
116
108
|
.ov-wrap_break-word {
|
|
117
109
|
overflow-wrap: break-word;
|
|
118
110
|
}
|
|
@@ -121,26 +113,22 @@
|
|
|
121
113
|
position: relative;
|
|
122
114
|
}
|
|
123
115
|
|
|
124
|
-
.gap_xsmall {
|
|
125
|
-
gap: var(--spacing-xsmall);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.pos_absolute {
|
|
129
|
-
position: absolute;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
116
|
.gap_medium {
|
|
133
117
|
gap: var(--spacing-medium);
|
|
134
118
|
}
|
|
135
119
|
|
|
136
|
-
.
|
|
137
|
-
|
|
120
|
+
.pbs_xxlarge {
|
|
121
|
+
padding-block-start: var(--spacing-xxlarge);
|
|
138
122
|
}
|
|
139
123
|
|
|
140
124
|
.mbs_medium {
|
|
141
125
|
margin-block-start: var(--spacing-medium);
|
|
142
126
|
}
|
|
143
127
|
|
|
128
|
+
.pbs_xsmall {
|
|
129
|
+
padding-block-start: var(--spacing-xsmall);
|
|
130
|
+
}
|
|
131
|
+
|
|
144
132
|
.bd-t_1px_solid {
|
|
145
133
|
border-top: 1px solid;
|
|
146
134
|
}
|
|
@@ -153,8 +141,8 @@
|
|
|
153
141
|
padding-block: var(--spacing-xsmall);
|
|
154
142
|
}
|
|
155
143
|
|
|
156
|
-
.
|
|
157
|
-
|
|
144
|
+
.gap_xsmall {
|
|
145
|
+
gap: var(--spacing-xsmall);
|
|
158
146
|
}
|
|
159
147
|
|
|
160
148
|
.li-s_none {
|
|
@@ -218,10 +206,6 @@
|
|
|
218
206
|
border-bottom-right-radius: var(--radii-xsmall);
|
|
219
207
|
}
|
|
220
208
|
|
|
221
|
-
.bg_background\.default {
|
|
222
|
-
background: var(--colors-background-default);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
209
|
.px_medium {
|
|
226
210
|
padding-inline: var(--spacing-medium);
|
|
227
211
|
}
|
|
@@ -374,6 +358,10 @@
|
|
|
374
358
|
padding: var(--spacing-medium);
|
|
375
359
|
}
|
|
376
360
|
|
|
361
|
+
.bg_surface\.default {
|
|
362
|
+
background: var(--colors-surface-default);
|
|
363
|
+
}
|
|
364
|
+
|
|
377
365
|
.z_base {
|
|
378
366
|
z-index: var(--z-index-base);
|
|
379
367
|
}
|
|
@@ -426,6 +414,10 @@
|
|
|
426
414
|
border: 2px solid;
|
|
427
415
|
}
|
|
428
416
|
|
|
417
|
+
.pos_absolute {
|
|
418
|
+
position: absolute;
|
|
419
|
+
}
|
|
420
|
+
|
|
429
421
|
.op_0 {
|
|
430
422
|
opacity: 0;
|
|
431
423
|
}
|
|
@@ -611,6 +603,18 @@
|
|
|
611
603
|
aspect-ratio: 1/1;
|
|
612
604
|
}
|
|
613
605
|
|
|
606
|
+
.max-h_inherit {
|
|
607
|
+
max-height: inherit;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.ov_auto {
|
|
611
|
+
overflow: auto;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.gap_10px {
|
|
615
|
+
gap: 10px;
|
|
616
|
+
}
|
|
617
|
+
|
|
614
618
|
.flex-d_column {
|
|
615
619
|
flex-direction: column;
|
|
616
620
|
}
|
|
@@ -623,14 +627,6 @@
|
|
|
623
627
|
align-items: flex-start;
|
|
624
628
|
}
|
|
625
629
|
|
|
626
|
-
.right_8\% {
|
|
627
|
-
right: 8%;
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
.top_xsmall {
|
|
631
|
-
top: var(--spacing-xsmall);
|
|
632
|
-
}
|
|
633
|
-
|
|
634
630
|
.bd-c_stroke\.subtle {
|
|
635
631
|
border-color: var(--colors-stroke-subtle);
|
|
636
632
|
}
|
|
@@ -682,6 +678,10 @@
|
|
|
682
678
|
align-items: flex-end;
|
|
683
679
|
}
|
|
684
680
|
|
|
681
|
+
.fw_bold {
|
|
682
|
+
font-weight: var(--font-weights-bold);
|
|
683
|
+
}
|
|
684
|
+
|
|
685
685
|
.as_center {
|
|
686
686
|
align-self: center;
|
|
687
687
|
}
|
|
@@ -722,10 +722,6 @@
|
|
|
722
722
|
top: calc(var(--spacing-4xsmall) * -1);
|
|
723
723
|
}
|
|
724
724
|
|
|
725
|
-
.fw_bold {
|
|
726
|
-
font-weight: var(--font-weights-bold);
|
|
727
|
-
}
|
|
728
|
-
|
|
729
725
|
.bg-c_surface\.disabled {
|
|
730
726
|
background-color: var(--colors-surface-disabled);
|
|
731
727
|
}
|
|
@@ -761,6 +757,10 @@
|
|
|
761
757
|
transition-timing-function: ease-out;
|
|
762
758
|
}
|
|
763
759
|
|
|
760
|
+
.top_xsmall {
|
|
761
|
+
top: var(--spacing-xsmall);
|
|
762
|
+
}
|
|
763
|
+
|
|
764
764
|
.right_xsmall {
|
|
765
765
|
right: var(--spacing-xsmall);
|
|
766
766
|
}
|
|
@@ -896,6 +896,10 @@
|
|
|
896
896
|
overflow-wrap: anywhere;
|
|
897
897
|
}
|
|
898
898
|
|
|
899
|
+
.\[\&_\>_\:is\(\:last-child\)\]\:pbe_5xlarge > :is(:last-child) {
|
|
900
|
+
padding-block-end: var(--spacing-5xlarge);
|
|
901
|
+
}
|
|
902
|
+
|
|
899
903
|
.\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
|
|
900
904
|
text-align: center;
|
|
901
905
|
}
|
|
@@ -1171,6 +1175,14 @@
|
|
|
1171
1175
|
text-decoration: underline;
|
|
1172
1176
|
}
|
|
1173
1177
|
|
|
1178
|
+
.\[\&_span\]\:ov_hidden span {
|
|
1179
|
+
overflow: hidden;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.\[\&_span\]\:tov_ellipsis span {
|
|
1183
|
+
text-overflow: ellipsis;
|
|
1184
|
+
}
|
|
1185
|
+
|
|
1174
1186
|
.after\:content_0::after {
|
|
1175
1187
|
content: 0;
|
|
1176
1188
|
}
|
|
@@ -1436,6 +1448,9 @@
|
|
|
1436
1448
|
}
|
|
1437
1449
|
|
|
1438
1450
|
@media screen and (min-width: 29.75rem) {
|
|
1451
|
+
.mobileWide\:h_340px {
|
|
1452
|
+
height: 340px;
|
|
1453
|
+
}
|
|
1439
1454
|
.mobileWide\:d_none {
|
|
1440
1455
|
display: none;
|
|
1441
1456
|
}
|
|
@@ -1448,12 +1463,6 @@
|
|
|
1448
1463
|
}
|
|
1449
1464
|
|
|
1450
1465
|
@media screen and (min-width: 37.5625rem) {
|
|
1451
|
-
.tablet\:pbs_medium {
|
|
1452
|
-
padding-block-start: var(--spacing-medium);
|
|
1453
|
-
}
|
|
1454
|
-
.tablet\:pbe_medium {
|
|
1455
|
-
padding-block-end: var(--spacing-medium);
|
|
1456
|
-
}
|
|
1457
1466
|
.tablet\:px_medium {
|
|
1458
1467
|
padding-inline: var(--spacing-medium);
|
|
1459
1468
|
}
|
|
@@ -1468,9 +1477,6 @@
|
|
|
1468
1477
|
}
|
|
1469
1478
|
.tablet\:w_83\.333\% {
|
|
1470
1479
|
width: 83.333%;
|
|
1471
|
-
}
|
|
1472
|
-
.tablet\:top_medium {
|
|
1473
|
-
top: var(--spacing-medium);
|
|
1474
1480
|
}
|
|
1475
1481
|
.tablet\:ai_unset {
|
|
1476
1482
|
align-items: unset;
|
|
@@ -1537,6 +1543,27 @@
|
|
|
1537
1543
|
}
|
|
1538
1544
|
.tabletWide\:max-w_532px {
|
|
1539
1545
|
max-width: 532px;
|
|
1546
|
+
}
|
|
1547
|
+
.tabletWide\:w_auto {
|
|
1548
|
+
width: auto;
|
|
1549
|
+
}
|
|
1550
|
+
.tabletWide\:d_block {
|
|
1551
|
+
display: block;
|
|
1552
|
+
}
|
|
1553
|
+
.tabletWide\:ov_hidden {
|
|
1554
|
+
overflow: hidden;
|
|
1555
|
+
}
|
|
1556
|
+
.tabletWide\:pos_relative {
|
|
1557
|
+
position: relative;
|
|
1558
|
+
}
|
|
1559
|
+
.tabletWide\:lc_4 {
|
|
1560
|
+
overflow: hidden;
|
|
1561
|
+
display: -webkit-box;
|
|
1562
|
+
-webkit-line-clamp: 4;
|
|
1563
|
+
-webkit-box-orient: vertical;
|
|
1564
|
+
}
|
|
1565
|
+
.tabletWide\:box-orient_vertical {
|
|
1566
|
+
box-orient: vertical;
|
|
1540
1567
|
}
|
|
1541
1568
|
.tabletWide\:flex-d_row {
|
|
1542
1569
|
flex-direction: row;
|
|
@@ -1547,23 +1574,11 @@
|
|
|
1547
1574
|
}
|
|
1548
1575
|
|
|
1549
1576
|
@media screen and (min-width: 61.3125rem) {
|
|
1550
|
-
.desktop\:pbs_xxlarge {
|
|
1551
|
-
padding-block-start: var(--spacing-xxlarge);
|
|
1552
|
-
}
|
|
1553
|
-
.desktop\:pbe_xxlarge {
|
|
1554
|
-
padding-block-end: var(--spacing-xxlarge);
|
|
1555
|
-
}
|
|
1556
1577
|
.desktop\:w_260px {
|
|
1557
1578
|
width: 260px;
|
|
1558
1579
|
}
|
|
1559
1580
|
.desktop\:h_260px {
|
|
1560
1581
|
height: 260px;
|
|
1561
|
-
}
|
|
1562
|
-
.desktop\:h_340px {
|
|
1563
|
-
height: 340px;
|
|
1564
|
-
}
|
|
1565
|
-
.desktop\:top_xxlarge {
|
|
1566
|
-
top: var(--spacing-xxlarge);
|
|
1567
1582
|
}
|
|
1568
1583
|
.desktop\:grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
|
1569
1584
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
package/lib/Article/Article.d.ts
CHANGED
|
@@ -8,17 +8,9 @@
|
|
|
8
8
|
import { ReactNode } from "react";
|
|
9
9
|
import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
|
|
10
10
|
import { Article as ArticleType } from "../types";
|
|
11
|
-
export declare const ArticlePadding: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
12
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
13
|
-
} & import("@ark-ui/react").PolymorphicProps>, {
|
|
14
|
-
padStart?: boolean | undefined;
|
|
15
|
-
padEnd?: boolean | undefined;
|
|
16
|
-
}>;
|
|
17
11
|
export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
|
|
18
12
|
consumeCss?: boolean | undefined;
|
|
19
|
-
} & import("@ndla/styled-system/types").WithCss &
|
|
20
|
-
padded?: boolean | undefined;
|
|
21
|
-
} & import("react").RefAttributes<HTMLElement>>;
|
|
13
|
+
} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
|
|
22
14
|
export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
23
15
|
ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
|
|
24
16
|
} & {
|
|
@@ -27,19 +19,12 @@ export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<O
|
|
|
27
19
|
export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
28
20
|
ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
|
|
29
21
|
} & import("@ark-ui/react").PolymorphicProps>, {}>;
|
|
30
|
-
export declare const ArticleActionWrapper: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
31
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
32
|
-
} & import("@ark-ui/react").PolymorphicProps>, {}>;
|
|
33
22
|
export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
34
23
|
ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
|
|
35
|
-
} & import("@ark-ui/react").PolymorphicProps>, {
|
|
36
|
-
padded?: boolean | undefined;
|
|
37
|
-
}>;
|
|
24
|
+
} & import("@ark-ui/react").PolymorphicProps>, {}>;
|
|
38
25
|
export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
39
26
|
ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
|
|
40
|
-
} & import("@ark-ui/react").PolymorphicProps>, {
|
|
41
|
-
padded?: boolean | undefined;
|
|
42
|
-
}>;
|
|
27
|
+
} & import("@ark-ui/react").PolymorphicProps>, {}>;
|
|
43
28
|
interface ArticleTitleProps {
|
|
44
29
|
heartButton?: ReactNode;
|
|
45
30
|
contentType?: ContentType;
|
package/lib/Article/Article.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ArticleWrapper = exports.ArticleTitle = exports.
|
|
6
|
+
exports.ArticleWrapper = exports.ArticleTitle = exports.ArticleHeader = exports.ArticleHGroup = exports.ArticleFooter = exports.ArticleContent = exports.Article = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _react2 = require("@ark-ui/react");
|
|
9
9
|
var _primitives = require("@ndla/primitives");
|
|
@@ -20,57 +20,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
20
20
|
*
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
|
-
const
|
|
24
|
-
paddingInline: "8%"
|
|
25
|
-
};
|
|
26
|
-
const paddingBlockEnd = {
|
|
27
|
-
paddingBlockEnd: "xsmall",
|
|
28
|
-
tablet: {
|
|
29
|
-
paddingBlockEnd: "medium"
|
|
30
|
-
},
|
|
31
|
-
desktop: {
|
|
32
|
-
paddingBlockEnd: "xxlarge"
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const paddingBlockStart = {
|
|
36
|
-
paddingBlockStart: "xsmall",
|
|
37
|
-
tablet: {
|
|
38
|
-
paddingBlockStart: "medium"
|
|
39
|
-
},
|
|
40
|
-
desktop: {
|
|
41
|
-
paddingBlockStart: "xxlarge"
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
const ArticlePadding = exports.ArticlePadding = (0, _jsx2.styled)(_react2.ark.div, {
|
|
45
|
-
base: {
|
|
46
|
-
...articlePadding,
|
|
47
|
-
width: "100%"
|
|
48
|
-
},
|
|
49
|
-
variants: {
|
|
50
|
-
padStart: {
|
|
51
|
-
true: paddingBlockStart
|
|
52
|
-
},
|
|
53
|
-
padEnd: {
|
|
54
|
-
true: paddingBlockEnd
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}, {
|
|
58
|
-
baseComponent: true
|
|
59
|
-
});
|
|
60
|
-
const StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {
|
|
61
|
-
base: {
|
|
62
|
-
background: "surface.default"
|
|
63
|
-
},
|
|
64
|
-
variants: {
|
|
65
|
-
padded: {
|
|
66
|
-
true: {
|
|
67
|
-
...articlePadding,
|
|
68
|
-
...paddingBlockStart,
|
|
69
|
-
...paddingBlockEnd
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}, {
|
|
23
|
+
const StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {}, {
|
|
74
24
|
baseComponent: true
|
|
75
25
|
});
|
|
76
26
|
const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
@@ -86,8 +36,10 @@ const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardR
|
|
|
86
36
|
});
|
|
87
37
|
const StyledArticleWrapper = (0, _jsx2.styled)(_react2.ark.article, {
|
|
88
38
|
base: {
|
|
39
|
+
background: "background.default",
|
|
89
40
|
display: "flex",
|
|
90
41
|
flexDirection: "column",
|
|
42
|
+
gap: "xxlarge",
|
|
91
43
|
color: "text.default",
|
|
92
44
|
alignItems: "center",
|
|
93
45
|
width: "100%",
|
|
@@ -116,7 +68,6 @@ const ArticleHGroup = exports.ArticleHGroup = (0, _jsx2.styled)(_react2.ark.hgro
|
|
|
116
68
|
width: "100%",
|
|
117
69
|
flexDirection: "column",
|
|
118
70
|
alignItems: "flex-start",
|
|
119
|
-
gap: "xsmall",
|
|
120
71
|
"& h1": {
|
|
121
72
|
overflowWrap: "anywhere"
|
|
122
73
|
}
|
|
@@ -124,37 +75,14 @@ const ArticleHGroup = exports.ArticleHGroup = (0, _jsx2.styled)(_react2.ark.hgro
|
|
|
124
75
|
}, {
|
|
125
76
|
baseComponent: true
|
|
126
77
|
});
|
|
127
|
-
const ArticleActionWrapper = exports.ArticleActionWrapper = (0, _jsx2.styled)(_react2.ark.div, {
|
|
128
|
-
base: {
|
|
129
|
-
position: "absolute",
|
|
130
|
-
right: "8%",
|
|
131
|
-
top: "xsmall",
|
|
132
|
-
tablet: {
|
|
133
|
-
top: "medium"
|
|
134
|
-
},
|
|
135
|
-
desktop: {
|
|
136
|
-
top: "xxlarge"
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}, {
|
|
140
|
-
baseComponent: true
|
|
141
|
-
});
|
|
142
78
|
const ArticleHeader = exports.ArticleHeader = (0, _jsx2.styled)(_react2.ark.header, {
|
|
143
79
|
base: {
|
|
144
80
|
display: "flex",
|
|
145
81
|
flexDirection: "column",
|
|
146
|
-
background: "surface.default",
|
|
147
82
|
gap: "medium",
|
|
148
83
|
alignItems: "flex-start",
|
|
149
|
-
width: "100%"
|
|
150
|
-
|
|
151
|
-
variants: {
|
|
152
|
-
padded: {
|
|
153
|
-
true: {
|
|
154
|
-
...articlePadding,
|
|
155
|
-
...paddingBlockStart
|
|
156
|
-
}
|
|
157
|
-
}
|
|
84
|
+
width: "100%",
|
|
85
|
+
paddingBlockStart: "xxlarge"
|
|
158
86
|
}
|
|
159
87
|
}, {
|
|
160
88
|
baseComponent: true
|
|
@@ -163,21 +91,20 @@ const ArticleFooter = exports.ArticleFooter = (0, _jsx2.styled)(_react2.ark.foot
|
|
|
163
91
|
base: {
|
|
164
92
|
display: "flex",
|
|
165
93
|
flexDirection: "column",
|
|
166
|
-
background: "surface.default",
|
|
167
94
|
gap: "xxlarge",
|
|
168
|
-
width: "100%"
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
padded: {
|
|
172
|
-
true: {
|
|
173
|
-
...articlePadding,
|
|
174
|
-
...paddingBlockEnd
|
|
175
|
-
}
|
|
95
|
+
width: "100%",
|
|
96
|
+
"& > :is(:last-child)": {
|
|
97
|
+
paddingBlockEnd: "5xlarge"
|
|
176
98
|
}
|
|
177
99
|
}
|
|
178
100
|
}, {
|
|
179
101
|
baseComponent: true
|
|
180
102
|
});
|
|
103
|
+
const StyledStack = (0, _jsx2.styled)(_jsx2.Stack, {
|
|
104
|
+
base: {
|
|
105
|
+
width: "100%"
|
|
106
|
+
}
|
|
107
|
+
});
|
|
181
108
|
const ArticleTitle = _ref2 => {
|
|
182
109
|
let {
|
|
183
110
|
contentType,
|
|
@@ -189,12 +116,15 @@ const ArticleTitle = _ref2 => {
|
|
|
189
116
|
competenceGoals
|
|
190
117
|
} = _ref2;
|
|
191
118
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
|
|
192
|
-
padded: true,
|
|
193
119
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHGroup, {
|
|
194
|
-
children: [
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
120
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledStack, {
|
|
121
|
+
justify: "space-between",
|
|
122
|
+
align: "center",
|
|
123
|
+
direction: "row",
|
|
124
|
+
gap: "small",
|
|
125
|
+
children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
|
|
126
|
+
contentType: contentType
|
|
127
|
+
}), heartButton]
|
|
198
128
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
|
|
199
129
|
textStyle: "heading.large",
|
|
200
130
|
id: id,
|
|
@@ -243,10 +173,8 @@ const Article = _ref3 => {
|
|
|
243
173
|
competenceGoals: competenceGoals,
|
|
244
174
|
lang: lang
|
|
245
175
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
|
|
246
|
-
padded: true,
|
|
247
176
|
children: content
|
|
248
177
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {
|
|
249
|
-
padded: true,
|
|
250
178
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleByline.ArticleByline, {
|
|
251
179
|
footnotes: footNotes,
|
|
252
180
|
authors: authors,
|
package/lib/Article/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle,
|
|
8
|
+
export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle, ArticleHGroup, ArticleContent, } from "./Article";
|
|
9
9
|
export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";
|
|
10
10
|
export { ArticleFootNotes } from "./ArticleFootNotes";
|
|
11
11
|
export { ArticleParagraph } from "./ArticleParagraph";
|
package/lib/Article/index.js
CHANGED
|
@@ -9,12 +9,6 @@ Object.defineProperty(exports, "Article", {
|
|
|
9
9
|
return _Article.Article;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "ArticleActionWrapper", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _Article.ArticleActionWrapper;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
12
|
Object.defineProperty(exports, "ArticleByline", {
|
|
19
13
|
enumerable: true,
|
|
20
14
|
get: function () {
|
|
@@ -57,12 +51,6 @@ Object.defineProperty(exports, "ArticleHeader", {
|
|
|
57
51
|
return _Article.ArticleHeader;
|
|
58
52
|
}
|
|
59
53
|
});
|
|
60
|
-
Object.defineProperty(exports, "ArticlePadding", {
|
|
61
|
-
enumerable: true,
|
|
62
|
-
get: function () {
|
|
63
|
-
return _Article.ArticlePadding;
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
54
|
Object.defineProperty(exports, "ArticleParagraph", {
|
|
67
55
|
enumerable: true,
|
|
68
56
|
get: function () {
|