@ndla/ui 26.0.0 → 27.0.0

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

@@ -67,9 +67,13 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -176,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -990,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: {
@@ -956,10 +958,14 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Delete folder',
       edit: 'Edit folder',
       missingName: 'Folder name required',
-      folderDeleted: '"{{folderName}}" deleted'
+      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

@@ -67,9 +67,13 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -176,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -989,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',
@@ -956,10 +958,14 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett mappe',
       edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
-      folderDeleted: '"{{folderName}}" er slettet'
+      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

@@ -67,9 +67,13 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -176,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -990,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: {
@@ -956,10 +958,14 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett mappe',
       edit: 'Rediger mappe',
       missingName: 'Skriv namn på mappe',
-      folderDeleted: '"{{folderName}}" er sletta'
+      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

@@ -67,9 +67,13 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -176,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -989,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',
@@ -956,10 +958,14 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Sihko',
       edit: 'Redigere',
       missingName: 'Čále nama máhppii',
-      folderDeleted: '"{{folderName}}" lea sihkkojuvvon'
+      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

@@ -67,9 +67,13 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
+        tagList: string;
         tags: string;
         tags_plural: string;
+        moreTags: string;
+        moreTags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -176,6 +180,7 @@ declare const messages: {
         newFolder: {
             placeholder: string;
             defaultName: string;
+            folderName: string;
         };
     };
     tagSelector: {
@@ -989,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',
@@ -956,10 +958,14 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett mappe',
       edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
-      folderDeleted: '"{{folderName}}" er slettet'
+      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.0.0",
+  "version": "27.0.0",
   "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.1",
+    "@ndla/carousel": "^1.2.23",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.2.1",
+    "@ndla/forms": "^3.3.1",
     "@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.41",
+    "@ndla/safelink": "^2.2.15",
     "@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": "e2029bce0a42c485f247a60ee895b2320fddc6ba"
+  "gitHead": "62733541c9b13e7233c0752fd302f35cdd50b453"
 }

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;
@@ -78,6 +85,7 @@ const FolderWrapper = styled(SafeLink)`
 `;
 
 interface Props {
+  id: string;
   title: string;
   subFolders?: number;
   subResources?: number;
@@ -131,14 +139,22 @@ const IconCount = ({ type, count, layoutType }: IconCountProps) => {
 
 type LayoutType = 'list' | 'block';
 
-const Folder = ({ link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
+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}>
+    <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} />}