@ndla/ui 37.0.2 → 37.0.5

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: {
@@ -1139,7 +1141,7 @@ const messages = {
           unShare: 'Do you want to stop sharing this folder?',
         },
         description: {
-          copy: 'Copy and share this link:',
+          copy: 'Press the link to copy',
           private:
             'When you share a folder, you create a link which is open to anyone who has the link. You can change the content or stop sharing whenever you want.',
           private2:
@@ -1188,7 +1190,7 @@ const messages = {
       info: 'This folder contains learning resources and tasks from NDLA, gathered by a teacher.',
       firstShared: 'The folder was shared for the first time {{date}}',
       learningpathUnsupported:
-        'Learning paths cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.',
+        'Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.',
       drawerButton: 'Show folders and resources',
       drawerTitle: 'Folders and resources',
       description: {

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: {
@@ -1138,7 +1140,7 @@ const messages = {
           unShare: 'Vil du avslutte deling av denne mappa?',
         },
         description: {
-          copy: 'Kopier og del denne lenka:',
+          copy: 'Trykk på lenke for å kopiere',
           private:
             'Når du deler ei mappe, lager du ei lenke som er åpen for alle som har lenka. Du kan endre innholdet eller avslutte delinga når du ønsker det. ',
           private2: 'Når du deler en mappe deler du alt innholdet i mappen, inkludert undermapper og ressurser',
@@ -1185,7 +1187,7 @@ const messages = {
       info: 'Denne mappa inneholder fagstoff og oppgaver fra NDLA, samlet av en lærer. ',
       firstShared: 'Mappa ble delt første gang {{date}}',
       learningpathUnsupported:
-        'Læringsstier kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.',
+        'Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.',
       drawerButton: 'Vis mapper og ressurser',
       drawerTitle: 'Mapper og ressurser',
       description: {

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',
@@ -938,7 +939,7 @@ const messages = {
   frontpageMultidisciplinarySubject: {
     heading: 'Tverrfaglege tema',
     text: 'Dei tre tverrfaglege temaa i læreplanverket tek utgangspunkt i aktuelle samfunnsutfordringar som krev engasjement og innsats frå einskildmenneske og fellesskapet i lokalsamfunnet, nasjonalt og globalt.',
-    linkText: 'Sjå casar for tverrfaglege tema',
+    linkText: 'Sjå caser for tverrfaglege tema',
     publicHealthTopic: 'Folkehelse og livsmeistring',
     democracyTopic: 'Demokrati og medborgarskap',
     sustainableTopic: 'Bærekraftig utvikling',
@@ -995,6 +996,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {
@@ -1138,7 +1140,7 @@ const messages = {
           unShare: 'Vil du avslutte deling av denne mappa?',
         },
         description: {
-          copy: 'Kopier og del denne lenka:',
+          copy: 'Trykk på lenke for å kopiere',
           private:
             'Når du deler ei mappe, lagar du ei lenke som er open for alle som har lenka. Du kan endre innhaldet eller avslutte delinga når du ønsker det.',
           private2: 'Når du deler ei mappe deler du alt innhaldet i mappa, inkludert undermapper og ressursar',
@@ -1187,7 +1189,7 @@ const messages = {
       drawerButton: 'Vis mapper og ressursar',
       drawerTitle: 'Mapper og ressursar',
       learningpathUnsupported:
-        'Læringsstiar kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
+        'Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
         all: 'I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.\n\nDersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk av læraren din, eller du kan bokmerke sida.',
         info1:

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',
@@ -996,6 +997,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Viečča jietnafiilla',
     reuse: 'Geavat jietnafiilla',
     error: {
@@ -1139,7 +1141,7 @@ const messages = {
           unShare: 'Háliidat go loahpahit máhpa juogadeami?',
         },
         description: {
-          copy: 'Máŋge ja juoge dán liŋkka:',
+          copy: 'Trykk på lenke for å kopiere',
           private:
             'Go juogát máhpa ráhkadat liŋkka mii lea rabas buohkaide geas lea liŋka. Sáhtát rievdadit sisdoalu dahje loahpahit juogadeami go háliidat.',
           private2: 'Go juogadat máhpa juogát buot máhpa sisdoalu, oktan vuollemáhpaiguin ja resursaiguin',
@@ -1188,7 +1190,7 @@ const messages = {
       drawerButton: 'Čájet máhpaid ja resurssaid',
       drawerTitle: 'Máhpat ja resurssat',
       learningpathUnsupported:
-        'Oahppanbálgát eai sáhte njuolga čájehuvvot juogaduvvon máhpain. Jus deaddilat liŋkka navigerenfálus gurut bealde, rahpasa bálggis ođđa siiddus.',
+        'Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
         all: 'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.\n\nSáhtát bláđet artihkkaliid fálu vehkiin.\n\nJus háliidat gávdnat máhpa maŋŋel fas, sáhtát geavahit seamma liŋkka maid oahpaheaddjis leat ožžon, dahje sáhtát girjemearka bidjat siidui.',
         info1:

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',
@@ -999,6 +1000,7 @@ const messages = {
     },
   },
   audio: {
+    play: 'Spill av',
     download: 'Veedtjh tjoeje-fijlem',
     reuse: 'Nuhtjh tjoeje-fijlem',
     error: {
@@ -1142,7 +1144,7 @@ const messages = {
           unShare: 'Vil du avslutte deling av denne mappen?',
         },
         description: {
-          copy: 'Kopier og del denne lenken:',
+          copy: 'Trykk på lenke for å kopiere',
           private:
             'Når du deler en mappe lager du en lenke som er åpen for alle som har lenken. Du kan endre innholdet eller avslutte delingen når du ønsker.',
           private2: 'Når du deler en mappe deler du alt innholdet i mappen, inkludert undermapper og ressurser',
@@ -1192,7 +1194,7 @@ const messages = {
       drawerButton: 'Vis mapper og ressursar',
       drawerTitle: 'Mapper og ressursar',
       learningpathUnsupported:
-        'Læringsstiar kan ikke visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
+        'Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
         all: 'I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.\n\nHvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk av læreren din, eller du kan bokmerke sida.',
         info1: