Merge branch 'main' into 'feat/image'

# Conflicts:
#   index.d.ts

index.d.ts

@@ -2,7 +2,6 @@ declare module "*";
 
 import { IGatsbyImageData } from "gatsby-plugin-image";
 
-
 interface LayoutProps {
   children: React.ReactNode;
   UserMenu?: React.ReactNode;
@@ -38,7 +37,7 @@ export function Button(props: ButtonProps): JSX.Element;
 interface CardProps {
   title?: string;
   content?: string;
-  image?: string;
+  image?: string | IGatsbyImageData;
   to?: string;
   anime?: boolean;
   layout?: "top" | "left";
@@ -103,6 +102,13 @@ interface HeroProps {
  */
 export function Hero(props: HeroProps): JSX.Element;
 
+interface CardListProps {
+  cards?: CardProps[];
+  layout?: 'row' | 'col' | 'grid';
+  className?: string;
+  anime?: boolean;
+}
+export function CardList(props: CardListProps): JSX.Element;
 interface MapProps {
   idMap: number;
 }

index.js

@@ -9,6 +9,7 @@ export { default as Button } from "./src/components/core/Button";
 export { default as Card } from "./src/components/core/Card";
 export { default as Link } from "./src/components/core/Link";
 export { default as Search } from "./src/components/core/Search";
+export { default as CardList } from "./src/components/core/CardList";
 export { default as Badge } from "./src/components/core/Badge";
 export { default as Toc } from "./src/components/core/Toc";
 export { default as Map } from "./src/components/core/Map";

src/components/core/CardList.tsx

+import React from "react";
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
+import Card from "./Card";
+
+
+interface CardProps {
+    title?: string;
+    content?: string;
+    image?: string | IGatsbyImageData;
+    to?: string;
+    anime?: boolean;
+    layout?: "top" | "left";
+    className?: string;
+}
+
+interface Props {
+    cards?: CardProps[];
+    layout?: 'row' | 'col' | 'grid';
+    className?: string;
+    anime?: boolean;
+}
+
+
+const oCardProps = {
+    'row': {
+        layout: 'left',
+        className: ''
+    },
+    'col': {
+        layout: 'top',
+        className: ''
+    },
+    'grid': {
+        layout: 'top',
+        className: 'max-w-full'
+    }
+}
+
+
+const CardList = (props: Props) => {
+    const {
+        cards = [],
+        layout = 'row',
+        className = '',
+        anime = true
+    } = props;
+    
+    const oListClassName = {
+        'row': `space-y-10 w-full ${className}`,
+        'col': `flex space-x-12 flex-nowrap justify-center ${className}`,
+        'grid': `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12 ${className}`
+    }
+    
+    const tmpProps = oCardProps[layout];
+    
+    const listCards = cards.map((card, index) => {
+        let cardProps = {
+            ...card, 
+            ...tmpProps,
+            anime
+        };
+
+        return (
+            <Card
+                key={index}
+                {...(cardProps as CardProps)}
+            />
+        )
+    })
+
+    return (
+        <div
+            className={oListClassName[layout]}
+        >
+            {listCards}
+        </div>
+    )
+};
+
+
+export default CardList;
\ No newline at end of file

src/pages-doc/doc/core/cardlist.tsx

+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { CardList } from "@onegeo/gatsby-theme-onegeo";
+
+function card(): ReactElement {
+  return (
+    <Content>
+      <div className="prose">
+        <Link to="/doc/core">Retour</Link>
+
+        <h1>CardList</h1>
+        <h2>Props</h2>
+        <div className="mockup-code">
+          <pre>
+            <code>
+              {`
+interface CardProps {
+  title?: string;
+  content?: string;
+  image?: string | IGatsbyImageData;
+  to?: string;
+  anime?: boolean;
+  layout?: "top" | "left";
+  className?: string;
+  anime?: boolean;
+}
+interface CardListProps {
+  cards?: CardProps[];
+  layout?: 'row' | 'col' | 'grid';
+  className?: string;
+}`}
+            </code>
+          </pre>
+        </div>
+
+        <h2>Example</h2>
+      </div>
+      <div className="space-y-20">
+        <CardList 
+          cards={[{
+            title: 'Action',
+            content: 'Action description for the Button'
+          },{
+            title: 'Action',
+            content: 'Action description for the Button'
+          },{
+            title: 'Action',
+            content: 'Action description for the Button'
+          }]} 
+          layout='row'
+          anime={false}
+        />
+        <CardList 
+          cards={[{
+            title: 'Action',
+            content: 'Action description for the Button'
+          },{
+            title: 'Action',
+            content: 'Action description for the Button'
+          },{
+            title: 'Action',
+            content: 'Action description for the Button'
+          }]} 
+          layout='col'
+        />
+      </div>
+      <div className="mt-20">
+        <CardList 
+          cards={[{
+            title: 'Action',
+            content: 'Action description for the Button'
+          },{
+            title: 'Action',
+            content: 'Action description for the Button'
+          },{
+            title: 'Action',
+            content: 'Action description for the Button'
+          }]} 
+          layout='grid'
+        />
+      </div>
+    </Content>
+  );
+}
+
+export default card;

src/pages-doc/doc/core/index.tsx

@@ -13,6 +13,8 @@ function index(): ReactElement {
         <br></br>
         <Link to="/doc/core/card">Card</Link>
         <br></br>
+        <Link to="/doc/core/cardlist">CardList</Link>
+        <br></br>
         <Link to="/doc/core/hero">Hero</Link>
         <br></br>
         <Link to="/doc/core/badge">Badge</Link>