@ndla/ui 13.1.1 → 13.2.0

package/src/Article/ArticleHeaderWrapper.tsx

@@ -71,6 +71,7 @@ const CompetenceButtonWrapper = styled.div<CompetenceButtonWrapperProps>`
 type Props = {
   competenceGoals?:
     | ((inp: { Dialog: ComponentType; dialogProps: { isOpen: boolean; onClose: () => void } }) => ReactNode)
+    | ReactNode
     | null;
   competenceGoalTypes?: string[];
   children: ReactNode;

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -216,7 +216,7 @@ const FrontpageAllSubjects = ({
       });
   });
 
-  data.unshift({
+  data.push({
     title: t('frontpageMenu.allsubjects'),
     content: renderList(allSubjects, onNavigate, onToggleSubject, subjectViewType, selectedSubjects),
   });

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();
@@ -94,7 +101,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 +140,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 { getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Figure, FigureCaption, FigureLicenseDialog, FigureType } from '../Figure';
@@ -47,15 +47,9 @@ 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 { creators, rightsholders, processors } = getLicenseCredits(copyright);
+
+  const authors = creators.length || rightsholders.length ? [...creators, ...rightsholders] : [...processors];
 
   return (
     <Figure resizeIframe={resizeIframe} id={figureId} type={figureType || 'full-column'}>
@@ -68,12 +62,12 @@ 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={authors}
                 locale={i18n.language}
                 title={title}
                 origin={copyright?.origin}

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;