From 947830904239d51ec9e94971fed6346c1089911f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 23 Jan 2023 19:01:28 +0100
Subject: chore: make Links and Images compliant with Next.js 13

---
 src/components/molecules/images/flipping-logo.tsx  |  5 +++--
 .../molecules/images/responsive-image.module.scss  |  5 +++++
 .../molecules/images/responsive-image.tsx          | 22 +++++++++-------------
 3 files changed, 17 insertions(+), 15 deletions(-)

(limited to 'src/components/molecules/images')

diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx
index 1099d53..0d59a55 100644
--- a/src/components/molecules/images/flipping-logo.tsx
+++ b/src/components/molecules/images/flipping-logo.tsx
@@ -40,8 +40,9 @@ const FlippingLogo: ForwardRefRenderFunction<
         <Image
           src={photo}
           alt={altText}
-          layout="fill"
-          objectFit="cover"
+          style={{ objectFit: 'cover' }}
+          height="100"
+          width="100"
           {...props}
         />
       </div>
diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss
index 8a1d51f..7f5fafd 100644
--- a/src/components/molecules/images/responsive-image.module.scss
+++ b/src/components/molecules/images/responsive-image.module.scss
@@ -37,6 +37,11 @@
   }
 }
 
+.img {
+  max-height: 100%;
+  object-fit: cover;
+}
+
 .link {
   display: flex;
   flex-flow: column;
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 5373561..79e7db4 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -22,7 +22,7 @@ export type ResponsiveImageProps = Omit<
   /**
    * The image height.
    */
-  height: number | string;
+  height: number | `${number}`;
   /**
    * A link target.
    */
@@ -30,7 +30,7 @@ export type ResponsiveImageProps = Omit<
   /**
    * The image width.
    */
-  width: number | string;
+  width: number | `${number}`;
   /**
    * Wrap the image with borders.
    */
@@ -46,30 +46,27 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
   alt,
   caption,
   className = '',
-  layout,
-  objectFit,
   target,
   title,
   withBorders,
   ...props
 }) => {
-  const bordersModifier = withBorders
-    ? 'wrapper--has-borders'
-    : 'wrapper--no-borders';
-  const linkModifier = target ? 'wrapper--has-link' : 'wrapper--no-link';
+  const bordersModifier = withBorders ? styles['wrapper--has-borders'] : '';
+  const linkModifier = target
+    ? styles['wrapper--has-link']
+    : styles['wrapper--no-link'];
 
   return (
     <figure
       aria-label={caption ? undefined : title}
-      className={`${styles.wrapper} ${styles[bordersModifier]} ${styles[linkModifier]} ${className}`}
+      className={`${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`}
     >
       {target ? (
         <Link href={target} className={styles.link}>
           <Image
             alt={alt}
             className={styles.img}
-            layout={layout || 'intrinsic'}
-            objectFit={objectFit || 'contain'}
+            sizes="100vw"
             title={title}
             {...props}
           />
@@ -82,8 +79,7 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
           <Image
             alt={alt}
             className={styles.img}
-            layout={layout || 'intrinsic'}
-            objectFit={objectFit || 'contain'}
+            sizes="100vw"
             title={title}
             {...props}
           />
-- 
cgit v1.2.3