@ndla/ui 44.0.13 → 44.0.15
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/es/CampaignBlock/CampaignBlock.js +10 -6
- package/es/KeyFigure/KeyFigure.js +6 -4
- package/es/MyNdla/Resource/Folder.js +7 -7
- package/es/ProgrammeCard/ProgrammeCard.js +7 -5
- package/es/TreeStructure/FolderItem.js +11 -9
- package/lib/CampaignBlock/CampaignBlock.js +10 -6
- package/lib/KeyFigure/KeyFigure.js +6 -4
- package/lib/MyNdla/Resource/Folder.js +7 -7
- package/lib/ProgrammeCard/ProgrammeCard.js +7 -5
- package/lib/TreeStructure/FolderItem.js +11 -9
- package/package.json +2 -2
- package/src/CampaignBlock/CampaignBlock.tsx +2 -2
- package/src/KeyFigure/KeyFigure.tsx +1 -1
- package/src/MyNdla/Resource/Folder.tsx +1 -1
- package/src/ProgrammeCard/ProgrammeCard.tsx +6 -2
- package/src/TreeStructure/FolderItem.tsx +38 -37
|
@@ -86,8 +86,12 @@ const StyledTitle = styled.span`
|
|
|
86
86
|
const ProgrammeCard = ({ title, narrowImage, wideImage, url }: Programme) => {
|
|
87
87
|
return (
|
|
88
88
|
<StyledCardContainer to={url}>
|
|
89
|
-
{narrowImage &&
|
|
90
|
-
|
|
89
|
+
{narrowImage && (
|
|
90
|
+
<StyledImg data-is-mobile="false" height={280} width={250} src={narrowImage.src} alt={narrowImage.alt} />
|
|
91
|
+
)}
|
|
92
|
+
{wideImage && (
|
|
93
|
+
<StyledImg data-is-mobile="true" height={280} width={250} src={wideImage.src} alt={wideImage.alt} />
|
|
94
|
+
)}
|
|
91
95
|
<StyledTitle>{title.title}</StyledTitle>
|
|
92
96
|
</StyledCardContainer>
|
|
93
97
|
);
|
|
@@ -41,6 +41,9 @@ const OpenButton = styled.span`
|
|
|
41
41
|
transform: rotate(0deg);
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
+
&[data-hide-arrow='true'] {
|
|
45
|
+
visibility: hidden;
|
|
46
|
+
}
|
|
44
47
|
`;
|
|
45
48
|
|
|
46
49
|
const StyledName = styled.span`
|
|
@@ -226,25 +229,24 @@ const FolderItem = ({
|
|
|
226
229
|
onFocus={() => setFocusedFolder(folder)}
|
|
227
230
|
onClick={handleClickFolder}
|
|
228
231
|
>
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
)}
|
|
232
|
+
<OpenButton
|
|
233
|
+
aria-hidden
|
|
234
|
+
tabIndex={-1}
|
|
235
|
+
data-open={isOpen}
|
|
236
|
+
data-hide-arrow={hideArrow}
|
|
237
|
+
onClick={(e) => {
|
|
238
|
+
e.stopPropagation();
|
|
239
|
+
e.preventDefault();
|
|
240
|
+
ref.current?.focus();
|
|
241
|
+
if (isOpen) {
|
|
242
|
+
onCloseFolder(id);
|
|
243
|
+
} else {
|
|
244
|
+
onOpenFolder(id);
|
|
245
|
+
}
|
|
246
|
+
}}
|
|
247
|
+
>
|
|
248
|
+
<ArrowDropDownRounded />
|
|
249
|
+
</OpenButton>
|
|
248
250
|
<StyledName>{name}</StyledName>
|
|
249
251
|
</FolderNameLink>
|
|
250
252
|
) : (
|
|
@@ -270,24 +272,23 @@ const FolderItem = ({
|
|
|
270
272
|
data-creating={isCreatingFolder}
|
|
271
273
|
>
|
|
272
274
|
<IconWrapper>
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
)}
|
|
275
|
+
<OpenButton
|
|
276
|
+
aria-hidden
|
|
277
|
+
tabIndex={-1}
|
|
278
|
+
data-open={isOpen}
|
|
279
|
+
data-hide-arrow={hideArrow}
|
|
280
|
+
onClick={(e) => {
|
|
281
|
+
e.stopPropagation();
|
|
282
|
+
setFocusedFolder(folder);
|
|
283
|
+
if (isOpen) {
|
|
284
|
+
onCloseFolder(id);
|
|
285
|
+
} else {
|
|
286
|
+
onOpenFolder(id);
|
|
287
|
+
}
|
|
288
|
+
}}
|
|
289
|
+
>
|
|
290
|
+
<ArrowDropDownRounded />
|
|
291
|
+
</OpenButton>
|
|
291
292
|
<FolderIconWrapper>
|
|
292
293
|
<FolderIcon />
|
|
293
294
|
</FolderIconWrapper>
|