@ndla/ui 37.0.2 → 37.0.4

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-en.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'This resource is accessible only to teachers who are logged in with Feide.'
     },
-    possiblyOutdated: 'The article is outdated'
+    possiblyOutdated: 'The article is outdated',
+    references: 'References'
   },
   competenceGoals: {
     competenceGoal: 'competence-goal',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Play',
     download: 'Download audio',
     reuse: 'Use audio',
     error: {

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-nb.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.'
     },
-    possiblyOutdated: 'Artikkelen er foreldet.'
+    possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-nn.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.'
     },
-    possiblyOutdated: 'Artikkelen er foreldet.'
+    possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-se.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Dát resursa lea dušše olamuttus oahpaheddjiide geat leat Feide bokte sisaloggejuvvon.'
     },
-    possiblyOutdated: 'Artihkal lea boarásmuvvan.'
+    possiblyOutdated: 'Artihkal lea boarásmuvvan.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'Gealbomihttomearri',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Viečča jietnafiilla',
     reuse: 'Geavat jietnafiilla',
     error: {

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-sma.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Daate vierhtie ajve dïllesisnie lohkehtæjjide mah tjaangeme Feidine.'
     },
-    possiblyOutdated: 'Artikkelen er foreldet.'
+    possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'maahtoe-ulmie',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Veedtjh tjoeje-fijlem',
     reuse: 'Nuhtjh tjoeje-fijlem',
     error: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "37.0.2",
+  "version": "37.0.4",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,7 +31,7 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.0",
+    "@ndla/accordion": "^2.2.1",
     "@ndla/article-scripts": "^3.0.17",
     "@ndla/button": "^10.1.0",
     "@ndla/carousel": "^3.1.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ebc236f35b3cd624f5fec74672ef8213d58adae"
+  "gitHead": "db2b4d8eda31595ec90f1e2fc26972382214cad9"
 }

package/src/Article/ArticleByline.tsx

@@ -149,14 +149,14 @@ const ArticleByline = ({
       <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
         {licenseBox && (
           <AccordionItem value="rulesForUse">
-            <AccordionHeader>{t('article.useContent')}</AccordionHeader>
+            <AccordionHeader headingLevel="h2">{t('article.useContent')}</AccordionHeader>
             <AccordionContent>{licenseBox}</AccordionContent>
           </AccordionItem>
         )}
 
         {!!footnotes?.length && (
           <AccordionItem value={referencesAccordionId}>
-            <AccordionHeader>Referanser</AccordionHeader>
+            <AccordionHeader headingLevel="h2">{t('article.references')}</AccordionHeader>
             <AccordionContent forceMount>
               <ArticleFootNotes footNotes={footnotes} />
             </AccordionContent>

package/src/AudioPlayer/SpeechControl.tsx

@@ -7,30 +7,10 @@
  */
 
 import React, { useRef } from 'react';
-import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
 import { VolumeUp } from '@ndla/icons/common';
-
-const SpeechPlayButton = styled.button`
-  background: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  cursor: pointer;
-  color: ${colors.brand.primary};
-  margin-right: 0;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: ${colors.brand.secondary};
-  }
-  .c-icon {
-    width: 24px;
-    height: 24px;
-  }
-`;
+import Tooltip from '@ndla/tooltip';
+import { IconButtonV2 } from '@ndla/button';
 
 type Props = {
   src: string;
@@ -38,6 +18,7 @@ type Props = {
 };
 
 const SpeechControl = ({ src, title }: Props) => {
+  const { t } = useTranslation();
   const audioRef = useRef<HTMLAudioElement>(null);
 
   const togglePlay = () => {
@@ -54,9 +35,11 @@ const SpeechControl = ({ src, title }: Props) => {
     <div>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
-      <SpeechPlayButton type="button" onClick={togglePlay}>
-        <VolumeUp role="img" aria-label="play" title="play" />
-      </SpeechPlayButton>
+      <Tooltip tooltip={t('audio.play')}>
+        <IconButtonV2 type="button" onClick={togglePlay} aria-label={t('audio.play')} variant="ghost">
+          <VolumeUp />
+        </IconButtonV2>
+      </Tooltip>
     </div>
   );
 };

package/src/Embed/AudioEmbed.tsx

@@ -7,6 +7,7 @@
  */
 
 import { AudioMetaData, ImageMetaData } from '@ndla/types-embed';
+import { COPYRIGHTED } from '@ndla/licenses';
 //@ts-ignore
 import { Remarkable } from 'remarkable';
 import AudioPlayer from '../AudioPlayer';
@@ -87,7 +88,9 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
         bottomRounded={!data.imageMeta}
         copyright={embed.data.copyright}
       >
-        {HeartButton && <HeartButton embed={embed} />}
+        {HeartButton && embed.data.copyright.license.license.toLowerCase() !== COPYRIGHTED && (
+          <HeartButton embed={embed} />
+        )}
       </EmbedByline>
       {data.imageMeta && (
         <EmbedByline
@@ -98,7 +101,9 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
           bottomRounded
           copyright={data.imageMeta.copyright}
         >
-          {HeartButton && <HeartButton embed={imageMetaToMockEmbed(embed)} />}
+          {HeartButton && data.imageMeta.copyright.license.license.toLowerCase() !== COPYRIGHTED && (
+            <HeartButton embed={imageMetaToMockEmbed(embed)} />
+          )}
         </EmbedByline>
       )}
     </Figure>

package/src/Embed/BrightcoveEmbed.tsx

@@ -10,6 +10,7 @@ import sortBy from 'lodash/sortBy';
 import isNumber from 'lodash/isNumber';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { useEffect, useRef, useState } from 'react';
 import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
@@ -125,7 +126,7 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
             {t(`figure.button.${!showOriginalVideo ? 'original' : 'alternative'}`)}
           </LinkedVideoButton>
         )}
-        {HeartButton && <HeartButton embed={embed} />}
+        {HeartButton && data.copyright?.license.license.toLowerCase() !== COPYRIGHTED && <HeartButton embed={embed} />}
       </EmbedByline>
     </Figure>
   );

package/src/Embed/ConceptEmbed.tsx

@@ -16,6 +16,7 @@ import { Cross } from '@ndla/icons/action';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ConceptMetaData } from '@ndla/types-embed';
 import Tooltip from '@ndla/tooltip';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { Notion as UINotion } from '../Notion';
 import { Figure } from '../Figure';
 import { NotionImage } from '../Notion/NotionImage';
@@ -382,7 +383,7 @@ export const BlockConcept = ({
         />
         {copyright ? (
           <EmbedByline copyright={copyright} bottomRounded topRounded type="concept">
-            {conceptHeartButton}
+            {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
         ) : (
           <BottomBorder />

package/src/Embed/ImageEmbed.tsx

@@ -11,6 +11,7 @@ import { ImageEmbedData, ImageMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
 import { MouseEventHandler, useState } from 'react';
 import { ExpandTwoArrows } from '@ndla/icons/action';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { ArrowCollapse, ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { Figure, FigureType } from '../Figure';
 import Image, { ImageLink } from '../Image';
@@ -152,7 +153,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton }: Props) => {
           bottomRounded
           visibleAlt={previewAlt ? embed.embedData.alt : ''}
         >
-          {HeartButton && <HeartButton embed={embed} />}
+          {HeartButton && data.copyright.license.license.toLowerCase() !== COPYRIGHTED && <HeartButton embed={embed} />}
         </EmbedByline>
       )}
     </Figure>

package/src/Embed/conceptComponents.tsx

@@ -14,6 +14,7 @@ import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
 import { parseMarkdown } from '@ndla/util';
 import styled from '@emotion/styled';
 import { NotionDialogContent, NotionDialogText } from '@ndla/notion';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { Copyright } from '../types';
 import ImageEmbed from './ImageEmbed';
 import BrightcoveEmbed from './BrightcoveEmbed';
@@ -202,7 +203,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
         </ContentPadding>
         {copyright && (
           <EmbedByline copyright={copyright} type="concept">
-            {conceptHeartButton}
+            {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
         )}
       </div>

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/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',
@@ -996,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',
@@ -995,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',
@@ -995,6 +996,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {