@ndla/ui 24.0.0 → 24.2.0

package/lib/locale/messages-sma.js

@@ -424,11 +424,12 @@ var messages = _objectSpread(_objectSpread({
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',
+      podcast: 'Podkast',
       other: 'Annet innhold'
     },
     embedlink: {
       heading: 'Slik viser du artikkelen i annet innhold',
-      description: 'Denne lenken viser artikkelen uten kontekst(meny og bunntekst)',
+      description: 'Denne lenken viser artikkelen uten kontekst (meny og bunntekst)',
       copyTitle: 'Kopier lenke',
       hasCopiedTitle: 'Lenke kopiert'
     },
@@ -460,6 +461,11 @@ var messages = _objectSpread(_objectSpread({
       description: 'Husk å kopiere teksten som skal legges ved lydfilen der du bruker den.',
       rules: 'Regler for bruk av lydfilen:'
     },
+    podcast: {
+      heading: 'Slik gjenbruker du podkaster',
+      description: 'Husk å kopiere teksten som skal legges ved podkasten der du bruker den.',
+      rules: 'Regler for bruk av podkasten:'
+    },
     video: {
       heading: 'Slik gjenbruker du videoer',
       description: 'Husk å kopiere teksten som skal legges ved videoen der du bruker den.',
@@ -481,16 +487,16 @@ var messages = _objectSpread(_objectSpread({
       rules: 'Regler for bruk av H5P:'
     },
     concept: {
-      embedlink: {
-        heading: 'Slik viser du forklaringa i anna innhald',
-        description: 'Denne lenka viser forklaringa utan kontekst (meny og botntekst)',
-        copyTitle: 'Kopier innbyggingslenke',
-        hasCopiedTitle: 'Innbyggingslenke kopiert'
-      },
       heading: 'Slik gjenbruker du forklaringer',
       description: 'Du finner retningslinjene for bruk av innholdet i forklaring-elementet',
       rules: 'Regler for bruk av forklaring:',
-      title: 'Tittel'
+      title: 'Tittel',
+      embedlink: {
+        heading: 'Slik viser du forklaringen i annet innhold',
+        description: 'Denne lenken viser forklaringen uten kontekst (meny og bunntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert'
+      }
     },
     files: {
       heading: 'Slik gjenbruker du filer',
@@ -501,10 +507,10 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     title: 'Tittel',
-    originator: 'Opphavar',
-    rightsholder: 'Rettshavar',
-    source: 'Kjelde',
-    published: 'Publiseringsdato'
+    originator: 'Opphaver',
+    published: 'Publiseringsdato',
+    rightsholder: 'Rettighetshaver',
+    source: 'Kilde'
   },
   errorMessage: {
     title: 'Ops, noe gikk galt',
@@ -773,12 +779,12 @@ var messages = _objectSpread(_objectSpread({
     content: 'Ressursen',
     text: 'er hentet fra',
     concept: {
-      content: 'Forklaringa',
-      text: 'er utarbeida av'
+      content: 'Forklaringen',
+      text: 'er utarbeidet av'
     },
     listing: {
-      content: 'Lista',
-      text: 'er utarbeida av'
+      content: 'Listen',
+      text: 'er utarbeidet av'
     }
   },
   fagfornyelse: {
@@ -829,24 +835,24 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
-  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  cancel: 'Avbryt',
   save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
-    caption: 'Bilettekst',
+    caption: 'Bildetekst',
     type: 'Filtype',
-    width: 'Breidde',
-    height: 'Høgde',
+    width: 'Bredde',
+    height: 'Høyde',
     size: 'Størrelse (bytes)',
     modelReleased: {
       label: 'Modellklarert',
       yes: 'Ja',
       no: 'Nei',
-      'not-applicable': 'Ikkje relevant',
-      'not-set': 'Ikkje valgt',
-      description: 'Om bildet er modellklarert eller ikkje:'
+      'not-applicable': 'Ikke relevant',
+      'not-set': 'Ikke valgt',
+      description: 'Om bildet er modellklarert eller ikke:'
     },
     download: 'Last ned bildet',
     reuse: 'Bruk bildet',
@@ -936,10 +942,10 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'
     },
-    primarySchool: 'Hovudskule',
-    name: 'Namn',
+    primarySchool: 'Hovedskole',
+    name: 'Navn',
     mail: 'E-post',
-    username: 'Brukarnamn',
+    username: 'Brukernavn',
     groupTypes: {
       basic: 'Basisgruppe',
       teaching: 'Undervisningsgruppe',
@@ -966,7 +972,7 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
-      folderDeleted: '"{{folderName}}" er sletta'
+      folderDeleted: '"{{folderName}}" er slettet'
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
@@ -985,15 +991,15 @@ var messages = _objectSpread(_objectSpread({
     more: 'Flere valg',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
-      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       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: {
@@ -1016,7 +1022,7 @@ var messages = _objectSpread(_objectSpread({
       feide: 'Dette henter vi om deg fra Feide',
       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.'
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjerteknappen der den er tilgjengelig. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1031,16 +1037,17 @@ var messages = _objectSpread(_objectSpread({
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
       removeTitle: 'Fjern ressurs',
-      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen fra denne mappen?',
       copyLink: 'Kopier lenke til siden',
-      linkCopied: 'Kopiert til utklippstavla',
+      linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Tags oppdatert',
-      show: 'Vis'
+      show: 'Vis',
+      save: 'Lagre ressurs'
     }
   },
   snackbar: {
@@ -1049,12 +1056,12 @@ var messages = _objectSpread(_objectSpread({
   labels: {
     category: 'Kategori',
     subject: 'Fag',
-    other: 'Anna'
+    other: 'Annet'
   },
   listingPage: {
     or: 'eller',
-    noFilters: 'Har ikkje noko å filtrera',
-    loadMore: 'Last meir'
+    noFilters: 'Har ingenting å filtrere',
+    loadMore: 'Last mer'
   },
   siteNav: {
     search: 'Søk',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "24.0.0",
+  "version": "24.2.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,20 +32,20 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.1",
-    "@ndla/button": "^3.3.1",
+    "@ndla/button": "^3.3.2",
     "@ndla/carousel": "^1.2.16",
     "@ndla/core": "^2.3.4",
-    "@ndla/forms": "^3.1.4",
+    "@ndla/forms": "^3.1.5",
     "@ndla/hooks": "^1.1.5",
     "@ndla/icons": "^1.11.4",
-    "@ndla/licenses": "^5.0.8",
-    "@ndla/modal": "^1.2.18",
-    "@ndla/notion": "^3.1.31",
-    "@ndla/safelink": "^2.2.7",
+    "@ndla/licenses": "^5.0.9",
+    "@ndla/modal": "^1.3.0",
+    "@ndla/notion": "^3.1.33",
+    "@ndla/safelink": "^2.2.8",
     "@ndla/switch": "^0.1.11",
     "@ndla/tabs": "^1.1.15",
     "@ndla/tooltip": "^2.2.0",
-    "@ndla/types-learningpath-api": "^0.0.12",
+    "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.0.1",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ae8101f78ef46929de137ecbdd3275a5ef72649"
+  "gitHead": "190f0f17e8012e9fd1563837091b5376e9026476"
 }

package/src/Article/ArticleFavoritesButton.tsx

@@ -25,8 +25,8 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
   return (
     <Tooltip tooltip={isFavorite ? addToFavoritesLabel : removeFromFavoritesLabel}>
       <IconButtonDualStates
-        ariaLabelActive={t('myNdla.addToFavourites')}
-        ariaLabelInActive={t('myNdla.alreadyFavourited')}
+        ariaLabelActive={t('myNdla.alreadyFavourited')}
+        ariaLabelInActive={t('myNdla.addToFavourites')}
         activeIcon={<Heart />}
         inactiveIcon={<HeartOutline />}
         active={isFavorite}

package/src/InfoBox/InfoBox.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core/src';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import React, { ReactNode } from 'react';
 
 interface Props {

package/src/MediaList/MediaList.tsx

@@ -64,7 +64,7 @@ interface MediaListItemBodyProps {
   license: string;
   locale: string;
   resourceUrl?: string;
-  resourceType?: 'video' | 'image' | 'audio' | 'text' | 'h5p';
+  resourceType?: 'video' | 'image' | 'audio' | 'text' | 'h5p' | 'podcast';
   messages?: {
     modelPremission?: string;
   };

package/src/MyNdla/Resource/FolderInput.tsx

@@ -15,6 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { colors, spacing } from '@ndla/core';
 import { Input } from '@ndla/forms';
 import { css } from '@emotion/core';
+import { Done } from '@ndla/icons/editor';
 
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
@@ -40,6 +41,9 @@ const inputWrapperStyle = css`
 
 const StyledInput = styled(Input)`
   && {
+    flex-grow: 1;
+    flex-basis: 0;
+    min-width: 0;
     line-height: 1.75em;
     color: ${colors.brand.primary};
     ::selection {
@@ -48,6 +52,12 @@ const StyledInput = styled(Input)`
   }
 `;
 
+const Row = styled.div`
+  display: flex;
+  gap: ${spacing.xsmall};
+  padding-right: ${spacing.small};
+`;
+
 interface Props {
   onAddFolder: (name: string) => void;
   onClose: () => void;
@@ -90,9 +100,14 @@ const FolderInput = ({ onAddFolder, onClose, autoSelect }: Props) => {
         </StyledFolderIcon>
       }
       iconRight={
-        <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
-          <Cross />
-        </IconButton>
+        <Row>
+          <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
+            <Cross />
+          </IconButton>
+          <IconButton aria-label={t('save')} size="small" ghostPill onClick={() => onAddFolder(input)}>
+            <Done />
+          </IconButton>
+        </Row>
       }
     />
   );

package/src/NoContentBox/NoContentBox.tsx

@@ -7,21 +7,16 @@
  */
 
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import Button from '@ndla/button';
 
-const classes = new BEMHelper({
-  name: 'topic-resource',
-  prefix: 'c-',
-});
-
 interface Props {
   onClick?: () => void;
   buttonText?: string;
   text: string;
 }
+
 export const NoContentBox = ({ buttonText, text, onClick }: Props) => (
-  <div {...classes('additional-resources-trigger')}>
+  <div>
     <span>
       <div>
         <p>{text}</p>

package/src/Resource/BlockResource.tsx

@@ -94,7 +94,7 @@ const BlockImage = ({ image, loading }: BlockImageProps) => {
       </ContentLoader>
     );
   }
-  return <Image alt={image.alt} src={image.src} />;
+  return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
 };
 
 interface BlockTitleProps {

package/src/Resource/ListResource.tsx

@@ -127,7 +127,9 @@ interface ListResourceImageProps {
 
 const ListResourceImage = ({ resourceImage, loading, type }: ListResourceImageProps) => {
   if (!loading) {
-    return <StyledImage alt={resourceImage.alt} src={resourceImage.src} />;
+    return (
+      <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === 'compact' ? 56 : 136} />
+    );
   }
   return (
     <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">

package/src/SectionHeading/SectionHeading.tsx

@@ -9,6 +9,7 @@ interface Props {
   large?: boolean;
   className?: string;
 }
+
 const SectionHeading = ({ children, large = false, className }: Props) => {
   const Wrapper: ElementType = large ? 'h1' : 'h2';
   return <Wrapper {...classes('', { large: !!large }, className)}>{children}</Wrapper>;

package/src/TagSelector/SuggestionInput.tsx

@@ -128,7 +128,6 @@ const SuggestionInput = ({
   const { t } = useTranslation();
   const [currentHighlightedIndex, setCurrentHighlightedIndex] = useState(0);
   const [hasFocus, setHasFocus] = useState(false);
-  const initalRender = useRef(true);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const suggestionIdRef = useRef<string>(uuid());
@@ -138,14 +137,6 @@ const SuggestionInput = ({
     setCurrentHighlightedIndex(0);
   }, [suggestions]);
 
-  useEffect(() => {
-    if (!initalRender.current) {
-      inputRef.current?.focus();
-    } else {
-      initalRender.current = false;
-    }
-  }, [addedTags]);
-
   useEffect(() => {
     const selectedSuggestionElement = document
       .getElementById(suggestionIdRef.current)

package/src/TreeStructure/FolderItems.tsx

@@ -22,7 +22,7 @@ const StyledUL = styled.ul<{ firstLevel?: boolean }>`
   list-style: none;
   margin: 0;
   padding: 0;
-  margin-left: ${({ firstLevel }) => (firstLevel ? `-${spacing.xsmall}` : spacing.normal)};
+  margin-left: ${({ firstLevel }) => (firstLevel ? `-${spacing.xsmall}` : spacing.small)};
 `;
 
 const StyledLI = styled.li`

package/src/TreeStructure/FolderNameInput.tsx

@@ -14,6 +14,9 @@ import { spacing, colors, misc, animations } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { isMobile } from 'react-device-detect';
 import { Spinner } from '@ndla/icons';
+import { IconButton } from '@ndla/button';
+import { Cross } from '@ndla/icons/action';
+import { Done } from '@ndla/icons/editor';
 
 const ArrowRight = styled(ArrowDropDownRaw)`
   color: ${colors.text.primary};
@@ -29,15 +32,19 @@ const NewFolderWrapper = styled.div`
   }
 `;
 
+const Row = styled.div`
+  display: flex;
+  gap: ${spacing.xxsmall};
+  padding-right: ${spacing.xsmall};
+`;
+
 const InputWrapper = styled.div<{ loading?: boolean }>`
-  margin: ${spacing.xxsmall} ${spacing.small} ${spacing.xxsmall} 0;
   display: flex;
+  margin: ${spacing.xxsmall} 0;
   align-items: center;
   border: 1px solid ${({ loading }) => (loading ? colors.brand.lighter : colors.brand.primary)};
   border-style: dashed;
   border-radius: ${misc.borderRadius};
-  padding-right: ${spacing.normal};
-  padding-left: ${spacing.xsmall};
   color: ${colors.brand.primary};
 `;
 
@@ -45,8 +52,7 @@ const StyledInput = styled.input`
   flex-grow: 1;
   border: 0;
   outline: none;
-  padding: ${spacing.small};
-  padding-left: ${spacing.xsmall};
+  min-width: 0;
   background: transparent;
   color: ${colors.text.primary};
   scroll-margin-top: 100px;
@@ -74,17 +80,19 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
   return (
     <NewFolderWrapper>
       <InputWrapper loading={loading}>
-        <ArrowRight />
-        <FolderOutlined />
+        <Row>
+          <ArrowRight />
+          <FolderOutlined />
+        </Row>
         <StyledInput
           ref={inputRef}
           autoFocus
           placeholder={t('treeStructure.newFolder.placeholder')}
           disabled={loading}
           value={name}
-          onBlur={() => onCancelNewFolder()}
           onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
+              e.preventDefault();
               onCancelNewFolder();
             } else if (e.key === 'Enter' || e.key === 'Tab') {
               e.preventDefault();
@@ -93,7 +101,24 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
           }}
           onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
         />
-        {loading && <Spinner size="small" />}
+        <Row>
+          {!loading ? (
+            <>
+              <IconButton aria-label={t('close')} size="xsmall" ghostPill onClick={onCancelNewFolder}>
+                <Cross />
+              </IconButton>
+              <IconButton
+                aria-label={t('save')}
+                size="xsmall"
+                ghostPill
+                onClick={() => onSaveNewFolder(name, parentId)}>
+                <Done />
+              </IconButton>
+            </>
+          ) : (
+            <Spinner size="small" margin="0" />
+          )}
+        </Row>
       </InputWrapper>
     </NewFolderWrapper>
   );

package/src/TreeStructure/TreeStructure.tsx

@@ -114,6 +114,7 @@ const TreeStructure = ({
   };
 
   const onSaveNewFolder = (name: string, parentId: string) => {
+    setNewFolderParentId(undefined);
     onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
         setSelectedFolder(newFolder);

package/src/TreeStructure/types.ts

@@ -8,7 +8,7 @@
 
 import { MouseEvent, ReactNode } from 'react';
 import { IFolder, IResource } from '@ndla/types-learningpath-api';
-import { MenuItemProps } from '@ndla/button/src';
+import { MenuItemProps } from '@ndla/button';
 
 export interface FolderType extends IFolder {
   icon?: ReactNode;

package/src/locale/messages-en.ts

@@ -441,8 +441,9 @@ const messages = {
       h5p: 'H5P',
       files: 'Files',
       embedlink: 'Embedded link',
-      other: 'Other content',
       concept: 'Concepts',
+      podcast: 'Podcast',
+      other: 'Other content',
     },
     embedlink: {
       heading: 'How to show the article in other content',
@@ -478,6 +479,11 @@ const messages = {
       description: 'Remember to copy the text to be attached to the audio where you use it.',
       rules: 'Rules for use of audio file:',
     },
+    podcast: {
+      heading: 'How to reuse podcasts',
+      description: 'Remember to copy the text to be attached to the podcast where you use it.',
+      rules: 'Rules for use of podcast:',
+    },
     video: {
       heading: 'How to reuse videos',
       description: 'Remember to copy the text to be attached to the video where you use it.',
@@ -1023,7 +1029,7 @@ const messages = {
     more: 'More options',
     listView: 'List view',
     detailView: 'Detailed listview',
-    shortView: 'Short view',
+    shortView: 'Card view',
     myPage: {
       confirmDeleteAccount: 'Are you sure you want to delete your account?',
       confirmDeleteAccountButton: 'Delete account',
@@ -1050,7 +1056,7 @@ const messages = {
 
       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',
+        text: 'When you wish to save a resource, you can do so by clicking the heart button. You will then get an option to store the resource in a folder',
       },
       folderInfo: {
         title: 'How to organise your favourite resources in folders',
@@ -1070,11 +1076,12 @@ const messages = {
       linkCopied: 'Copied to clipboard',
       addToMyNdla: 'Add to My NDLA',
       addedToMyNdla: 'Added to My NDLA',
-      addedToFolder: 'Resource added to "{{folderName}}"',
+      addedToFolder: 'Resource added to ',
       removedFromFolder: 'Removed from "{{folderName}}"',
       titleUpdated: 'Title updated',
       tagsUpdated: 'Tags updated',
       show: 'Show',
+      save: 'Save resource',
     },
   },
   snackbar: {

package/src/locale/messages-nb.ts

@@ -455,6 +455,7 @@ const messages = {
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',
+      podcast: 'Podkast',
       other: 'Annet innhold',
     },
     embedlink: {
@@ -491,6 +492,11 @@ const messages = {
       description: 'Husk å kopiere teksten som skal legges ved lydfilen der du bruker den.',
       rules: 'Regler for bruk av lydfilen:',
     },
+    podcast: {
+      heading: 'Slik gjenbruker du podkaster',
+      description: 'Husk å kopiere teksten som skal legges ved podkasten der du bruker den.',
+      rules: 'Regler for bruk av podkasten:',
+    },
     video: {
       heading: 'Slik gjenbruker du videoer',
       description: 'Husk å kopiere teksten som skal legges ved videoen der du bruker den.',
@@ -1021,7 +1027,7 @@ const messages = {
     more: 'Flere valg',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
@@ -1048,7 +1054,7 @@ const messages = {
       feide: 'Dette henter vi om deg fra Feide',
       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.',
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjerteknappen der den er tilgjengelig. Du vil da få mulighet til å lagre ressursen i en mappe.',
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1068,11 +1074,12 @@ const messages = {
       linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Tags oppdatert',
       show: 'Vis',
+      save: 'Lagre ressurs',
     },
   },
   snackbar: {