@ndla/ui 37.0.1 → 37.0.2

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.1",
+  "version": "37.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38258e7be60bc71be478fe407775f43bfa505d7b"
+  "gitHead": "7ebc236f35b3cd624f5fec74672ef8213d58adae"
 }

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -65,19 +65,19 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
     case contentTypes.MULTIDISCIPLINARY_TOPIC:
       icon = <MultidisciplinaryTopic />;
       break;
-    case contentTypes.resourceTypeMapping.image:
+    case contentTypes.resourceEmbedTypeMapping.image:
       icon = <Media />;
       embedResource = true;
       break;
-    case contentTypes.resourceTypeMapping.audio:
+    case contentTypes.resourceEmbedTypeMapping.audio:
       icon = <SquareAudio />;
       embedResource = true;
       break;
-    case contentTypes.resourceTypeMapping.video:
+    case contentTypes.resourceEmbedTypeMapping.video:
       icon = <SquareVideo />;
       embedResource = true;
       break;
-    case contentTypes.resourceTypeMapping.concept:
+    case contentTypes.resourceEmbedTypeMapping.concept:
       icon = <Concept />;
       embedResource = true;
       break;
@@ -88,7 +88,7 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
   if (embedResource) {
     modifiers.push('embed-resource');
   }
-  if (background || embedResource) {
+  if (background) {
     modifiers.push('background');
   }
   if (border) {

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, resourceTypeMapping } 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,11 +231,8 @@ const ListResource = ({
           resourceImage={resourceImage}
           loading={isLoading}
           type={imageType}
-          contentType={
-            contentTypeMapping[firstContentType] ??
-            resourceTypeMapping[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 '';
   }