@ndla/ui 27.1.7 → 28.0.0

package/lib/locale/messages-sma.js

@@ -80,7 +80,7 @@ var messages = _objectSpread(_objectSpread({
     embed: 'Sett inn',
     notSupported: 'Det fungerte ikke å sette inn innholdet automatisk. Kopier kildekoden under for å sette inn på din side.'
   },
-  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommende'), _defineProperty(_subjectCategories, subjectCategories.COMMON_SUBJECTS, 'Fellesfag'), _defineProperty(_subjectCategories, subjectCategories.PROGRAMME_SUBJECTS, 'Programfag SF'), _defineProperty(_subjectCategories, subjectCategories.SPECIALIZED_SUBJECTS, 'Yrkesfag'), _subjectCategories),
+  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommende'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Andre ressurser'), _subjectCategories),
   subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamling'), _subjectTypes),
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
@@ -919,9 +919,9 @@ var messages = _objectSpread(_objectSpread({
     loggedInAs: 'Du er pålogget som {{role}}.',
     loggedInAsButton: 'Du er pålogget som {{role}}',
     role: {
-      employee: 'Lærer',
-      staff: 'Ansatt',
-      student: 'Elev'
+      employee: 'lærer',
+      staff: 'ansatt',
+      student: 'elev'
     },
     buttonLogIn: 'Logg inn med Feide',
     buttonLogOut: 'Logg ut',
@@ -936,7 +936,7 @@ var messages = _objectSpread(_objectSpread({
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'
     },
-    primarySchool: 'Hovedskole',
+    primarySchool: 'hovedskole',
     name: 'Navn',
     mail: 'E-post',
     username: 'Brukernavn',
@@ -945,7 +945,7 @@ var messages = _objectSpread(_objectSpread({
       teaching: 'Undervisningsgruppe',
       other: 'Andre grupper'
     },
-    wrongUserInfoDisclaimer: 'Dersom informasjon er feil, så må dette oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrar. Oversikt over brukarstøtte finst her: '
+    wrongUserInfoDisclaimer: 'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: '
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {
@@ -1003,16 +1003,16 @@ var messages = _objectSpread(_objectSpread({
       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 emneknagger.',
+      welcome: 'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: {
-        our: 'Les vår',
-        ours: 'Les våre'
+        read: 'Les',
+        our: ' vår.'
       },
-      privacy: 'personvernerklæring her',
+      privacy: 'personvernerklæringa',
       privacyLink: 'https://om.ndla.no/gdpr',
       questions: {
         question: 'Lurer du på noe?',
-        ask: 'Spør oss i chatten'
+        ask: 'Spør NDLA'
       },
       wishToDelete: 'Vil du ikke ha brukerprofil hos oss lenger?',
       terms: {
@@ -1025,16 +1025,16 @@ var messages = _objectSpread(_objectSpread({
       feide: 'Dette henter vi om deg gjennom Feide',
       feideWrongInfo: 'Dersom informasjon er feil, så må dette oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: feide.no/brukerstøtte',
       storageInfo: {
-        title: 'Slik lagrer du dine favorittressurser fra NDLA',
-        text: 'Klikk på hjerteknappen for å lagre en ressurs. Du vil da få mulighet til å lagre ressursen i en mappe.'
+        title: 'Slik lagrer du favorittressursene dine fra NDLA',
+        text: 'Klikk på hjerteknappen for å lagre en ressurs. Du vil da få mulighet til å lagre ressursen i ei mappe.'
       },
       folderInfo: {
-        title: 'Slik organiserer du dine favorittressurser i mapper',
-        text: 'Klikk på mine mapper i menyen til venstre for å komme til mappeoversikten. Her kan du opprette nye mapper og undermapper. Du kan også opprette en ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.'
+        title: 'Slik organiserer du favorittressursene dine i mapper',
+        text: 'Klikk på <strong>Mine mapper</strong> i menyen til venstre for å komme til mappeoversikten. Her kan du opprette nye mapper og undermapper. Du kan også opprette ei ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.'
       },
       tagInfo: {
-        title: 'Slik tagger du dine favorittressurser',
-        text: 'Når du lagrer en ressurs får du mulighet til å markere ressursen med en emneknagg. Emneknaggen er et nøkkelord du kan bruke til å finne tilbake til ressurser på tvers av mapper. Du finner alle emneknaggene du har brukt ved å velge mine emneknagger i venstremenyen. Her kan du også se hvilke ressurser du har markert med hver enkel emneknagg.'
+        title: 'Slik tagger du favorittressursene dine',
+        text: 'Når du lagrer en ressurs, får du mulighet til å markere ressursen med en emneknagg. Emneknaggen er et nøkkelord du kan bruke til å finne tilbake til ressurser på tvers av mapper. Du finner alle emneknaggene du har brukt, ved å velge <strong>Mine emneknagger</strong> i venstremenyen. Her kan du også se hvilke ressurser du har markert med hvilken emneknagg.'
       }
     },
     resource: {

package/lib/model/ContentType.d.ts

@@ -14,4 +14,22 @@ export declare const SOURCE_MATERIAL = "source-material";
 export declare const LEARNING_PATH = "learning-path";
 export declare const TOPIC = "topic";
 export declare const MULTIDISCIPLINARY_TOPIC = "multidisciplinary-topic";
+export declare const contentTypes: {
+    SUBJECT_MATERIAL: string;
+    TASKS_AND_ACTIVITIES: string;
+    ASSESSMENT_RESOURCES: string;
+    SUBJECT: string;
+    EXTERNAL_LEARNING_RESOURCES: string;
+    SOURCE_MATERIAL: string;
+    LEARNING_PATH: string;
+    TOPIC: string;
+    MULTIDISCIPLINARY_TOPIC: string;
+};
+export declare const RESOURCE_TYPE_LEARNING_PATH = "urn:resourcetype:learningPath";
+export declare const RESOURCE_TYPE_SUBJECT_MATERIAL = "urn:resourcetype:subjectMaterial";
+export declare const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = "urn:resourcetype:tasksAndActivities";
+export declare const RESOURCE_TYPE_ASSESSMENT_RESOURCES = "urn:resourcetype:reviewResource";
+export declare const RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = "urn:resourcetype:externalResource";
+export declare const RESOURCE_TYPE_SOURCE_MATERIAL = "urn:resourcetype:SourceMaterial";
 export declare const ListOfContentTypes: string[];
+export declare const contentTypeMapping: Record<string, string>;

package/lib/model/ContentType.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ListOfContentTypes = exports.MULTIDISCIPLINARY_TOPIC = exports.TOPIC = exports.LEARNING_PATH = exports.SOURCE_MATERIAL = exports.EXTERNAL_LEARNING_RESOURCES = exports.SUBJECT = exports.ASSESSMENT_RESOURCES = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = void 0;
+exports.contentTypeMapping = exports.ListOfContentTypes = exports.RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_LEARNING_PATH = exports.contentTypes = exports.MULTIDISCIPLINARY_TOPIC = exports.TOPIC = exports.LEARNING_PATH = exports.SOURCE_MATERIAL = exports.EXTERNAL_LEARNING_RESOURCES = exports.SUBJECT = exports.ASSESSMENT_RESOURCES = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = void 0;
+
+var _contentTypeMapping;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /**
  * Copyright (c) 2017-present, NDLA.
@@ -30,5 +34,31 @@ var TOPIC = 'topic';
 exports.TOPIC = TOPIC;
 var MULTIDISCIPLINARY_TOPIC = 'multidisciplinary-topic';
 exports.MULTIDISCIPLINARY_TOPIC = MULTIDISCIPLINARY_TOPIC;
+var contentTypes = {
+  SUBJECT_MATERIAL: SUBJECT_MATERIAL,
+  TASKS_AND_ACTIVITIES: TASKS_AND_ACTIVITIES,
+  ASSESSMENT_RESOURCES: ASSESSMENT_RESOURCES,
+  SUBJECT: SUBJECT,
+  EXTERNAL_LEARNING_RESOURCES: EXTERNAL_LEARNING_RESOURCES,
+  SOURCE_MATERIAL: SOURCE_MATERIAL,
+  LEARNING_PATH: LEARNING_PATH,
+  TOPIC: TOPIC,
+  MULTIDISCIPLINARY_TOPIC: MULTIDISCIPLINARY_TOPIC
+};
+exports.contentTypes = contentTypes;
+var RESOURCE_TYPE_LEARNING_PATH = 'urn:resourcetype:learningPath';
+exports.RESOURCE_TYPE_LEARNING_PATH = RESOURCE_TYPE_LEARNING_PATH;
+var RESOURCE_TYPE_SUBJECT_MATERIAL = 'urn:resourcetype:subjectMaterial';
+exports.RESOURCE_TYPE_SUBJECT_MATERIAL = RESOURCE_TYPE_SUBJECT_MATERIAL;
+var RESOURCE_TYPE_TASKS_AND_ACTIVITIES = 'urn:resourcetype:tasksAndActivities';
+exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = RESOURCE_TYPE_TASKS_AND_ACTIVITIES;
+var RESOURCE_TYPE_ASSESSMENT_RESOURCES = 'urn:resourcetype:reviewResource';
+exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = RESOURCE_TYPE_ASSESSMENT_RESOURCES;
+var RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = 'urn:resourcetype:externalResource';
+exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES;
+var RESOURCE_TYPE_SOURCE_MATERIAL = 'urn:resourcetype:SourceMaterial';
+exports.RESOURCE_TYPE_SOURCE_MATERIAL = RESOURCE_TYPE_SOURCE_MATERIAL;
 var ListOfContentTypes = ['SUBJECT_MATERIAL', 'TASKS_AND_ACTIVITIES', 'ASSESSMENT_RESOURCES', 'SUBJECT', 'EXTERNAL_LEARNING_RESOURCES', 'SOURCE_MATERIAL', 'LEARNING_PATH', 'TOPIC', 'MULTIDISIPLINARY_TOPIC'];
-exports.ListOfContentTypes = ListOfContentTypes;
+exports.ListOfContentTypes = ListOfContentTypes;
+var contentTypeMapping = (_contentTypeMapping = {}, _defineProperty(_contentTypeMapping, RESOURCE_TYPE_LEARNING_PATH, LEARNING_PATH), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_SUBJECT_MATERIAL, SUBJECT_MATERIAL), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_TASKS_AND_ACTIVITIES, TASKS_AND_ACTIVITIES), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_ASSESSMENT_RESOURCES, ASSESSMENT_RESOURCES), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES, EXTERNAL_LEARNING_RESOURCES), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_SOURCE_MATERIAL, SOURCE_MATERIAL), _defineProperty(_contentTypeMapping, "default", SUBJECT_MATERIAL), _contentTypeMapping);
+exports.contentTypeMapping = contentTypeMapping;

package/lib/model/SubjectCategories.d.ts

@@ -8,6 +8,3 @@
 export declare const ACTIVE_SUBJECTS = "active";
 export declare const BETA_SUBJECTS = "beta";
 export declare const ARCHIVE_SUBJECTS = "archive";
-export declare const COMMON_SUBJECTS = "common";
-export declare const PROGRAMME_SUBJECTS = "programme";
-export declare const SPECIALIZED_SUBJECTS = "specialized";

package/lib/model/SubjectCategories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPECIALIZED_SUBJECTS = exports.PROGRAMME_SUBJECTS = exports.COMMON_SUBJECTS = exports.ARCHIVE_SUBJECTS = exports.BETA_SUBJECTS = exports.ACTIVE_SUBJECTS = void 0;
+exports.ARCHIVE_SUBJECTS = exports.BETA_SUBJECTS = exports.ACTIVE_SUBJECTS = void 0;
 
 /**
  * Copyright (c) 2021-present, NDLA.
@@ -16,12 +16,5 @@ var ACTIVE_SUBJECTS = 'active';
 exports.ACTIVE_SUBJECTS = ACTIVE_SUBJECTS;
 var BETA_SUBJECTS = 'beta';
 exports.BETA_SUBJECTS = BETA_SUBJECTS;
-var ARCHIVE_SUBJECTS = 'archive'; // deprecated
-
-exports.ARCHIVE_SUBJECTS = ARCHIVE_SUBJECTS;
-var COMMON_SUBJECTS = 'common';
-exports.COMMON_SUBJECTS = COMMON_SUBJECTS;
-var PROGRAMME_SUBJECTS = 'programme';
-exports.PROGRAMME_SUBJECTS = PROGRAMME_SUBJECTS;
-var SPECIALIZED_SUBJECTS = 'specialized';
-exports.SPECIALIZED_SUBJECTS = SPECIALIZED_SUBJECTS;
+var ARCHIVE_SUBJECTS = 'archive';
+exports.ARCHIVE_SUBJECTS = ARCHIVE_SUBJECTS;

package/lib/model/index.d.ts

@@ -5,12 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import * as contentTypes from './ContentType';
 import * as subjectCategories from './SubjectCategories';
 import * as subjectTypes from './SubjectTypes';
 declare const model: {
-    contentTypes: typeof contentTypes;
+    contentTypes: {
+        SUBJECT_MATERIAL: string;
+        TASKS_AND_ACTIVITIES: string;
+        ASSESSMENT_RESOURCES: string;
+        SUBJECT: string;
+        EXTERNAL_LEARNING_RESOURCES: string;
+        SOURCE_MATERIAL: string;
+        LEARNING_PATH: string;
+        TOPIC: string;
+        MULTIDISCIPLINARY_TOPIC: string;
+    };
     subjectCategories: typeof subjectCategories;
     subjectTypes: typeof subjectTypes;
+    contentTypeMapping: Record<string, string>;
 };
 export default model;

package/lib/model/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var contentTypes = _interopRequireWildcard(require("./ContentType"));
+var _ContentType = require("./ContentType");
 
 var subjectCategories = _interopRequireWildcard(require("./SubjectCategories"));
 
@@ -25,9 +25,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
  *
  */
 var model = {
-  contentTypes: contentTypes,
+  contentTypes: _ContentType.contentTypes,
   subjectCategories: subjectCategories,
-  subjectTypes: subjectTypes
+  subjectTypes: subjectTypes,
+  contentTypeMapping: _ContentType.contentTypeMapping
 };
 var _default = model;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "27.1.7",
+  "version": "28.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -39,8 +39,8 @@
     "@ndla/hooks": "^1.1.6",
     "@ndla/icons": "^1.13.0",
     "@ndla/licenses": "^5.0.17",
-    "@ndla/modal": "^1.5.0",
-    "@ndla/notion": "^3.1.46",
+    "@ndla/modal": "^1.6.0",
+    "@ndla/notion": "^3.1.47",
     "@ndla/safelink": "^2.2.19",
     "@ndla/switch": "^0.1.13",
     "@ndla/tabs": "^1.1.22",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a2bbbd2a97f3e3468c06cc1aea9849a24d9e5461"
+  "gitHead": "f7cac264e9855369dc3061fc240ece485de041bb"
 }

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -6,6 +6,7 @@ import SafeLink from '@ndla/safelink';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
 import { MessageBox } from '../Messages';
 import { ToggleItem } from '../Filter';
+import constants from '../model';
 
 const StyledWrapper = styled.nav`
   margin: 32px 0 0;
@@ -198,12 +199,14 @@ const FrontpageAllSubjects = ({
         content: (
           <>
             {/* Should be persistent til fall 2022 */}
-            {category.name === t('subjectCategories.beta') && (
+            {(category.name === t('subjectCategories.beta') ||
+              category.type === constants.subjectCategories.BETA_SUBJECTS) && (
               <MessageBoxWrapper>
                 <MessageBox>{t('messageBoxInfo.frontPageBeta')}</MessageBox>
               </MessageBoxWrapper>
             )}
-            {category.name === t('subjectCategories.archive') && (
+            {(category.name === t('subjectCategories.archive') ||
+              category.type === constants.subjectCategories.ARCHIVE_SUBJECTS) && (
               <MessageBoxWrapper>
                 <MessageBox>{t('messageBoxInfo.frontPageExpired')}</MessageBox>
               </MessageBoxWrapper>

package/src/Resource/BlockResource.tsx

@@ -17,12 +17,13 @@ import {
   ResourceImageProps,
   ResourceTitle,
   Row,
-  TopicList,
+  ResourceTypeList,
   ResourceTitleLink,
   LoaderProps,
   StyledContentIconWrapper,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
+import { contentTypeMapping } from '../model/ContentType';
 
 interface BlockResourceProps {
   id: string;
@@ -30,13 +31,13 @@ interface BlockResourceProps {
   tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
-  topics: string[];
   tags?: string[];
   description?: string;
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   menuItems?: MenuItemProps[];
   isLoading?: boolean;
   targetBlank?: boolean;
-  contentType: string;
+  resourceTypes?: { id: string; name: string }[];
 }
 
 const BlockElementWrapper = styled.div`
@@ -128,7 +129,7 @@ const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
   }
 };
 
-const TopicAndTitleLoader = ({ children, loading }: LoaderProps) => {
+const ResourceTypeAndTitleLoader = ({ children, loading }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -148,14 +149,16 @@ const BlockResource = ({
   title,
   tags,
   resourceImage,
-  topics,
   description,
   menuItems,
   isLoading,
+  headingLevel = 'h2',
   targetBlank,
-  contentType,
+  resourceTypes,
 }: BlockResourceProps) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
+  const firstResourceType = resourceTypes?.[0].id ?? '';
+  const Title = ResourceTitle.withComponent(headingLevel);
 
   const handleClick = () => {
     if (linkRef.current) {
@@ -166,15 +169,19 @@ const BlockResource = ({
   return (
     <BlockElementWrapper onClick={handleClick} id={id}>
       <ImageWrapper>
-        <BlockImage image={resourceImage} loading={isLoading} contentType={contentType} />
+        <BlockImage
+          image={resourceImage}
+          loading={isLoading}
+          contentType={contentTypeMapping[firstResourceType] ?? contentTypeMapping['default']}
+        />
       </ImageWrapper>
       <BlockInfoWrapper>
-        <TopicAndTitleLoader loading={isLoading}>
+        <ResourceTypeAndTitleLoader loading={isLoading}>
           <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link} ref={linkRef}>
-            <ResourceTitle>{title}</ResourceTitle>
+            <Title>{title}</Title>
           </ResourceTitleLink>
-        </TopicAndTitleLoader>
-        <TopicList topics={topics} />
+        </ResourceTypeAndTitleLoader>
+        <ResourceTypeList resourceTypes={resourceTypes} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
           {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}

package/src/Resource/ListResource.tsx

@@ -16,12 +16,13 @@ import {
   ResourceImageProps,
   ResourceTitle,
   ResourceTitleLink,
-  TopicList,
+  ResourceTypeList,
   StyledContentIconWrapper,
   LoaderProps,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
+import { contentTypeMapping } from '../model/ContentType';
 
 const StyledResourceDescription = styled.p`
   grid-area: description;
@@ -124,13 +125,13 @@ export interface ListResourceProps {
   tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
-  topics: string[];
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  resourceTypes: { id: string; name: string }[];
   tags?: string[];
   description?: string;
   menuItems?: MenuItemProps[];
   isLoading?: boolean;
   targetBlank?: boolean;
-  contentType: string;
 }
 
 interface ListResourceImageProps {
@@ -169,7 +170,7 @@ const ListResourceImage = ({ resourceImage, loading, type, contentType }: ListRe
   );
 };
 
-const TopicAndTitleLoader = ({ loading, children }: LoaderProps) => {
+const ResourceTypeAndTitleLoader = ({ loading, children }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'40px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -205,16 +206,18 @@ const ListResource = ({
   title,
   tags,
   resourceImage,
-  topics,
+  resourceTypes,
+  headingLevel = 'h2',
   description,
   menuItems,
   isLoading = false,
   targetBlank,
-  contentType,
 }: ListResourceProps) => {
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
   const linkRef = useRef<HTMLAnchorElement>(null);
+  const firstContentType = resourceTypes?.[0].id ?? '';
+  const Title = ResourceTitle.withComponent(headingLevel);
   const handleClick = () => {
     if (linkRef.current) {
       linkRef.current.click();
@@ -228,16 +231,16 @@ const ListResource = ({
           resourceImage={resourceImage}
           loading={isLoading}
           type={imageType}
-          contentType={contentType}
+          contentType={contentTypeMapping[firstContentType] ?? contentTypeMapping['default']}
         />
       </StyledImageWrapper>
       <TopicAndTitleWrapper>
-        <TopicAndTitleLoader loading={isLoading}>
+        <ResourceTypeAndTitleLoader loading={isLoading}>
           <ResourceTitleLink to={link} target={targetBlank ? '_blank' : undefined} ref={linkRef}>
-            <ResourceTitle>{title}</ResourceTitle>
+            <Title>{title}</Title>
           </ResourceTitleLink>
-          <TopicList topics={topics} />
-        </TopicAndTitleLoader>
+          <ResourceTypeList resourceTypes={resourceTypes} />
+        </ResourceTypeAndTitleLoader>
       </TopicAndTitleWrapper>
       {showDescription && <ResourceDescription description={description} loading={isLoading} />}
       <TagsandActionMenu>

package/src/Resource/resourceComponents.tsx

@@ -65,13 +65,12 @@ const StyledSafeLink = styled(SafeLink)`
   }
 `;
 
-const StyledTopicList = styled.ul`
+const StyledResourceTypeList = styled.ul`
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
   overflow: hidden;
-  grid-area: topicList;
 `;
 
 const StyledTopicDivider = styled.span`
@@ -79,7 +78,7 @@ const StyledTopicDivider = styled.span`
   padding: 0 ${spacing.xxsmall};
 `;
 
-const StyledTopicListElement = styled.li`
+const StyledResourceListElement = styled.li`
   ${fonts.sizes(12)};
   margin: 0;
   line-height: 1.5;
@@ -187,21 +186,21 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
   );
 };
 
-interface TopicListProps {
-  topics?: string[];
+interface ResourceTypeListProps {
+  resourceTypes?: { id: string; name: string }[];
 }
 
-export const TopicList = ({ topics }: TopicListProps) => {
+export const ResourceTypeList = ({ resourceTypes }: ResourceTypeListProps) => {
   const { t } = useTranslation();
-  if (!topics) return null;
+  if (!resourceTypes) return null;
   return (
-    <StyledTopicList aria-label={t('navigation.topics')}>
-      {topics.map((topic, i) => (
-        <StyledTopicListElement key={topic}>
-          {topic}
-          {i !== topics.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
-        </StyledTopicListElement>
+    <StyledResourceTypeList aria-label={t('navigation.topics')}>
+      {resourceTypes.map((resource, i) => (
+        <StyledResourceListElement key={resource.id}>
+          {resource.name}
+          {i !== resourceTypes.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
+        </StyledResourceListElement>
       ))}
-    </StyledTopicList>
+    </StyledResourceTypeList>
   );
 };

package/src/locale/messages-en.ts

@@ -71,9 +71,7 @@ const messages = {
     [subjectCategories.ACTIVE_SUBJECTS]: 'Active',
     [subjectCategories.ARCHIVE_SUBJECTS]: 'Expired',
     [subjectCategories.BETA_SUBJECTS]: 'Revised',
-    [subjectCategories.COMMON_SUBJECTS]: 'Common core subj.',
-    [subjectCategories.PROGRAMME_SUBJECTS]: 'Programme subj. SF',
-    [subjectCategories.SPECIALIZED_SUBJECTS]: 'Programme subj. YF',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Other resources',
   },
   subjectTypes: {
     [subjectTypes.SUBJECT]: 'Subject',
@@ -1047,10 +1045,10 @@ const messages = {
       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: { our: 'Read our', ours: 'Read our' },
+      read: { read: 'Read our', our: '.' },
       privacy: 'privacy statement',
       privacyLink: 'https://om.ndla.no/gdpr',
-      questions: { question: 'Any questions?', ask: 'Ask us in the chat' },
+      questions: { question: 'Any questions?', ask: 'Ask NDLA' },
       wishToDelete: 'Do you wish to delete your account?',
       terms: {
         terms: 'Terms of use',
@@ -1069,11 +1067,11 @@ const messages = {
       },
       folderInfo: {
         title: 'How to organise your favourite resources in folders',
-        text: 'You can get to the folder overview by clicking on my folders on the menu to the left. Here you can create new folders and subfolder. You can also create a new folder in the dialogue window that is activated when you click on the heart in a resource',
+        text: 'You can get to the folder overview by clicking on <strong>My folders</strong> on the menu to the left. Here you can create new folders and subfolder. You can also create a new folder in the dialogue window that is activated when you click on the heart in a resource',
       },
       tagInfo: {
         title: 'How to tag your favourite resources',
-        text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting my tags on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.',
+        text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting <strong>My tags</strong> on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.',
       },
     },
     resource: {

package/src/locale/messages-nb.ts

@@ -71,9 +71,7 @@ const messages = {
     [subjectCategories.ACTIVE_SUBJECTS]: 'Aktive',
     [subjectCategories.ARCHIVE_SUBJECTS]: 'Utgåtte',
     [subjectCategories.BETA_SUBJECTS]: 'Kommende',
-    [subjectCategories.COMMON_SUBJECTS]: 'Fellesfag',
-    [subjectCategories.PROGRAMME_SUBJECTS]: 'Programfag SF',
-    [subjectCategories.SPECIALIZED_SUBJECTS]: 'Yrkesfag',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Andre ressurser',
   },
   subjectTypes: {
     [subjectTypes.SUBJECT]: 'Fag',
@@ -955,9 +953,9 @@ const messages = {
     loggedInAs: 'Du er pålogget som {{role}}.',
     loggedInAsButton: 'Du er pålogget som {{role}}',
     role: {
-      employee: 'Lærer',
-      staff: 'Ansatt',
-      student: 'Elev',
+      employee: 'lærer',
+      staff: 'ansatt',
+      student: 'elev',
     },
     buttonLogIn: 'Logg inn med Feide',
     buttonLogOut: 'Logg ut',
@@ -972,7 +970,7 @@ const messages = {
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.',
     },
-    primarySchool: 'Hovedskole',
+    primarySchool: 'hovedskole',
     name: 'Navn',
     mail: 'E-post',
     username: 'Brukernavn',
@@ -982,7 +980,7 @@ const messages = {
       other: 'Andre grupper',
     },
     wrongUserInfoDisclaimer:
-      'Dersom informasjon er feil, så må dette oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
+      'Dersom informasjonen er feil, må den oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: ',
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {
@@ -1043,11 +1041,11 @@ const messages = {
       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 emneknagger.',
-      read: { our: 'Les vår', ours: 'Les våre' },
-      privacy: 'personvernerklæring her',
+        'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
+      read: { read: 'Les', our: ' vår.' },
+      privacy: 'personvernerklæringa',
       privacyLink: 'https://om.ndla.no/gdpr',
-      questions: { question: 'Lurer du på noe?', ask: 'Spør oss i chatten' },
+      questions: { question: 'Lurer du på noe?', ask: 'Spør NDLA' },
       wishToDelete: 'Vil du ikke ha brukerprofil hos oss lenger?',
       terms: {
         terms: 'Vilkår for bruk',
@@ -1060,16 +1058,16 @@ const messages = {
       feideWrongInfo:
         'Dersom informasjon er feil, så må dette oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: feide.no/brukerstøtte',
       storageInfo: {
-        title: 'Slik lagrer du dine favorittressurser fra NDLA',
-        text: 'Klikk på hjerteknappen for å lagre en ressurs. Du vil da få mulighet til å lagre ressursen i en mappe.',
+        title: 'Slik lagrer du favorittressursene dine fra NDLA',
+        text: 'Klikk på hjerteknappen for å lagre en ressurs. Du vil da få mulighet til å lagre ressursen i ei mappe.',
       },
       folderInfo: {
-        title: 'Slik organiserer du dine favorittressurser i mapper',
-        text: 'Klikk på mine mapper i menyen til venstre for å komme til mappeoversikten. Her kan du opprette nye mapper og undermapper. Du kan også opprette en ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.',
+        title: 'Slik organiserer du favorittressursene dine i mapper',
+        text: 'Klikk på <strong>Mine mapper</strong> i menyen til venstre for å komme til mappeoversikten. Her kan du opprette nye mapper og undermapper. Du kan også opprette ei ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.',
       },
       tagInfo: {
-        title: 'Slik tagger du dine favorittressurser',
-        text: 'Når du lagrer en ressurs får du mulighet til å markere ressursen med en emneknagg. Emneknaggen er et nøkkelord du kan bruke til å finne tilbake til ressurser på tvers av mapper. Du finner alle emneknaggene du har brukt ved å velge mine emneknagger i venstremenyen. Her kan du også se hvilke ressurser du har markert med hver enkel emneknagg.',
+        title: 'Slik tagger du favorittressursene dine',
+        text: 'Når du lagrer en ressurs, får du mulighet til å markere ressursen med en emneknagg. Emneknaggen er et nøkkelord du kan bruke til å finne tilbake til ressurser på tvers av mapper. Du finner alle emneknaggene du har brukt, ved å velge <strong>Mine emneknagger</strong> i venstremenyen. Her kan du også se hvilke ressurser du har markert med hvilken emneknagg.',
       },
     },
     resource: {