@ndla/ui 17.0.0 → 19.0.0

package/src/TagSelector/SuggestionInput.tsx

@@ -19,6 +19,39 @@ import { uuid } from '@ndla/util';
 import Suggestions from './Suggestions';
 import type { TagType } from './TagSelector';
 
+const SuggestionTextWrapper = styled.div`
+  ${fonts.sizes(18)};
+  position: absolute;
+  display: flex;
+  flex-grow: 1;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  max-height: ${spacing.large};
+  padding: 8.333px;
+  padding-right: ${spacing.large};
+  span {
+    color: ${colors.brand.grey};
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    &:first-of-type {
+      color: transparent;
+    }
+  }
+`;
+
+const SuggestionText = ({ value, suggestionValue }: { value: string; suggestionValue: string }) => (
+  <SuggestionTextWrapper>
+    {!!value && (
+      <>
+        <span>{value}</span>
+        <span>{suggestionValue.substring(value.length)}</span>
+      </>
+    )}
+  </SuggestionTextWrapper>
+);
+
 const Cross = styled(CrossRaw)`
   margin-left: ${spacing.xxsmall};
 `;
@@ -31,15 +64,18 @@ const StyledInput = styled.input`
   flex-grow: 1;
   border: 0;
   outline: none;
-  background: transparent;
   ${fonts.sizes(18)};
+  z-index: 1;
+  position: relative;
+  background: transparent;
 `;
+
 const StyledInputWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: ${spacing.xsmall};
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.greyLighter};
+  border: 1px solid ${colors.brand.neutral7};
   transition: border-color ${animations.durations.normal} ease;
   border-radius: ${misc.borderRadius};
   &:focus-within {
@@ -50,6 +86,12 @@ const StyledInputWrapper = styled.div`
 const CombinedInputAndDropdownWrapper = styled.div`
   display: flex;
   flex-grow: 1;
+  position: relative;
+`;
+
+const StyledTagButton = styled(Button)<{ enableTagButtonAnimation: boolean }>`
+  ${({ enableTagButtonAnimation }) =>
+    enableTagButtonAnimation ? animations.fadeInScaled(animations.durations.slow) : ''}
 `;
 
 interface SuggestionInputProps {
@@ -90,6 +132,7 @@ const SuggestionInput = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const suggestionIdRef = useRef<string>(uuid());
+  const initalTags = useRef<string[]>(addedTags.map(({ id }) => id));
 
   useEffect(() => {
     setCurrentHighlightedIndex(0);
@@ -122,7 +165,8 @@ const SuggestionInput = ({
     <SuggestionInputContainer ref={containerRef}>
       <StyledInputWrapper>
         {addedTags.map(({ id, name }) => (
-          <Button
+          <StyledTagButton
+            enableTagButtonAnimation={!initalTags.current.includes(id)}
             aria-label={t('tagSelector.removeTag', { name })}
             onClick={() => onToggleTag(id)}
             light
@@ -132,9 +176,12 @@ const SuggestionInput = ({
             {prefix}
             {name}
             <Cross />
-          </Button>
+          </StyledTagButton>
         ))}
         <CombinedInputAndDropdownWrapper>
+          {suggestions[currentHighlightedIndex] && (
+            <SuggestionText value={value} suggestionValue={suggestions[currentHighlightedIndex].name} />
+          )}
           <StyledInput
             placeholder={t('tagSelector.placeholder')}
             value={value}
@@ -157,38 +204,57 @@ const SuggestionInput = ({
             }}
             ref={inputRef}
             onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+              if (!['Enter', ' ', 'Tab', 'ArrowDown', 'ArrowUp', 'Backspace'].includes(e.key)) {
+                return;
+              }
+              const trimmedValue = value.replace(/\s/g, '');
               if (e.key === 'Escape') {
                 setExpanded(false);
                 e.preventDefault();
-              } else if (e.key === 'Enter' || e.key === 'Tab') {
-                if (value !== '' || expanded) {
-                  if (suggestions.length > 0) {
-                    if (!hasBeenAdded(suggestions[currentHighlightedIndex].id)) {
-                      onToggleTag(suggestions[currentHighlightedIndex].id);
-                    }
-                    setInputValue('');
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                    }
-                  } else {
-                    onCreateTag(value);
-                    setInputValue('');
-                    e.preventDefault();
-                  }
-                } else if (e.key === 'Enter') {
-                  e.preventDefault();
-                }
-              } else if (e.key === 'ArrowUp') {
+                return;
+              }
+              if (e.key === 'Backspace' && trimmedValue === '' && addedTags.length) {
+                // Remove the added last tag
+                onToggleTag(addedTags[addedTags.length - 1].id);
+                return;
+              }
+              if (e.key === 'ArrowUp') {
                 setCurrentHighlightedIndex(
                   currentHighlightedIndex - 1 < 0 ? suggestions.length - 1 : currentHighlightedIndex - 1,
                 );
                 e.preventDefault();
-              } else if (e.key === 'ArrowDown') {
+                return;
+              }
+              if (e.key === 'ArrowDown') {
                 setCurrentHighlightedIndex(
                   currentHighlightedIndex + 1 >= suggestions.length ? 0 : currentHighlightedIndex + 1,
                 );
                 e.preventDefault();
+                return;
+              }
+              if (trimmedValue === '' && !expanded) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                }
+                return;
+              }
+              if (e.key === 'Enter' || e.key === 'Tab' || e.key === ' ') {
+                if (suggestions.length > 0) {
+                  if (!hasBeenAdded(suggestions[currentHighlightedIndex].id)) {
+                    onToggleTag(suggestions[currentHighlightedIndex].id);
+                  } else if (trimmedValue.length < suggestions[currentHighlightedIndex].name.length) {
+                    onCreateTag(trimmedValue);
+                    e.preventDefault();
+                  }
+                  setInputValue('');
+                  e.preventDefault();
+                  return;
+                }
+                onCreateTag(trimmedValue);
+                setInputValue('');
+                e.preventDefault();
               }
+              return;
             }}
           />
           <Tooltip tooltip={expanded ? t('tagSelector.hideAllTags') : t('tagSelector.showAllTags')}>

package/src/TagSelector/Suggestions.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { Check } from '@ndla/icons/editor';
 import { spacing, colors, misc, animations, fonts, shadows } from '@ndla/core';
 import Button from '@ndla/button';
@@ -60,6 +61,7 @@ interface SuggestionButtonProps {
 const SuggestionButton = styled(Button)<SuggestionButtonProps>`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   ${fonts.sizes(18)};
   transition: ${misc.transition.default};
   font-weight: 400;
@@ -72,6 +74,18 @@ const SuggestionButton = styled(Button)<SuggestionButtonProps>`
       }
     }
   }
+  ${({ isHighlighted }) =>
+    isHighlighted
+      ? css`
+          background: ${colors.brand.lighter};
+          &:disabled {
+            background: ${colors.brand.greyLighter};
+            svg {
+              fill: ${colors.brand.grey};
+            }
+          }
+        `
+      : ''}
 `;
 
 interface Props {

package/src/TagSelector/TagSelector.tsx

@@ -33,10 +33,12 @@ interface Props {
   prefix?: string;
 }
 
-const sortedTags = (tags: TagType[], selectedTags: string[]): TagType[] =>
-  tags
-    .filter(({ id }) => selectedTags.some((idSelected) => idSelected === id))
-    .sort((a, b) => a.name.localeCompare(b.name, 'nb'));
+const sortedTags = (tags: TagType[], selectedTags: string[]): TagType[] => {
+  const returnTags = selectedTags
+    .map((selectedId) => tags.find(({ id }) => selectedId === id))
+    .filter((notUndefined) => notUndefined) as unknown as TagType[];
+  return returnTags;
+};
 
 const getSuggestions = (tags: TagType[], inputValue: string): TagType[] => {
   if (inputValue === '') {

package/src/TreeStructure/FolderItem.tsx

@@ -42,7 +42,8 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   right: ${spacing.xsmall};
   opacity: ${({ marked }) => (marked ? 1 : 0.25)};
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-within {
     opacity: 1;
   }
 `;
@@ -170,7 +171,9 @@ const FolderItem = ({
             {name}
           </FolderName>
           {folderChild && (
-            <WrapperForFolderChild marked={marked}>{folderChild(id, marked ? 0 : -1)}</WrapperForFolderChild>
+            <WrapperForFolderChild marked={marked}>
+              {folderChild(id, marked || id === focusedFolderId ? 0 : -1)}
+            </WrapperForFolderChild>
           )}
         </>
       )}

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/index.ts

@@ -236,7 +236,7 @@ export { Notion, ConceptNotion } from './Notion';
 export type { NotionVisualElementType, ConceptNotionType } from './Notion';
 
 export { BannerCard } from './BannerCard';
-export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
+export { Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';
 export type { ListResourceProps } from './Resource';
 export type { TagType } from './TagSelector';

package/src/locale/messages-en.ts

@@ -15,14 +15,20 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Edit foldername',
+      delete: 'Delete',
+    },
     createFolder: 'Create folder',
+    maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {
       placeholder: 'Add foldername',
       defaultName: 'New folder',
     },
   },
   tagSelector: {
-    placeholder: 'Add to tag',
+    label: 'Add tag',
+    placeholder: 'Enter tag name',
     removeTag: 'Remove tag {{name}}',
     hideAllTags: 'Hide all tags',
     showAllTags: 'Show all tags',
@@ -978,6 +984,7 @@ const messages = {
     close: 'Close fact box',
   },
   myNdla: {
+    myNDLA: 'My NDLA',
     resources: '{{count}} Resource',
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',
@@ -989,6 +996,8 @@ const messages = {
     newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
     favourites: 'Favourites',
+    addToFavourites: 'Add to my favourites',
+    alreadyFavourited: 'Already in my favourites',
     help: 'Help',
     more: 'More options',
     listView: 'List view',
@@ -1007,6 +1016,7 @@ const messages = {
       terms: 'terms of use',
       feide: 'We have retrieved this information from Feide',
       newFavourite: 'Recently favourited',
+
       storageInfo: {
         title: 'How to save your favourite resources from NDLA',
         text: 'When you wish to save a resource, you can do so by clicking the heart on the top right corner of the page. You will then get an option to store the resource in a folder',

package/src/locale/messages-nb.ts

@@ -15,15 +15,21 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe',
     },
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger',
   },
@@ -976,6 +982,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -987,6 +994,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',