From 6d32acccecffbbcb21ba5c084826569c8e9508b0 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Mon, 30 Sep 2019 18:17:01 +0200
Subject: [PATCH] =?UTF-8?q?2=C3=A8me=20example=20codesandbox=20pour=20la?=
 =?UTF-8?q?=20librairie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/Footer/Library.js                  | 58 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Library.js b/source/sites/mon-entreprise.fr/layout/Footer/Library.js
index e26e08ddd..41fd3bfe8 100644
--- a/source/sites/mon-entreprise.fr/layout/Footer/Library.js
+++ b/source/sites/mon-entreprise.fr/layout/Footer/Library.js
@@ -27,7 +27,6 @@ export default function Privacy() {
 				{emoji('⌚')}, sans avoir à gérer la complexité de la paie et la mise à
 				jour régulière des règles de calcul.
 			</p>
-
 			<p>
 				Cette bibliothèque est un commun numérique développé par l'Etat et
 				l'ACOSS.
@@ -37,14 +36,67 @@ export default function Privacy() {
 				Les exemples suivants vous montrent comment utiliser la librairie sur un
 				site ReactJs très simple.
 			</p>
-			<h3>1) Exemple très simple de calcul brut -> net</h3>
+			<h3>1) Faire un calcul très simple : du brut au net</h3>
 			<iframe
 				src="https://codesandbox.io/embed/damp-bird-0m8gl?fontsize=14&hidenavigation=1"
 				title="mon-entreprise 1"
 				allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
 				css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 				sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
-			<h2>(à venir) Démo de paie plus complète</h2>
+			<h3>2) Parcourir la documentation en ligne</h3>
+			<p>
+				Vous l'aurez constaté dans l'exemple précédent, la recette d'un calcul
+				est simple : des variables d'entrée (le salaire brut), une ou plusieurs
+				variables de sorties (le salaire net).
+			</p>
+			<p>
+				Toutes ces variables sont listées et expliquées sur notre{' '}
+				<a target="_blank" href="/documentation">
+					documentation en ligne
+				</a>
+				.
+			</p>
+
+			<p>
+				Utilisez le moteur de recherche pour trouver la bonne variable, puis
+				cliquez sur "Voir le code source" pour obtenir l'ensemble de la
+				documentation : valeur par défaut, valeurs possibles quand c'est une
+				énumération de choix, unité quand c'est un nombre, description, question
+				utilisateur associée, etc.
+			</p>
+			<p>
+				Lançons un calcul plus proche d'une fiche de paie : voici une
+				description de la situation d'entrée annotée de liens vers les pages
+				correspondantes de la documentation :
+			</p>
+
+			<p css="background: #eee">
+				{' '}
+				Un{' '}
+				<a href="https://mon-entreprise.fr/documentation/contrat-salarié/statut-cadre/choix-statut-cadre">
+					cadre
+				</a>{' '}
+				gagnant{' '}
+				<a href="https://mon-entreprise.fr/documentation/contrat-salarié/rémunération/brut-de-base">
+					3 400€ bruts
+				</a>{' '}
+				, qui bénéficie de l'
+				<a href="https://mon-entreprise.fr/documentation/contrat-salarié/indemnité-kilométrique-vélo/active">
+					indemnité kilométrique vélo
+				</a>{' '}
+				et qui travaille dans une entreprise de{' '}
+				<a href="https://mon-entreprise.fr/documentation/entreprise/effectif">
+					12 salariés
+				</a>
+				.
+			</p>
+			<p>Voici ce que donne le calcul pour cet exemple plus complet :</p>
+			<iframe
+				src="https://codesandbox.io/embed/mon-entreprise-2-60d6d?fontsize=14&hidenavigation=1"
+				title="mon-entreprise 2"
+				allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+				css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+				sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 			<h2>(à venir) Démo de graphique économico-journalistique</h2>
 		</>
 	)