@ndla/ui 37.0.0 → 37.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "37.0.0",
+  "version": "37.0.1",
   "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": "38258e7be60bc71be478fe407775f43bfa505d7b"
 }

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.resourceTypeMapping.image:
+      icon = <Media />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.audio:
+      icon = <SquareAudio />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.video:
+      icon = <SquareVideo />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.concept:
+      icon = <Concept />;
+      embedResource = true;
+      break;
     default:
       break;
   }
+
+  if (embedResource) {
+    modifiers.push('embed-resource');
+  }
+  if (background || embedResource) {
+    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/ListResource.tsx

@@ -22,7 +22,7 @@ import {
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
-import { contentTypeMapping } from '../model/ContentType';
+import { contentTypeMapping, resourceTypeMapping } from '../model/ContentType';
 import { SettingsMenu } from '../MyNdla';
 
 const ListResourceWrapper = styled.div`
@@ -229,7 +229,11 @@ const ListResource = ({
           resourceImage={resourceImage}
           loading={isLoading}
           type={imageType}
-          contentType={contentTypeMapping[firstContentType] ?? contentTypeMapping['default']}
+          contentType={
+            contentTypeMapping[firstContentType] ??
+            resourceTypeMapping[firstContentType] ??
+            contentTypeMapping['default']
+          }
         />
       </ImageWrapper>
       <TopicAndTitleWrapper>