From d363306235f2a48f16e488f20f73e2233ddcf281 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 29 Nov 2023 18:07:20 +0100
Subject: refactor(pages): improve Homepage

* move custom homepage components that does not require props to the
MDX file (links should not need to be translated here but where they
are defined)
* move SEO title and meta desc to MDX file
* make Page component the wrapper instead of using a React fragment
* fix MDX module types
---
 .../buttons/button-link/button-link.module.scss    |  2 ++
 src/components/mdx.tsx                             | 17 ++++++++-
 src/components/molecules/grid/grid.module.scss     | 12 +++++++
 src/components/molecules/grid/grid.test.tsx        | 40 ++++++++++++++++++++++
 src/components/molecules/grid/grid.tsx             |  8 +++++
 5 files changed, 78 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/atoms/buttons/button-link/button-link.module.scss b/src/components/atoms/buttons/button-link/button-link.module.scss
index 0f35a24..3ddeffe 100644
--- a/src/components/atoms/buttons/button-link/button-link.module.scss
+++ b/src/components/atoms/buttons/button-link/button-link.module.scss
@@ -3,6 +3,8 @@
 .btn {
   @extend %button;
 
+  width: fit-content;
+
   &--circle {
     @extend %circle-button;
   }
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
index 9f0a4a5..eea80a9 100644
--- a/src/components/mdx.tsx
+++ b/src/components/mdx.tsx
@@ -1,8 +1,17 @@
 import type { MDXComponents } from 'mdx/types';
 import NextImage from 'next/image';
 import type { AnchorHTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
-import { Figure, Heading, Link, List, ListItem } from './atoms';
+import {
+  ButtonLink,
+  Figure,
+  Heading,
+  Icon,
+  Link,
+  List,
+  ListItem,
+} from './atoms';
 import { Code, Grid, GridItem } from './molecules';
+import { PageSection } from './templates';
 
 const Anchor = ({
   children = '',
@@ -58,6 +67,7 @@ const Gallery = ({ children }: { children: ReactNode }) => (
 
 export const mdxComponents: MDXComponents = {
   a: Anchor,
+  ButtonLink,
   Code,
   figure: ({ ref, ...props }) => <Figure {...props} />,
   Figure,
@@ -70,9 +80,14 @@ export const mdxComponents: MDXComponents = {
   h4: ({ ref, ...props }) => <Heading {...props} level={4} />,
   h5: ({ ref, ...props }) => <Heading {...props} level={5} />,
   h6: ({ ref, ...props }) => <Heading {...props} level={6} />,
+  Icon,
   img: Img,
+  Img,
   li: ({ ref, ...props }) => <ListItem {...props} />,
   Link,
+  List,
+  ListItem,
+  PageSection,
   ol: ({ ref, ...props }) => (
     <List
       // eslint-disable-next-line react/jsx-no-literals
diff --git a/src/components/molecules/grid/grid.module.scss b/src/components/molecules/grid/grid.module.scss
index f13af30..d5260cf 100644
--- a/src/components/molecules/grid/grid.module.scss
+++ b/src/components/molecules/grid/grid.module.scss
@@ -2,6 +2,18 @@
   display: grid;
   gap: var(--gap);
 
+  &--align-items-center {
+    align-items: center;
+  }
+
+  &--align-items-start {
+    align-items: start;
+  }
+
+  &--align-items-end {
+    align-items: end;
+  }
+
   &--is-centered {
     place-content: center;
   }
diff --git a/src/components/molecules/grid/grid.test.tsx b/src/components/molecules/grid/grid.test.tsx
index e69610d..b4b9f77 100644
--- a/src/components/molecules/grid/grid.test.tsx
+++ b/src/components/molecules/grid/grid.test.tsx
@@ -109,4 +109,44 @@ describe('Grid', () => {
 
     expect(rtlScreen.getByRole('list')).toHaveClass('wrapper--is-centered');
   });
+
+  it('can render a list of centered items', () => {
+    render(
+      <Grid alignItems="center">
+        {items.map((item) => (
+          <GridItem key={item.id}>{item.contents}</GridItem>
+        ))}
+      </Grid>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass(
+      'wrapper--align-items-center'
+    );
+  });
+
+  it('can render a list of items with end alignment', () => {
+    render(
+      <Grid alignItems="end">
+        {items.map((item) => (
+          <GridItem key={item.id}>{item.contents}</GridItem>
+        ))}
+      </Grid>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('wrapper--align-items-end');
+  });
+
+  it('can render a list of items with start alignment', () => {
+    render(
+      <Grid alignItems="start">
+        {items.map((item) => (
+          <GridItem key={item.id}>{item.contents}</GridItem>
+        ))}
+      </Grid>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass(
+      'wrapper--align-items-start'
+    );
+  });
 });
diff --git a/src/components/molecules/grid/grid.tsx b/src/components/molecules/grid/grid.tsx
index 3d0ecf1..38f6e55 100644
--- a/src/components/molecules/grid/grid.tsx
+++ b/src/components/molecules/grid/grid.tsx
@@ -12,6 +12,12 @@ export type GridProps<T extends boolean> = Omit<
   ListProps<T, false>,
   'children' | 'hideMarker' | 'isHierarchical' | 'isInline' | 'spacing'
 > & {
+  /**
+   * How the items should be aligned?
+   *
+   * @default undefined // The default behavior is `stretch`.
+   */
+  alignItems?: 'center' | 'end' | 'start';
   /**
    * The grid items.
    */
@@ -62,6 +68,7 @@ export type GridProps<T extends boolean> = Omit<
 
 const GridWithRef = <T extends boolean>(
   {
+    alignItems,
     children,
     className = '',
     col = 'auto-fit',
@@ -77,6 +84,7 @@ const GridWithRef = <T extends boolean>(
 ) => {
   const gridClass = [
     styles.wrapper,
+    styles[alignItems ? `wrapper--align-items-${alignItems}` : ''],
     styles[isCentered ? 'wrapper--is-centered' : ''],
     styles[size ? 'wrapper--has-fixed-size' : ''],
     styles[sizeMin ? 'wrapper--has-min-size' : ''],
-- 
cgit v1.2.3