@ndla/ui 44.0.9 → 44.0.11

package/src/Article/Article.tsx

@@ -29,13 +29,12 @@ const classes = new BEMHelper({
 });
 
 type ArticleWrapperProps = {
-  id: string;
   modifier?: string;
   children: ReactNode;
 };
 
-export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(({ children, modifier, id }, ref) => (
-  <article id={id} {...classes(undefined, modifier)} ref={ref}>
+export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(({ children, modifier }, ref) => (
+  <article {...classes(undefined, modifier)} ref={ref}>
     {children}
   </article>
 ));
@@ -44,9 +43,10 @@ type ArticleTitleProps = {
   icon?: ReactNode;
   label?: string;
   children: ReactNode;
+  id: string;
 };
 
-export const ArticleTitle = ({ children, icon, label }: ArticleTitleProps) => {
+export const ArticleTitle = ({ children, icon, label, id }: ArticleTitleProps) => {
   const modifiers = [];
   if (icon) {
     modifiers.push('icon');
@@ -62,7 +62,7 @@ export const ArticleTitle = ({ children, icon, label }: ArticleTitleProps) => {
     <div {...classes('title', modifiers)}>
       {icon}
       {labelView}
-      <Heading element="h1" headingStyle="h1" tabIndex={-1}>
+      <Heading element="h1" headingStyle="h1" id={id} tabIndex={-1}>
         {children}
       </Heading>
     </div>
@@ -184,20 +184,14 @@ export const Article = ({
     }
   }, [wrapperRef]);
 
-  const {
-    title,
-    introduction,
-    published,
-    content,
-    footNotes,
-    copyright: { license: licenseObj, creators, rightsholders, processors },
-  } = article;
+  const { title, introduction, published, content, footNotes, copyright } = article;
 
-  const authors = creators.length || rightsholders.length ? creators : processors;
+  const authors =
+    copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
 
   return (
     <div ref={wrapperRef}>
-      <ArticleWrapper modifier={modifier} id={id} ref={articleRef}>
+      <ArticleWrapper modifier={modifier} ref={articleRef}>
         <LayoutItem layout="center">
           {accessMessage && <ArticleAccessMessage message={accessMessage} />}
 
@@ -209,7 +203,7 @@ export const Article = ({
           <ArticleHeaderWrapper competenceGoals={competenceGoals}>
             {heartButton ? <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper> : null}
 
-            <ArticleTitle icon={icon} label={messages.label}>
+            <ArticleTitle id={id} icon={icon} label={messages.label}>
               {title}
             </ArticleTitle>
             <ArticleIntroduction renderMarkdown={renderMarkdown}>{introduction}</ArticleIntroduction>
@@ -226,9 +220,9 @@ export const Article = ({
           <ArticleByline
             footnotes={footNotes}
             authors={authors}
-            suppliers={rightsholders}
+            suppliers={copyright?.rightsholders}
             published={published}
-            license={licenseObj?.license ?? ''}
+            license={copyright?.license?.license ?? ''}
             licenseBox={licenseBox}
           />
         </LayoutItem>

package/src/CampaignBlock/CampaignBlock.tsx

@@ -95,7 +95,7 @@ const CampaignBlock = ({
 }: Props) => {
   return (
     <Container className={className} data-type="campaign-block">
-      {imageBefore && <StyledImg src={imageBefore.src} />}
+      {imageBefore && <StyledImg src={imageBefore.src} alt="" />}
       <TextWrapper>
         <Heading css={headingStyle}>{title.title}</Heading>
         <StyledDescription>{description.text}</StyledDescription>
@@ -104,7 +104,7 @@ const CampaignBlock = ({
           <Forward />
         </StyledLink>
       </TextWrapper>
-      {imageAfter && <StyledImg src={imageAfter.src} />}
+      {imageAfter && <StyledImg src={imageAfter.src} alt="" />}
     </Container>
   );
 };

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -78,9 +78,9 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) =>
   }
 
   const authors =
-    article.copyright.creators.length || article.copyright.rightsholders.length
+    article.copyright?.creators.length || article.copyright?.rightsholders.length
       ? article.copyright.creators
-      : article.copyright.processors;
+      : article.copyright?.processors;
   return (
     <StyledArticle style={cssVars}>
       <LayoutItem>
@@ -92,8 +92,8 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) =>
       <LayoutItem>{content}</LayoutItem>
       <ArticleByline
         authors={authors}
-        suppliers={article.copyright.rightsholders}
-        license={article.copyright.license?.license!}
+        suppliers={article.copyright?.rightsholders}
+        license={article.copyright?.license?.license!}
         published={article.published}
         accordionHeaderVariant={'white'}
         licenseBox={licenseBox}

package/src/ProgrammeCard/ProgrammeCard.tsx

@@ -39,6 +39,8 @@ const StyledCardContainer = styled(SafeLink)`
   }
 
   ${mq.range({ from: breakpoints.tablet })} {
+    min-height: 350px;
+    min-width: 250px;
     max-height: 350px;
     width: 250px;
   }
@@ -46,6 +48,7 @@ const StyledCardContainer = styled(SafeLink)`
 
 const StyledImg = styled.img`
   display: none;
+  flex: 1;
   border-radius: ${misc.borderRadius} ${misc.borderRadius} 0 0;
   width: 100%;
 
@@ -66,6 +69,7 @@ const StyledTitle = styled.span`
   min-height: 70px;
   align-items: center;
   padding-left: ${spacing.nsmall};
+  margin-top: auto;
 
   border: 1px solid ${colors.brand.lighter};
   border-radius: 0 0 ${misc.borderRadius} ${misc.borderRadius};
@@ -82,8 +86,8 @@ const StyledTitle = styled.span`
 const ProgrammeCard = ({ title, narrowImage, wideImage, url }: Programme) => {
   return (
     <StyledCardContainer to={url}>
-      {narrowImage && <StyledImg data-is-mobile="false" src={narrowImage.src} alt={narrowImage.alt} />}
-      {wideImage && <StyledImg data-is-mobile="true" src={wideImage.src} alt={wideImage.alt} />}
+      {narrowImage && <StyledImg data-is-mobile="false" src={narrowImage.src} loading="lazy" alt={narrowImage.alt} />}
+      {wideImage && <StyledImg data-is-mobile="true" src={wideImage.src} loading="lazy" alt={wideImage.alt} />}
       <StyledTitle>{title.title}</StyledTitle>
     </StyledCardContainer>
   );

package/src/types.ts

@@ -70,7 +70,7 @@ export interface Article {
   introduction: string;
   content: ReactNode;
   footNotes: Array<FootNote>;
-  copyright: Copyright;
+  copyright?: Copyright;
   published: string;
 }