@ndla/ui 14.0.0 → 15.1.1

package/src/TreeStructure/TreeStructure.types.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+
+export interface FolderStructureProps {
+  id: string;
+  name: string;
+  isOpen?: boolean;
+  data?: FolderStructureProps[];
+  isFavorite?: boolean;
+  status?: string;
+  openAsDefault?: boolean;
+  url?: string;
+  icon?: React.ReactNode;
+}
+
+export interface NewFolderProps {
+  parentId?: string;
+  idPaths: number[];
+}
+
+interface CommonFolderProps {
+  data: FolderStructureProps[];
+  editable?: boolean;
+  loading?: boolean;
+  openOnFolderClick?: boolean;
+}
+
+export interface TreeStructureProps extends CommonFolderProps {
+  framed?: boolean;
+  label: string;
+  folderIdMarkedByDefault?: string;
+  onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
+  defaultOpenFolders?: string[];
+}
+
+export type onCreateNewFolderProp = ({
+  idPaths,
+  parentId,
+}: {
+  idPaths: number[];
+  parentId: string | undefined;
+}) => void;
+
+export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<Set<string>>>;
+export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
+
+export interface FolderItemsProps extends CommonFolderProps {
+  onToggleOpen: (id: string) => void;
+  onSaveNewFolder: (value: string) => void;
+  onCancelNewFolder: () => void;
+  onCreateNewFolder: onCreateNewFolderProp;
+  newFolder: NewFolderProps | undefined;
+  openFolders: Set<string>;
+  markedFolderId?: string;
+  onMarkFolder: (id: string) => void;
+  idPaths: number[];
+  focusedFolderId: string | undefined;
+  setFocusedFolderId: SetFocusedFolderId;
+  firstLevel: boolean;
+  keyNavigationFocusIsCreateFolderButton?: boolean;
+  icon?: React.ReactElement;
+}

package/src/TreeStructure/TreeStructureWrapper.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { colors, misc, spacing } from '@ndla/core';
+
+const TreeStructureWrapper = styled.div<{ framed?: boolean }>`
+  padding: ${spacing.xsmall};
+  ${({ framed }) =>
+    framed
+      ? css`
+          border: 1px solid ${colors.brand.greyLighter};
+          border-radius: ${misc.borderRadius};
+          max-height: 400px;
+          overflow-y: scroll;
+          scroll-behavior: smooth;
+          padding: ${spacing.small};
+        `
+      : css`
+          margin-left: -${spacing.medium};
+        `}
+  transition: ${misc.transition.default};
+  &:focus-within {
+    border-color: ${colors.brand.primary};
+  }
+`;
+
+export default TreeStructureWrapper;

package/src/TreeStructure/helperFunctions.ts

@@ -0,0 +1,52 @@
+import { FolderStructureProps } from './TreeStructure.types';
+
+const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
+  const paths = (dataChildren: FolderStructureProps[], path: string[]): string[] => {
+    for (const { id, data: dataChildrenSub } of dataChildren) {
+      if (id === findId) {
+        return [...path, id];
+      } else if (dataChildrenSub?.length) {
+        return paths(dataChildrenSub, [...path, id]);
+      }
+    }
+    return [];
+  };
+  return paths(data, []);
+};
+
+const getIdPathsOfFolder = (data: FolderStructureProps[], findId: string): number[] => {
+  let currentPath: number[] = [];
+  const paths = (dataChildren: FolderStructureProps[], path: number[]) => {
+    dataChildren.forEach(({ id, data: dataChildrenSub }, _index) => {
+      if (id === findId) {
+        currentPath = [...path, _index];
+      } else if (dataChildrenSub?.length) {
+        paths(dataChildrenSub, [...path, _index]);
+      }
+    });
+  };
+  paths(data, []);
+  return currentPath;
+};
+
+const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
+  if (!findId) {
+    return undefined;
+  }
+  let folderName: string | undefined;
+  const paths = (dataChildren: FolderStructureProps[]) => {
+    dataChildren.some(({ id, name, data: dataChildrenSub }, _index) => {
+      if (id === findId) {
+        folderName = name;
+        return true;
+      } else if (dataChildrenSub?.length) {
+        return paths(dataChildrenSub);
+      }
+      return false;
+    });
+  };
+  paths(data);
+  return folderName;
+};
+
+export { getPathOfFolder, getIdPathsOfFolder, getFolderName };

package/src/TreeStructure/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import TreeStructure from './TreeStructure';
+export type { FolderStructureProps, TreeStructureProps } from './TreeStructure.types';
+export { TreeStructure };

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.ts

@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
+import { KeyboardNavigationProps, ElementWithKeyFocusProps } from './keyboardNavigation.types';
+import { MAX_LEVEL_FOR_FOLDERS } from '../TreeStructure';
+
+export const KEYBOARD_KEYS_OF_INTEREST = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', ' '];
+
+// Traverse upwards, incase parent is last element of its parent..
+const traverseUpwards = (
+  inital: FolderStructureProps[],
+  setFocusedFolderId: SetFocusedFolderId,
+  paths: number[],
+  index: number,
+) => {
+  let findParent: FolderStructureProps[] = inital;
+  const parentNextIds: (string | false)[] = [];
+  paths.forEach((pathIndex) => {
+    const nextParent = findParent ? findParent[pathIndex + 1] : undefined;
+    parentNextIds.push(nextParent?.id || false);
+    findParent = findParent[pathIndex].data || [];
+  });
+  if (!parentNextIds.length) {
+    parentNextIds.push(findParent[index + 1]?.id || false);
+  }
+  // We use a reversed version of parentNextIds, filtered out falses, to find the next element
+  // No newId? We are at the end of the tree so we wont update.
+  const newId = parentNextIds.reverse().filter((id) => id)[0];
+  if (newId) {
+    setFocusedFolderId(newId);
+  }
+};
+
+const keyboardNavigation = ({
+  e,
+  data,
+  onToggleOpen,
+  setFocusedFolderId,
+  focusedFolderId: id,
+  openFolders,
+}: KeyboardNavigationProps): string | undefined => {
+  if (e.key === ' ' && document.activeElement?.nodeName === 'INPUT') {
+    return;
+  }
+
+  // We are navigating in the tree.
+  // We need to find the next folder in the tree
+  const elementWithKeyFocus: ElementWithKeyFocusProps = {
+    paths: [],
+    index: 0,
+  };
+
+  const updatePathToElementWithKeyFocus = (
+    data: FolderStructureProps[],
+    paths: number[],
+    parent: FolderStructureProps[],
+    parentId?: string,
+  ): boolean =>
+    data.some(({ data: childData, id: dataId, url }, _index) => {
+      if (dataId === id) {
+        elementWithKeyFocus.paths = paths;
+        elementWithKeyFocus.index = _index;
+        elementWithKeyFocus.isOpen = openFolders.has(dataId) && childData && childData.length > 0;
+        elementWithKeyFocus.data = childData;
+        elementWithKeyFocus.parent = parent;
+        elementWithKeyFocus.parentId = parentId;
+        elementWithKeyFocus.url = url;
+        return true;
+      }
+      return childData ? updatePathToElementWithKeyFocus(childData, [...paths, _index], [...childData], dataId) : false;
+    });
+  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);
+    return;
+  }
+  e.preventDefault();
+  e.stopPropagation();
+
+  if (e.key === ' ') {
+    const simulatedEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    });
+    document.activeElement && document.activeElement.dispatchEvent(simulatedEvent);
+    return;
+  }
+
+  if (e.key === 'ArrowRight') {
+    if (
+      !elementWithKeyFocus.isOpen &&
+      elementWithKeyFocus.data?.length &&
+      id &&
+      elementWithKeyFocus.paths.length < MAX_LEVEL_FOR_FOLDERS - 1
+    ) {
+      onToggleOpen(id);
+    }
+    return;
+  }
+  if (e.key === 'ArrowLeft') {
+    if (id && elementWithKeyFocus.isOpen) {
+      onToggleOpen(id);
+    }
+    return;
+  }
+
+  if (!id && e.key === 'ArrowDown') {
+    setFocusedFolderId(data[0].id);
+    return;
+  }
+  if (!id) {
+    return;
+  }
+  // Move up
+  if (e.key === 'ArrowUp') {
+    if (elementWithKeyFocus.index > 0) {
+      // Move upwards to the parent folder
+      setFocusedFolderId(
+        elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1].id : undefined,
+      );
+    } else if (elementWithKeyFocus.paths.length > 0) {
+      elementWithKeyFocus.paths.pop();
+      let findParent = data;
+      elementWithKeyFocus.paths.forEach((index) => {
+        findParent = findParent[index].data as FolderStructureProps[];
+      });
+      const parentsCurrentIndex = findParent.findIndex(({ id }) => id === elementWithKeyFocus.parentId);
+      setFocusedFolderId(findParent[parentsCurrentIndex].id);
+    }
+    return;
+  }
+
+  if (elementWithKeyFocus.isOpen) {
+    if (elementWithKeyFocus.data?.length) {
+      setFocusedFolderId(elementWithKeyFocus.data[0].id);
+    } else {
+      // move to next child of parent if any... need new traverse :-/
+      traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
+    }
+    return;
+  }
+
+  if (elementWithKeyFocus.parent && elementWithKeyFocus.index < elementWithKeyFocus.parent?.length - 1) {
+    // Move downwards to the next child
+    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1].id);
+    return;
+  }
+
+  traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
+  return;
+};
+
+export default keyboardNavigation;

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

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
+
+export interface KeyboardNavigationProps {
+  e: React.KeyboardEvent<HTMLElement>;
+  data: FolderStructureProps[];
+  setFocusedFolderId: SetFocusedFolderId;
+  openFolders: Set<string>;
+  onToggleOpen: (id: string) => void;
+  focusedFolderId: string | undefined;
+}
+
+export interface ElementWithKeyFocusProps {
+  paths: number[];
+  index: number;
+  data?: FolderStructureProps[];
+  parent?: FolderStructureProps[];
+  parentId?: string;
+  isOpen?: boolean;
+  url?: string;
+}

package/src/User/apiTypes.ts

@@ -55,7 +55,7 @@ export interface FeideGoGroup extends FeideBaseGroup {
 
 export type FeideGroup = FeideOrg | FeideGoGroup;
 
-interface FeideUser {
+export interface FeideUser {
   cn: string[];
   displayName: string;
   eduPersonAffiliation: AffiliationType[] | AffiliationType;

package/src/User/index.ts

@@ -8,8 +8,8 @@
 
 import AuthModal from './AuthModal';
 import { UserInfo } from './UserInfo';
-import type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
+import type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './apiTypes';
 
 export { UserInfo };
-export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType };
+export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser };
 export default AuthModal;

package/src/all.scss

@@ -5,4 +5,5 @@
 @import '~@ndla/core/scss/utilities';
 @import '~@ndla/audio-search/scss/audio-search';
 @import '~@ndla/video-search/scss/video-search';
+@import '~@ndla/button/src/all.scss';
 @import '~@ndla/tooltip/src/all.css';

package/src/index.ts

@@ -22,6 +22,7 @@ export {
   ArticleHeaderWrapper,
   ArticleSideBar,
   default as Article,
+  ArticleFavoritesButton,
 } from './Article';
 
 export { default as Table } from './Table';
@@ -110,7 +111,7 @@ export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
 export { default as MastheadAuthModal } from './Masthead/MastheadAuthModal';
 export { UserInfo } from './User';
 export { default as AuthModal } from './User';
-export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './User';
+export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './User';
 
 export { default as CreatedBy } from './CreatedBy';
 
@@ -153,7 +154,7 @@ export type { TopicProps } from './Topic';
 export { default as Aside } from './Aside';
 export { default as AuthorInfo } from './AuthorInfo';
 
-export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb } from './Breadcrumb';
+export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcrumb } from './Breadcrumb';
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
 
 export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
@@ -221,7 +222,15 @@ export { default as CopyParagraphButton } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
-
 export { BannerCard } from './BannerCard';
-
-export { ResourcesView, ResourceElement, Breadcrumbs } from './MyNdla';
+export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
+export { ListResource, BlockResource } from './Resource';
+export type { ListResourceProps } from './Resource';
+export type { TagType } from './TagSelector';
+export { TagSelector } from './TagSelector';
+
+export type { SnackBarItem } from './SnackBar';
+export { SnackBar } from './SnackBar';
+export { InfoBlock } from './InfoBlock';
+export { TreeStructure } from './TreeStructure';
+export type { FolderStructureProps, TreeStructureProps } from './TreeStructure';

package/src/locale/messages-en.ts

@@ -14,6 +14,19 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  treeStructure: {
+    createFolder: 'Create folder',
+    newFolder: {
+      placeholder: 'Add foldername',
+      defaultName: 'New folder',
+    },
+  },
+  tagSelector: {
+    placeholder: 'Add to tag',
+    removeTag: 'Remove tag {{name}}',
+    hideAllTags: 'Hide all tags',
+    showAllTags: 'Show all tags',
+  },
   htmlTitles: {
     titleTemplate,
     welcomePage: `Frontpage${titleTemplate}`,
@@ -965,15 +978,55 @@ const messages = {
     close: 'Close fact box',
   },
   myNdla: {
-    resources: 'resources',
-    folders: 'folders',
-    folder: 'folder',
+    resources: '{{count}} Resource',
+    resources_plural: '{{count}} Resources',
+    folders: '{{count}} Folder',
+    folders_plural: '{{count}} Folders',
+    folder: 'Folder',
     myFolders: 'My folders',
     myTags: 'My tags',
     newFolder: 'New folder',
+    newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
     favourites: 'Favourites',
     help: 'Help',
+    more: 'More options',
+    listView: 'List view',
+    detailView: 'Detailed listview',
+    shortView: 'Short view',
+    myPage: {
+      myPage: 'My page',
+      logout: 'Log out of My NDLA',
+      deleteAccount: 'Delete My NDLA',
+      welcome:
+        'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',
+      read: { our: 'Read our', ours: 'Read our' },
+      privacy: 'privacy statement',
+      questions: { question: 'Any questions?', ask: 'Ask us in the chat' },
+      wishToDelete: 'Do you wish to delete your account?',
+      terms: 'terms of use',
+      feide: 'We have retrieved this information from Feide',
+      newFavourite: 'Recently favourited',
+      resource: {
+        addToMyNdla: 'Add to My NDLA',
+        addedToMyNdla: 'Added to My NDLA',
+      },
+      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',
+      },
+      folderInfo: {
+        title: 'How to organise your favourite resources in folders',
+        text: 'You can get to the folder overview by clicking on my folders on the menu to the left. Here you can create new folders and subfolder. You can also create a new folder in the dialogue window that is activated when you click on the heart in a resource',
+      },
+      tagInfo: {
+        title: 'How to tag your favourite resources',
+        text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting my tags on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.',
+      },
+    },
+  },
+  snackbar: {
+    close: 'Close notification',
   },
   labels: {
     category: 'Category',

package/src/locale/messages-nb.ts

@@ -14,6 +14,19 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  treeStructure: {
+    createFolder: 'Lag mappe',
+    newFolder: {
+      placeholder: 'Skriv navn på mappe',
+      defaultName: 'Ny mappe',
+    },
+  },
+  tagSelector: {
+    placeholder: 'Tilknytt tag',
+    removeTag: 'Ta vekk tilknytning til {{name}}',
+    hideAllTags: 'Skjul alle tagger',
+    showAllTags: 'Vis alle tagger',
+  },
   htmlTitles: {
     titleTemplate,
     welcomePage: `Forsiden${titleTemplate}`,
@@ -963,15 +976,55 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
-    resources: 'Ressurser',
-    folders: 'Mapper',
+    resources: '{{count}} ressurs',
+    resources_plural: '{{count}} ressurser',
+    folders: '{{count}} mappe',
+    folders_plural: '{{count}} mapper',
     folder: 'Mappe',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
+    newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
     help: 'Hjelp',
+    more: 'Flere valg',
+    listView: 'Listevisning',
+    detailView: 'Detaljrik listevisning',
+    shortView: 'Kort visning',
+    myPage: {
+      myPage: 'Min side',
+      deleteAccount: 'Slett Min NDLA',
+      logout: 'Logg ut av Min NDLA',
+      welcome:
+        'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
+      read: { our: 'Les våre', ours: 'Les vår' },
+      privacy: 'personvernerklæring her',
+      questions: { question: 'Lurer du på noe?', ask: 'Spør oss i chatten' },
+      wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
+      terms: 'vilkår for bruk',
+      newFavourite: 'Nylig lagt til',
+      feide: 'Dette henter vi om deg fra Feide',
+      resource: {
+        addToMyNdla: 'Legg i Min NDLA',
+        addedToMyNdla: 'Lagt i Min NDLA',
+      },
+      storageInfo: {
+        title: 'Slik lagrer du dine favorittressurser fra NDLA',
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.',
+      },
+      folderInfo: {
+        title: 'Slik organiserer du dine favorittressurser i mapper',
+        text: 'Du kommer til mappeoversikten din ved å klikke på mine mapper i menyen til venstre. Her kan du opprette nye mapper og undermapper. Du kan også opprette en ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.',
+      },
+      tagInfo: {
+        title: 'Slik tagger du dine favorittressurser',
+        text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.',
+      },
+    },
+  },
+  snackbar: {
+    close: 'Lukk melding',
   },
   labels: {
     category: 'Kategori',

package/src/locale/messages-nn.ts

@@ -14,6 +14,19 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  treeStructure: {
+    createFolder: 'Lag mappe',
+    newFolder: {
+      placeholder: 'Skriv navn på mappe',
+      defaultName: 'Ny mappe',
+    },
+  },
+  tagSelector: {
+    placeholder: 'Tilknytt tag',
+    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    hideAllTags: 'Skjul alle tagger',
+    showAllTags: 'Vis alle tagger',
+  },
   htmlTitles: {
     titleTemplate,
     welcomePage: `Framsida${titleTemplate}`,
@@ -964,15 +977,55 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
-    resources: 'Ressursar',
-    folders: 'Mapper',
+    resources: '{{count}} ressurs',
+    resources_plural: '{{count}} ressursar',
+    folders: '{{count}} mappe',
+    folders_plural: '{{count}} mapper',
     folder: 'Mappe',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
+    newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
     help: 'Hjelp',
+    more: 'Fleire val',
+    listView: 'Listevisning',
+    detailView: 'Detaljrik listevisning',
+    shortView: 'Kort visning',
+    myPage: {
+      myPage: 'Min side',
+      deleteAccount: 'Slett Min NDLA',
+      logout: 'Logg ut av Min NDLA',
+      welcome:
+        'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
+      read: { our: 'Les våre', ours: 'Les vår' },
+      privacy: 'personvernerklæring her',
+      questions: { question: 'Lurer du på noe?', ask: 'Spør oss i chatten' },
+      wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
+      terms: 'vilkår for bruk',
+      newFavourite: 'Nylig lagt til',
+      feide: 'Dette henter vi om deg fra Feide',
+      resource: {
+        addToMyNdla: 'Legg i Min NDLA',
+        addedToMyNdla: 'Lagt i Min NDLA',
+      },
+      storageInfo: {
+        title: 'Slik lagrer du dine favorittressurser fra NDLA',
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.',
+      },
+      folderInfo: {
+        title: 'Slik organiserer du dine favorittressurser i mapper',
+        text: 'Du kommer til mappeoversikten din ved å klikke på mine mapper i menyen til venstre. Her kan du opprette nye mapper og undermapper. Du kan også opprette en ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.',
+      },
+      tagInfo: {
+        title: 'Slik tagger du dine favorittressurser',
+        text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.',
+      },
+    },
+  },
+  snackbar: {
+    close: 'Lukk melding',
   },
   labels: {
     category: 'Kategori',