@ndla/ui 16.2.0 → 18.0.1

package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.js

@@ -50,7 +50,7 @@ var traverseUpwards = function traverseUpwards(inital, setFocusedFolderId, paths
 };
 
 var keyboardNavigation = function keyboardNavigation(_ref) {
-  var _document$activeEleme, _elementWithKeyFocus$3;
+  var _document$activeEleme, _elementWithKeyFocus$5;
 
   var e = _ref.e,
       data = _ref.data,
@@ -79,7 +79,7 @@ var keyboardNavigation = function keyboardNavigation(_ref) {
       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;
@@ -92,9 +92,11 @@ var keyboardNavigation = function keyboardNavigation(_ref) {
   };
 
   if (!updatePathToElementWithKeyFocus(data, [], data)) {
+    var _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$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.id : undefined);
     return;
   }
 
@@ -130,7 +132,9 @@ var keyboardNavigation = function keyboardNavigation(_ref) {
   }
 
   if (!id && e.key === 'ArrowDown') {
-    setFocusedFolderId(data[0].id);
+    var _data$2;
+
+    setFocusedFolderId((_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.id);
     return;
   }
 
@@ -141,9 +145,13 @@ var keyboardNavigation = function keyboardNavigation(_ref) {
 
   if (e.key === 'ArrowUp') {
     if (elementWithKeyFocus.index > 0) {
+      var _elementWithKeyFocus$2;
+
       // Move upwards to the parent folder
-      setFocusedFolderId(elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1].id : undefined);
+      setFocusedFolderId(elementWithKeyFocus.parent ? (_elementWithKeyFocus$2 = elementWithKeyFocus.parent[elementWithKeyFocus.index - 1]) === null || _elementWithKeyFocus$2 === void 0 ? void 0 : _elementWithKeyFocus$2.id : undefined);
     } else if (elementWithKeyFocus.paths.length > 0) {
+      var _findParent$parentsCu;
+
       elementWithKeyFocus.paths.pop();
       var findParent = data;
       elementWithKeyFocus.paths.forEach(function (index) {
@@ -153,17 +161,19 @@ var keyboardNavigation = function keyboardNavigation(_ref) {
         var id = _ref3.id;
         return id === elementWithKeyFocus.parentId;
       });
-      setFocusedFolderId(findParent[parentsCurrentIndex].id);
+      setFocusedFolderId((_findParent$parentsCu = findParent[parentsCurrentIndex]) === null || _findParent$parentsCu === void 0 ? void 0 : _findParent$parentsCu.id);
     }
 
     return;
   }
 
   if (elementWithKeyFocus.isOpen) {
-    var _elementWithKeyFocus$2;
+    var _elementWithKeyFocus$3;
+
+    if ((_elementWithKeyFocus$3 = elementWithKeyFocus.data) === null || _elementWithKeyFocus$3 === void 0 ? void 0 : _elementWithKeyFocus$3.length) {
+      var _elementWithKeyFocus$4;
 
-    if ((_elementWithKeyFocus$2 = elementWithKeyFocus.data) === null || _elementWithKeyFocus$2 === void 0 ? void 0 : _elementWithKeyFocus$2.length) {
-      setFocusedFolderId(elementWithKeyFocus.data[0].id);
+      setFocusedFolderId((_elementWithKeyFocus$4 = elementWithKeyFocus.data[0]) === null || _elementWithKeyFocus$4 === void 0 ? void 0 : _elementWithKeyFocus$4.id);
     } else {
       // move to next child of parent if any... need new traverse :-/
       traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
@@ -172,9 +182,11 @@ var keyboardNavigation = function keyboardNavigation(_ref) {
     return;
   }
 
-  if (elementWithKeyFocus.parent && elementWithKeyFocus.index < ((_elementWithKeyFocus$3 = elementWithKeyFocus.parent) === null || _elementWithKeyFocus$3 === void 0 ? void 0 : _elementWithKeyFocus$3.length) - 1) {
+  if (elementWithKeyFocus.parent && elementWithKeyFocus.index < ((_elementWithKeyFocus$5 = elementWithKeyFocus.parent) === null || _elementWithKeyFocus$5 === void 0 ? void 0 : _elementWithKeyFocus$5.length) - 1) {
+    var _elementWithKeyFocus$6;
+
     // Move downwards to the next child
-    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1].id);
+    setFocusedFolderId((_elementWithKeyFocus$6 = elementWithKeyFocus.parent[elementWithKeyFocus.index + 1]) === null || _elementWithKeyFocus$6 === void 0 ? void 0 : _elementWithKeyFocus$6.id);
     return;
   }
 

package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.types.d.ts

@@ -11,7 +11,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/lib/index.d.ts

@@ -45,7 +45,7 @@ export { default as AuthModal } from './User';
 export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './User';
 export { default as CreatedBy } from './CreatedBy';
 export { default as Breadcrumblist } from './Breadcrumblist';
-export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
 export { ResourceBox } from './ResourceBox';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
@@ -80,7 +80,7 @@ export { default as ContentPlaceholder } from './ContentPlaceholder';
 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/lib/index.js

@@ -95,7 +95,7 @@ var _exportNames = {
   Breadcrumblist: true,
   MessageBox: true,
   MessageBoxTag: true,
-  MessageBoxType: true,
+  MessageBanner: true,
   ResourceBox: true,
   AudioPlayer: true,
   initAudioPlayers: true,
@@ -179,7 +179,6 @@ var _exportNames = {
   Notion: true,
   ConceptNotion: true,
   BannerCard: true,
-  VerticalNavigation: true,
   Folder: true,
   FolderInput: true,
   ListResource: true,
@@ -714,19 +713,19 @@ Object.defineProperty(exports, "Breadcrumblist", {
 Object.defineProperty(exports, "MessageBox", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBox;
+    return _Messages.MessageBox;
   }
 });
 Object.defineProperty(exports, "MessageBoxTag", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBoxTag;
+    return _Messages.MessageBoxTag;
   }
 });
-Object.defineProperty(exports, "MessageBoxType", {
+Object.defineProperty(exports, "MessageBanner", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBoxType;
+    return _Messages.MessageBanner;
   }
 });
 Object.defineProperty(exports, "ResourceBox", {
@@ -1227,12 +1226,6 @@ Object.defineProperty(exports, "BannerCard", {
     return _BannerCard.BannerCard;
   }
 });
-Object.defineProperty(exports, "VerticalNavigation", {
-  enumerable: true,
-  get: function get() {
-    return _MyNdla.VerticalNavigation;
-  }
-});
 Object.defineProperty(exports, "Folder", {
   enumerable: true,
   get: function get() {
@@ -1361,7 +1354,7 @@ var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 
 var _Breadcrumblist = _interopRequireDefault(require("./Breadcrumblist"));
 
-var _MessageBox = require("./MessageBox");
+var _Messages = require("./Messages");
 
 var _ResourceBox = require("./ResourceBox");
 

package/lib/locale/messages-en.d.ts

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +127,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +138,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-en.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Edit foldername',
+      "delete": 'Delete'
+    },
     createFolder: 'Create folder',
     newFolder: {
       placeholder: 'Add foldername',
@@ -36,7 +40,8 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Add to tag',
+    label: 'Add tag',
+    placeholder: 'Enter tag name',
     removeTag: 'Remove tag {{name}}',
     hideAllTags: 'Hide all tags',
     showAllTags: 'Show all tags'
@@ -940,6 +945,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Close fact box'
   },
   myNdla: {
+    myNDLA: 'My NDLA',
     resources: '{{count}} Resource',
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',
@@ -951,6 +957,8 @@ var messages = _objectSpread(_objectSpread({
     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',

package/lib/locale/messages-nb.d.ts

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +127,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +138,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-nb.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   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'
   },
@@ -940,6 +945,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -951,6 +957,8 @@ var messages = _objectSpread(_objectSpread({
     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',

package/lib/locale/messages-nn.d.ts

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +127,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +138,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-nn.js

@@ -29,15 +29,20 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenamn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
-      placeholder: 'Skriv navn på mappe',
+      placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe'
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag namn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -940,6 +945,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',
@@ -951,6 +957,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
+    addToFavourites: 'Legg til i mine favorittar',
+    alreadyFavourited: 'Allereie lagt til i mine favorittar',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

package/lib/locale/messages-se.d.ts

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +127,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +138,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-se.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Legg til tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alla tags',
     showAllTags: 'Vis alla tags'
   },
@@ -940,6 +945,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -951,6 +957,8 @@ var messages = _objectSpread(_objectSpread({
     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',

package/lib/locale/messages-sma.d.ts

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +127,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +138,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-sma.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   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'
   },
@@ -940,6 +945,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -951,6 +957,8 @@ var messages = _objectSpread(_objectSpread({
     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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "16.2.0",
+  "version": "18.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.5.0",
-    "@ndla/carousel": "^1.2.10",
-    "@ndla/core": "^2.2.0",
+    "@ndla/button": "^2.6.0",
+    "@ndla/carousel": "^1.2.11",
+    "@ndla/core": "^2.3.0",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.9.0",
-    "@ndla/licenses": "^5.0.1",
-    "@ndla/modal": "^1.2.11",
-    "@ndla/notion": "^3.1.15",
-    "@ndla/safelink": "^2.0.6",
-    "@ndla/switch": "^0.1.6",
-    "@ndla/tabs": "^1.1.9",
-    "@ndla/tooltip": "^2.1.1",
+    "@ndla/icons": "^1.10.0",
+    "@ndla/licenses": "^5.0.2",
+    "@ndla/modal": "^1.2.12",
+    "@ndla/notion": "^3.1.17",
+    "@ndla/safelink": "^2.0.8",
+    "@ndla/switch": "^0.1.7",
+    "@ndla/tabs": "^1.1.10",
+    "@ndla/tooltip": "^2.1.2",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "97d16d07a6f4d4fc04c5114f01aac6c9480b0341"
+  "gitHead": "841ff68015ec6032bed44a7c25eea2dfd9088a64"
 }

package/src/Article/Article.tsx

@@ -24,7 +24,7 @@ import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
 import ArticleAccessMessage from './ArticleAccessMessage';
-import MessageBox from '../MessageBox/MessageBox';
+import MessageBox from '../Messages/MessageBox';
 import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const classes = new BEMHelper({

package/src/Article/ArticleFavoritesButton.tsx

@@ -23,14 +23,15 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
   const removeFromFavoritesLabel = t('myNdla.resource.addToMyNdla');
   const addToFavoritesLabel = t('myNdla.resource.addedToMyNdla');
   return (
-    <Tooltip tooltip={isFavorite ? removeFromFavoritesLabel : addToFavoritesLabel}>
+    <Tooltip tooltip={isFavorite ? addToFavoritesLabel : removeFromFavoritesLabel}>
       <IconButtonDualStates
-        ariaLabelActive={addToFavoritesLabel}
-        ariaLabelInActive={removeFromFavoritesLabel}
+        ariaLabelActive={t('myNdla.addToFavourites')}
+        ariaLabelInActive={t('myNdla.alreadyFavourited')}
         activeIcon={<Heart />}
         inactiveIcon={<HeartOutline />}
         active={isFavorite}
         size="small"
+        ghostPill
         onClick={() => onToggleAddToFavorites(articleId, !isFavorite)}
       />
     </Tooltip>

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -18,7 +18,7 @@ import {
 } from '@ndla/icons/action';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
-import MessageBoxTag from '../MessageBox/MessageBoxTag';
+import MessageBoxTag from '../Messages/MessageBoxTag';
 import { useMastheadHeight } from '../Masthead';
 
 type WrapperProps = {

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Tabs from '@ndla/tabs';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
-import { MessageBox } from '../MessageBox';
+import { MessageBox } from '../Messages';
 // @ts-ignore
 import { ToggleItem } from '../Filter';