@ndla/ui 37.0.0 → 37.0.2

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

@@ -931,6 +931,12 @@ declare const messages: {
         'assessment-resources': string;
         topic: string;
         'multidisciplinary-topic': string;
+        image: string;
+        concept: string;
+        audio: string;
+        podcast: string;
+        h5p: string;
+        video: string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-en.js

@@ -659,7 +659,13 @@ var messages = _objectSpread(_objectSpread({
     'source-material': 'Source material',
     'assessment-resources': 'Assessment resource',
     topic: 'Topic',
-    'multidisciplinary-topic': 'Multidisciplinary case'
+    'multidisciplinary-topic': 'Multidisciplinary case',
+    image: 'Image',
+    concept: 'Concept',
+    audio: 'Audio',
+    podcast: 'Podcast',
+    h5p: 'H5P',
+    video: 'Video'
   },
   modal: {
     closeModal: 'Close'

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

@@ -931,6 +931,12 @@ declare const messages: {
         'assessment-resources': string;
         topic: string;
         'multidisciplinary-topic': string;
+        image: string;
+        concept: string;
+        audio: string;
+        podcast: string;
+        h5p: string;
+        video: string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-nb.js

@@ -659,7 +659,13 @@ var messages = _objectSpread(_objectSpread({
     'source-material': 'Kildemateriale',
     'assessment-resources': 'Vurderingsressurs',
     topic: 'Emne',
-    'multidisciplinary-topic': 'Tverrfaglig case'
+    'multidisciplinary-topic': 'Tverrfaglig case',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video'
   },
   modal: {
     closeModal: 'Lukk'

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

@@ -931,6 +931,12 @@ declare const messages: {
         'assessment-resources': string;
         topic: string;
         'multidisciplinary-topic': string;
+        image: string;
+        concept: string;
+        audio: string;
+        podcast: string;
+        h5p: string;
+        video: string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-nn.js

@@ -659,7 +659,13 @@ var messages = _objectSpread(_objectSpread({
     'source-material': 'Kjeldemateriale',
     'assessment-resources': 'Vurderingsressurs',
     topic: 'Emne',
-    'multidisciplinary-topic': 'Tverrfagleg case'
+    'multidisciplinary-topic': 'Tverrfagleg case',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video'
   },
   modal: {
     closeModal: 'Lukk'

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

@@ -931,6 +931,12 @@ declare const messages: {
         'assessment-resources': string;
         topic: string;
         'multidisciplinary-topic': string;
+        image: string;
+        concept: string;
+        audio: string;
+        podcast: string;
+        h5p: string;
+        video: string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-se.js

@@ -659,7 +659,13 @@ var messages = _objectSpread(_objectSpread({
     'source-material': 'Gáldomateriála',
     'assessment-resources': 'Árvoštallanresursa',
     topic: 'Fáddá',
-    'multidisciplinary-topic': 'Fágaidrasttideaddji fáddá'
+    'multidisciplinary-topic': 'Fágaidrasttideaddji fáddá',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video'
   },
   modal: {
     closeModal: 'Govčča'

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

@@ -931,6 +931,12 @@ declare const messages: {
         'assessment-resources': string;
         topic: string;
         'multidisciplinary-topic': string;
+        image: string;
+        concept: string;
+        audio: string;
+        podcast: string;
+        h5p: string;
+        video: string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-sma.js

@@ -659,7 +659,13 @@ var messages = _objectSpread(_objectSpread({
     'source-material': 'Gaaltijevierhtieh',
     'assessment-resources': 'Vuarjasjimmievierhtie',
     topic: 'Teema',
-    'multidisciplinary-topic': 'Tverrfaglig case'
+    'multidisciplinary-topic': 'Tverrfaglig case',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video'
   },
   modal: {
     closeModal: 'Dahph'

package/lib/model/ContentType.d.ts

@@ -33,4 +33,4 @@ export declare const RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = "urn:resourcety
 export declare const RESOURCE_TYPE_SOURCE_MATERIAL = "urn:resourcetype:SourceMaterial";
 export declare const ListOfContentTypes: string[];
 export declare const contentTypeMapping: Record<string, string>;
-export declare const resourceTypeMapping: Record<string, string>;
+export declare const resourceEmbedTypeMapping: Record<string, string>;

package/lib/model/ContentType.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resourceTypeMapping = exports.contentTypes = exports.contentTypeMapping = exports.TOPIC = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = exports.SUBJECT = exports.SOURCE_MATERIAL = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_LEARNING_PATH = exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.MULTIDISCIPLINARY_TOPIC = exports.ListOfContentTypes = exports.LEARNING_PATH = exports.EXTERNAL_LEARNING_RESOURCES = exports.ASSESSMENT_RESOURCES = void 0;
+exports.resourceEmbedTypeMapping = exports.contentTypes = exports.contentTypeMapping = exports.TOPIC = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = exports.SUBJECT = exports.SOURCE_MATERIAL = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_LEARNING_PATH = exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.MULTIDISCIPLINARY_TOPIC = exports.ListOfContentTypes = exports.LEARNING_PATH = exports.EXTERNAL_LEARNING_RESOURCES = exports.ASSESSMENT_RESOURCES = void 0;
 var _contentTypeMapping;
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -63,10 +63,10 @@ var ListOfContentTypes = ['SUBJECT_MATERIAL', 'TASKS_AND_ACTIVITIES', 'ASSESSMEN
 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;
-var resourceTypeMapping = {
+var resourceEmbedTypeMapping = {
   image: 'image',
   video: 'video',
   concept: 'concept',
   audio: 'audio'
 };
-exports.resourceTypeMapping = resourceTypeMapping;
+exports.resourceEmbedTypeMapping = resourceEmbedTypeMapping;

package/lib/model/index.d.ts

@@ -22,5 +22,6 @@ declare const model: {
     subjectCategories: typeof subjectCategories;
     subjectTypes: typeof subjectTypes;
     contentTypeMapping: Record<string, string>;
+    resourceEmbedTypeMapping: Record<string, string>;
 };
 export default model;

package/lib/model/index.js

@@ -22,7 +22,8 @@ var model = {
   contentTypes: _ContentType.contentTypes,
   subjectCategories: subjectCategories,
   subjectTypes: subjectTypes,
-  contentTypeMapping: _ContentType.contentTypeMapping
+  contentTypeMapping: _ContentType.contentTypeMapping,
+  resourceEmbedTypeMapping: _ContentType.resourceEmbedTypeMapping
 };
 var _default = model;
 exports["default"] = _default;

package/lib/utils/resourceTypeColor.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.resourceTypeColor = exports["default"] = void 0;
 var _core = require("@ndla/core");
 var _model = _interopRequireDefault(require("../model"));
+var _ContentType = require("../model/ContentType");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /**
  * Copyright (c) 2022-present, NDLA.
@@ -36,6 +37,11 @@ var resourceTypeColor = function resourceTypeColor(type) {
       return _core.colors.learningPath.light;
     case contentTypes.MULTIDISCIPLINARY_TOPIC:
       return _core.colors.learningPath.background;
+    case _ContentType.resourceEmbedTypeMapping.image:
+    case _ContentType.resourceEmbedTypeMapping.video:
+    case _ContentType.resourceEmbedTypeMapping.concept:
+    case _ContentType.resourceEmbedTypeMapping.audio:
+      return _core.colors.brand.greyLight;
     default:
       return '';
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "37.0.0",
+  "version": "37.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -75,7 +75,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@ndla/types-backend": "^0.2.5",
-    "@ndla/types-embed": "^2.0.0",
+    "@ndla/types-embed": "^2.0.1",
     "@types/reach__dialog": "^0.1.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3961942d13c313b37bba92395f6a430ed31dc954"
+  "gitHead": "7ebc236f35b3cd624f5fec74672ef8213d58adae"
 }

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -13,6 +13,7 @@ import {
 } from '@ndla/icons/contentType';
 
 import { MenuBook } from '@ndla/icons/action';
+import { Concept, Media, SquareAudio, SquareVideo } from '@ndla/icons/editor';
 
 import * as contentTypes from '../model/ContentType';
 
@@ -32,12 +33,8 @@ interface Props {
 
 export const ContentTypeBadge = ({ type, background, title, size = 'small', border = true, className }: Props) => {
   const modifiers = [type, size];
-  if (background) {
-    modifiers.push('background');
-  }
-  if (border) {
-    modifiers.push('border');
-  }
+
+  let embedResource = false;
 
   let icon = null;
   switch (type) {
@@ -68,9 +65,35 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
     case contentTypes.MULTIDISCIPLINARY_TOPIC:
       icon = <MultidisciplinaryTopic />;
       break;
+    case contentTypes.resourceEmbedTypeMapping.image:
+      icon = <Media />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceEmbedTypeMapping.audio:
+      icon = <SquareAudio />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceEmbedTypeMapping.video:
+      icon = <SquareVideo />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceEmbedTypeMapping.concept:
+      icon = <Concept />;
+      embedResource = true;
+      break;
     default:
       break;
   }
+
+  if (embedResource) {
+    modifiers.push('embed-resource');
+  }
+  if (background) {
+    modifiers.push('background');
+  }
+  if (border) {
+    modifiers.push('border');
+  }
   return <div {...classes('', modifiers, className)}>{icon}</div>;
 };
 

package/src/ContentTypeBadge/component.content-type-badge.scss

@@ -6,10 +6,16 @@
   justify-content: center;
   border-radius: 100%;
   &--border {
-
     border: 2px solid $black;
   }
 
+  &--embed-resource {
+    border-color: $brand-grey;
+    &.c-content-type-badge--background {
+      background: $brand-grey--light;
+    }
+  }
+
   &--subject-material {
     border-color: $subject-material-dark;
 
@@ -165,9 +171,9 @@
       background: $subjecttype-background;
     }
   }
-  &--multidisciplinary-topic{
+  &--multidisciplinary-topic {
     &.c-content-type-badge--background {
-      background: #B9B37B;
+      background: #b9b37b;
     }
   }
 

package/src/Embed/BrightcoveEmbed.tsx

@@ -61,6 +61,7 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const { embedData } = embed;
+  const fallbackTitle = `${t('embed.type.video')}: ${embedData.videoid}`;
 
   useEffect(() => {
     const iframe = iframeRef.current;
@@ -76,8 +77,8 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
       <EmbedErrorPlaceholder type="video">
         <BrightcoveIframe
           ref={iframeRef}
-          title={`Video: ${embedData.videoid ?? ''}`}
-          aria-label={`Video: ${embedData.videoid ?? ''}`}
+          title={embedData.alt ?? fallbackTitle}
+          aria-label={embedData.alt ?? fallbackTitle}
           frameBorder="0"
           {...getIframeProps(embedData, [])}
           allowFullScreen
@@ -101,8 +102,8 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
         <BrightcoveIframe
           ref={iframeRef}
           className="original"
-          title={`Video: ${data.name}`}
-          aria-label={`Video: ${data.name}`}
+          title={embedData.alt ?? data.name ?? fallbackTitle}
+          aria-label={embedData.alt ?? data.name ?? fallbackTitle}
           frameBorder="0"
           {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}
           allowFullScreen

package/src/Embed/H5pEmbed.tsx

@@ -30,7 +30,7 @@ const H5pEmbed = ({ embed, isConcept }: Props) => {
   const classes = `c-figure ${fullColumnClass} c-figure--resize`;
 
   if (embed.data.oembed) {
-    return <StyledFigure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }} />;
+    return <figure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }} />;
   }
 
   return (

package/src/Embed/RelatedContentEmbed.tsx

@@ -30,7 +30,9 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
     const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;
     const type = typeId ? contentTypeMapping[typeId] : undefined;
     const path =
-      data.resource?.paths.find((p) => p.split('/')[1] === subject?.replace('urn:', '')) ?? data.resource?.path;
+      data.resource?.paths.find((p) => p.split('/')[1] === subject?.replace('urn:', '')) ??
+      data.resource?.path ??
+      `/article/${embedData.articleId}`;
     return (
       <RelatedArticleV2
         title={data.article.title?.title ?? ''}

package/src/Resource/BlockResource.tsx

@@ -22,7 +22,7 @@ import {
   StyledContentIconWrapper,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
-import { contentTypeMapping } from '../model/ContentType';
+import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
 import { SettingsMenu } from '../MyNdla';
 
 const BlockElementWrapper = styled.div`
@@ -174,7 +174,11 @@ const BlockResource = ({
         <BlockImage
           image={resourceImage}
           loading={isLoading}
-          contentType={contentTypeMapping[firstResourceType] ?? contentTypeMapping['default']}
+          contentType={
+            contentTypeMapping[firstResourceType] ??
+            resourceEmbedTypeMapping[firstResourceType] ??
+            contentTypeMapping['default']
+          }
         />
       </ImageWrapper>
       <BlockInfoWrapper>

package/src/Resource/ListResource.tsx

@@ -22,7 +22,7 @@ import {
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
-import { contentTypeMapping } from '../model/ContentType';
+import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
 import { SettingsMenu } from '../MyNdla';
 
 const ListResourceWrapper = styled.div`
@@ -131,14 +131,15 @@ interface ListResourceImageProps {
   loading?: boolean;
   type: 'normal' | 'compact';
   contentType: string;
+  background?: boolean;
 }
 
-const ListResourceImage = ({ resourceImage, loading, type, contentType }: ListResourceImageProps) => {
+const ListResourceImage = ({ resourceImage, loading, type, contentType, background }: ListResourceImageProps) => {
   if (!loading) {
     if (resourceImage.src === '') {
       return (
         <StyledContentIconWrapper contentType={contentType}>
-          <ContentTypeBadge type={contentType} size="x-small" />
+          <ContentTypeBadge type={contentType} background={background} size="x-small" />
         </StyledContentIconWrapper>
       );
     } else {
@@ -221,6 +222,7 @@ const ListResource = ({
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
   const firstContentType = resourceTypes?.[0]?.id ?? '';
+  const embedResourceType = resourceEmbedTypeMapping[firstContentType];
 
   return (
     <ListResourceWrapper id={id}>
@@ -229,7 +231,8 @@ const ListResource = ({
           resourceImage={resourceImage}
           loading={isLoading}
           type={imageType}
-          contentType={contentTypeMapping[firstContentType] ?? contentTypeMapping['default']}
+          background={!!embedResourceType}
+          contentType={contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping['default']}
         />
       </ImageWrapper>
       <TopicAndTitleWrapper>

package/src/Resource/resourceComponents.tsx

@@ -15,7 +15,7 @@ import SafeLink from '@ndla/safelink';
 import { useNavigate } from 'react-router-dom';
 import { HashTag } from '@ndla/icons/common';
 import resourceTypeColor from '../utils/resourceTypeColor';
-import { resourceTypeMapping } from '../model/ContentType';
+import { resourceEmbedTypeMapping } from '../model/ContentType';
 
 export interface ResourceImageProps {
   alt: string;
@@ -198,7 +198,9 @@ export const ResourceTypeList = ({ resourceTypes }: ResourceTypeListProps) => {
     <StyledResourceTypeList aria-label={t('navigation.topics')}>
       {resourceTypes.map((resource, i) => (
         <StyledResourceListElement key={resource.id}>
-          {resourceTypeMapping[resource.id] ? t(`embed.type.${resourceTypeMapping[resource.id]}`) : resource.name}
+          {resourceEmbedTypeMapping[resource.id]
+            ? t(`embed.type.${resourceEmbedTypeMapping[resource.id]}`)
+            : resource.name}
           {i !== resourceTypes.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
         </StyledResourceListElement>
       ))}

package/src/locale/messages-en.ts

@@ -694,6 +694,12 @@ const messages = {
     'assessment-resources': 'Assessment resource',
     topic: 'Topic',
     'multidisciplinary-topic': 'Multidisciplinary case',
+    image: 'Image',
+    concept: 'Concept',
+    audio: 'Audio',
+    podcast: 'Podcast',
+    h5p: 'H5P',
+    video: 'Video',
   },
   modal: {
     closeModal: 'Close',

package/src/locale/messages-nb.ts

@@ -693,6 +693,12 @@ const messages = {
     'assessment-resources': 'Vurderingsressurs',
     topic: 'Emne',
     'multidisciplinary-topic': 'Tverrfaglig case',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video',
   },
   modal: {
     closeModal: 'Lukk',

package/src/locale/messages-nn.ts

@@ -693,6 +693,12 @@ const messages = {
     'assessment-resources': 'Vurderingsressurs',
     topic: 'Emne',
     'multidisciplinary-topic': 'Tverrfagleg case',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video',
   },
   modal: {
     closeModal: 'Lukk',

package/src/locale/messages-se.ts

@@ -694,6 +694,12 @@ const messages = {
     'assessment-resources': 'Árvoštallanresursa',
     topic: 'Fáddá',
     'multidisciplinary-topic': 'Fágaidrasttideaddji fáddá',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video',
   },
   modal: {
     closeModal: 'Govčča',

package/src/locale/messages-sma.ts

@@ -697,6 +697,12 @@ const messages = {
     'assessment-resources': 'Vuarjasjimmievierhtie',
     topic: 'Teema',
     'multidisciplinary-topic': 'Tverrfaglig case',
+    image: 'Bilde',
+    concept: 'Forklaring',
+    audio: 'Lyd',
+    podcast: 'Podkast',
+    h5p: 'H5P',
+    video: 'Video',
   },
   modal: {
     closeModal: 'Dahph',

package/src/model/ContentType.ts

@@ -57,7 +57,7 @@ export const contentTypeMapping: Record<string, string> = {
   default: SUBJECT_MATERIAL,
 };
 
-export const resourceTypeMapping: Record<string, string> = {
+export const resourceEmbedTypeMapping: Record<string, string> = {
   image: 'image',
   video: 'video',
   concept: 'concept',

package/src/model/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { contentTypes, contentTypeMapping } from './ContentType';
+import { contentTypes, contentTypeMapping, resourceEmbedTypeMapping } from './ContentType';
 import * as subjectCategories from './SubjectCategories';
 import * as subjectTypes from './SubjectTypes';
 
@@ -15,6 +15,7 @@ const model = {
   subjectCategories,
   subjectTypes,
   contentTypeMapping,
+  resourceEmbedTypeMapping,
 };
 
 export default model;

package/src/utils/resourceTypeColor.tsx

@@ -8,6 +8,7 @@
 
 import { colors } from '@ndla/core';
 import constants from '../model';
+import { resourceEmbedTypeMapping } from '../model/ContentType';
 const { contentTypes } = constants;
 
 export const resourceTypeColor = (type: string) => {
@@ -30,6 +31,11 @@ export const resourceTypeColor = (type: string) => {
       return colors.learningPath.light;
     case contentTypes.MULTIDISCIPLINARY_TOPIC:
       return colors.learningPath.background;
+    case resourceEmbedTypeMapping.image:
+    case resourceEmbedTypeMapping.video:
+    case resourceEmbedTypeMapping.concept:
+    case resourceEmbedTypeMapping.audio:
+      return colors.brand.greyLight;
     default:
       return '';
   }