@ndla/ui 13.1.1 → 13.2.2

package/src/Notion/ConceptNotion.tsx

@@ -12,6 +12,7 @@ import { initArticleScripts } from '@ndla/article-scripts';
 import { useTranslation } from 'react-i18next';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import { parseMarkdown } from '@ndla/util';
+import { getLicenseCredits } from '@ndla/licenses';
 import Notion, { NotionDialogContent, NotionDialogText, NotionDialogLicenses } from '@ndla/notion';
 import { Notion as UINotion } from '.';
 import { NotionImage } from './NotionImage';
@@ -57,6 +58,12 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
   const visualElementId = `visual-element-${concept.id}`;
   const { t } = useTranslation();
 
+  const { creators, rightsholders, processors } = getLicenseCredits(concept.copyright);
+
+  const authors = (creators.length || rightsholders.length ? [...creators, ...rightsholders] : [...processors]).map(
+    (author) => author.name,
+  );
+
   useEffect(() => {
     if (!disableScripts) {
       initArticleScripts();
@@ -67,6 +74,7 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
     <FigureNotion
       resizeIframe
       id={figureId}
+      title={concept.title}
       figureId={visualElementId}
       copyright={concept.copyright}
       licenseString={concept.copyright?.license?.license ?? ''}
@@ -94,7 +102,11 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
                       ) : undefined}
                       <NotionDialogText>{parseMarkdown(concept.text, 'body')}</NotionDialogText>
                     </NotionDialogContent>
-                    <NotionDialogLicenses license={concept.copyright?.license?.license ?? ''} source={concept.source} />
+                    <NotionDialogLicenses
+                      authors={authors}
+                      license={concept.copyright?.license?.license ?? ''}
+                      source={concept.source}
+                    />
                   </>
                 }>
                 {concept.visualElement.image && (
@@ -129,7 +141,11 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
 
                       <NotionDialogText>{parseMarkdown(concept.text, 'body')}</NotionDialogText>
                     </NotionDialogContent>
-                    <NotionDialogLicenses license={concept.copyright?.license?.license ?? ''} source={concept.source} />
+                    <NotionDialogLicenses
+                      authors={authors}
+                      license={concept.copyright?.license?.license ?? ''}
+                      source={concept.source}
+                    />
                   </>
                 }>
                 {concept.image && (

package/src/Notion/FigureNotion.tsx

@@ -7,7 +7,7 @@
 
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
-import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Figure, FigureCaption, FigureLicenseDialog, FigureType } from '../Figure';
@@ -23,7 +23,7 @@ interface Props {
   figureId: string;
   children: ReactNode | ((params: { typeClass: string }) => ReactNode);
   id: string;
-  title?: string;
+  title: string;
   copyright?: Partial<Copyright>;
   licenseString: string;
   type: 'video' | 'h5p' | 'image' | 'concept' | 'other';
@@ -47,15 +47,15 @@ const FigureNotion = ({
 }: Props) => {
   const { t, i18n } = useTranslation();
   const license = getLicenseByAbbreviation(licenseString, i18n.language);
-  const { creators, processors, rightsholders } = copyright ?? {};
-  const contributors = getGroupedContributorDescriptionList(
-    {
-      creators: creators ?? [],
-      processors: processors ?? [],
-      rightsholders: rightsholders ?? [],
-    },
-    i18n.language,
-  ).map((i) => ({ name: i.description, type: i.label }));
+  const licenseCredits = getLicenseCredits(copyright);
+  const { creators, rightsholders, processors } = licenseCredits;
+
+  const authors = creators.length || rightsholders.length ? [...creators, ...rightsholders] : [...processors];
+
+  const groupedAuthors = getGroupedContributorDescriptionList(licenseCredits, i18n.language).map((item) => ({
+    name: item.description,
+    type: item.label,
+  }));
 
   return (
     <Figure resizeIframe={resizeIframe} id={figureId} type={figureType || 'full-column'}>
@@ -68,23 +68,24 @@ const FigureNotion = ({
               figureId={figureId}
               id={id}
               reuseLabel={t(`${type}.reuse`)}
-              authors={contributors}
+              authors={authors}
               licenseRights={license.rights}
               hideIconsAndAuthors={hideIconsAndAuthors}>
               <FigureLicenseDialog
                 id={id}
-                authors={contributors}
+                authors={groupedAuthors}
                 locale={i18n.language}
                 title={title}
                 origin={copyright?.origin}
                 license={license}
                 messages={{
                   close: t('close'),
-                  rulesForUse: t('license.concept.rules'),
+                  rulesForUse: t(`license.${type}.rules`),
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}></FigureLicenseDialog>
+                }}
+              />
             </FigureCaption>
           ) : (
             <BottomBorder />

package/src/Notion/NotionVisualElement.tsx

@@ -68,7 +68,7 @@ const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
       {visualElement.image?.src ? (
         <img src={visualElement.image?.src} alt={visualElement.image.alt} />
       ) : (
-        <StyledIframe type={type} src={visualElement.url} title={visualElement.title} />
+        <StyledIframe allowFullScreen type={type} src={visualElement.url} title={visualElement.title} />
       )}
     </FigureNotion>
   );

package/src/SearchTypeResult/SearchViewType.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 
 const Wrapper = styled.div`
   display: inline-flex;
-  justify-content: center;
+  justify-content: right;
   align-items: center;
   flex: 1;
   ${mq.range({ until: breakpoints.tablet })} {

package/src/locale/messages-en.ts

@@ -757,15 +757,15 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
-      text: 'Aktiviser elevane med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen',

package/src/locale/messages-nb.ts

@@ -755,15 +755,15 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
-      text: 'Aktiviser elevene med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen',

package/src/locale/messages-nn.ts

@@ -756,15 +756,15 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
-      text: 'Aktiviser elevane med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen',

package/src/locale/messages-se.ts

@@ -755,15 +755,15 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
-      text: 'Aktiviser elevene med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen',

package/src/locale/messages-sma.ts

@@ -755,15 +755,15 @@ const messages = {
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland',
     },
     blog2: {
-      text: 'Aktiviser elevene med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen',

package/src/types.ts

@@ -68,7 +68,7 @@ export interface FootNote {
 export interface Article {
   title: string;
   introduction: string;
-  content: string;
+  content: string | (() => ReactNode) | ReactNode;
   footNotes: Array<FootNote>;
   copyright: Copyright;
   published: string;