From 24240e2e20081d905e8e4b938ae0f21f567ef4e9 Mon Sep 17 00:00:00 2001
From: Celeste Robert <robert.m.celeste@gmail.com>
Date: Thu, 25 Aug 2022 13:58:22 +0000
Subject: [PATCH] doc: our custom's components

---
 README.md         |  4 ++++
 doc/components.md | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 doc/components.md

diff --git a/README.md b/README.md
index e00f03a..4612eff 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,10 @@ This command generates static content into the `build` directory and can be serv
 
 [Follow this doc](doc/theme.md).
 
+## Components
+
+[Follow this doc](doc/components.md)
+
 ## Three structure
 
 ```
diff --git a/doc/components.md b/doc/components.md
new file mode 100644
index 0000000..14a119b
--- /dev/null
+++ b/doc/components.md
@@ -0,0 +1,35 @@
+# Composants
+
+Les composants sont des extraits de code `.js` ou `.jsx` indépendants et réutilisables, ils se situent dans `src/components/`.
+
+## Liste de composants
+
+### Highlight.js
+
+Le composant **Highlight** sert à surligner un élément, en particulier du texte. Il nécéssite les props `color` qui déterminera la couleur du surlignage et `children` qui doit accueillir le texte à surligner. 
+
+### TextRight.js
+
+Le composant **TextRight** sert à afficher une image à la gauche de son bloc enfant, avec largeur égale. Il nécéssite les props `img` qui sera l'image à afficher à gauche du bloc enfant et `children` qui sera le bloc enfant d’éléments HTML.
+
+### Carousel.js
+
+Le composant **Carousel** permet de générer un carrousel en utilisant le _slider_ de [React Slick] (https://react-slick.neostack.com/).
+
+### CarouselLibre.js
+
+Le composant **CarouselLibre** est utilisé sur la page d'accueil pour afficher un carrousel des logiciels libres utilisés par Froggit, il utilise le composant générique **Carousel**
+
+### HomepagePromises.js 
+
+Le composant **HomepagePromises** est utilisé sur la page d'accueil pour afficher les promesses de Froggit (section **À vous de faire la différence**). 
+
+il renvoie une section constituée d'un titre central puis d'une liste React (**PromiseList**) affichée en ligne.
+
+Les éléments **Promise** de la liste sont affichés en colonne et sont composés d'un titre, une image SVG et une description. Le composant **Promise** prendra respectivement les props `Svg`, `title` et `description`.
+
+### HomepageFeatures.js 
+
+Le composant **HomepageFeatures** affiche les fonctionnalités de Froggit sur la page d'accueil. 
+
+
-- 
GitLab