From 3de2ddd9d6380dc003eeca5f2d7466822ed54682 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Fri, 24 May 2019 16:48:40 +0200
Subject: [PATCH] Ajout d'une infobulle pour specifier les limites du calcul
 des retraite

---
 source/components/SchemeComparaison.css |  1 +
 source/components/SchemeComparaison.js  |  7 ++++-
 source/components/ui/InfoBulle.css      | 41 +++++++++++++++++++++++++
 source/components/ui/InfoBulle.js       | 13 ++++++++
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 source/components/ui/InfoBulle.css
 create mode 100644 source/components/ui/InfoBulle.js

diff --git a/source/components/SchemeComparaison.css b/source/components/SchemeComparaison.css
index 05892cbc3..61a17aa13 100644
--- a/source/components/SchemeComparaison.css
+++ b/source/components/SchemeComparaison.css
@@ -172,6 +172,7 @@
 	}
 	.comparaison-grid > .legend {
 		justify-content: start;
+		align-items: baseline;
 		text-align: left;
 	}
 	.comparaison-grid > * {
diff --git a/source/components/SchemeComparaison.js b/source/components/SchemeComparaison.js
index 783215a60..0ebfd4104 100644
--- a/source/components/SchemeComparaison.js
+++ b/source/components/SchemeComparaison.js
@@ -21,6 +21,7 @@ import { branchAnalyseSelector } from 'Selectors/analyseSelectors'
 import { règleAvecMontantSelector } from 'Selectors/regleSelectors'
 import Animate from 'Ui/animate'
 import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
+import InfoBulle from 'Ui/InfoBulle'
 import './SchemeComparaison.css'
 
 import type { RègleAvecMontant } from 'Types/RegleTypes'
@@ -293,7 +294,11 @@ const SchemeComparaison = ({
 					</div>
 					<T k="comparaisonRégimes.retraiteEstimation">
 						<h3 className="legend">
-							Votre pension de retraite <small>(estimation)</small>
+							<span>
+								Pension de retraite{' '}
+								<InfoBulle text="calculée pour 172 trimestres cotisés dans ce régime sans variations de revenus" />
+							</span>
+							<small>(avant impôts)</small>
 						</h3>
 					</T>
 					<div className="AS">
diff --git a/source/components/ui/InfoBulle.css b/source/components/ui/InfoBulle.css
new file mode 100644
index 000000000..4b66d3e61
--- /dev/null
+++ b/source/components/ui/InfoBulle.css
@@ -0,0 +1,41 @@
+.info-bulle__interrogation-mark {
+	position: relative;
+	color: var(--colour);
+	border: 1px solid var(--colour);
+	display: inline-block;
+	border-radius: 50%;
+
+	font-weight: bold;
+	font-size: 75%;
+	user-select: none;
+	width: 1.5em;
+	height: 1.5em;
+	text-align: center;
+}
+.info-bulle__interrogation-mark:focus {
+	outline: 1px dotted var(--darkColour);
+}
+.info-bulle__text {
+	position: absolute;
+	z-index: 1;
+	border: 1px solid var(--colour);
+	padding: 0.3rem;
+	font-weight: normal;
+	display: block;
+	border-radius: 3px;
+	font-family: 'Roboto';
+	font-size: 0.8rem;
+	background-color: white;
+	transition: opacity 0.2s, transform 0.2s;
+	opacity: 0;
+	transform: translateY(-5px);
+}
+
+.info-bulle__interrogation-mark:hover + .info-bulle__text,
+.info-bulle__interrogation-mark:focus + .info-bulle__text {
+	transform: translateY(1px);
+	opacity: 1;
+}
+.info-bulle__interrogation-mark:focus {
+	position: relative;
+}
diff --git a/source/components/ui/InfoBulle.js b/source/components/ui/InfoBulle.js
new file mode 100644
index 000000000..e8ebc6fa1
--- /dev/null
+++ b/source/components/ui/InfoBulle.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import './InfoBulle.css'
+
+export default function InfoBulle({ text }) {
+	return (
+		<span style={{ position: 'relative', verticalAlign: 'bottom' }}>
+			<span className="info-bulle__interrogation-mark" tabIndex="0">
+				?
+			</span>
+			<span className="info-bulle__text">{text}</span>
+		</span>
+	)
+}