@ndla/ui 34.2.0 → 34.3.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/es/MyNdla/Resource/Folder.js +18 -29
- package/es/Resource/BlockResource.js +8 -16
- package/es/Resource/ListResource.js +9 -17
- package/es/Resource/resourceComponents.js +11 -14
- package/lib/MyNdla/Resource/Folder.js +18 -32
- package/lib/Resource/BlockResource.js +8 -19
- package/lib/Resource/ListResource.js +9 -20
- package/lib/Resource/resourceComponents.js +11 -14
- package/package.json +6 -6
- package/src/MyNdla/Resource/Folder.tsx +6 -15
- package/src/Resource/BlockResource.tsx +4 -9
- package/src/Resource/ListResource.tsx +4 -8
- package/src/Resource/resourceComponents.tsx +11 -3
|
@@ -27,6 +27,7 @@ import { contentTypeMapping } from '../model/ContentType';
|
|
|
27
27
|
const ListResourceWrapper = styled.div`
|
|
28
28
|
flex: 1;
|
|
29
29
|
display: grid;
|
|
30
|
+
position: relative;
|
|
30
31
|
grid-template-columns: auto minmax(50px, 1fr) auto;
|
|
31
32
|
grid-template-areas:
|
|
32
33
|
'image topicAndTitle tags'
|
|
@@ -101,6 +102,7 @@ interface TagsAndActionProps {
|
|
|
101
102
|
|
|
102
103
|
const TagsandActionMenu = styled.div<TagsAndActionProps>`
|
|
103
104
|
grid-area: tags;
|
|
105
|
+
z-index: 1;
|
|
104
106
|
box-sizing: content-box;
|
|
105
107
|
display: grid;
|
|
106
108
|
grid-template-columns: 1fr auto auto;
|
|
@@ -217,17 +219,11 @@ const ListResource = ({
|
|
|
217
219
|
}: ListResourceProps) => {
|
|
218
220
|
const showDescription = description !== undefined;
|
|
219
221
|
const imageType = showDescription ? 'normal' : 'compact';
|
|
220
|
-
const linkRef = useRef<HTMLAnchorElement>(null);
|
|
221
222
|
const firstContentType = resourceTypes?.[0]?.id ?? '';
|
|
222
223
|
const Title = ResourceTitle.withComponent(headingLevel);
|
|
223
|
-
const handleClick = () => {
|
|
224
|
-
if (linkRef.current) {
|
|
225
|
-
linkRef.current.click();
|
|
226
|
-
}
|
|
227
|
-
};
|
|
228
224
|
|
|
229
225
|
return (
|
|
230
|
-
<ListResourceWrapper
|
|
226
|
+
<ListResourceWrapper id={id}>
|
|
231
227
|
<ImageWrapper imageSize={imageType}>
|
|
232
228
|
<ListResourceImage
|
|
233
229
|
resourceImage={resourceImage}
|
|
@@ -238,7 +234,7 @@ const ListResource = ({
|
|
|
238
234
|
</ImageWrapper>
|
|
239
235
|
<TopicAndTitleWrapper>
|
|
240
236
|
<TypeAndTitleLoader loading={isLoading}>
|
|
241
|
-
<StyledLink to={link} target={targetBlank ? '_blank' : undefined}
|
|
237
|
+
<StyledLink to={link} target={targetBlank ? '_blank' : undefined}>
|
|
242
238
|
<Title title={title}>{title}</Title>
|
|
243
239
|
</StyledLink>
|
|
244
240
|
<ResourceTypeList resourceTypes={resourceTypes} />
|
|
@@ -23,6 +23,16 @@ export interface ResourceImageProps {
|
|
|
23
23
|
export const ResourceTitleLink = styled(SafeLink)`
|
|
24
24
|
box-shadow: none;
|
|
25
25
|
color: ${colors.brand.primary};
|
|
26
|
+
flex: 1;
|
|
27
|
+
:after {
|
|
28
|
+
content: '';
|
|
29
|
+
position: absolute;
|
|
30
|
+
z-index: 1;
|
|
31
|
+
top: 0;
|
|
32
|
+
right: 0;
|
|
33
|
+
bottom: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
}
|
|
26
36
|
`;
|
|
27
37
|
|
|
28
38
|
export const ResourceTitle = styled.h2`
|
|
@@ -131,9 +141,7 @@ export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
|
|
|
131
141
|
<StyledTagList aria-label={t('myNdla.tagList')}>
|
|
132
142
|
{tags.map((tag, i) => (
|
|
133
143
|
<StyledTagListElement key={`tag-${i}`}>
|
|
134
|
-
<StyledSafeLink
|
|
135
|
-
onClick={(e: MouseEvent<HTMLAnchorElement | HTMLElement>) => e.stopPropagation()}
|
|
136
|
-
to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`}>
|
|
144
|
+
<StyledSafeLink to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`}>
|
|
137
145
|
<HashTag />
|
|
138
146
|
{tag}
|
|
139
147
|
</StyledSafeLink>
|