@ndla/ui 34.2.0 → 34.3.1

package/src/Resource/BlockResource.tsx

@@ -27,6 +27,7 @@ import { contentTypeMapping } from '../model/ContentType';
 
 const BlockElementWrapper = styled.div`
   display: flex;
+  position: relative;
   text-decoration: none;
   box-shadow: none;
   flex-direction: column;
@@ -67,6 +68,7 @@ const BlockDescription = styled.p`
 `;
 
 const RightRow = styled(Row)`
+  z-index: 1;
   justify-content: flex-end;
   margin: 0 -${spacing.small} -${spacing.small} 0;
 `;
@@ -162,18 +164,11 @@ const BlockResource = ({
   targetBlank,
   resourceTypes,
 }: Props) => {
-  const linkRef = useRef<HTMLAnchorElement>(null);
   const firstResourceType = resourceTypes?.[0]?.id ?? '';
   const Title = ResourceTitle.withComponent(headingLevel);
 
-  const handleClick = () => {
-    if (linkRef.current) {
-      linkRef.current.click();
-    }
-  };
-
   return (
-    <BlockElementWrapper onClick={handleClick} id={id}>
+    <BlockElementWrapper id={id}>
       <ImageWrapper>
         <BlockImage
           image={resourceImage}
@@ -184,7 +179,7 @@ const BlockResource = ({
       <BlockInfoWrapper>
         <ContentWrapper>
           <ResourceTypeAndTitleLoader loading={isLoading}>
-            <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link} ref={linkRef}>
+            <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link}>
               <Title>{title}</Title>
             </ResourceTitleLink>
           </ResourceTypeAndTitleLoader>

package/src/Resource/ListResource.tsx

@@ -27,6 +27,7 @@ import { contentTypeMapping } from '../model/ContentType';
 const ListResourceWrapper = styled.div`
   flex: 1;
   display: grid;
+  position: relative;
   grid-template-columns: auto minmax(50px, 1fr) auto;
   grid-template-areas:
     'image  topicAndTitle   tags'
@@ -101,6 +102,7 @@ interface TagsAndActionProps {
 
 const TagsandActionMenu = styled.div<TagsAndActionProps>`
   grid-area: tags;
+  z-index: 1;
   box-sizing: content-box;
   display: grid;
   grid-template-columns: 1fr auto auto;
@@ -217,17 +219,11 @@ const ListResource = ({
 }: ListResourceProps) => {
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
-  const linkRef = useRef<HTMLAnchorElement>(null);
   const firstContentType = resourceTypes?.[0]?.id ?? '';
   const Title = ResourceTitle.withComponent(headingLevel);
-  const handleClick = () => {
-    if (linkRef.current) {
-      linkRef.current.click();
-    }
-  };
 
   return (
-    <ListResourceWrapper onClick={handleClick} id={id}>
+    <ListResourceWrapper id={id}>
       <ImageWrapper imageSize={imageType}>
         <ListResourceImage
           resourceImage={resourceImage}
@@ -238,7 +234,7 @@ const ListResource = ({
       </ImageWrapper>
       <TopicAndTitleWrapper>
         <TypeAndTitleLoader loading={isLoading}>
-          <StyledLink to={link} target={targetBlank ? '_blank' : undefined} ref={linkRef}>
+          <StyledLink to={link} target={targetBlank ? '_blank' : undefined}>
             <Title title={title}>{title}</Title>
           </StyledLink>
           <ResourceTypeList resourceTypes={resourceTypes} />

package/src/Resource/resourceComponents.tsx

@@ -23,6 +23,16 @@ export interface ResourceImageProps {
 export const ResourceTitleLink = styled(SafeLink)`
   box-shadow: none;
   color: ${colors.brand.primary};
+  flex: 1;
+  :after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 `;
 
 export const ResourceTitle = styled.h2`
@@ -131,9 +141,7 @@ export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
     <StyledTagList aria-label={t('myNdla.tagList')}>
       {tags.map((tag, i) => (
         <StyledTagListElement key={`tag-${i}`}>
-          <StyledSafeLink
-            onClick={(e: MouseEvent<HTMLAnchorElement | HTMLElement>) => e.stopPropagation()}
-            to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`}>
+          <StyledSafeLink to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`}>
             <HashTag />
             {tag}
           </StyledSafeLink>