ROOS-303: Make image required and enable the props: fetchPriority, wi… (#1470)

* ROOS-303: Make image required and enable the props: fetchPriority, width, height, loading, sizes and srcSet.

* ROOS-303: Make alt required.

* ROOS-303: Add missing alt tags.

Author: dhprins89

.changeset/polite-cycles-vanish.md

@@ -0,0 +1,6 @@
+---
+"@nl-rvo/css-hero": minor
+"@nl-rvo/component-library-react": minor
+---
+
+Make image required and enable the props: fetchPriority, width, height, loading, sizes and srcSet.

components/hero/README.md

@@ -1 +1,3 @@
-Het Hero component wordt altijd bovenaan een pagina geplaatst. De afbeelding die je wilt tonen kun je doen door middel van een object van `{src: string, alt: string}` of door een html `<img />` item mee te sturen.
+Het Hero component wordt altijd bovenaan een pagina geplaatst.
+De afbeelding is verplicht en kan worden aangeleverd als een afbeeldingsobject `{ src, alt }` of als een HTML`<img />` element.
+Bij gebruik van een afbeeldingsobject kunnen optioneel extra instellingen worden meegegeven, zoals `loading`, `decoding`, `fetchPriority`, `width` en `height`.

components/hero/hero.stories.tsx

@@ -6,9 +6,6 @@ const argTypes = {
   image: {
     control: { type: 'object' },
   },
-  imageAlt: {
-    control: { type: 'text' },
-  },
   title: {
     control: 'text',
   },
@@ -68,7 +65,7 @@ export const Default: Story = {
 export const CustomImageHero: Story = {
   args: {
     ...defaultArgs,
-    image: <img src="images/www/nieuwsbrief.webp" />,
+    image: <img src="images/www/nieuwsbrief.webp" alt="newsletter" />,
   },
   name: 'Hero - Custom image',
 };

components/hero/src/presets/0-default.jsx

@@ -5,7 +5,6 @@ export default (
     uxpId="hero"
     title="Rijksdienst voor Ondernemend Nederland"
     subtitle="Wij helpen u graag vooruit!"
-    image={{ src: 'https://placehold.co/600x400', alt: '' }}
-    imageAlt="Alt text"
+    image={{ src: 'https://placehold.co/600x400', alt: 'placeholder' }}
   />
 );

components/hero/src/template.tsx

@@ -8,42 +8,79 @@ import Heading from '../../heading/src/template';
 import MaxWidthLayout from '../../max-width-layout/src/template';
 import './index.scss';
 import parseContentMarkup from '../../utils/parseContentMarkup';
-import { isOfType } from '../../utils/typeUtils';
+
+type HeroImage =
+  | {
+      src: string;
+      alt: string;
+      loading?: 'eager' | 'lazy';
+      fetchPriority?: 'high' | 'low' | 'auto';
+      decoding?: 'async' | 'sync' | 'auto';
+      width?: number;
+      height?: number;
+      srcSet?: string;
+      sizes?: string;
+    }
+  | React.ReactElement<React.ImgHTMLAttributes<HTMLImageElement>>;
 
 export interface IHeroProps {
-  image?: Pick<HTMLImageElement, 'src' | 'alt'> | React.JSX.Element;
+  image: HeroImage;
   title?: string;
   subtitle?: string;
   size?: 'sm' | 'md' | 'lg';
   children?: ReactNode | undefined;
 }
 
-export const Hero: React.FC<IHeroProps & React.HTMLAttributes<HTMLDivElement>> = (props) => {
+type HeroProps = IHeroProps & React.HTMLAttributes<HTMLDivElement>;
+
+export const Hero: React.FC<HeroProps> = (props) => {
   const { image, title, subtitle, size, className, children, ...rootElementProps } = props;
 
   // Parse content markup (either a string, HTML string, React node or children)
   const contentMarkup: string | ReactNode = parseContentMarkup(children);
-
   const renderImage = () => {
     if (React.isValidElement(image)) {
       return <span className="rvo-hero__custom-image-wrapper">{image}</span>;
     }
 
-    if (isOfType(image, 'src') && image.src) return <img src={image.src} className="rvo-hero__image" alt={image.alt} />;
+    if (!image.src.trim()) throw new Error('Hero: image.src must be a non-empty string.');
+
+    if (!image.alt.trim()) throw new Error('Hero: image.alt must be a non-empty string.');
+
+    const loading = image.loading ?? 'eager';
+    const fetchPriority = image.fetchPriority ?? (loading === 'eager' ? 'high' : 'auto');
+    const decoding = image.decoding ?? 'async';
 
-    return null;
+    return (
+      <img
+        src={image.src}
+        alt={image.alt}
+        className="rvo-hero__image"
+        loading={loading}
+        fetchPriority={fetchPriority}
+        decoding={decoding}
+        width={image.width}
+        height={image.height}
+        srcSet={image.srcSet}
+        sizes={image.sizes}
+      />
+    );
   };
 
   return (
     <MaxWidthLayout size={size} className={clsx('rvo-hero', className)} {...rootElementProps}>
       <div className="rvo-hero__image-container">{renderImage()}</div>
-      <div className="rvo-hero__content">
-        <Heading type="h1" className="rvo-hero__title" noMargins={true}>
-          {title}
-        </Heading>
-        <span className="rvo-hero__subtitle">{subtitle}</span>
-        {contentMarkup}
-      </div>
+      {(title || subtitle || contentMarkup) && (
+        <div className="rvo-hero__content">
+          {title && (
+            <Heading type="h1" className="rvo-hero__title" noMargins={true}>
+              {title}
+            </Heading>
+          )}
+          {subtitle && <span className="rvo-hero__subtitle">{subtitle}</span>}
+          {contentMarkup}
+        </div>
+      )}
     </MaxWidthLayout>
   );
 };

components/image/image.stories.tsx

@@ -167,7 +167,7 @@ export const Decorative: Story = {
   name: 'Decoratief (lage prioriteit)',
   args: {
     ...defaultArgs,
-    alt: '',
+    alt: 'deco',
     loading: 'lazy',
     fetchPriority: 'low',
   },

documentation/demopages/experimenteel/www/ImageLines.tsx

@@ -56,7 +56,7 @@ const Home = () => {
         <Hero
           size="lg"
           title="Rijksdienst voor Ondernemend Nederland"
-          image={{ src: 'images/www/home.jpg', alt: '' }}
+          image={{ src: 'images/www/home.jpg', alt: 'home' }}
         />
       </div>
       <main className="rvo-max-width-layout rvo-max-width-layout--lg rvo-padding-block-end--3xl rvo-padding-inline-end--sm rvo-padding-inline-start--sm">
@@ -542,7 +542,7 @@ const Home = () => {
           </LayoutFlow>
         </div> */}
         {/* <div className="rvo-feedback">
-          
+
         </div> */}
       </main>
       {/* <div className="rvo-section rvo-section--www rvo-section--coloured-bg rvo-section--grijs-3">

documentation/demopages/templates/Content.tsx

@@ -36,7 +36,7 @@ const Content = () => {
       />
       <LayoutFlow gap="3xl">
         <LayoutFlow gap="xl">
-          <Hero title="Heading" image={{ src: 'images/www/home.jpg', alt: '' }} />
+          <Hero title="Heading" image={{ src: 'images/www/home.jpg', alt: 'home' }} />
           <main className="rvo-max-width-layout rvo-max-width-layout--sm rvo-max-width-layout-inline-padding--md">
             <Heading type="h1">H1 heading</Heading>
             <p className="rvo-text--lg">

documentation/demopages/voorbeelden/nieuwsbrieven/Nieuwsbrief.tsx

@@ -67,7 +67,7 @@ const Nieuwsbrief = () => {
           size="lg"
           image={{
             src: 'https://www.rvo.nl/_next/image?url=%2Ffiles%2Ffile%2Fstyles%2Fcontent%2Fpublic%2F2024-05%2FParticulier01.png%3Fitok%3D445OIaw-&w=640&q=85',
-            alt: '',
+            alt: 'next',
           }}
           title="Duurzaam ondernemen"
           subtitle=""

documentation/demopages/voorbeelden/www/Home.tsx

@@ -55,7 +55,7 @@ const Home = () => {
       <div className="rvo-padding-inline-end--sm rvo-padding-inline-start--sm">
         <Hero
           size="lg"
-          image={{ src: 'images/www/home.jpg', alt: '' }}
+          image={{ src: 'images/www/home.jpg', alt: 'home' }}
           title="Rijksdienst voor Ondernemend Nederland"
           subtitle="Wij helpen u graag vooruit!"
         />