@ndla/ui 22.0.1 → 22.1.0

package/lib/locale/messages-nn.js

@@ -172,7 +172,8 @@ var messages = _objectSpread(_objectSpread({
     },
     contextModal: {
       button: '+ {{count}} fleire stader',
-      heading: 'Ressursen er brukt fleire stader'
+      heading: 'Ressursen er brukt fleire stader',
+      ariaLabel: 'Sjå fleire kontekstar'
     }
   },
   subjectPage: {
@@ -217,7 +218,8 @@ var messages = _objectSpread(_objectSpread({
   topicPage: {
     articleErrorDescription: 'Orsak, ein feil oppstod under lasting av emneskildringa.',
     topic: 'EMNE',
-    topics: 'Emne'
+    topics: 'Emne',
+    imageModal: 'Sjå biletet i full storleik'
   },
   welcomePage: {
     search: 'Søk',
@@ -275,6 +277,7 @@ var messages = _objectSpread(_objectSpread({
       toFrontpage: 'Til framsida',
       subjectOverview: 'Alle fag',
       title: 'Innhald',
+      modalLabel: 'Vel innhald',
       subjectPage: 'Fagframside',
       backToSubjectFrontpage: 'Tilbake til fagframsida',
       openFilter: 'Filter',
@@ -361,6 +364,7 @@ var messages = _objectSpread(_objectSpread({
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoplingar',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -383,7 +387,9 @@ var messages = _objectSpread(_objectSpread({
     competenceTabCorelabel: 'Kjerneelement',
     competenceGoalItem: {
       title: 'Kompetansemål og vurdering'
-    }
+    },
+    licenseData: 'Inneheld data under',
+    licenseFrom: 'tilgjengeleggjort på'
   },
   subject: {
     associatedTopics: 'Tilhøyrande emne'
@@ -923,7 +929,9 @@ var messages = _objectSpread(_objectSpread({
     modal: {
       collectedInfo: 'Vi har henta denne informasjonen om deg frå Feide:',
       general: 'Ressursane som krev pålogging med Feide, vises med ikonet',
-      topic: ' Logg inn med Feide for å få tilgang til dette emnet.'
+      topic: ' Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukarinfo',
+      isNotAuth: 'Logg inn med Feide'
     },
     resource: {
       accessDenied: 'Vi beklagar, men denne ressursen er berre for lærarar innlogga med Feide.'
@@ -957,7 +965,8 @@ 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',
@@ -1022,8 +1031,14 @@ var messages = _objectSpread(_objectSpread({
       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

@@ -29,6 +29,8 @@ declare const messages: {
             collectedInfo: string;
             general: string;
             topic: string;
+            isAuth: string;
+            isNotAuth: string;
         };
         resource: {
             accessDenied: string;
@@ -63,6 +65,7 @@ declare const messages: {
             delete: string;
             edit: string;
             missingName: string;
+            folderDeleted: string;
         };
         tags: string;
         tags_plural: string;
@@ -127,8 +130,14 @@ declare const messages: {
             removeTitle: string;
             confirmRemove: string;
             copyLink: string;
+            linkCopied: string;
             addToMyNdla: string;
             addedToMyNdla: string;
+            addedToFolder: string;
+            removedFromFolder: string;
+            titleUpdated: string;
+            tagsUpdated: string;
+            show: string;
         };
     };
     snackbar: {
@@ -304,6 +313,7 @@ declare const messages: {
         contextModal: {
             button: string;
             heading: string;
+            ariaLabel: string;
         };
     };
     subjectPage: {
@@ -349,6 +359,7 @@ declare const messages: {
         articleErrorDescription: string;
         topic: string;
         topics: string;
+        imageModal: string;
     };
     welcomePage: {
         search: string;
@@ -406,6 +417,7 @@ declare const messages: {
             toFrontpage: string;
             subjectOverview: string;
             title: string;
+            modalLabel: string;
             subjectPage: string;
             backToSubjectFrontpage: string;
             openFilter: string;
@@ -516,6 +528,7 @@ declare const messages: {
     competenceGoals: {
         competenceGoal: string;
         title: string;
+        modalText: string;
         closeCompetenceGoals: string;
         showCompetenceGoals: string;
         openCompentenceGoalsFilter: string;
@@ -539,6 +552,8 @@ declare const messages: {
         competenceGoalItem: {
             title: string;
         };
+        licenseData: string;
+        licenseFrom: string;
     };
     subject: {
         associatedTopics: string;

package/lib/locale/messages-se.js

@@ -172,7 +172,8 @@ var messages = _objectSpread(_objectSpread({
     },
     contextModal: {
       button: '+ {{count}} flere steder',
-      heading: 'Ressursen er brukt flere steder'
+      heading: 'Ressursen er brukt flere steder',
+      ariaLabel: 'Se flere kontekster'
     }
   },
   subjectPage: {
@@ -217,7 +218,8 @@ var messages = _objectSpread(_objectSpread({
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
     topic: 'EMNE',
-    topics: 'Emner'
+    topics: 'Emner',
+    imageModal: 'Se bildet i full størrelse'
   },
   welcomePage: {
     search: 'Søk',
@@ -275,6 +277,7 @@ var messages = _objectSpread(_objectSpread({
       toFrontpage: 'Til forsiden',
       subjectOverview: 'Alle fag',
       title: 'Innhold',
+      modalLabel: 'Velg innhold',
       subjectPage: 'Fagforside',
       backToSubjectFrontpage: 'Tilbake til fagforsiden',
       openFilter: 'Filter',
@@ -361,6 +364,7 @@ var messages = _objectSpread(_objectSpread({
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoblinger',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -383,7 +387,9 @@ var messages = _objectSpread(_objectSpread({
     competenceTabCorelabel: 'Kjerneelement',
     competenceGoalItem: {
       title: 'Kompetansemål og vurdering'
-    }
+    },
+    licenseData: 'Inneholder data under',
+    licenseFrom: 'tilgjengeliggjort på'
   },
   subject: {
     associatedTopics: 'Tilhørende emner'
@@ -923,7 +929,9 @@ var messages = _objectSpread(_objectSpread({
     modal: {
       collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
-      topic: 'Logg inn med Feide for å få tilgang til dette emnet.'
+      topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukerinfo',
+      isNotAuth: 'Logg inn med Feide'
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'
@@ -957,7 +965,8 @@ 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',
@@ -1022,8 +1031,14 @@ var messages = _objectSpread(_objectSpread({
       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

@@ -29,6 +29,8 @@ declare const messages: {
             collectedInfo: string;
             general: string;
             topic: string;
+            isAuth: string;
+            isNotAuth: string;
         };
         resource: {
             accessDenied: string;
@@ -63,6 +65,7 @@ declare const messages: {
             delete: string;
             edit: string;
             missingName: string;
+            folderDeleted: string;
         };
         tags: string;
         tags_plural: string;
@@ -127,8 +130,14 @@ declare const messages: {
             removeTitle: string;
             confirmRemove: string;
             copyLink: string;
+            linkCopied: string;
             addToMyNdla: string;
             addedToMyNdla: string;
+            addedToFolder: string;
+            removedFromFolder: string;
+            titleUpdated: string;
+            tagsUpdated: string;
+            show: string;
         };
     };
     snackbar: {
@@ -304,6 +313,7 @@ declare const messages: {
         contextModal: {
             button: string;
             heading: string;
+            ariaLabel: string;
         };
     };
     subjectPage: {
@@ -349,6 +359,7 @@ declare const messages: {
         articleErrorDescription: string;
         topic: string;
         topics: string;
+        imageModal: string;
     };
     welcomePage: {
         search: string;
@@ -406,6 +417,7 @@ declare const messages: {
             toFrontpage: string;
             subjectOverview: string;
             title: string;
+            modalLabel: string;
             subjectPage: string;
             backToSubjectFrontpage: string;
             openFilter: string;
@@ -516,6 +528,7 @@ declare const messages: {
     competenceGoals: {
         competenceGoal: string;
         title: string;
+        modalText: string;
         closeCompetenceGoals: string;
         showCompetenceGoals: string;
         openCompentenceGoalsFilter: string;
@@ -539,6 +552,8 @@ declare const messages: {
         competenceGoalItem: {
             title: string;
         };
+        licenseData: string;
+        licenseFrom: string;
     };
     subject: {
         associatedTopics: string;

package/lib/locale/messages-sma.js

@@ -172,7 +172,8 @@ var messages = _objectSpread(_objectSpread({
     },
     contextModal: {
       button: '+ {{count}} flere steder',
-      heading: 'Ressursen er brukt flere steder'
+      heading: 'Ressursen er brukt flere steder',
+      ariaLabel: 'Se flere kontekster'
     }
   },
   subjectPage: {
@@ -217,7 +218,8 @@ var messages = _objectSpread(_objectSpread({
   topicPage: {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
     topic: 'EMNE',
-    topics: 'Emner'
+    topics: 'Emner',
+    imageModal: 'Se bildet i full størrelse'
   },
   welcomePage: {
     search: 'Søk',
@@ -275,6 +277,7 @@ var messages = _objectSpread(_objectSpread({
       toFrontpage: 'Til forsiden',
       subjectOverview: 'Alle fag',
       title: 'Innhold',
+      modalLabel: 'Velg innhold',
       subjectPage: 'Fagforside',
       backToSubjectFrontpage: 'Tilbake til fagforsiden',
       openFilter: 'Filter',
@@ -361,6 +364,7 @@ var messages = _objectSpread(_objectSpread({
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoblinger',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -383,7 +387,9 @@ var messages = _objectSpread(_objectSpread({
     competenceTabCorelabel: 'Kjerneelement',
     competenceGoalItem: {
       title: 'Kompetansemål og vurdering'
-    }
+    },
+    licenseData: 'Inneholder data under',
+    licenseFrom: 'tilgjengeliggjort på'
   },
   subject: {
     associatedTopics: 'Tilhørende emner'
@@ -923,7 +929,9 @@ var messages = _objectSpread(_objectSpread({
     modal: {
       collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
-      topic: 'Logg inn med Feide for å få tilgang til dette emnet.'
+      topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukerinfo',
+      isNotAuth: 'Logg inn med Feide'
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'
@@ -957,7 +965,8 @@ 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',
@@ -1022,8 +1031,14 @@ var messages = _objectSpread(_objectSpread({
       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/types.d.ts

@@ -96,6 +96,7 @@ export declare type CompetenceGoalsItemType = {
         type: 'LK06' | 'LK20';
     }[];
     selected?: boolean;
+    isOembed?: boolean;
 };
 export declare type NotionMedia = {
     type: 'video' | 'other';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "22.0.1",
+  "version": "22.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,16 +31,16 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.2.0",
+    "@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.3",
     "@ndla/licenses": "^5.0.6",
-    "@ndla/modal": "^1.2.16",
-    "@ndla/notion": "^3.1.26",
-    "@ndla/safelink": "^2.2.4",
+    "@ndla/modal": "^1.2.17",
+    "@ndla/notion": "^3.1.28",
+    "@ndla/safelink": "^2.2.5",
     "@ndla/switch": "^0.1.10",
     "@ndla/tabs": "^1.1.14",
     "@ndla/tooltip": "^2.1.5",
@@ -68,7 +68,8 @@
     "i18next": "^20.3.1",
     "prop-types": "^15.8.1",
     "react": "^16.8.4 || ^17.0.0",
-    "react-i18next": "^11.11.0"
+    "react-i18next": "^11.11.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
@@ -83,5 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b4b0a48ca5d00d92fadafa85326a8ee86b91f152"
+  "gitHead": "f4d197d1841b544f533371350b6c23ebce94012f"
 }

package/src/Article/ArticleByline.tsx

@@ -102,6 +102,8 @@ const ArticleByline = ({
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
   const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
 
+  const buttonId = 'popupUseContent';
+
   return (
     <Wrapper>
       <div>
@@ -124,8 +126,9 @@ const ArticleByline = ({
       <ButtonWrapper>
         {licenseBox && (
           <Modal
+            labelledBy={buttonId}
             activateButton={
-              <Button size="small" borderShape="rounded" outline>
+              <Button id={buttonId} size="small" borderShape="rounded" outline>
                 {t('article.useContent')}
               </Button>
             }

package/src/Article/ArticleNotions.tsx

@@ -165,14 +165,17 @@ type ArticleNotionsProps = {
 export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight, type }: ArticleNotionsProps) => {
   const { t } = useTranslation();
   const leftOffset = `${buttonOffsetRight - 32}px`;
+  const headingId = 'popupNotionHeading';
+
   return (
     <ArticleNotionsContainer>
       <Modal
+        labelledBy={headingId}
         activateButton={
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
             <Explanation />
-            <span>{t('article.notionsPrompt')}</span>
+            <span id={headingId}>{t('article.notionsPrompt')}</span>
           </NotionsTrigger>
         }
         size="large"

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -60,7 +60,7 @@ const GoalSearchWrapper = styled.div`
   }
 `;
 
-const CompetenceGoalItem = ({ title, goals }: CompetenceGoalsItemType) => {
+const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType) => {
   const { t } = useTranslation();
   return (
     <GoalItem>
@@ -73,7 +73,11 @@ const CompetenceGoalItem = ({ title, goals }: CompetenceGoalsItemType) => {
                 <GoalListInnerTextWrapper>{goal.text}</GoalListInnerTextWrapper>
                 {goal.url && goal.type !== 'LK06' && (
                   <GoalSearchWrapper>
-                    <SearchButton to={goal.url} text={t('competenceGoals.competenceGoalResourceSearchText')} />
+                    <SearchButton
+                      to={goal.url}
+                      text={t('competenceGoals.competenceGoalResourceSearchText')}
+                      target={isOembed ? '_blank' : '_self'}
+                    />
                   </GoalSearchWrapper>
                 )}
               </GoalListElementInnerWrapper>

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -19,6 +19,7 @@ import CompetenceItem, { ListItemProp } from './CompetenceItem';
 type CompetenceProps = {
   list: ListItemProp[];
   highlightSearchBox?: boolean;
+  isOembed?: boolean;
 };
 
 const Wrapper = styled.div`
@@ -79,7 +80,7 @@ const HighlightText = styled.span`
   font-family: 'Shadows Into Light Two', cursive;
 `;
 
-const CompetenceGoalTab = ({ list, highlightSearchBox }: CompetenceProps) => {
+const CompetenceGoalTab = ({ list, highlightSearchBox, isOembed }: CompetenceProps) => {
   const [currentTabItem, setCurrentTab] = useState(list[0]);
   const { t } = useTranslation();
 
@@ -106,15 +107,15 @@ const CompetenceGoalTab = ({ list, highlightSearchBox }: CompetenceProps) => {
           <ArrowFeatureTips />
         </HighlightWrapper>
       )}
-      <CompetenceItem item={currentTabItem} />
+      <CompetenceItem item={currentTabItem} isOembed={isOembed} />
       <LicenseByline licenseRights={[CC, BY]}>
         <LicenseIconsTextWrapper>UDIR</LicenseIconsTextWrapper>
       </LicenseByline>
-      Inneholder data under{' '}
+      {`${t('competenceGoals.licenseData')} `}
       <SafeLink to="https://data.norge.no/nlod/no" target="_blank">
         NLOD
       </SafeLink>
-      , tilgjengeliggjort på{' '}
+      {`, ${t('competenceGoals.licenseFrom')} `}
       <SafeLink to="https://data.udir.no/" target="_blank">
         data.udir.no
       </SafeLink>

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -79,9 +79,10 @@ export type ListItemProp = {
 };
 export type ListItemProps = {
   item: ListItemProp;
+  isOembed?: boolean;
 };
 
-const CompetenceItem = ({ item }: ListItemProps) => {
+const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
   const { t } = useTranslation();
   const { type, groupedCompetenceGoals, groupedCoreElementItems } = item;
   switch (type) {
@@ -105,7 +106,13 @@ const CompetenceItem = ({ item }: ListItemProps) => {
                 {group.elements.length > 0 && (
                   <Goals>
                     {group.elements.map((goal) => (
-                      <CompetenceGoalItem key={goal.id} id={goal.id} title={goal.title} goals={goal.goals} />
+                      <CompetenceGoalItem
+                        key={goal.id}
+                        id={goal.id}
+                        title={goal.title}
+                        goals={goal.goals}
+                        isOembed={isOembed}
+                      />
                     ))}
                   </Goals>
                 )}

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -37,11 +37,12 @@ const IconWrapper = styled.span`
 type Props = {
   to: string;
   text: string;
+  target?: string;
 };
 
-const SearchButton = ({ to, text }: Props) => (
+const SearchButton = ({ to, text, target = '_self' }: Props) => (
   <Wrapper>
-    <SafeLink to={to}>
+    <SafeLink to={to} target={target}>
       <IconWrapper>
         <Search style={{ width: '24px', height: '24px' }} />
       </IconWrapper>

package/src/CompetenceGoals/CompetenceGoalsDialog.jsx

@@ -33,8 +33,11 @@ const HeadingWrapper = styled.h2`
 
 export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName, modalProps }) => {
   const { t } = useTranslation();
+  const iconId = 'popupCompetenceGoals';
+
   return (
     <Modal
+      labelledBy={iconId}
       {...modalProps}
       controllable
       isOpen={isOpen}
@@ -48,8 +51,8 @@ export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName,
           <ModalHeader modifier="menu">
             <HeaderWrapper>
               <HeadingWrapper>
-                <FooterHeaderIcon size="24px" style={{ marginRight: '20px' }} />
-                {'Utforsk læreplankoblinger'} {subjectName && ` \u2022 ${subjectName}`}
+                <FooterHeaderIcon id={iconId} size="24px" style={{ marginRight: '20px' }} />
+                {t('competenceGoals.modalText')} {subjectName && ` \u2022 ${subjectName}`}
               </HeadingWrapper>
               <ModalCloseButton onClick={close} title={t('competenceGoals.competenceGoalClose')} />
             </HeaderWrapper>

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/Filter/FilterButtons.tsx

@@ -128,6 +128,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
             </StyledButtonElementWrapper>
           ))}
           <Modal
+            label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
             size="fullscreen"
             animation="subtle"
             backgroundColor="white"