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

---
 .../molecules/buttons/back-to-top.test.tsx         |  2 +-
 src/components/molecules/images/flipping-logo.tsx  |  5 +++--
 .../molecules/images/responsive-image.module.scss  |  5 +++++
 .../molecules/images/responsive-image.tsx          | 22 +++++++++-------------
 src/components/molecules/layout/branding.tsx       |  4 ++--
 src/components/molecules/layout/card.module.scss   |  1 -
 src/components/molecules/layout/card.tsx           | 19 +++----------------
 7 files changed, 23 insertions(+), 35 deletions(-)

(limited to 'src/components/molecules')

diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx
index 6eb1e21..827c2a8 100644
--- a/src/components/molecules/buttons/back-to-top.test.tsx
+++ b/src/components/molecules/buttons/back-to-top.test.tsx
@@ -5,6 +5,6 @@ describe('BackToTop', () => {
   it('renders a BackToTop link', () => {
     render(<BackToTop target="top" />);
     expect(screen.getByRole('link')).toHaveAccessibleName('Back to top');
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/#top');
+    expect(screen.getByRole('link')).toHaveAttribute('href', '#top');
   });
 });
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}
           />
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 9a82a74..b351f12 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -94,8 +94,8 @@ const Branding: FC<BrandingProps> = ({
         ref={titleRef}
       >
         {withLink ? (
-          <Link href="/">
-            <a className={styles.link}>{title}</a>
+          <Link className={styles.link} href="/">
+            {title}
           </Link>
         ) : (
           title
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 6065642..42e9192 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -18,7 +18,6 @@
   }
 
   .cover {
-    align-self: flex-start;
     place-content: center;
     height: fun.convert-px(150);
     margin: auto;
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index c48bc18..d03b8b7 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -2,9 +2,7 @@ import ButtonLink from '@components/atoms/buttons/button-link';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import { type Image } from '@ts/types/app';
 import { FC } from 'react';
-import ResponsiveImage, {
-  type ResponsiveImageProps,
-} from '../images/responsive-image';
+import ResponsiveImage from '../images/responsive-image';
 import styles from './card.module.scss';
 import Meta, { type MetaData } from './meta';
 
@@ -17,10 +15,6 @@ export type CardProps = {
    * The card cover.
    */
   cover?: Image;
-  /**
-   * The cover fit. Default: cover.
-   */
-  coverFit?: ResponsiveImageProps['objectFit'];
   /**
    * The card id.
    */
@@ -55,7 +49,6 @@ export type CardProps = {
 const Card: FC<CardProps> = ({
   className = '',
   cover,
-  coverFit = 'cover',
   id,
   meta,
   tagline,
@@ -71,13 +64,7 @@ const Card: FC<CardProps> = ({
     >
       <article className={styles.article}>
         <header className={styles.header}>
-          {cover && (
-            <ResponsiveImage
-              {...cover}
-              objectFit={coverFit}
-              className={styles.cover}
-            />
-          )}
+          {cover && <ResponsiveImage {...cover} className={styles.cover} />}
           <Heading
             alignment="center"
             className={styles.title}
@@ -87,7 +74,7 @@ const Card: FC<CardProps> = ({
             {title}
           </Heading>
         </header>
-        <div className={styles.tagline}>{tagline}</div>
+        {tagline && <div className={styles.tagline}>{tagline}</div>}
         {meta && (
           <footer className={styles.footer}>
             <Meta
-- 
cgit v1.2.3