@ndla/ui 19.0.1 → 19.2.0

package/lib/locale/messages-en.js

@@ -951,7 +951,13 @@ var messages = _objectSpread(_objectSpread({
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',
     folders_plural: '{{count}} Folders',
-    folder: 'Folder',
+    folder: {
+      folder: 'Folder',
+      "delete": 'Delete',
+      edit: 'Edit'
+    },
+    confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
+    confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',
     myTags: 'My tags',
     newFolder: 'New folder',
@@ -997,6 +1003,9 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resource: {
+      add: 'Add folder/tag',
+      remove: 'Remove',
+      copyLink: 'Copy link to this page',
       addToMyNdla: 'Add to My NDLA',
       addedToMyNdla: 'Added to My NDLA'
     }

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

@@ -58,7 +58,13 @@ declare const messages: {
         resources_plural: string;
         folders: string;
         folders_plural: string;
-        folder: string;
+        folder: {
+            folder: string;
+            delete: string;
+            edit: string;
+        };
+        confirmDeleteFolder: string;
+        confirmDeleteTag: string;
         myFolders: string;
         myTags: string;
         newFolder: string;
@@ -104,6 +110,9 @@ declare const messages: {
             };
         };
         resource: {
+            add: string;
+            remove: string;
+            copyLink: string;
             addToMyNdla: string;
             addedToMyNdla: string;
         };

package/lib/locale/messages-nb.js

@@ -951,7 +951,13 @@ var messages = _objectSpread(_objectSpread({
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      "delete": 'Slett',
+      edit: 'Rediger'
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -997,6 +1003,9 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til siden',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA'
     }

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

@@ -58,7 +58,13 @@ declare const messages: {
         resources_plural: string;
         folders: string;
         folders_plural: string;
-        folder: string;
+        folder: {
+            folder: string;
+            delete: string;
+            edit: string;
+        };
+        confirmDeleteFolder: string;
+        confirmDeleteTag: string;
         myFolders: string;
         myTags: string;
         newFolder: string;
@@ -104,6 +110,9 @@ declare const messages: {
             };
         };
         resource: {
+            add: string;
+            remove: string;
+            copyLink: string;
             addToMyNdla: string;
             addedToMyNdla: string;
         };

package/lib/locale/messages-nn.js

@@ -951,7 +951,13 @@ var messages = _objectSpread(_objectSpread({
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      "delete": 'Slett',
+      edit: 'Rediger'
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -997,6 +1003,9 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til sida',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA'
     }

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

@@ -58,7 +58,13 @@ declare const messages: {
         resources_plural: string;
         folders: string;
         folders_plural: string;
-        folder: string;
+        folder: {
+            folder: string;
+            delete: string;
+            edit: string;
+        };
+        confirmDeleteFolder: string;
+        confirmDeleteTag: string;
         myFolders: string;
         myTags: string;
         newFolder: string;
@@ -104,6 +110,9 @@ declare const messages: {
             };
         };
         resource: {
+            add: string;
+            remove: string;
+            copyLink: string;
             addToMyNdla: string;
             addedToMyNdla: string;
         };

package/lib/locale/messages-se.js

@@ -951,7 +951,13 @@ var messages = _objectSpread(_objectSpread({
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      "delete": 'Slett',
+      edit: 'Rediger'
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -997,6 +1003,9 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til siden',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA'
     }

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

@@ -58,7 +58,13 @@ declare const messages: {
         resources_plural: string;
         folders: string;
         folders_plural: string;
-        folder: string;
+        folder: {
+            folder: string;
+            delete: string;
+            edit: string;
+        };
+        confirmDeleteFolder: string;
+        confirmDeleteTag: string;
         myFolders: string;
         myTags: string;
         newFolder: string;
@@ -104,6 +110,9 @@ declare const messages: {
             };
         };
         resource: {
+            add: string;
+            remove: string;
+            copyLink: string;
             addToMyNdla: string;
             addedToMyNdla: string;
         };

package/lib/locale/messages-sma.js

@@ -951,7 +951,13 @@ var messages = _objectSpread(_objectSpread({
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      "delete": 'Slett',
+      edit: 'Rediger'
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -997,6 +1003,9 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til siden',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "19.0.1",
+  "version": "19.2.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,15 +31,15 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.0.0",
+    "@ndla/button": "^3.1.2",
     "@ndla/carousel": "^1.2.11",
     "@ndla/core": "^2.3.0",
     "@ndla/hooks": "^1.1.4",
     "@ndla/icons": "^1.10.0",
     "@ndla/licenses": "^5.0.2",
     "@ndla/modal": "^1.2.12",
-    "@ndla/notion": "^3.1.19",
-    "@ndla/safelink": "^2.1.0",
+    "@ndla/notion": "^3.1.22",
+    "@ndla/safelink": "^2.2.0",
     "@ndla/switch": "^0.1.7",
     "@ndla/tabs": "^1.1.10",
     "@ndla/tooltip": "^2.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c51904170c455fc66f1c624b02829efe15c1482"
+  "gitHead": "5f018a6a78778970d0d448896de96bb16e970fab"
 }

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -44,6 +44,9 @@ interface Props {
 
 const ActionBreadcrumb = ({ items, actionItems }: Props) => {
   const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
+    if (totalCount === 1) {
+      return <StyledSpan title={item.name}>{item.name}</StyledSpan>;
+    }
     if (item.index === totalCount - 1) {
       return (
         <MenuButton menuItems={actionItems} size="small">

package/src/MyNdla/Resource/Folder.tsx

@@ -136,7 +136,7 @@ const Folder = ({ link, title, subFolders, subResources, type = 'list', menuItem
   return (
     <FolderWrapper to={link}>
       <FolderIconWrapper type={type}>
-        <FolderOutlined aria-label={t('myNdla.folder')} />
+        <FolderOutlined aria-label={t('myNdla.folder.folder')} />
       </FolderIconWrapper>
       <FolderTitle>{title}</FolderTitle>
       <IconCount layoutType={type} type={'folder'} count={subFolders} />

package/src/Resource/ListResource.tsx

@@ -31,12 +31,13 @@ const ResourceDescription = styled.p`
 `;
 
 const ResourceWrapper = styled(SafeLink)`
-  display: grid;
   flex: 1;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
   grid-template-areas:
     'image  topicAndTitle   tags'
     'image  description     description';
-  grid-template-columns: auto 1fr auto;
+
   ${mq.range({ until: breakpoints.mobileWide })} {
     grid-template-columns: auto 1fr;
     grid-template-areas:
@@ -52,6 +53,7 @@ const ResourceWrapper = styled(SafeLink)`
   border-radius: 2px;
   color: ${colors.brand.greyDark};
   gap: 0 ${spacing.small};
+
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;

package/src/TreeStructure/FolderItem.tsx

@@ -6,13 +6,14 @@
  *
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { KeyboardEvent, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { colors, spacing, misc, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
+import { arrowNavigation } from './arrowNavigation';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
   background: transparent;
@@ -49,7 +50,10 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   }
 `;
 
-const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
+const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', 'noArrow'].includes(name) })<{
+  marked: boolean;
+  noArrow?: boolean;
+}>`
   line-height: 1;
   background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
   color: ${colors.text.primary};
@@ -81,16 +85,19 @@ const FolderNameLink = FolderName.withComponent(SafeLink);
 interface Props {
   name: string;
   id: string;
-  onToggleOpen: (id: string) => void;
+  level: number;
+  onCloseFolder: (id: string) => void;
+  onOpenFolder: (id: string) => void;
   onMarkFolder: (id: string) => void;
+  onSelectFolder?: (id: string) => void;
   isOpen: boolean;
   markedFolderId?: string;
   focusedFolderId?: string;
+  visibleFolders: string[];
   loading?: boolean;
   openOnFolderClick?: boolean;
   hideArrow?: boolean;
   setFocusedFolderId: SetFocusedFolderId;
-  url?: string;
   icon?: React.ReactNode;
   noPaddingWhenArrowIsHidden?: boolean;
   folderChild?: FolderChildFuncType;
@@ -99,62 +106,61 @@ interface Props {
 const FolderItem = ({
   hideArrow,
   loading,
+  level,
   name,
   id,
-  onToggleOpen,
+  visibleFolders,
+  onCloseFolder,
+  onOpenFolder,
   onMarkFolder,
+  onSelectFolder,
   isOpen,
   markedFolderId,
   focusedFolderId,
   openOnFolderClick,
   setFocusedFolderId,
   icon,
-  url,
   noPaddingWhenArrowIsHidden,
   folderChild,
 }: Props) => {
-  const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
-  const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
+  const marked = markedFolderId === id;
+
+  const handleMarkFolder = () => {
+    onMarkFolder(id);
+    if (openOnFolderClick) {
+      if (isOpen) {
+        onCloseFolder(id);
+      } else {
+        onOpenFolder(id);
+      }
+    }
+  };
+
   useEffect(() => {
     if (focusedFolderId === id) {
-      if (url && folderNameLinkRef.current) {
-        folderNameLinkRef.current.focus();
-      } else if (folderNameButtonRef.current) {
-        folderNameButtonRef.current.focus();
+      if (ref.current) {
+        ref.current.focus();
       }
     }
-  }, [focusedFolderId, folderNameLinkRef, folderNameButtonRef, url, id]);
-  const marked = markedFolderId === id;
+  }, [focusedFolderId, ref, id]);
+
   return (
     <FolderItemWrapper>
       {!hideArrow && (
-        <OpenButton tabIndex={-1} isOpen={isOpen} disabled={loading} onClick={() => onToggleOpen(id)}>
+        <OpenButton
+          tabIndex={-1}
+          isOpen={isOpen}
+          disabled={loading}
+          onClick={() => (isOpen ? onCloseFolder(id) : onOpenFolder(id))}>
           <ArrowDropDown />
         </OpenButton>
       )}
-      {url ? (
-        <FolderNameLink
-          ref={folderNameLinkRef}
-          noArrow={hideArrow}
-          to={loading ? '' : url}
-          tabIndex={marked ? 0 : -1}
-          marked={marked}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            onMarkFolder(id);
-            if (openOnFolderClick) {
-              onToggleOpen(id);
-            }
-          }}>
-          {icon || <FolderOutlined />}
-          {name}
-        </FolderNameLink>
-      ) : (
+      {onSelectFolder ? (
         <>
           <FolderName
-            ref={folderNameButtonRef}
+            ref={ref}
+            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
             tabIndex={marked ? 0 : -1}
             marked={marked}
@@ -163,10 +169,8 @@ const FolderItem = ({
               setFocusedFolderId(id);
             }}
             onClick={() => {
-              onMarkFolder(id);
-              if (openOnFolderClick) {
-                onToggleOpen(id);
-              }
+              handleMarkFolder();
+              onSelectFolder(id);
             }}>
             {icon || <FolderOutlined />}
             {name}
@@ -177,6 +181,25 @@ const FolderItem = ({
             </WrapperForFolderChild>
           )}
         </>
+      ) : (
+        <FolderNameLink
+          ref={ref}
+          onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
+            arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)
+          }
+          noArrow={hideArrow}
+          to={loading ? '' : `/minndla/${level > 1 ? 'folders/' : ''}${id}`}
+          tabIndex={marked || level === 1 ? 0 : -1}
+          marked={marked}
+          onFocus={() => {
+            setFocusedFolderId(id);
+          }}
+          onClick={() => {
+            handleMarkFolder();
+          }}>
+          {icon || <FolderOutlined />}
+          {name}
+        </FolderNameLink>
       )}
     </FolderItemWrapper>
   );

package/src/TreeStructure/FolderItems.tsx

@@ -32,65 +32,73 @@ const StyledLI = styled.li`
 
 const FolderItems = ({
   loading,
-  data,
-  idPaths,
+  folders,
+  level,
   editable,
-  onToggleOpen,
+  onSelectFolder,
+  onCloseFolder,
+  onOpenFolder,
   onCreateNewFolder,
   onCancelNewFolder,
   onSaveNewFolder,
-  newFolder,
+  newFolderParentId,
+  visibleFolders,
   openFolders,
   markedFolderId,
   onMarkFolder,
   openOnFolderClick,
   focusedFolderId,
   setFocusedFolderId,
-  firstLevel,
   folderChild,
   maximumLevelsOfFoldersAllowed,
 }: FolderItemsProps) => (
-  <StyledUL role="group" firstLevel={firstLevel}>
-    {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
-      const newIdPaths = [...idPaths, _index];
+  <StyledUL role="group" firstLevel={level === 1}>
+    {folders.map(({ name, subfolders, id, icon }, _index) => {
       const isOpen = openFolders?.includes(id);
       return (
         <StyledLI key={id} role="treeitem">
           <div>
             <FolderItem
+              level={level}
               icon={icon}
-              url={url}
+              onSelectFolder={onSelectFolder}
               openOnFolderClick={openOnFolderClick}
               loading={loading}
               isOpen={isOpen}
               id={id}
+              visibleFolders={visibleFolders}
               name={name}
               markedFolderId={markedFolderId}
               focusedFolderId={focusedFolderId}
-              onToggleOpen={onToggleOpen}
               onMarkFolder={onMarkFolder}
-              hideArrow={dataChildren?.length === 0 || newIdPaths.length >= maximumLevelsOfFoldersAllowed}
-              noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
+              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
+              noPaddingWhenArrowIsHidden={editable && level === 1 && subfolders?.length === 0}
               setFocusedFolderId={setFocusedFolderId}
               folderChild={folderChild}
             />
           </div>
-          {newFolder?.parentId === id && (
+          {newFolderParentId === id && (
             <FolderNameInput
+              parentId={newFolderParentId}
               loading={loading}
               onCancelNewFolder={onCancelNewFolder}
               onSaveNewFolder={onSaveNewFolder}
             />
           )}
-          {dataChildren && isOpen && (
+          {subfolders && isOpen && (
             <FolderItems
+              onSelectFolder={onSelectFolder}
               loading={loading}
-              newFolder={newFolder}
+              newFolderParentId={newFolderParentId}
+              visibleFolders={visibleFolders}
               openFolders={openFolders}
-              idPaths={newIdPaths}
+              level={level + 1}
               editable={editable}
-              data={dataChildren}
-              onToggleOpen={onToggleOpen}
+              folders={subfolders}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
               onCreateNewFolder={onCreateNewFolder}
               onSaveNewFolder={onSaveNewFolder}
               onCancelNewFolder={onCancelNewFolder}
@@ -99,7 +107,6 @@ const FolderItems = ({
               openOnFolderClick={openOnFolderClick}
               focusedFolderId={focusedFolderId}
               setFocusedFolderId={setFocusedFolderId}
-              firstLevel={false}
               folderChild={folderChild}
               maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
             />

package/src/TreeStructure/FolderNameInput.tsx

@@ -53,14 +53,15 @@ const StyledInput = styled.input`
 `;
 
 interface FolderNameInputProps {
-  onSaveNewFolder: (value: string) => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
+  parentId: string;
   onCancelNewFolder: () => void;
   loading?: boolean;
 }
 
-const FolderNameInput = ({ onSaveNewFolder, onCancelNewFolder, loading }: FolderNameInputProps) => {
+const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading }: FolderNameInputProps) => {
   const { t } = useTranslation();
-  const [value, setValue] = useState<string>(t('treeStructure.newFolder.defaultName'));
+  const [name, setName] = useState<string>(t('treeStructure.newFolder.defaultName'));
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -82,22 +83,19 @@ const FolderNameInput = ({ onSaveNewFolder, onCancelNewFolder, loading }: Folder
           autoFocus
           placeholder={t('treeStructure.newFolder.placeholder')}
           disabled={loading}
-          value={value}
+          value={name}
           onBlur={() => onCancelNewFolder()}
           onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
               onCancelNewFolder();
-              return;
-            }
-            if (e.key === 'Enter' || e.key === 'Tab') {
-              onSaveNewFolder(value);
+            } else if (e.key === 'Enter' || e.key === 'Tab') {
               e.preventDefault();
+              onSaveNewFolder(name, parentId);
             }
-            return;
           }}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            const target = e.target as HTMLInputElement;
-            setValue(target.value);
+            const target = e.target;
+            setName(target.value);
           }}
         />
         {loading && <Spinner size="small" />}