From ba793e043e4d8515b1a9ea490ee2c5f92b1fd6c2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 27 Sep 2023 15:40:16 +0200
Subject: refactor(components): rewrite Section component

* Make it compliant with ESlint rules
* Remove mandatory heading, it now depends on the consumer
* Change defaults for hasBorder and variant
---
 .../templates/sectioned/sectioned-layout.tsx       | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

(limited to 'src/components/templates/sectioned/sectioned-layout.tsx')

diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
index a307688..6d58e83 100644
--- a/src/components/templates/sectioned/sectioned-layout.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -1,9 +1,9 @@
 import Script from 'next/script';
-import { FC } from 'react';
-import { BreadcrumbList } from 'schema-dts';
+import type { FC } from 'react';
+import type { BreadcrumbList } from 'schema-dts';
 import { Section, type SectionProps, type SectionVariant } from '../../atoms';
 
-export type PageSection = Pick<SectionProps, 'content' | 'title'>;
+export type PageSection = Required<Pick<SectionProps, 'children' | 'id'>>;
 
 export type SectionedLayoutProps = {
   /**
@@ -25,27 +25,23 @@ export const SectionedLayout: FC<SectionedLayoutProps> = ({
   breadcrumbSchema,
   sections,
 }) => {
-  const getSections = (items: SectionProps[]) => {
-    return items.map((section, index) => {
+  const getSections = (items: PageSection[]) =>
+    items.map((section, index) => {
       const variant: SectionVariant = index % 2 ? 'light' : 'dark';
       const isLastSection = index === items.length - 1;
 
       return (
-        <Section
-          content={section.content}
-          key={`section-${index}`}
-          title={section.title}
-          variant={variant}
-          withBorder={!isLastSection}
-        />
+        <Section hasBorder={!isLastSection} key={section.id} variant={variant}>
+          {section.children}
+        </Section>
       );
     });
-  };
 
   return (
     <>
       <Script
         dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+        // eslint-disable-next-line react/jsx-no-literals -- Id allowed.
         id="schema-breadcrumb"
         type="application/ld+json"
       />
-- 
cgit v1.2.3

