diff --git a/README.md b/README.md index e00f03af3c205d4b3502013a1513ba9ee52bd5c2..4612eff19304908d1de6de6e49f32467cb42fe07 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 0000000000000000000000000000000000000000..14a119b72db369feeabd3d5a76cca791deb6ea2f --- /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. + +