From edda0dab4d393d27daa55c57805497c78ed81516 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Thu, 29 Nov 2018 17:02:13 +0000
Subject: [PATCH] =?UTF-8?q?Vid=C3=A9o=20affich=C3=A9e=20au=20clic=20plut?=
 =?UTF-8?q?=C3=B4t=20que=20directement=20sur=20la=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/Overlay.css                 |  6 +-
 source/locales/en.yaml                        |  1 +
 .../pages/SocialSecurity/Home.js              | 29 ++--------
 .../pages/SocialSecurity/Video.js             | 55 +++++++++++++++++++
 4 files changed, 64 insertions(+), 27 deletions(-)
 create mode 100644 source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Video.js

diff --git a/source/components/Overlay.css b/source/components/Overlay.css
index 4adc77894..90bf332d9 100644
--- a/source/components/Overlay.css
+++ b/source/components/Overlay.css
@@ -12,7 +12,7 @@
 	top: 0;
 	left: 0;
 	right: 0;
-	padding: 1.5rem;
+	padding: 1.8rem;
 	padding-top: 0;
 	border-radius: 0.3em;
 	/* border: ; */
@@ -22,11 +22,11 @@
 }
 #overlayCloseButton {
 	position: absolute;
-	top: 0.4rem;
+	top: 0rem;
 	text-decoration: none;
 	font-size: 200%;
 	color: rgba(51, 51, 80, 0.8);
-	right: 1rem;
+	right: 0.5rem;
 }
 @media (min-width: 600px) {
 	#overlayContent {
diff --git a/source/locales/en.yaml b/source/locales/en.yaml
index 5de617a6b..8dd08380b 100644
--- a/source/locales/en.yaml
+++ b/source/locales/en.yaml
@@ -450,6 +450,7 @@ sécu:
     description: Découvrez les coûts et avantages de la sécurité sociale française en simulant un cas concret d'embauche dans votre entreprise.
   content: |
     <0>Social protection: costs and benefits</0><1>France has chosen to provide its citizens with a high-quality social safety net. This mandatory system is based on solidarity and designed to ensure the <strong>general welfare of its people</2>.</1><2>Easy access to health care and other services ensures that companies can put healthy, productive and highly skilled employees to work in an attractive market in the heart of Europe.</2><3>As soon as you declare and pay your employees, you automatically entitle them to the general scheme of French Social Security (health, maternity, disability, old age, occupational illness and accidents) and unemployment insurance.</3><4><0></0></4><5>How much does it cost to hire ?</5>
+  video: Social security explained visually
 
 Votre entreprise: Your company
 Ce n'est pas mon entreprise: This is not my company
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js
index b7e83c14b..526a412c1 100644
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js
@@ -10,6 +10,8 @@ import { withNamespaces } from 'react-i18next'
 import * as Animate from 'Ui/animate'
 import type { Match, Location } from 'react-router'
 import type { TFunction } from 'react-i18next'
+import Overlay from 'Components/Overlay'
+import Video from './Video'
 
 type Props = {
 	match: Match,
@@ -37,7 +39,7 @@ class SocialSecurity extends Component<Props, {}> {
 				<Animate.fromBottom>
 					{this.props.match.isExact && (
 						<T k="sécu.content">
-							<h1>Protection sociale : coût et avantages</h1>
+							<h1>Protection sociale : coûts et avantages</h1>
 							<p>
 								La France a choisi d'offrir à ses citoyens une protection
 								sociale de qualité. Ce système obligatoire repose sur la
@@ -55,29 +57,8 @@ class SocialSecurity extends Component<Props, {}> {
 								française (santé, maternité, invalidité, vieillesse, maladie
 								professionnelle et accidents) et à l'assurance chômage.
 							</p>
-							<div
-								style={{
-									position: 'relative',
-									width: '100%',
-									height: '0',
-									paddingBottom: '56.25%'
-								}}>
-								<iframe
-									style={{
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										width: '100%',
-										height: '100%'
-									}}
-									src={`https://www.youtube-nocookie.com/embed/${
-										this.props.language === 'fr' ? 'EMQ3fNyMxBE' : 'dN9ZVazSmpc'
-									}?rel=0&amp;showinfo=0`}
-									frameBorder="0"
-									allow="autoplay; encrypted-media"
-									allowFullScreen
-								/>
-							</div>
+							<Video />
+
 							<h2>Combien coûte une embauche ?</h2>
 						</T>
 					)}
diff --git a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Video.js b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Video.js
new file mode 100644
index 000000000..d7692d4df
--- /dev/null
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Video.js
@@ -0,0 +1,55 @@
+import { T } from 'Components'
+import Overlay from 'Components/Overlay'
+import { ScrollToTop } from 'Components/utils/Scroll'
+import React, { Component } from 'react'
+import emoji from 'react-easy-emoji'
+
+export default class Video extends Component {
+	state = {
+		opened: false
+	}
+	handleClose = () => {
+		this.setState({ opened: false })
+	}
+	handleOpen = () => {
+		this.setState({ opened: true })
+	}
+	render() {
+		return (
+			<>
+				<button onClick={this.handleOpen} className="ui__ link-button">
+					<T k="sécu.video">La sécurité sociale en vidéo</T>
+					{emoji(' 📽️')}
+				</button>
+				{this.state.opened && (
+					<Overlay onClose={this.handleClose} style={{ textAlign: 'left' }}>
+						<ScrollToTop />
+						<div
+							style={{
+								position: 'relative',
+								width: '100%',
+								height: '0',
+								paddingBottom: '56.25%'
+							}}>
+							<iframe
+								style={{
+									position: 'absolute',
+									top: '1em',
+									left: 0,
+									width: '100%',
+									height: '100%'
+								}}
+								src={`https://www.youtube-nocookie.com/embed/${
+									this.props.language === 'fr' ? 'EMQ3fNyMxBE' : 'dN9ZVazSmpc'
+								}?rel=0&amp;showinfo=0`}
+								frameBorder="0"
+								allow="autoplay; encrypted-media"
+								allowFullScreen
+							/>
+						</div>
+					</Overlay>
+				)}
+			</>
+		)
+	}
+}