@ndla/ui 37.0.1 → 37.0.4

package/src/List/OrderedList.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { fonts, spacing, spacingUnit } from '@ndla/core';
+import { fonts, spacing } from '@ndla/core';
 import { forwardRef, HTMLAttributes } from 'react';
 
 export const generateListResets = () => {
@@ -21,24 +21,25 @@ export const generateListResets = () => {
   return styles;
 };
 
-const listSpacing = {
-  xlarge: `${spacingUnit * 2.5}px`,
-  xxlarge: `${spacingUnit * 3}px`,
-};
-
 const StyledOl = styled.ol`
   margin-top: 0;
-  margin-left: 0;
+  margin-left: ${spacing.medium};
   ${fonts.sizes('18px', '29px')};
   list-style-type: none;
+  padding-left: ${spacing.medium} !important;
 
   // Child ordered lists
   ol {
-    padding-left: ${spacing.normal};
+    padding-left: ${spacing.medium};
+    margin-left: 0;
   }
   // List item
   li {
     margin-top: ${spacing.normal};
+
+    p {
+      margin-bottom: ${spacing.normal} !important;
+    }
   }
 
   &[data-type='letters'] {
@@ -49,7 +50,7 @@ const StyledOl = styled.ol`
         position: absolute;
         transform: translateX(-100%);
         content: counter(item, upper-alpha) '.';
-        padding-right: 0.25em;
+        padding-right: ${spacing.nsmall};
       }
 
       > ol[data-type='letters'] {
@@ -57,7 +58,6 @@ const StyledOl = styled.ol`
           content: counter(item, lower-alpha) '.';
         }
         ol[data-type='letters'] {
-          padding-left: ${spacing.normal};
           > li:before {
             content: counter(item, lower-roman) '.';
           }
@@ -73,20 +73,19 @@ const StyledOl = styled.ol`
       &:before {
         position: absolute;
         transform: translateX(-100%);
-        padding-right: 0.25em;
         content: counters(item, '.') '.';
+        padding-right: ${spacing.nsmall};
       }
 
       > ol:not([data-type='letters']) {
-        padding-left: ${spacing.medium};
         > li {
+          padding-left: ${spacing.nsmall};
           > ol:not([data-type='letters']) {
-            padding-left: ${spacing.large};
             > li {
+              padding-left: ${spacing.medium};
               > ol:not([data-type='letters']) {
-                padding-left: ${listSpacing.xlarge};
-                ol:not([data-type='letters']) {
-                  padding-left: ${listSpacing.xxlarge};
+                > li {
+                  padding-left: ${spacing.large};
                 }
               }
             }

package/src/List/UnOrderedList.tsx

@@ -12,6 +12,8 @@ import { forwardRef, HTMLAttributes } from 'react';
 import { generateListResets } from './OrderedList';
 
 const StyledUl = styled.ul`
+  padding-left: ${spacing.small} !important;
+  margin-left: ${spacing.medium} !important;
   > li {
     ::marker {
       color: ${colors.brand.secondary};
@@ -19,15 +21,20 @@ const StyledUl = styled.ul`
   }
   ul {
     list-style-image: none;
-    padding-left: ${spacing.mediumlarge};
+    padding-left: ${spacing.small};
+
+    margin-left: 0 !important;
   }
   margin-top: 0;
-  margin-left: 0;
   ${fonts.sizes('18px', '29px')};
 
   // List item
   li {
+    padding-left: ${spacing.nsmall};
     margin-top: ${spacing.normal};
+    p {
+      margin-bottom: ${spacing.normal} !important;
+    }
   }
 
   // Child unordered lists

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -27,32 +27,31 @@ const TopicNavigation = styled.div`
     align-items: flex-start;
     padding: 0 ${spacing.normal};
   }
-  ul {
-    list-style-type: none;
-    list-style-image: none;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    padding: 0;
-    margin: ${spacing.small} 0;
-    ${mq.range({ from: breakpoints.tablet })} {
-      padding-left: ${spacing.normal};
-    }
-    li {
-      padding: 0;
-      width: 100%;
-      ${mq.range({ from: breakpoints.tablet })} {
-        width: 50%;
-      }
-      a {
-        color: #fff;
-        &:hover,
-        &:focus {
-          color: ${colors.brand.light};
-        }
+`;
+
+const StyledUl = styled.ul`
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  list-style-image: none;
+  li {
+    flex: 1;
+    width: 100%;
+    a {
+      color: ${colors.white};
+      &:hover,
+      &:focus-within {
+        color: ${colors.brand.light};
       }
     }
   }
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: grid;
+    grid-template-rows: auto auto auto auto;
+    grid-template-columns: 1fr;
+    grid-auto-flow: column;
+    column-gap: ${spacing.normal};
+  }
 `;
 
 interface Props {
@@ -81,7 +80,7 @@ const FilmMovieSearch = ({
             {`${t('ndlaFilm.subjectsInMovies')}:`}
           </StyledHeadingH2>
           <nav className="u-12/12 u-8/12@tablet" aria-labelledby={skipToContentId}>
-            <ul>
+            <StyledUl>
               {topics.map((topic) => (
                 <li key={topic.id}>
                   <SafeLink to={topic.path} key={topic.id}>
@@ -89,7 +88,7 @@ const FilmMovieSearch = ({
                   </SafeLink>
                 </li>
               ))}
-            </ul>
+            </StyledUl>
           </nav>
         </TopicNavigation>
         <CategorySelect

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/Typography/Heading.tsx

@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-import { HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, ElementType, ReactNode } from 'react';
 import { HeadingLevel } from '../types';
 
 const style = css`
@@ -63,8 +63,8 @@ const style = css`
 
 type AllowedElements = HeadingLevel | 'p' | 'span';
 
-interface Props<T extends AllowedElements> extends HTMLAttributes<T> {
-  element: HeadingLevel | 'p' | 'span';
+interface Props<T extends AllowedElements> {
+  element: T;
   headingStyle: 'h1' | 'h2' | 'h3' | 'list-title' | 'default';
   serif?: boolean;
   /**
@@ -75,19 +75,19 @@ interface Props<T extends AllowedElements> extends HTMLAttributes<T> {
    */
   margin?: 'xlarge' | 'large' | 'normal' | 'small' | 'none';
   children: ReactNode;
-  className?: string;
 }
 
 const Heading = <T extends AllowedElements>({
-  element: Element,
+  element,
   children,
   headingStyle,
   margin = 'normal',
   serif,
-  className,
-}: Props<T>) => {
+  ...rest
+}: Props<T> & ComponentProps<T>) => {
+  const Element = element as ElementType;
   return (
-    <Element css={style} data-serif={serif} data-style={headingStyle} data-margin={margin} className={className}>
+    <Element css={style} data-serif={serif} data-style={headingStyle} data-margin={margin} {...rest}>
       {children}
     </Element>
   );

package/src/index.ts

@@ -277,3 +277,5 @@ export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
 export type { HeartButtonType } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
+export { Heading } from './Typography';
+export type { HeadingLevel } from './types';

package/src/locale/messages-en.ts

@@ -478,6 +478,7 @@ const messages = {
       onlyTeacher: 'This resource is accessible only to teachers who are logged in with Feide.',
     },
     possiblyOutdated: 'The article is outdated',
+    references: 'References',
   },
   competenceGoals: {
     competenceGoal: 'competence-goal',
@@ -694,6 +695,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',
@@ -990,6 +997,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Play',
     download: 'Download audio',
     reuse: 'Use audio',
     error: {

package/src/locale/messages-nb.ts

@@ -477,6 +477,7 @@ const messages = {
       onlyTeacher: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     },
     possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser',
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',
@@ -693,6 +694,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',
@@ -989,6 +996,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {

package/src/locale/messages-nn.ts

@@ -477,6 +477,7 @@ const messages = {
       onlyTeacher: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
     },
     possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser',
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',
@@ -693,6 +694,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',
@@ -989,6 +996,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {

package/src/locale/messages-se.ts

@@ -478,6 +478,7 @@ const messages = {
       onlyTeacher: 'Dát resursa lea dušše olamuttus oahpaheddjiide geat leat Feide bokte sisaloggejuvvon.',
     },
     possiblyOutdated: 'Artihkal lea boarásmuvvan.',
+    references: 'Referanser',
   },
   competenceGoals: {
     competenceGoal: 'Gealbomihttomearri',
@@ -694,6 +695,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',
@@ -990,6 +997,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Viečča jietnafiilla',
     reuse: 'Geavat jietnafiilla',
     error: {

package/src/locale/messages-sma.ts

@@ -478,6 +478,7 @@ const messages = {
       onlyTeacher: 'Daate vierhtie ajve dïllesisnie lohkehtæjjide mah tjaangeme Feidine.',
     },
     possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser',
   },
   competenceGoals: {
     competenceGoal: 'maahtoe-ulmie',
@@ -697,6 +698,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',
@@ -993,6 +1000,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Veedtjh tjoeje-fijlem',
     reuse: 'Nuhtjh tjoeje-fijlem',
     error: {

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 '';
   }