@ndla/ui 24.0.0 → 24.1.0

package/lib/locale/messages-en.js

@@ -985,7 +985,7 @@ var messages = _objectSpread(_objectSpread({
     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',
@@ -1016,7 +1016,7 @@ var messages = _objectSpread(_objectSpread({
       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'
+        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',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       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',

package/lib/locale/messages-nb.js

@@ -985,7 +985,7 @@ 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',
@@ -1016,7 +1016,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',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       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',

package/lib/locale/messages-nn.js

@@ -985,7 +985,7 @@ var messages = _objectSpread(_objectSpread({
     more: 'Fleire val',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
@@ -1016,7 +1016,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 tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavla',
       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',

package/lib/locale/messages-se.js

@@ -985,7 +985,7 @@ 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',
@@ -1016,7 +1016,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 tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavla',
       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',

package/lib/locale/messages-sma.js

@@ -985,7 +985,7 @@ 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',
@@ -1016,7 +1016,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 tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavla',
       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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "24.0.0",
+  "version": "24.1.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/modal": "^1.3.0",
+    "@ndla/notion": "^3.1.32",
+    "@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": "4b4dab829416f2d642693cbd6dcd5e0beb4b0ed5"
 }

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/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/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,15 +80,16 @@ 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') {
               onCancelNewFolder();
@@ -93,7 +100,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/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

@@ -1023,7 +1023,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 +1050,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,7 +1070,7 @@ 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',

package/src/locale/messages-nb.ts

@@ -1021,7 +1021,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 +1048,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,7 +1068,7 @@ 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',

package/src/locale/messages-nn.ts

@@ -1022,7 +1022,7 @@ const messages = {
     more: 'Fleire val',
     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 +1048,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 tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.',
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1068,7 +1068,7 @@ const messages = {
       linkCopied: 'Kopiert til utklippstavla',
       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',

package/src/locale/messages-se.ts

@@ -1021,7 +1021,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 +1048,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 tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.',
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1068,7 +1068,7 @@ const messages = {
       linkCopied: 'Kopiert til utklippstavla',
       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',

package/src/locale/messages-sma.ts

@@ -1021,7 +1021,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 +1048,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 tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.',
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1068,7 +1068,7 @@ const messages = {
       linkCopied: 'Kopiert til utklippstavla',
       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',

package/src/main.scss

@@ -15,7 +15,6 @@
 @import 'FactBox/component.factbox';
 @import 'Aside/component.aside';
 @import 'Article/component.footnotes';
-@import 'NoContentBox/component.no-content-box.scss';
 @import 'global/components/component.logo';
 @import 'MediaList/component.medialist';
 @import 'RelatedArticleList/component.related-articles';

package/src/NoContentBox/component.no-content-box.scss

@@ -1,17 +0,0 @@
-/**
-** NO CONTENT BOX
-** No content found in lists (used by Topic and resources lists)
-**/
-
-
-.c-no-content-box {
-  background: $brand-grey--lightest;
-  border: 1px dashed $brand-color--light;
-  text-align: center;
-  padding: $spacing--small $spacing--small $spacing;
-  font-family: $font;
-  p {
-    @include font-size(16px, 18px);
-    margin: $spacing--small;
-  }
-}