@ndla/ui 26.1.0 → 27.0.1

package/lib/TreeStructure/arrowNavigation.d.ts

@@ -6,4 +6,5 @@
  *
  */
 import { KeyboardEvent } from 'react';
-export declare const arrowNavigation: (e: KeyboardEvent<HTMLElement>, id: string, visibleFolders: string[], setFocusedFolderId: (id: string) => void, onOpen: (id: string) => void, onClose: (id: string) => void) => void;
+import { FolderType } from './types';
+export declare const arrowNavigation: (e: KeyboardEvent<HTMLElement>, id: string, visibleFolders: FolderType[], setFocusedFolderId: (id: FolderType) => void, onOpen: (id: string) => void, onClose: (id: string) => void) => void;

package/lib/TreeStructure/arrowNavigation.js

@@ -13,8 +13,8 @@ exports.arrowNavigation = void 0;
  *
  */
 var navigateVertical = function navigateVertical(visibleFolders, folderId, setFocusedFolderId, direction) {
-  var currentIndex = visibleFolders.findIndex(function (id) {
-    return id === folderId;
+  var currentIndex = visibleFolders.findIndex(function (folder) {
+    return folder.id === folderId;
   });
   var target = visibleFolders[currentIndex + direction];
 
@@ -23,7 +23,7 @@ var navigateVertical = function navigateVertical(visibleFolders, folderId, setFo
   }
 };
 
-var arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+var arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'];
 
 var arrowNavigation = function arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpen, onClose) {
   if (!arrowKeys.includes(e.key)) {

package/lib/TreeStructure/helperFunctions.d.ts

@@ -1,2 +1,3 @@
-import { FolderType } from './types';
+import { FolderType, TreeStructureType } from './types';
 export declare const flattenFolders: (folders: FolderType[], openFolders?: string[] | undefined) => FolderType[];
+export declare const treestructureId: (type: TreeStructureType, modifier: string) => string;

package/lib/TreeStructure/helperFunctions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flattenFolders = void 0;
+exports.treestructureId = exports.flattenFolders = void 0;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -35,4 +35,10 @@ var flattenFolders = function flattenFolders(folders, openFolders) {
   }, []);
 };
 
-exports.flattenFolders = flattenFolders;
+exports.flattenFolders = flattenFolders;
+
+var treestructureId = function treestructureId(type, modifier) {
+  return "".concat(type, "-treestructure-").concat(modifier);
+};
+
+exports.treestructureId = treestructureId;

package/lib/TreeStructure/types.d.ts

@@ -12,26 +12,25 @@ export interface FolderType extends IFolder {
     icon?: ReactNode;
     isNavigation?: boolean;
 }
-export declare type TreeStructureType = 'normal' | 'navigation' | 'picker';
+export declare type TreeStructureType = 'navigation' | 'picker';
 export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
     onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
 }
 export interface CommonTreeStructureProps {
     loading?: boolean;
     onSelectFolder?: (id: string) => void;
-    openOnFolderClick?: boolean;
     targetResource?: IResource;
-    framed?: boolean;
     type: TreeStructureType;
 }
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
-    focusedFolderId?: string;
+    focusedFolder?: FolderType;
     level: number;
     maxLevel: number;
     selectedFolder?: FolderType;
     onCloseFolder: (id: string) => void;
     onOpenFolder: (id: string) => void;
-    setFocusedId: (id: string) => void;
-    setSelectedFolder: (id: FolderType) => void;
-    visibleFolders: string[];
+    setFocusedFolder: (folder: FolderType, focus?: boolean) => void;
+    setSelectedFolder: (folder: FolderType) => void;
+    visibleFolders: FolderType[];
+    closeTree: () => void;
 }

package/lib/locale/messages-en.d.ts

@@ -69,8 +69,11 @@ declare const messages: {
             folderDeleted: string;
             folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -177,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -991,6 +995,7 @@ declare const messages: {
     };
     cancel: string;
     close: string;
+    loading: string;
     title: string;
     save: string;
     image: {

package/lib/locale/messages-en.js

@@ -39,7 +39,8 @@ var messages = _objectSpread(_objectSpread({
     maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {
       placeholder: 'Add foldername',
-      defaultName: 'New folder'
+      defaultName: 'New folder',
+      folderName: 'Folder name'
     }
   },
   tagSelector: {
@@ -820,6 +821,7 @@ var messages = _objectSpread(_objectSpread({
   },
   cancel: 'Cancel',
   close: 'Close',
+  loading: 'Loading',
   title: 'Title',
   save: 'Save',
   image: {
@@ -959,8 +961,11 @@ var messages = _objectSpread(_objectSpread({
       folderDeleted: '"{{folderName}}" deleted',
       folderCreated: '"{{folderName}} created'
     },
+    tagList: 'Tags',
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
+    moreTags: 'Show one more tag',
+    moreTags_plural: 'Show {{count}} more tags',
     confirmDeleteFolder: 'Are you sure you want to delete this folder? Subfolders of this folder will also be deleted. This action cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',

package/lib/locale/messages-nb.d.ts

@@ -69,8 +69,11 @@ declare const messages: {
             folderDeleted: string;
             folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -177,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -990,6 +994,7 @@ declare const messages: {
         close: string;
     };
     close: string;
+    loading: string;
     title: string;
     cancel: string;
     save: string;

package/lib/locale/messages-nb.js

@@ -39,7 +39,8 @@ var messages = _objectSpread(_objectSpread({
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
-      defaultName: 'Ny mappe'
+      defaultName: 'Ny mappe',
+      folderName: 'Mappenavn'
     }
   },
   tagSelector: {
@@ -819,6 +820,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk meny'
   },
   close: 'Lukk',
+  loading: 'Laster',
   title: 'Tittel',
   cancel: 'Avbryt',
   save: 'Lagre',
@@ -959,8 +961,11 @@ var messages = _objectSpread(_objectSpread({
       folderDeleted: '"{{folderName}}" er slettet',
       folderCreated: '"{{folderName}}" er opprettet'
     },
+    tagList: 'Emneknagger',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
+    moreTags: 'Vis en emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknagger til',
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Dersom mappen har undermapper vil disse også slettes. Handlingen kan ikke endres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',

package/lib/locale/messages-nn.d.ts

@@ -69,8 +69,11 @@ declare const messages: {
             folderDeleted: string;
             folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -177,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -991,6 +995,7 @@ declare const messages: {
     };
     cancel: string;
     close: string;
+    loading: string;
     title: string;
     save: string;
     image: {

package/lib/locale/messages-nn.js

@@ -39,7 +39,8 @@ var messages = _objectSpread(_objectSpread({
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv namn på mappe',
-      defaultName: 'Ny mappe'
+      defaultName: 'Ny mappe',
+      folderName: 'Mappenavn'
     }
   },
   tagSelector: {
@@ -820,6 +821,7 @@ var messages = _objectSpread(_objectSpread({
   },
   cancel: 'Avbryt',
   close: 'Lukk',
+  loading: 'Laster',
   title: 'Tittel',
   save: 'Lagre',
   image: {
@@ -959,8 +961,11 @@ var messages = _objectSpread(_objectSpread({
       folderDeleted: '"{{folderName}}" er sletta',
       folderCreated: '"{{folderName}}" er oppretta'
     },
+    tagList: 'Emneknaggar',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknaggar',
+    moreTags: 'Vis ein emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknaggar til',
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Dersom mappa har undermapper vil desse også slettast. Denne handlinga kan ikkje endrast.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje endrast.',
     myFolders: 'Mine mapper',

package/lib/locale/messages-se.d.ts

@@ -69,8 +69,11 @@ declare const messages: {
             folderDeleted: string;
             folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -177,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -990,6 +994,7 @@ declare const messages: {
         close: string;
     };
     close: string;
+    loading: string;
     title: string;
     cancel: string;
     save: string;

package/lib/locale/messages-se.js

@@ -39,7 +39,8 @@ var messages = _objectSpread(_objectSpread({
     maxFoldersAlreadyAdded: 'Vuollemáhpaid badjerádji lea olahuvvon',
     newFolder: {
       placeholder: 'Čále nama máhppii',
-      defaultName: 'Ođđa máhppa'
+      defaultName: 'Ođđa máhppa',
+      folderName: 'Mappenavn'
     }
   },
   tagSelector: {
@@ -819,6 +820,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Govčča fálu'
   },
   close: 'Govčča',
+  loading: 'Laster',
   title: 'Tihttel',
   cancel: 'Botkke',
   save: 'Vurke',
@@ -959,8 +961,11 @@ var messages = _objectSpread(_objectSpread({
       folderDeleted: '"{{folderName}}" lea sihkkojuvvon',
       folderCreated: '"{{folderName}}" er oppretta'
     },
+    tagList: 'Emneknagger',
     tags: '{{count}} fáddágilkor',
     tags_plural: '{{count}} fáddágilkorat',
+    moreTags: 'Vis ein emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknaggar til',
     confirmDeleteFolder: 'Leat go áibbas sihkar ahte dáhtut sihkkut máhpa? Dan ii sáhte gáhtat.',
     confirmDeleteTag: 'Leat go áibbas sihkar ahte dáhtut sihkkut fáddágilkora? Dan ii sáhte gáhtat.',
     myFolders: 'Mu máhpat',

package/lib/locale/messages-sma.d.ts

@@ -69,8 +69,11 @@ declare const messages: {
             folderDeleted: string;
             folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -177,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -990,6 +994,7 @@ declare const messages: {
         close: string;
     };
     close: string;
+    loading: string;
     title: string;
     cancel: string;
     save: string;

package/lib/locale/messages-sma.js

@@ -39,7 +39,8 @@ var messages = _objectSpread(_objectSpread({
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
-      defaultName: 'Ny mappe'
+      defaultName: 'Ny mappe',
+      folderName: 'Mappenavn'
     }
   },
   tagSelector: {
@@ -819,6 +820,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk meny'
   },
   close: 'Lukk',
+  loading: 'Laster',
   title: 'Tittel',
   cancel: 'Avbryt',
   save: 'Lagre',
@@ -959,8 +961,11 @@ var messages = _objectSpread(_objectSpread({
       folderDeleted: '"{{folderName}}" er slettet',
       folderCreated: '"{{folderName}}" er oppretta'
     },
+    tagList: 'Emneknagg',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
+    moreTags: 'Vis ein emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknaggar til',
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Dersom mappa har undermappar vil disse også slettes. Denne handlinga kan ikkje endrast.',
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "26.1.0",
+  "version": "27.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,18 +32,18 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.5.0",
-    "@ndla/carousel": "^1.2.22",
+    "@ndla/button": "^3.5.2",
+    "@ndla/carousel": "^1.2.23",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.3.0",
+    "@ndla/forms": "^3.3.2",
     "@ndla/hooks": "^1.1.6",
-    "@ndla/icons": "^1.12.1",
-    "@ndla/licenses": "^5.0.16",
-    "@ndla/modal": "^1.3.6",
-    "@ndla/notion": "^3.1.40",
-    "@ndla/safelink": "^2.2.14",
+    "@ndla/icons": "^1.13.0",
+    "@ndla/licenses": "^5.0.17",
+    "@ndla/modal": "^1.3.7",
+    "@ndla/notion": "^3.1.42",
+    "@ndla/safelink": "^2.2.16",
     "@ndla/switch": "^0.1.13",
-    "@ndla/tabs": "^1.1.21",
+    "@ndla/tabs": "^1.1.22",
     "@ndla/tooltip": "^2.2.1",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.0",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "578a4353f768a0eb2b3e2334272c10d920de9632"
+  "gitHead": "7a987443015049a36da7aa5af3288378488696ff"
 }

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
+import { colors, fonts, misc, spacing } from '@ndla/core';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import React from 'react';
@@ -30,12 +30,18 @@ const StyledSpan = styled.span`
 const StyledSafeLink = styled(SafeLink)`
   color: ${colors.text.primary};
   box-shadow: none;
+  margin: 0 2px;
   font-weight: ${fonts.weight.bold};
   :hover {
     color: ${colors.brand.primary};
   }
 `;
 
+const StyledMenuButton = styled(MenuButton)`
+  border-radius: ${misc.borderRadius};
+  margin: 0 2px;
+`;
+
 interface Props {
   items: SimpleBreadcrumbItem[];
   actionItems: MenuItemProps[];
@@ -48,9 +54,9 @@ const ActionBreadcrumb = ({ items, actionItems }: Props) => {
     }
     if (item.index === totalCount - 1 && actionItems.length > 0) {
       return (
-        <MenuButton menuItems={actionItems} size="small">
+        <StyledMenuButton menuItems={actionItems} size="small">
           <StyledSpan title={item.name}>{item.name}</StyledSpan>
-        </MenuButton>
+        </StyledMenuButton>
       );
     }
     return (

package/src/Breadcrumb/Breadcrumb.tsx

@@ -8,7 +8,6 @@
 
 import React, { ReactNode, useRef } from 'react';
 import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
-import { uuid } from '@ndla/util';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
@@ -83,7 +82,7 @@ const Breadcrumb = ({
                 ? breadcrumbItemRefs.delete(item.to)
                 : breadcrumbItemRefs.set(item.to, element)
             }
-            key={uuid()}
+            key={typeof item.to === 'string' ? item.to : item.to.pathname}
             totalCount={items.length}
             item={{ ...item, index }}
           />

package/src/MyNdla/Resource/Folder.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { useRef } from 'react';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { FileDocumentOutline } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
@@ -40,6 +40,12 @@ const FolderIconWrapper = styled.div<FolderIconWrapperProps>`
   `};
 `;
 
+const FolderTitleLink = styled(SafeLink)`
+  box-shadow: none;
+  color: ${colors.text.primary};
+  flex: 1;
+`;
+
 const FolderTitle = styled.h2`
   ${fonts.sizes(18)};
   font-weight: ${fonts.weight.normal};
@@ -55,11 +61,12 @@ const FolderTitle = styled.h2`
   -webkit-box-orient: vertical;
 `;
 
-const FolderWrapper = styled(SafeLink)`
+const FolderWrapper = styled.div`
   display: flex;
   align-items: center;
   padding: ${spacing.small};
   border: 1px solid ${colors.brand.neutral7};
+  cursor: pointer;
   border-radius: 2px;
   box-shadow: none;
   text-decoration: none;
@@ -134,12 +141,20 @@ type LayoutType = 'list' | 'block';
 
 const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
   const { t } = useTranslation();
+  const linkRef = useRef<HTMLAnchorElement | null>(null);
+
+  const onClick = () => {
+    linkRef?.current?.click();
+  };
+
   return (
-    <FolderWrapper to={link} id={id}>
+    <FolderWrapper onClick={onClick} id={id}>
       <FolderIconWrapper type={type}>
         <FolderOutlined aria-label={t('myNdla.folder.folder')} />
       </FolderIconWrapper>
-      <FolderTitle>{title}</FolderTitle>
+      <FolderTitleLink to={link} ref={linkRef}>
+        <FolderTitle>{title}</FolderTitle>
+      </FolderTitleLink>
       <IconCount layoutType={type} type={'folder'} count={subFolders} />
       <IconCount layoutType={type} type={'resource'} count={subResources} />
       {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}

package/src/Resource/BlockResource.tsx

@@ -7,12 +7,19 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
-import SafeLink from '@ndla/safelink';
+import React, { useRef } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
-import { CompressedTagList, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import {
+  CompressedTagList,
+  ResourceImageProps,
+  ResourceTitle,
+  Row,
+  TopicList,
+  ResourceTitleLink,
+  LoaderProps,
+} from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 
 interface BlockResourceProps {
@@ -28,7 +35,7 @@ interface BlockResourceProps {
   isLoading?: boolean;
 }
 
-const BlockElementWrapper = styled(SafeLink)`
+const BlockElementWrapper = styled.div`
   display: flex;
   text-decoration: none;
   box-shadow: none;
@@ -38,6 +45,16 @@ const BlockElementWrapper = styled(SafeLink)`
   border: 1px solid ${colors.brand.light};
   border-radius: 2px;
   color: ${colors.brand.greyDark};
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
+    transition-duration: 0.2s;
+    ${() => ResourceTitleLink} {
+      color: ${colors.brand.primary};
+      text-decoration: underline;
+    }
+  }
 `;
 
 const BlockDescription = styled.p`
@@ -49,7 +66,8 @@ const BlockDescription = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   transition: height 0.2s ease-out;
-  ${() => BlockElementWrapper}:hover &, ${() => BlockElementWrapper}:focus & {
+  ${() => BlockElementWrapper}:hover &, ${() => BlockElementWrapper}:focus & ,  ${() =>
+    BlockElementWrapper}:focus-within & {
     // Unfortunate css needed for multi-line text overflow ellipsis.
     height: 3.1em;
     -webkit-line-clamp: 2;
@@ -60,6 +78,7 @@ const BlockDescription = styled.p`
 
 const RightRow = styled(Row)`
   justify-content: flex-end;
+  margin-bottom: -${spacing.xxsmall};
 `;
 
 const BlockInfoWrapper = styled.div`
@@ -98,28 +117,7 @@ const BlockImage = ({ image, loading }: BlockImageProps) => {
   return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
 };
 
-interface BlockTitleProps {
-  title: string;
-  loading?: boolean;
-}
-
-const BlockTitle = ({ title, loading }: BlockTitleProps) => {
-  if (loading) {
-    return (
-      <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
-        <rect x="0" y="0" rx="3" ry="3" width="100%" height="18px" />
-      </ContentLoader>
-    );
-  }
-  return <ResourceTitle>{title}</ResourceTitle>;
-};
-
-interface BlockTopicListProps {
-  topics: string[];
-  loading?: boolean;
-}
-
-const BlockTopicList = ({ topics, loading }: BlockTopicListProps) => {
+const TopicAndTitleLoader = ({ children, loading }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -129,7 +127,7 @@ const BlockTopicList = ({ topics, loading }: BlockTopicListProps) => {
     );
   }
 
-  return <TopicList topics={topics} />;
+  return <>{children}</>;
 };
 
 const BlockResource = ({
@@ -144,16 +142,26 @@ const BlockResource = ({
   menuItems,
   isLoading,
 }: BlockResourceProps) => {
+  const linkRef = useRef<HTMLAnchorElement>(null);
+
+  const handleClick = () => {
+    if (linkRef.current) {
+      linkRef.current.click();
+    }
+  };
+
   return (
-    <BlockElementWrapper to={link} id={id}>
+    <BlockElementWrapper onClick={handleClick} id={id}>
       <ImageWrapper>
         <BlockImage image={resourceImage} loading={isLoading} />
       </ImageWrapper>
       <BlockInfoWrapper>
-        <div>
-          <BlockTitle title={title} loading={isLoading} />
-        </div>
-        <BlockTopicList topics={topics} loading={isLoading} />
+        <TopicAndTitleLoader loading={isLoading}>
+          <ResourceTitleLink title={title} to={link} ref={linkRef}>
+            <ResourceTitle>{title}</ResourceTitle>
+          </ResourceTitleLink>
+        </TopicAndTitleLoader>
+        <TopicList topics={topics} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
           {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}