From 7255d25f6834a208c0ed44636356cc260f6ab6ba Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 27 Sep 2023 17:38:23 +0200
Subject: refactor(components): rewrite Heading component

* remove `alignment` and `withMargin` props (consumer should handle
that)
* move styles to Sass placeholders to avoid repeats with headings
coming from WordPress
* refactor some other components that depend on Heading to avoid ESlint
errors
---
 .../molecules/buttons/heading-button.tsx           | 17 +++++----
 src/components/molecules/layout/branding.tsx       | 15 +++-----
 src/components/molecules/layout/card.module.scss   |  5 ++-
 src/components/molecules/layout/card.tsx           |  8 +----
 src/components/molecules/layout/page-header.tsx    | 41 +++++++++++++---------
 5 files changed, 41 insertions(+), 45 deletions(-)

(limited to 'src/components/molecules')

diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index 93ccdbe..97e2c84 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,4 +1,4 @@
-import { FC, SetStateAction } from 'react';
+import { useCallback, type FC, type SetStateAction } from 'react';
 import { useIntl } from 'react-intl';
 import { Heading, type HeadingProps, PlusMinus } from '../../atoms';
 import styles from './heading-button.module.scss';
@@ -35,6 +35,7 @@ export const HeadingButton: FC<HeadingButtonProps> = ({
   title,
 }) => {
   const intl = useIntl();
+  const btnClass = `${styles.wrapper} ${className}`;
   const iconState = expanded ? 'minus' : 'plus';
   const titlePrefix = expanded
     ? intl.formatMessage({
@@ -48,13 +49,15 @@ export const HeadingButton: FC<HeadingButtonProps> = ({
         id: 'bcyOgC',
       });
 
+  const toggleExpand = useCallback(
+    () => setExpanded((prev) => !prev),
+    [setExpanded]
+  );
+
   return (
-    <button
-      className={`${styles.wrapper} ${className}`}
-      onClick={() => setExpanded(!expanded)}
-      type="button"
-    >
-      <Heading level={level} withMargin={false} className={styles.heading}>
+    <button className={btnClass} onClick={toggleExpand} type="button">
+      <Heading className={styles.heading} level={level}>
+        {/* eslint-disable-next-line react/jsx-no-literals -- SR class allowed */}
         <span className="screen-reader-text">{titlePrefix} </span>
         {title}
       </Heading>
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index b105796..981da74 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { FC, useRef } from 'react';
+import { type FC, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { useStyles } from '../../../utils/hooks';
 import { Heading } from '../../atoms';
@@ -90,7 +90,6 @@ export const Branding: FC<BrandingProps> = ({
         className={styles.title}
         isFake={!isHome}
         level={1}
-        withMargin={false}
         ref={titleRef}
       >
         {withLink ? (
@@ -101,17 +100,11 @@ export const Branding: FC<BrandingProps> = ({
           title
         )}
       </Heading>
-      {baseline && (
-        <Heading
-          className={styles.baseline}
-          isFake={true}
-          level={4}
-          withMargin={false}
-          ref={baselineRef}
-        >
+      {baseline ? (
+        <Heading className={styles.baseline} isFake level={4} ref={baselineRef}>
           {baseline}
         </Heading>
-      )}
+      ) : null}
     </div>
   );
 };
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 8f9f4a5..31f6a4b 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -31,9 +31,8 @@
   }
 
   .title {
-    flex: 1;
-    margin-top: var(--spacing-sm);
-    margin-bottom: var(--spacing-sm);
+    width: fit-content;
+    margin: var(--spacing-sm) auto;
   }
 
   h2.title {
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index f39a430..722e5a5 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -65,13 +65,7 @@ export const Card: FC<CardProps> = ({
           {cover ? (
             <ResponsiveImage {...cover} className={styles.cover} />
           ) : null}
-          <Heading
-            // eslint-disable-next-line react/jsx-no-literals -- Hardcoded config
-            alignment="center"
-            className={styles.title}
-            id={headingId}
-            level={titleLevel}
-          >
+          <Heading className={styles.title} id={headingId} level={titleLevel}>
             {title}
           </Heading>
         </header>
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 9c11feb..04f2966 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { Heading } from '../../atoms';
 import { Meta, type MetaData } from './meta';
 import styles from './page-header.module.scss';
@@ -11,7 +11,7 @@ export type PageHeaderProps = {
   /**
    * The page introduction.
    */
-  intro?: string | JSX.Element;
+  intro?: string | ReactNode;
   /**
    * The page metadata.
    */
@@ -33,32 +33,39 @@ export const PageHeader: FC<PageHeaderProps> = ({
   meta,
   title,
 }) => {
+  const headerClass = `${styles.wrapper} ${className}`;
+
   const getIntro = () => {
-    return typeof intro === 'string' ? (
-      <div
-        className={styles.intro}
-        dangerouslySetInnerHTML={{ __html: intro }}
-      />
-    ) : (
-      <div className={styles.intro}>{intro}</div>
-    );
+    if (typeof intro === 'string')
+      return (
+        <div
+          className={styles.intro}
+          /* eslint-disable-next-line react/no-danger -- Not safe but intro can
+           * contains links or formatting so we need it. */
+          dangerouslySetInnerHTML={{ __html: intro }}
+        />
+      );
+
+    return <div className={styles.intro}>{intro}</div>;
   };
 
   return (
-    <header className={`${styles.wrapper} ${className}`}>
+    <header className={headerClass}>
       <div className={styles.body}>
-        <Heading level={1} className={styles.title} withMargin={false}>
+        <Heading className={styles.title} level={1}>
           {title}
         </Heading>
-        {meta && (
+        {meta ? (
           <Meta
-            data={meta}
             className={styles.meta}
-            layout="column"
+            data={meta}
+            // eslint-disable-next-line react/jsx-no-literals -- Layout allowed
             itemsLayout="inline"
+            // eslint-disable-next-line react/jsx-no-literals -- Layout allowed
+            layout="column"
           />
-        )}
-        {intro && getIntro()}
+        ) : null}
+        {intro ? getIntro() : null}
       </div>
     </header>
   );
-- 
cgit v1.2.3