@ndla/ui 27.1.6 → 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}}',
@@ -401,6 +401,7 @@ var messages = _objectSpread(_objectSpread({
     heading: 'Slik gjenbruker du innhold',
     learnMore: 'Lær mer om åpne lisenser',
     copyTitle: 'Kildehenvisning',
+    copy: 'Kopier',
     hasCopiedTitle: 'Kopiert!',
     embed: 'Bygg inn',
     embedCopied: 'Kopierte innbyggingskode!',
@@ -918,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',
@@ -935,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',
@@ -944,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: {
@@ -1002,15 +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: {
@@ -1023,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,3 +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.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.
@@ -29,4 +33,32 @@ exports.LEARNING_PATH = LEARNING_PATH;
 var TOPIC = 'topic';
 exports.TOPIC = TOPIC;
 var MULTIDISCIPLINARY_TOPIC = 'multidisciplinary-topic';
-exports.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;
+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/lib/utils/resourceTypeColor.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare const resourceTypeColor: (type: string) => string;
+export default resourceTypeColor;

package/lib/utils/resourceTypeColor.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.resourceTypeColor = void 0;
+
+var _core = require("@ndla/core");
+
+var _model = _interopRequireDefault(require("../model"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var contentTypes = _model["default"].contentTypes;
+
+var resourceTypeColor = function resourceTypeColor(type) {
+  switch (type) {
+    case contentTypes.SUBJECT_MATERIAL:
+      return _core.colors.subjectMaterial.light;
+
+    case contentTypes.SUBJECT:
+      return _core.colors.subject.light;
+
+    case contentTypes.TOPIC:
+      return _core.colors.subject.light;
+
+    case contentTypes.TASKS_AND_ACTIVITIES:
+      return _core.colors.tasksAndActivities.light;
+
+    case contentTypes.ASSESSMENT_RESOURCES:
+      return _core.colors.assessmentResource.light;
+
+    case contentTypes.EXTERNAL_LEARNING_RESOURCES:
+      return _core.colors.externalLearningResource.light;
+
+    case contentTypes.SOURCE_MATERIAL:
+      return _core.colors.sourceMaterial.light;
+
+    case contentTypes.LEARNING_PATH:
+      return _core.colors.learningPath.light;
+
+    case contentTypes.MULTIDISCIPLINARY_TOPIC:
+      return _core.colors.learningPath.background;
+
+    default:
+      return '';
+  }
+};
+
+exports.resourceTypeColor = resourceTypeColor;
+var _default = resourceTypeColor;
+exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "27.1.6",
+  "version": "28.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.6.0",
+    "@ndla/button": "^3.6.1",
     "@ndla/carousel": "^1.2.23",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.3.4",
+    "@ndla/forms": "^3.3.5",
     "@ndla/hooks": "^1.1.6",
     "@ndla/icons": "^1.13.0",
     "@ndla/licenses": "^5.0.17",
-    "@ndla/modal": "^1.5.0",
-    "@ndla/notion": "^3.1.45",
-    "@ndla/safelink": "^2.2.18",
+    "@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",
     "@ndla/tooltip": "^2.2.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f28cf161105aaf76aa1893a70cd8f3ff8cca6b05"
+  "gitHead": "f7cac264e9855369dc3061fc240ece485de041bb"
 }

package/src/Article/ArticleByline.tsx

@@ -59,6 +59,8 @@ type Props = {
   copyPageUrlLink?: string;
   printUrl?: string;
   locale?: string;
+  copyEmbedLink?: string;
+  copySourceReference?: string;
 };
 
 const renderContributors = (contributors: SupplierProps[] | AuthorProps[], t: TFunction) => {
@@ -91,16 +93,29 @@ const ArticleByline = ({
   copyPageUrlLink,
   printUrl,
   locale,
+  copyEmbedLink,
+  copySourceReference,
 }: Props) => {
   const { t } = useTranslation();
+
   const copyLinkHandler = () => {
     if (copyPageUrlLink) {
       copyTextToClipboard(copyPageUrlLink);
     }
   };
-
   const licenseRights = getLicenseByAbbreviation(license, locale).rights;
 
+  const copyLicense = () => {
+    if (copySourceReference) {
+      copyTextToClipboard(copySourceReference);
+    }
+  };
+  const copyEmbededLink = () => {
+    if (copyEmbedLink) {
+      copyTextToClipboard(copyEmbedLink);
+    }
+  };
+
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
   const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
 
@@ -129,6 +144,18 @@ const ArticleByline = ({
       )}
       {showSecondaryContributors && <TextWrapper>{getSuppliersText(suppliers, t)}</TextWrapper>}
       <ButtonWrapper>
+        {copySourceReference && (
+          <CopyButton
+            size="small"
+            borderShape="rounded"
+            outline
+            aria-live="assertive"
+            copyNode={t('license.hasCopiedTitle')}
+            data-copy-string={copySourceReference}
+            onClick={copyLicense}>
+            {`${t('license.copy')} ${t('license.copyTitle').toLowerCase()}`}
+          </CopyButton>
+        )}
         {licenseBox && (
           <Modal
             labelledBy={buttonId}
@@ -162,6 +189,18 @@ const ArticleByline = ({
             {t('article.copyPageLink')}
           </CopyButton>
         )}
+        {copyEmbedLink && (
+          <CopyButton
+            size="small"
+            borderShape="rounded"
+            outline
+            aria-live="assertive"
+            copyNode={t('license.hasCopiedTitle')}
+            data-copy-string={copyEmbedLink}
+            onClick={copyEmbededLink}>
+            {`${t('license.copy')}  ${t('license.tabs.embedlink').toLowerCase()}`}
+          </CopyButton>
+        )}
         {printUrl && (
           <Button size="small" borderShape="rounded" outline onClick={() => printPage(printUrl)}>
             {t('article.printPage')}

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -23,7 +23,6 @@ const StyledRightChevron = styled(ChevronRight)`
 `;
 
 const StyledSpan = styled.span`
-  color: ${colors.text.primary};
   font-weight: ${fonts.weight.bold};
 `;
 
@@ -54,7 +53,7 @@ const ActionBreadcrumb = ({ items, actionItems }: Props) => {
     }
     if (item.index === totalCount - 1 && actionItems.length > 0) {
       return (
-        <StyledMenuButton menuItems={actionItems} size="small">
+        <StyledMenuButton menuItems={actionItems} alignRight size="small">
           <StyledSpan title={item.name}>{item.name}</StyledSpan>
         </StyledMenuButton>
       );

package/src/Breadcrumb/Breadcrumb.tsx

@@ -67,7 +67,7 @@ const Breadcrumb = ({
         el.setMaxWidth('40px');
       }
     });
-  }, [size]);
+  }, [size, items]);
 
   return (
     <BreadcrumbNav ref={containerRef} aria-label={t('breadcrumb.breadcrumb')}>
@@ -77,11 +77,20 @@ const Breadcrumb = ({
             autoCollapse={autoCollapse}
             renderItem={renderItem}
             renderSeparator={renderSeparator}
-            ref={(element) =>
-              element === null || (!collapseFirst && index === 0) || (!collapseLast && index === items.length - 1)
-                ? breadcrumbItemRefs.delete(item.to)
-                : breadcrumbItemRefs.set(item.to, element)
-            }
+            ref={(element) => {
+              if (
+                element === null ||
+                (!collapseFirst && index === 0) ||
+                (!collapseLast && index === items.length - 1)
+              ) {
+                if (element) {
+                  element.setMaxWidth('none');
+                }
+                breadcrumbItemRefs.delete(item.to);
+              } else {
+                breadcrumbItemRefs.set(item.to, element);
+              }
+            }}
             key={typeof item.to === 'string' ? item.to : item.to.pathname}
             totalCount={items.length}
             item={{ ...item, index }}

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

@@ -10,17 +10,20 @@ import styled from '@emotion/styled';
 import React, { useRef } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
+import ContentTypeBadge from '../ContentTypeBadge';
 import Image from '../Image';
 import {
   CompressedTagList,
   ResourceImageProps,
   ResourceTitle,
   Row,
-  TopicList,
+  ResourceTypeList,
   ResourceTitleLink,
   LoaderProps,
+  StyledContentIconWrapper,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
+import { contentTypeMapping } from '../model/ContentType';
 
 interface BlockResourceProps {
   id: string;
@@ -28,12 +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;
+  resourceTypes?: { id: string; name: string }[];
 }
 
 const BlockElementWrapper = styled.div`
@@ -92,22 +96,21 @@ const BlockInfoWrapper = styled.div`
 const ImageWrapper = styled.div`
   display: flex;
   width: 100%;
+  justify-content: center;
   overflow: hidden;
   align-items: center;
-  div {
-    min-width: 100%;
-  }
+  aspect-ratio: 3/4;
   img {
     min-width: 100%;
   }
 `;
-
 interface BlockImageProps {
   image: ResourceImageProps;
   loading?: boolean;
+  contentType: string;
 }
 
-const BlockImage = ({ image, loading }: BlockImageProps) => {
+const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
   if (loading) {
     return (
       <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -115,10 +118,18 @@ const BlockImage = ({ image, loading }: BlockImageProps) => {
       </ContentLoader>
     );
   }
-  return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
+  if (image.src === '') {
+    return (
+      <StyledContentIconWrapper contentType={contentType}>
+        <ContentTypeBadge type={contentType} size="large" />
+      </StyledContentIconWrapper>
+    );
+  } else {
+    return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
+  }
 };
 
-const TopicAndTitleLoader = ({ children, loading }: LoaderProps) => {
+const ResourceTypeAndTitleLoader = ({ children, loading }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -138,13 +149,16 @@ const BlockResource = ({
   title,
   tags,
   resourceImage,
-  topics,
   description,
   menuItems,
   isLoading,
+  headingLevel = 'h2',
   targetBlank,
+  resourceTypes,
 }: BlockResourceProps) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
+  const firstResourceType = resourceTypes?.[0].id ?? '';
+  const Title = ResourceTitle.withComponent(headingLevel);
 
   const handleClick = () => {
     if (linkRef.current) {
@@ -155,15 +169,19 @@ const BlockResource = ({
   return (
     <BlockElementWrapper onClick={handleClick} id={id}>
       <ImageWrapper>
-        <BlockImage image={resourceImage} loading={isLoading} />
+        <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} />}