@ndla/ui 21.0.0 → 22.0.2

package/lib/index.js

@@ -183,7 +183,10 @@ var _exportNames = {
   ListResource: true,
   BlockResource: true,
   TagSelector: true,
-  SnackBar: true,
+  SnackbarProvider: true,
+  useSnack: true,
+  BaseSnack: true,
+  DefaultSnackbar: true,
   InfoBlock: true,
   TreeStructure: true
 };
@@ -1249,10 +1252,28 @@ Object.defineProperty(exports, "TagSelector", {
     return _TagSelector.TagSelector;
   }
 });
-Object.defineProperty(exports, "SnackBar", {
+Object.defineProperty(exports, "SnackbarProvider", {
   enumerable: true,
   get: function get() {
-    return _SnackBar.SnackBar;
+    return _SnackBar.SnackbarProvider;
+  }
+});
+Object.defineProperty(exports, "useSnack", {
+  enumerable: true,
+  get: function get() {
+    return _SnackBar.useSnack;
+  }
+});
+Object.defineProperty(exports, "BaseSnack", {
+  enumerable: true,
+  get: function get() {
+    return _SnackBar.BaseSnack;
+  }
+});
+Object.defineProperty(exports, "DefaultSnackbar", {
+  enumerable: true,
+  get: function get() {
+    return _SnackBar.DefaultSnackbar;
   }
 });
 Object.defineProperty(exports, "InfoBlock", {

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

@@ -63,7 +63,10 @@ declare const messages: {
             delete: string;
             edit: string;
             missingName: string;
+            folderDeleted: string;
         };
+        tags: string;
+        tags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -74,6 +77,7 @@ declare const messages: {
         favourites: string;
         addToFavourites: string;
         alreadyFavourited: string;
+        alreadyInFolder: string;
         help: string;
         more: string;
         listView: string;
@@ -82,6 +86,9 @@ declare const messages: {
         myPage: {
             myPage: string;
             logout: string;
+            loginTerms: string;
+            loginResourcePitch: string;
+            loginWelcome: string;
             deleteAccount: string;
             welcome: string;
             read: {
@@ -118,9 +125,17 @@ declare const messages: {
         resource: {
             add: string;
             remove: string;
+            removeTitle: string;
+            confirmRemove: string;
             copyLink: string;
+            linkCopied: string;
             addToMyNdla: string;
             addedToMyNdla: string;
+            addedToFolder: string;
+            removedFromFolder: string;
+            titleUpdated: string;
+            tagsUpdated: string;
+            show: string;
         };
     };
     snackbar: {

package/lib/locale/messages-en.js

@@ -957,8 +957,11 @@ var messages = _objectSpread(_objectSpread({
       folder: 'Folder',
       "delete": 'Delete',
       edit: 'Edit',
-      missingName: 'Folder name required'
+      missingName: 'Folder name required',
+      folderDeleted: '"{{folderName}}" deleted'
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',
@@ -969,6 +972,7 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favourites',
     addToFavourites: 'Add to my favourites',
     alreadyFavourited: 'Already in my favourites',
+    alreadyInFolder: 'Already in folder',
     help: 'Help',
     more: 'More options',
     listView: 'List view',
@@ -977,6 +981,9 @@ var messages = _objectSpread(_objectSpread({
     myPage: {
       myPage: 'My page',
       logout: 'Log out of My NDLA',
+      loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
+      loginResourcePitch: 'Do you want to favorite this page?',
+      loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',
       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: {
@@ -1013,9 +1020,17 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       add: 'Add folder/tag',
       remove: 'Remove',
+      removeTitle: 'Remove resource',
+      confirmRemove: 'Are you sure you want to remove the resource from this folder?',
       copyLink: 'Copy link to this page',
+      linkCopied: 'Copied to clipboard',
       addToMyNdla: 'Add to My NDLA',
-      addedToMyNdla: 'Added to My NDLA'
+      addedToMyNdla: 'Added to My NDLA',
+      addedToFolder: 'Resource added to "{{folderName}}"',
+      removedFromFolder: 'Removed from "{{folderName}}"',
+      titleUpdated: 'Title updated',
+      tagsUpdated: 'Tags updated',
+      show: 'Show'
     }
   },
   snackbar: {

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

@@ -63,7 +63,10 @@ declare const messages: {
             delete: string;
             edit: string;
             missingName: string;
+            folderDeleted: string;
         };
+        tags: string;
+        tags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -74,6 +77,7 @@ declare const messages: {
         favourites: string;
         addToFavourites: string;
         alreadyFavourited: string;
+        alreadyInFolder: string;
         help: string;
         more: string;
         listView: string;
@@ -83,6 +87,9 @@ declare const messages: {
             myPage: string;
             deleteAccount: string;
             logout: string;
+            loginTerms: string;
+            loginResourcePitch: string;
+            loginWelcome: string;
             welcome: string;
             read: {
                 our: string;
@@ -118,9 +125,17 @@ declare const messages: {
         resource: {
             add: string;
             remove: string;
+            removeTitle: string;
+            confirmRemove: string;
             copyLink: string;
+            linkCopied: string;
             addToMyNdla: string;
             addedToMyNdla: string;
+            addedToFolder: string;
+            removedFromFolder: string;
+            titleUpdated: string;
+            tagsUpdated: string;
+            show: string;
         };
     };
     snackbar: {

package/lib/locale/messages-nb.js

@@ -957,8 +957,11 @@ var messages = _objectSpread(_objectSpread({
       folder: 'Mappe',
       "delete": 'Slett',
       edit: 'Rediger',
-      missingName: 'Mappenavn er påkrevd'
+      missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er slettet'
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
@@ -969,6 +972,7 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
+    alreadyInFolder: 'Finnes allerede i mappen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',
@@ -978,6 +982,9 @@ var messages = _objectSpread(_objectSpread({
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      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: {
         our: 'Les våre',
@@ -1013,9 +1020,17 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen fra denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
-      addedToMyNdla: 'Lagt i Min NDLA'
+      addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis'
     }
   },
   snackbar: {

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

@@ -63,7 +63,10 @@ declare const messages: {
             delete: string;
             edit: string;
             missingName: string;
+            folderDeleted: string;
         };
+        tags: string;
+        tags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -74,6 +77,7 @@ declare const messages: {
         favourites: string;
         addToFavourites: string;
         alreadyFavourited: string;
+        alreadyInFolder: string;
         help: string;
         more: string;
         listView: string;
@@ -83,6 +87,9 @@ declare const messages: {
             myPage: string;
             deleteAccount: string;
             logout: string;
+            loginTerms: string;
+            loginResourcePitch: string;
+            loginWelcome: string;
             welcome: string;
             read: {
                 our: string;
@@ -118,9 +125,17 @@ declare const messages: {
         resource: {
             add: string;
             remove: string;
+            removeTitle: string;
+            confirmRemove: string;
             copyLink: string;
+            linkCopied: string;
             addToMyNdla: string;
             addedToMyNdla: string;
+            addedToFolder: string;
+            removedFromFolder: string;
+            titleUpdated: string;
+            tagsUpdated: string;
+            show: string;
         };
     };
     snackbar: {

package/lib/locale/messages-nn.js

@@ -957,8 +957,11 @@ var messages = _objectSpread(_objectSpread({
       folder: 'Mappe',
       "delete": 'Slett',
       edit: 'Rediger',
-      missingName: 'Mappenavn er påkrevd'
+      missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta'
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',
     myFolders: 'Mine mapper',
@@ -969,6 +972,7 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favorittar',
     addToFavourites: 'Legg til i mine favorittar',
     alreadyFavourited: 'Allereie lagt til i mine favorittar',
+    alreadyInFolder: 'Finnes allereie i mappa',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',
@@ -978,6 +982,9 @@ var messages = _objectSpread(_objectSpread({
       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?',
+      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: {
         our: 'Les våre',
@@ -1013,9 +1020,17 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til sida',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
-      addedToMyNdla: 'Lagt i Min NDLA'
+      addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis'
     }
   },
   snackbar: {

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

@@ -63,7 +63,10 @@ declare const messages: {
             delete: string;
             edit: string;
             missingName: string;
+            folderDeleted: string;
         };
+        tags: string;
+        tags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -74,6 +77,7 @@ declare const messages: {
         favourites: string;
         addToFavourites: string;
         alreadyFavourited: string;
+        alreadyInFolder: string;
         help: string;
         more: string;
         listView: string;
@@ -83,6 +87,9 @@ declare const messages: {
             myPage: string;
             deleteAccount: string;
             logout: string;
+            loginTerms: string;
+            loginResourcePitch: string;
+            loginWelcome: string;
             welcome: string;
             read: {
                 our: string;
@@ -118,9 +125,17 @@ declare const messages: {
         resource: {
             add: string;
             remove: string;
+            removeTitle: string;
+            confirmRemove: string;
             copyLink: string;
+            linkCopied: string;
             addToMyNdla: string;
             addedToMyNdla: string;
+            addedToFolder: string;
+            removedFromFolder: string;
+            titleUpdated: string;
+            tagsUpdated: string;
+            show: string;
         };
     };
     snackbar: {

package/lib/locale/messages-se.js

@@ -957,8 +957,11 @@ var messages = _objectSpread(_objectSpread({
       folder: 'Mappe',
       "delete": 'Slett',
       edit: 'Rediger',
-      missingName: 'Mappenavn er påkrevd'
+      missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta'
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
@@ -969,6 +972,7 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
+    alreadyInFolder: 'Finnes allerede i mappen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',
@@ -978,6 +982,9 @@ var messages = _objectSpread(_objectSpread({
       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?',
+      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: {
         our: 'Les våre',
@@ -1013,9 +1020,17 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
-      addedToMyNdla: 'Lagt i Min NDLA'
+      addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis'
     }
   },
   snackbar: {

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

@@ -63,7 +63,10 @@ declare const messages: {
             delete: string;
             edit: string;
             missingName: string;
+            folderDeleted: string;
         };
+        tags: string;
+        tags_plural: string;
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
         myFolders: string;
@@ -74,6 +77,7 @@ declare const messages: {
         favourites: string;
         addToFavourites: string;
         alreadyFavourited: string;
+        alreadyInFolder: string;
         help: string;
         more: string;
         listView: string;
@@ -83,6 +87,9 @@ declare const messages: {
             myPage: string;
             deleteAccount: string;
             logout: string;
+            loginTerms: string;
+            loginResourcePitch: string;
+            loginWelcome: string;
             welcome: string;
             read: {
                 our: string;
@@ -118,9 +125,17 @@ declare const messages: {
         resource: {
             add: string;
             remove: string;
+            removeTitle: string;
+            confirmRemove: string;
             copyLink: string;
+            linkCopied: string;
             addToMyNdla: string;
             addedToMyNdla: string;
+            addedToFolder: string;
+            removedFromFolder: string;
+            titleUpdated: string;
+            tagsUpdated: string;
+            show: string;
         };
     };
     snackbar: {

package/lib/locale/messages-sma.js

@@ -957,8 +957,11 @@ var messages = _objectSpread(_objectSpread({
       folder: 'Mappe',
       "delete": 'Slett',
       edit: 'Rediger',
-      missingName: 'Mappenavn er påkrevd'
+      missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta'
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
@@ -969,6 +972,7 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
+    alreadyInFolder: 'Finnes allerede i mappen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',
@@ -978,6 +982,9 @@ var messages = _objectSpread(_objectSpread({
       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?',
+      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: {
         our: 'Les våre',
@@ -1013,9 +1020,17 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
-      addedToMyNdla: 'Lagt i Min NDLA'
+      addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis'
     }
   },
   snackbar: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "21.0.0",
+  "version": "22.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.1.5",
-    "@ndla/carousel": "^1.2.14",
-    "@ndla/core": "^2.3.2",
-    "@ndla/forms": "^3.1.2",
+    "@ndla/button": "^3.2.1",
+    "@ndla/carousel": "^1.2.15",
+    "@ndla/core": "^2.3.3",
+    "@ndla/forms": "^3.1.3",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.11.2",
-    "@ndla/licenses": "^5.0.5",
-    "@ndla/modal": "^1.2.15",
-    "@ndla/notion": "^3.1.25",
-    "@ndla/safelink": "^2.2.3",
-    "@ndla/switch": "^0.1.9",
-    "@ndla/tabs": "^1.1.13",
-    "@ndla/tooltip": "^2.1.4",
+    "@ndla/icons": "^1.11.3",
+    "@ndla/licenses": "^5.0.6",
+    "@ndla/modal": "^1.2.16",
+    "@ndla/notion": "^3.1.27",
+    "@ndla/safelink": "^2.2.5",
+    "@ndla/switch": "^0.1.10",
+    "@ndla/tabs": "^1.1.14",
+    "@ndla/tooltip": "^2.1.5",
     "@ndla/types-learningpath-api": "^0.0.12",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "57a015c6fe4a2106bb88d0f2ebea44592aa4d29e"
+  "gitHead": "d26b1f085bcef66dcc1d8ed829072ab1223d28eb"
 }

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -47,7 +47,7 @@ const ActionBreadcrumb = ({ items, actionItems }: Props) => {
     if (totalCount === 1) {
       return <StyledSpan title={item.name}>{item.name}</StyledSpan>;
     }
-    if (item.index === totalCount - 1) {
+    if (item.index === totalCount - 1 && actionItems.length > 0) {
       return (
         <MenuButton menuItems={actionItems} size="small">
           <StyledSpan title={item.name}>{item.name}</StyledSpan>

package/src/ContentLoader/index.tsx

@@ -6,18 +6,14 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, SVGProps } from 'react';
 import { uuid } from '@ndla/util';
 
-interface Props {
+interface Props extends Omit<SVGProps<SVGSVGElement>, 'viewBox'> {
   children?: ReactNode;
-  speed?: number;
-  width?: number;
-  height?: number;
   primaryColor?: string;
   secondaryColor?: string;
-  preserveAspectRatio?: string;
-  className?: string;
+  viewBox?: string | null;
 }
 
 const ContentLoader = ({
@@ -29,18 +25,22 @@ const ContentLoader = ({
   primaryColor = '#f0f0f0',
   secondaryColor = '#e0e0e0',
   speed = 2,
+  viewBox: viewBoxProp,
   ...rest
 }: Props) => {
   const idClip = uuid();
   const idGradient = uuid();
+  const viewBox = viewBoxProp === undefined ? `0 0 ${width} ${height}` : viewBoxProp;
 
   return (
     <svg
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={viewBox ?? undefined}
       version="1.1"
       preserveAspectRatio={preserveAspectRatio}
       className={className}
-      {...rest}>
+      {...rest}
+      height={typeof height === 'string' ? height : undefined}
+      width={typeof width === 'string' ? width : undefined}>
       <rect
         style={{ fill: `url(#${idGradient})` }}
         clipPath={`url(#${idClip})`}

package/src/MyNdla/Resource/Folder.tsx

@@ -141,7 +141,7 @@ const Folder = ({ link, title, subFolders, subResources, type = 'list', menuItem
       <FolderTitle>{title}</FolderTitle>
       <IconCount layoutType={type} type={'folder'} count={subFolders} />
       <IconCount layoutType={type} type={'resource'} count={subResources} />
-      {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
+      {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
     </FolderWrapper>
   );
 };