@ndla/ui 18.0.0 → 19.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "18.0.0",
+  "version": "19.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,15 +31,15 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.6.0",
+    "@ndla/button": "^3.0.0",
     "@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.17",
-    "@ndla/safelink": "^2.0.8",
+    "@ndla/notion": "^3.1.19",
+    "@ndla/safelink": "^2.1.0",
     "@ndla/switch": "^0.1.7",
     "@ndla/tabs": "^1.1.10",
     "@ndla/tooltip": "^2.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "917673dcc652e2cbc9106b8b4c30cd393c00cff5"
+  "gitHead": "8c51904170c455fc66f1c624b02829efe15c1482"
 }

package/src/Masthead/MastheadAuthModal.tsx

@@ -10,6 +10,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { Feide } from '@ndla/icons/common';
+import { colors, fonts, spacing } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
 
 import AuthModal, { AuthModalProps } from '../User/AuthModal';
 
@@ -18,7 +20,12 @@ type FeideWrapperProps = {
 };
 
 const StyledButton = styled(Button)<FeideWrapperProps>`
+  font-weight: ${fonts.weight.semibold};
+  display: flex;
+  align-items: center;
   .feide-icon svg {
+    margin-left: ${spacing.xsmall};
+    fill: ${colors.brand.primary};
     color: ${(props) => (props.inverted ? `#ffffff` : `#000000`)};
     width: 22px;
     height: 22px;
@@ -35,11 +42,13 @@ interface Props extends AuthModalProps {
 }
 
 const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
+  const { t } = useTranslation();
   return (
     <AuthModal
       {...rest}
       activateButton={
         <StyledButton inverted={inverted} ghostPill={!inverted} ghostPillInverted={inverted} aria-label="Feide">
+          {t('myNdla.myNDLA')}
           <span className="feide-icon">
             <Feide />
           </span>

package/src/MyNdla/Resource/Folder.tsx

@@ -7,14 +7,14 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { FileDocumentOutline } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import SafeLink from '@ndla/safelink';
-import { MenuButton } from '@ndla/button';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 
 interface FolderIconWrapperProps {
   type?: LayoutType;
@@ -84,7 +84,7 @@ interface Props {
   description?: string;
   link: string;
   type: LayoutType;
-  actionMenu?: ReactNode;
+  menuItems?: MenuItemProps[];
 }
 
 interface IconCountProps {
@@ -124,14 +124,14 @@ const IconCount = ({ type, count, layoutType }: IconCountProps) => {
   return (
     <IconCountWrapper type={layoutType}>
       <Icon aria-label={t(`myNdla.${type}s`)} />
-      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count: 3 })}</span>
+      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count })}</span>
     </IconCountWrapper>
   );
 };
 
 type LayoutType = 'list' | 'block';
 
-const Folder = ({ link, title, subFolders, subResources, type = 'list', actionMenu }: Props) => {
+const Folder = ({ link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
   const { t } = useTranslation();
   return (
     <FolderWrapper to={link}>
@@ -141,7 +141,7 @@ const Folder = ({ link, title, subFolders, subResources, type = 'list', actionMe
       <FolderTitle>{title}</FolderTitle>
       <IconCount layoutType={type} type={'folder'} count={subFolders} />
       <IconCount layoutType={type} type={'resource'} count={subResources} />
-      <MenuButton size="small" />
+      {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
     </FolderWrapper>
   );
 };

package/src/Resource/BlockResource.tsx

@@ -7,11 +7,12 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, spacing } from '@ndla/core';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
-import { CompressedTags, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import { CompressedTagList, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
 
 interface BlockResourceProps {
   link: string;
@@ -20,7 +21,7 @@ interface BlockResourceProps {
   topics: string[];
   tags?: string[];
   description?: string;
-  actionMenu?: ReactNode;
+  menuItems?: MenuItemProps[];
 }
 
 const BlockElementWrapper = styled(SafeLink)`
@@ -77,7 +78,7 @@ const ImageWrapper = styled.div`
   }
 `;
 
-const BlockResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: BlockResourceProps) => {
+const BlockResource = ({ link, title, tags, resourceImage, topics, description, menuItems }: BlockResourceProps) => {
   return (
     <BlockElementWrapper to={link}>
       <ImageWrapper>
@@ -90,8 +91,8 @@ const BlockResource = ({ link, title, tags, resourceImage, topics, description,
         <TopicList topics={topics} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
-          {tags && CompressedTags(tags)}
-          {actionMenu}
+          {tags && <CompressedTagList tags={tags} />}
+          {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>
     </BlockElementWrapper>

package/src/Resource/ListResource.tsx

@@ -7,11 +7,12 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import SafeLink from '@ndla/safelink';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
-import { CompressedTags, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
+import { CompressedTagList, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
 
 const ResourceDescription = styled.p`
   grid-area: description;
@@ -109,10 +110,10 @@ export interface ListResourceProps {
   topics: string[];
   tags?: string[];
   description?: string;
-  actionMenu?: ReactNode;
+  menuItems?: MenuItemProps[];
 }
 
-const ListResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: ListResourceProps) => {
+const ListResource = ({ link, title, tags, resourceImage, topics, description, menuItems }: ListResourceProps) => {
   const showDescription = description !== undefined;
 
   return (
@@ -126,8 +127,8 @@ const ListResource = ({ link, title, tags, resourceImage, topics, description, a
       </TopicAndTitle>
       {showDescription && <ResourceDescription>{description}</ResourceDescription>}
       <TagsandActionMenu>
-        {tags && CompressedTags(tags)}
-        {actionMenu}
+        {tags && <CompressedTagList tags={tags} />}
+        {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ResourceWrapper>
   );

package/src/Resource/resourceComponents.tsx

@@ -48,6 +48,9 @@ const StyledTagListElement = styled.li`
   ::before {
     content: '#';
   }
+  &:hover {
+    color: ${colors.brand.primary};
+  }
 `;
 
 const StyledTopicList = styled.ul`
@@ -100,7 +103,11 @@ export const TagList = ({ tags }: TagListProps) => {
   );
 };
 
-export const CompressedTags = (tags: string[]) => {
+interface CompressedTagListProps {
+  tags: string[];
+}
+
+export const CompressedTagList = ({ tags }: CompressedTagListProps) => {
   const visibleTags = tags.slice(0, 3);
   const remainingTags = tags.slice(3, tags.length).map((tag) => {
     return {

package/src/TreeStructure/FolderItem.tsx

@@ -11,6 +11,7 @@ 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';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
@@ -75,7 +76,7 @@ const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   text-align: left;
 `;
 
-const FolderNameLink = FolderName.withComponent('a');
+const FolderNameLink = FolderName.withComponent(SafeLink);
 
 interface Props {
   name: string;
@@ -135,9 +136,9 @@ const FolderItem = ({
         <FolderNameLink
           ref={folderNameLinkRef}
           noArrow={hideArrow}
+          to={loading ? '' : url}
           tabIndex={marked ? 0 : -1}
           marked={marked}
-          href={loading ? undefined : url}
           onFocus={() => {
             setFocusedFolderId(id);
           }}

package/src/TreeStructure/FolderItems.tsx

@@ -12,7 +12,6 @@ import { animations, spacing } from '@ndla/core';
 import FolderItem from './FolderItem';
 import FolderNameInput from './FolderNameInput';
 import { FolderItemsProps } from './TreeStructure.types';
-import { MAX_LEVEL_FOR_FOLDERS } from './TreeStructure';
 
 const StyledUL = styled.ul<{ firstLevel?: boolean }>`
   ${animations.fadeInLeft(animations.durations.fast)};
@@ -49,11 +48,12 @@ const FolderItems = ({
   setFocusedFolderId,
   firstLevel,
   folderChild,
+  maximumLevelsOfFoldersAllowed,
 }: FolderItemsProps) => (
   <StyledUL role="group" firstLevel={firstLevel}>
     {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
       const newIdPaths = [...idPaths, _index];
-      const isOpen = openFolders?.has(id);
+      const isOpen = openFolders?.includes(id);
       return (
         <StyledLI key={id} role="treeitem">
           <div>
@@ -69,7 +69,7 @@ const FolderItems = ({
               focusedFolderId={focusedFolderId}
               onToggleOpen={onToggleOpen}
               onMarkFolder={onMarkFolder}
-              hideArrow={dataChildren?.length === 0 || newIdPaths.length >= MAX_LEVEL_FOR_FOLDERS}
+              hideArrow={dataChildren?.length === 0 || newIdPaths.length >= maximumLevelsOfFoldersAllowed}
               noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
               setFocusedFolderId={setFocusedFolderId}
               folderChild={folderChild}
@@ -101,6 +101,7 @@ const FolderItems = ({
               setFocusedFolderId={setFocusedFolderId}
               firstLevel={false}
               folderChild={folderChild}
+              maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
             />
           )}
         </StyledLI>

package/src/TreeStructure/TreeStructure.tsx

@@ -13,6 +13,7 @@ import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, fonts } from '@ndla/core';
+import { uniq } from 'lodash';
 import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
 import { getIdPathsOfFolder, getPathOfFolder, getFolderName } from './helperFunctions';
@@ -41,21 +42,23 @@ const TreeStructure = ({
   folderIdMarkedByDefault,
   defaultOpenFolders,
   folderChild,
+  maximumLevelsOfFoldersAllowed,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
   const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
-  const [openFolders, setOpenFolders] = useState<Set<string>>(new Set(defaultOpenFolders || []));
+  const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
   const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
-  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0].id);
+  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0]?.id);
   const treestructureRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const rootLevelId = useMemo(() => uuid(), []); // TODO: use useId hook when we update to React 18
 
   useEffect(() => {
-    setOpenFolders((prev) => {
-      defaultOpenFolders?.forEach((id) => prev.add(id));
-      return new Set(prev);
-    });
+    if (defaultOpenFolders) {
+      setOpenFolders((prev) => {
+        return uniq([...defaultOpenFolders, ...prev]);
+      });
+    }
   }, [defaultOpenFolders]);
 
   useEffect(() => {
@@ -65,48 +68,44 @@ const TreeStructure = ({
   }, [loading]);
 
   const onToggleOpen = (id: string) => {
-    setOpenFolders((prev) => {
-      if (prev.has(id)) {
-        prev.delete(id);
-        // Did we just closed a folder with a marked folder inside it?
-        // If so, we need to mark the folder we just closed.
-        if (markedFolderId) {
-          const closingFolderPath = getPathOfFolder(data, id);
-          const markedFolderPath = getPathOfFolder(data, markedFolderId);
-          const markedFolderIsSubPath = closingFolderPath.every(
-            (folderId, _index) => markedFolderPath[_index] === folderId,
-          );
-          if (markedFolderIsSubPath) {
-            setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
-          }
+    if (openFolders.includes(id)) {
+      // Did we just closed a folder with a marked folder inside it?
+      // If so, we need to mark the folder we just closed.
+      if (markedFolderId) {
+        const closingFolderPath = getPathOfFolder(data, id);
+        const markedFolderPath = getPathOfFolder(data, markedFolderId);
+        const markedFolderIsSubPath = closingFolderPath.every(
+          (folderId, _index) => markedFolderPath[_index] === folderId,
+        );
+        if (markedFolderIsSubPath) {
+          setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
         }
-      } else {
-        prev.add(id);
       }
-      return new Set(prev);
-    });
+      setOpenFolders(openFolders.filter((folder) => folder !== id));
+    } else {
+      setOpenFolders(uniq([...openFolders, id]));
+    }
   };
 
   const onCreateNewFolder = (props: { idPaths: number[]; parentId?: string }) => {
     setNewFolder(props);
   };
 
-  const onSaveNewFolder = async (value: string) => {
+  const onSaveNewFolder = (value: string) => {
     if (newFolder) {
       // We would like to create a new folder with the name of value.
       // Its location in structure is based on newFolder object
-      const newFolderId = await onNewFolder({ ...newFolder, value });
-      if (newFolderId) {
-        setMarkedFolderId(newFolderId);
-        setFocusedFolderId(newFolderId);
-        // Open current folder in case it was closed..
-        setOpenFolders((prev) => {
+      onNewFolder({ ...newFolder, value }).then((newFolderId) => {
+        if (newFolderId) {
+          setMarkedFolderId(newFolderId);
+          setFocusedFolderId(newFolderId);
+          // Open current folder in case it was closed..
+
           if (newFolder.parentId) {
-            prev.add(newFolder.parentId);
+            setOpenFolders(uniq([...openFolders, newFolder.parentId]));
           }
-          return new Set(prev);
-        });
-      }
+        }
+      });
     }
   };
 
@@ -119,6 +118,9 @@ const TreeStructure = ({
     setFocusedFolderId(id);
   };
 
+  const paths = getPathOfFolder(data, markedFolderId || '');
+  const canAddFolder = editable && paths.length < (maximumLevelsOfFoldersAllowed || 1);
+
   return (
     <div
       ref={treestructureRef}
@@ -134,7 +136,7 @@ const TreeStructure = ({
           });
         }
       }}>
-      <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>
+      {label && <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>}
       <TreeStructureStyledWrapper ref={wrapperRef} id={rootLevelId} aria-label="Menu tree" role="tree" framed={framed}>
         <FolderItems
           idPaths={[]}
@@ -154,22 +156,28 @@ const TreeStructure = ({
           setFocusedFolderId={setFocusedFolderId}
           firstLevel
           folderChild={folderChild}
+          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
         />
       </TreeStructureStyledWrapper>
       {editable && (
         <AddFolderWrapper>
           <Tooltip
-            tooltip={t('myNdla.newFolderUnder', {
-              folderName: getFolderName(data, markedFolderId),
-            })}>
+            tooltip={
+              canAddFolder
+                ? t('myNdla.newFolderUnder', {
+                    folderName: getFolderName(data, markedFolderId),
+                  })
+                : t('myNdla.maxFoldersAlreadyAdded')
+            }>
             <AddButton
+              disabled={!canAddFolder}
               aria-label={t('myNdla.newFolder')}
               onClick={() => {
-                const paths = getPathOfFolder(data, markedFolderId || '');
                 const idPaths = getIdPathsOfFolder(data, markedFolderId || '');
                 setNewFolder({ idPaths, parentId: paths[paths.length - 1] });
-              }}
-            />
+              }}>
+              {t('myNdla.newFolder')}
+            </AddButton>
           </Tooltip>
         </AddFolderWrapper>
       )}
@@ -177,4 +185,8 @@ const TreeStructure = ({
   );
 };
 
+TreeStructure.defaultProps = {
+  maximumLevelsOfFoldersAllowed: MAX_LEVEL_FOR_FOLDERS,
+};
+
 export default TreeStructure;

package/src/TreeStructure/TreeStructure.types.ts

@@ -34,11 +34,12 @@ interface CommonFolderProps {
 
 export interface TreeStructureProps extends CommonFolderProps {
   framed?: boolean;
-  label: string;
+  label?: string;
   folderIdMarkedByDefault?: string;
   onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
   defaultOpenFolders?: string[];
   folderChild?: FolderChildFuncType;
+  maximumLevelsOfFoldersAllowed: number;
 }
 
 export type onCreateNewFolderProp = ({
@@ -49,7 +50,7 @@ export type onCreateNewFolderProp = ({
   parentId: string | undefined;
 }) => void;
 
-export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<Set<string>>>;
+export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<string[]>>;
 export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
 
 export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
@@ -60,7 +61,7 @@ export interface FolderItemsProps extends CommonFolderProps {
   onCancelNewFolder: () => void;
   onCreateNewFolder: onCreateNewFolderProp;
   newFolder: NewFolderProps | undefined;
-  openFolders: Set<string>;
+  openFolders: string[];
   markedFolderId?: string;
   onMarkFolder: (id: string) => void;
   idPaths: number[];
@@ -70,4 +71,5 @@ export interface FolderItemsProps extends CommonFolderProps {
   keyNavigationFocusIsCreateFolderButton?: boolean;
   icon?: ReactNode;
   folderChild?: FolderChildFuncType;
+  maximumLevelsOfFoldersAllowed: number;
 }

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.ts

@@ -66,7 +66,7 @@ const keyboardNavigation = ({
       if (dataId === id) {
         elementWithKeyFocus.paths = paths;
         elementWithKeyFocus.index = _index;
-        elementWithKeyFocus.isOpen = openFolders.has(dataId) && childData && childData.length > 0;
+        elementWithKeyFocus.isOpen = openFolders.includes(dataId) && childData && childData.length > 0;
         elementWithKeyFocus.data = childData;
         elementWithKeyFocus.parent = parent;
         elementWithKeyFocus.parentId = parentId;
@@ -78,7 +78,7 @@ const keyboardNavigation = ({
   if (!updatePathToElementWithKeyFocus(data, [], data)) {
     // Couldn't find its location in the tree.
     // This should not happen, reset its value to root.
-    setFocusedFolderId(e.key === 'ArrowDown' ? data[0].id : undefined);
+    setFocusedFolderId(e.key === 'ArrowDown' ? data[0]?.id : undefined);
     return;
   }
   e.preventDefault();
@@ -113,7 +113,7 @@ const keyboardNavigation = ({
   }
 
   if (!id && e.key === 'ArrowDown') {
-    setFocusedFolderId(data[0].id);
+    setFocusedFolderId(data[0]?.id);
     return;
   }
   if (!id) {
@@ -124,7 +124,7 @@ const keyboardNavigation = ({
     if (elementWithKeyFocus.index > 0) {
       // Move upwards to the parent folder
       setFocusedFolderId(
-        elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1].id : undefined,
+        elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1]?.id : undefined,
       );
     } else if (elementWithKeyFocus.paths.length > 0) {
       elementWithKeyFocus.paths.pop();
@@ -133,14 +133,14 @@ const keyboardNavigation = ({
         findParent = findParent[index].data as FolderStructureProps[];
       });
       const parentsCurrentIndex = findParent.findIndex(({ id }) => id === elementWithKeyFocus.parentId);
-      setFocusedFolderId(findParent[parentsCurrentIndex].id);
+      setFocusedFolderId(findParent[parentsCurrentIndex]?.id);
     }
     return;
   }
 
   if (elementWithKeyFocus.isOpen) {
     if (elementWithKeyFocus.data?.length) {
-      setFocusedFolderId(elementWithKeyFocus.data[0].id);
+      setFocusedFolderId(elementWithKeyFocus.data[0]?.id);
     } else {
       // move to next child of parent if any... need new traverse :-/
       traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
@@ -150,7 +150,7 @@ const keyboardNavigation = ({
 
   if (elementWithKeyFocus.parent && elementWithKeyFocus.index < elementWithKeyFocus.parent?.length - 1) {
     // Move downwards to the next child
-    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1].id);
+    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1]?.id);
     return;
   }
 

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.types.ts

@@ -12,7 +12,7 @@ export interface KeyboardNavigationProps {
   e: React.KeyboardEvent<HTMLElement>;
   data: FolderStructureProps[];
   setFocusedFolderId: SetFocusedFolderId;
-  openFolders: Set<string>;
+  openFolders: string[];
   onToggleOpen: (id: string) => void;
   focusedFolderId: string | undefined;
 }

package/src/locale/messages-en.ts

@@ -20,6 +20,7 @@ const messages = {
       delete: 'Delete',
     },
     createFolder: 'Create folder',
+    maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {
       placeholder: 'Add foldername',
       defaultName: 'New folder',
@@ -983,6 +984,7 @@ const messages = {
     close: 'Close fact box',
   },
   myNdla: {
+    myNDLA: 'My NDLA',
     resources: '{{count}} Resource',
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',

package/src/locale/messages-nb.ts

@@ -20,6 +20,7 @@ const messages = {
       delete: 'Slett',
     },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe',
@@ -981,6 +982,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',

package/src/locale/messages-nn.ts

@@ -20,6 +20,7 @@ const messages = {
       delete: 'Slett',
     },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe',
@@ -982,6 +983,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',

package/src/locale/messages-se.ts

@@ -20,6 +20,7 @@ const messages = {
       delete: 'Slett',
     },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe',
@@ -981,6 +982,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',

package/src/locale/messages-sma.ts

@@ -20,6 +20,7 @@ const messages = {
       delete: 'Slett',
     },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe',
@@ -981,6 +982,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',