@ndla/ui 13.0.0 → 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/Breadcrumb/BreadcrumbItem.tsx

@@ -51,6 +51,7 @@ const StyledListItem = styled.li<AutoCollapseProps>`
 
 const CollapseContainer = styled.div<AutoCollapseProps>`
   display: inline-block;
+  color: inherit;
   ${({ autoCollapse }) =>
     autoCollapse &&
     css`
@@ -63,6 +64,7 @@ const CollapseContainer = styled.div<AutoCollapseProps>`
 
 const StyledChevron = styled(ChevronRight)`
   margin: ${spacing.xxsmall};
+  color: inherit;
 `;
 
 const StyledSafeLink = styled(SafeLink)`

package/src/Breadcrumb/HeaderBreadcrumb.tsx

@@ -14,53 +14,43 @@ import React from 'react';
 import Breadcrumb from './Breadcrumb';
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
 
+interface ThemeProps {
+  light: boolean | undefined;
+}
+
+const HeaderBreadcrumbWrapper = styled.div<ThemeProps>`
+  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
+`;
+
 const StyledHeaderSafeLink = styled(SafeLink)`
   ${fonts.sizes(14)};
   font-weight: ${fonts.weight.bold};
-  color: ${colors.brand.primary};
+  color: inherit;
 `;
 
-const StyledBlueRightChevron = styled(ChevronRight)`
-  color: ${colors.brand.primary};
+const StyledRightChevron = styled(ChevronRight)`
   margin: ${spacing.xxsmall};
-`;
-const StyledBlueSpan = styled.span`
-  color: ${colors.brand.primary};
-`;
-const StyledBlueSafeLink = styled(SafeLink)`
-  color: ${colors.brand.primary};
+  color: inherit;
 `;
 
 interface Props {
   items: SimpleBreadcrumbItem[];
+  light?: boolean;
 }
 
-const HeaderBreadcrumb = ({ items }: Props) => {
-  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
-    if (item.index === totalCount - 1) {
-      return <StyledBlueSpan>{item.name}</StyledBlueSpan>;
-    }
-    return <StyledBlueSafeLink to={item.to}>{item.name}</StyledBlueSafeLink>;
-  };
-
+const HeaderBreadcrumb = ({ items, light }: Props) => {
   const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
     if (item.index === totalCount - 1) {
       return null;
     }
-    return <StyledBlueRightChevron />;
+    return <StyledRightChevron />;
   };
 
   return (
-    <div>
+    <HeaderBreadcrumbWrapper light={light}>
       <StyledHeaderSafeLink to={items[0]?.to}>{items[0]?.name}</StyledHeaderSafeLink>
-      <Breadcrumb
-        items={items.slice(1)}
-        renderItem={renderItem}
-        renderSeparator={renderSeparator}
-        autoCollapse
-        collapseFirst
-      />
-    </div>
+      <Breadcrumb items={items.slice(1)} renderSeparator={renderSeparator} autoCollapse collapseFirst />
+    </HeaderBreadcrumbWrapper>
   );
 };
 

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;