From 4f1181581e177dd80a76165a0f930ef4577f9c6a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 22 Nov 2023 19:07:25 +0100
Subject: refactor(components): integrate sectioned page template into Page

* replace Section component by a generic one (other components should
be able to use it)
* add a PageSection component
* add `hasSections` prop to Page component
* remove sectioned-page template
---
 .../atoms/layout/section/section.module.scss       | 26 ---------
 .../atoms/layout/section/section.stories.tsx       | 66 +++-------------------
 .../atoms/layout/section/section.test.tsx          | 17 +-----
 src/components/atoms/layout/section/section.tsx    | 41 +++-----------
 4 files changed, 17 insertions(+), 133 deletions(-)
 delete mode 100644 src/components/atoms/layout/section/section.module.scss

(limited to 'src/components/atoms/layout')

diff --git a/src/components/atoms/layout/section/section.module.scss b/src/components/atoms/layout/section/section.module.scss
deleted file mode 100644
index 3da74a2..0000000
--- a/src/components/atoms/layout/section/section.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use "../../../../styles/abstracts/functions" as fun;
-@use "../../../../styles/abstracts/placeholders";
-
-.wrapper {
-  @extend %grid;
-
-  row-gap: var(--spacing-sm);
-  padding: var(--spacing-md) 0;
-
-  &--borders {
-    border-bottom: fun.convert-px(1) solid var(--color-border);
-  }
-
-  &--dark {
-    background: var(--color-bg-secondary);
-  }
-
-  &--light {
-    background: var(--color-bg);
-  }
-
-  > * {
-    grid-column: 2;
-    margin-block: 0;
-  }
-}
diff --git a/src/components/atoms/layout/section/section.stories.tsx b/src/components/atoms/layout/section/section.stories.tsx
index e21209b..fdc8217 100644
--- a/src/components/atoms/layout/section/section.stories.tsx
+++ b/src/components/atoms/layout/section/section.stories.tsx
@@ -1,85 +1,37 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Heading } from '../../heading';
-import { Section } from './section';
+import { Section as SectionComponent } from './section';
 
 /**
  * Section - Storybook Meta
  */
 export default {
   title: 'Atoms/Layout/Section',
-  component: Section,
-  args: {
-    hasBorder: true,
-    variant: 'light',
-  },
+  component: SectionComponent,
   argTypes: {
     children: {
-      description: 'The section content.',
+      description: 'The section contents.',
       type: {
         name: 'function',
         required: true,
       },
     },
-    hasBorder: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Add a border at the bottom of the section.',
-      table: {
-        category: 'Styles',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-      },
-      description: 'The section variant.',
-      options: ['light', 'dark'],
-      table: {
-        category: 'Styles',
-        defaultValue: { summary: 'dark' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
   },
-} as ComponentMeta<typeof Section>;
+} as ComponentMeta<typeof SectionComponent>;
 
-const Template: ComponentStory<typeof Section> = (args) => (
-  <Section {...args} />
+const Template: ComponentStory<typeof SectionComponent> = (args) => (
+  <SectionComponent {...args} />
 );
 
 /**
- * Section Stories - Light
- */
-export const Light = Template.bind({});
-Light.args = {
-  children: (
-    <>
-      <Heading level={2}>A section title</Heading>
-      <div>The body</div>
-    </>
-  ),
-  variant: 'light',
-};
-
-/**
- * Section Stories - Dark
+ * Section Story
  */
-export const Dark = Template.bind({});
-Dark.args = {
+export const Section = Template.bind({});
+Section.args = {
   children: (
     <>
       <Heading level={2}>A section title</Heading>
       <div>The body</div>
     </>
   ),
-  variant: 'dark',
 };
diff --git a/src/components/atoms/layout/section/section.test.tsx b/src/components/atoms/layout/section/section.test.tsx
index 85305c0..be4c324 100644
--- a/src/components/atoms/layout/section/section.test.tsx
+++ b/src/components/atoms/layout/section/section.test.tsx
@@ -5,23 +5,8 @@ import { Section } from './section';
 const content = 'Section content.';
 
 describe('Section', () => {
-  it('renders its body', () => {
+  it('renders its children', () => {
     render(<Section>{content}</Section>);
     expect(rtlScreen.getByText(content)).toBeInTheDocument();
   });
-
-  it('renders a section with border', () => {
-    render(<Section hasBorder>{content}</Section>);
-    expect(rtlScreen.getByText(content)).toHaveClass('wrapper--borders');
-  });
-
-  it('renders a light section', () => {
-    render(<Section variant="light">{content}</Section>);
-    expect(rtlScreen.getByText(content)).toHaveClass('wrapper--light');
-  });
-
-  it('renders a dark section', () => {
-    render(<Section variant="dark">{content}</Section>);
-    expect(rtlScreen.getByText(content)).toHaveClass('wrapper--dark');
-  });
 });
diff --git a/src/components/atoms/layout/section/section.tsx b/src/components/atoms/layout/section/section.tsx
index 63c658a..63a2499 100644
--- a/src/components/atoms/layout/section/section.tsx
+++ b/src/components/atoms/layout/section/section.tsx
@@ -2,45 +2,18 @@ import {
   forwardRef,
   type ForwardRefRenderFunction,
   type HTMLAttributes,
-  type ReactNode,
 } from 'react';
-import styles from './section.module.scss';
 
-export type SectionVariant = 'dark' | 'light';
-
-export type SectionProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
-  /**
-   * The section content.
-   */
-  children: ReactNode | ReactNode[];
-  /**
-   * Add a border at the bottom of the section.
-   *
-   * @default false
-   */
-  hasBorder?: boolean;
-  /**
-   * The section variant.
-   *
-   * @default 'light'
-   */
-  variant?: SectionVariant;
-};
+export type SectionProps = HTMLAttributes<HTMLElement>;
 
 const SectionWithRef: ForwardRefRenderFunction<HTMLElement, SectionProps> = (
-  { children, className = '', hasBorder = false, variant = 'light', ...props },
+  { children, ...props },
   ref
-) => {
-  const borderClass = hasBorder ? styles[`wrapper--borders`] : '';
-  const variantClass = styles[`wrapper--${variant}`];
-  const sectionClass = `${styles.wrapper} ${borderClass} ${variantClass} ${className}`;
-
-  return (
-    <section {...props} className={sectionClass} ref={ref}>
-      {children}
-    </section>
-  );
-};
+) => (
+  <section {...props} ref={ref}>
+    {children}
+  </section>
+);
 
 /**
  * Section component
-- 
cgit v1.2.3