@ndla/ui 44.0.8 → 44.0.10

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>
@@ -197,7 +197,7 @@ export const Article = ({
 
   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 +209,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>

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

@@ -6,13 +6,14 @@
  *
  */
 
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode, useMemo } from 'react';
 import { breakpoints, fonts, mq, spacing, spacingUnit } from '@ndla/core';
 import styled from '@emotion/styled';
 import { Article } from '../types';
 import LayoutItem from '../Layout';
 import { Heading } from '../Typography';
 import { ArticleByline } from '../Article';
+import { useMastheadHeight } from '../Masthead';
 
 interface Props {
   article: Omit<Article, 'footNotes'>;
@@ -64,11 +65,13 @@ const StyledIntroduction = styled.div`
 `;
 
 export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) => {
+  const { height = 0 } = useMastheadHeight();
+  const cssVars = useMemo(() => ({ '--masthead-height': `${height}px` } as unknown as CSSProperties), [height]);
   const { title, introduction, content } = article;
 
   if (isWide) {
     return (
-      <StyledArticle data-wide={isWide}>
+      <StyledArticle data-wide={isWide} style={cssVars}>
         <LayoutItem>{content}</LayoutItem>
       </StyledArticle>
     );
@@ -79,7 +82,7 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) =>
       ? article.copyright.creators
       : article.copyright.processors;
   return (
-    <StyledArticle>
+    <StyledArticle style={cssVars}>
       <LayoutItem>
         <Heading id={id} headingStyle="h1" element="h1" margin="normal" tabIndex={-1}>
           {title}

package/src/Grid/Grid.tsx

@@ -90,7 +90,7 @@ const Grid = ({ columns, border, children, background, size, ...rest }: GridProp
 const StyledGridParallaxItem = styled.div`
   position: relative;
   > div {
-    top: 0px;
+    top: var(--masthead-height, 0px);
     position: sticky;
   }
 `;

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>
   );