From 8a4c70d12ea008a81757260e0653b21d3933e868 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Fri, 30 Aug 2019 16:47:34 +0200
Subject: [PATCH] =?UTF-8?q?:fountain=5Fpen::art:=20remplace=20'valider'=20?=
 =?UTF-8?q?par=20'suivant'=20et=20r=C3=A9aligne=20le=20bouton=20avec=20les?=
 =?UTF-8?q?=20possibilit=C3=A9s=20dans=20le=20cas=20d'une=20question=20oui?=
 =?UTF-8?q?=20/=20non?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/PaySlipSections.js          |  2 +-
 source/components/conversation/SendButton.js  |  9 +--
 source/components/conversation/TextArea.js    | 57 -------------------
 .../components/conversation/conversation.css  | 11 ++++
 source/locales/en.yaml                        |  3 +-
 5 files changed, 18 insertions(+), 64 deletions(-)
 delete mode 100644 source/components/conversation/TextArea.js

diff --git a/source/components/PaySlipSections.js b/source/components/PaySlipSections.js
index c006ca9e4..de6f6df2f 100644
--- a/source/components/PaySlipSections.js
+++ b/source/components/PaySlipSections.js
@@ -50,7 +50,7 @@ export let SalaireNetSection = ({ getRule }) => {
 					{/* Avantages en nature */}
 					<Line negative rule={avantagesEnNature} />
 					{/* Salaire net */}
-					<Line negative rule={getRule('contrat salarié . salaire . net')} />
+					<Line rule={getRule('contrat salarié . salaire . net')} />
 				</>
 			) : null}
 			<Line negative rule={getRule('impôt . neutre')} />
diff --git a/source/components/conversation/SendButton.js b/source/components/conversation/SendButton.js
index 3c2dc613c..f578d5c5d 100644
--- a/source/components/conversation/SendButton.js
+++ b/source/components/conversation/SendButton.js
@@ -26,18 +26,19 @@ export default compose(withTranslation())(
 			return (
 				<span
 					css={`
+						margin-left: 1rem;
 						.keyIcon {
 							opacity: 0;
 						}
 						${!disabled &&
 							`
 							@media (hover) {
-							
+
 							:hover .keyIcon {
 							opacity: 1
 							}
-							
-							
+
+
 							}`}
 					`}
 					className="sendWrapper">
@@ -46,7 +47,7 @@ export default compose(withTranslation())(
 						disabled={disabled}
 						onClick={() => this.getAction()('accept')}>
 						<span className="text">
-							<Trans>valider</Trans> ✓
+							<Trans>Suivant →</Trans>
 						</span>
 					</button>
 					<span className="keyIcon">
diff --git a/source/components/conversation/TextArea.js b/source/components/conversation/TextArea.js
deleted file mode 100644
index b67be113e..000000000
--- a/source/components/conversation/TextArea.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { compose } from 'ramda';
-import React, { Component } from 'react';
-import { Trans, withTranslation } from 'react-i18next';
-import { FormDecorator } from './FormDecorator';
-
-export default compose(
-	FormDecorator('text-area'),
-	withTranslation()
-)(
-	class Input extends Component {
-		render() {
-			let {
-					name,
-					input,
-					submit,
-					attributes,
-					meta: { touched, error },
-					themeColours
-				} = this.props,
-				inputError = touched && error,
-				sendButtonDisabled = !input.value || inputError
-
-			return (
-				<span>
-					<span className="answer">
-						<textarea
-							{...attributes}
-							{...input}
-							id={'step-' + name}
-							onKeyDown={
-								({ key, ctrlKey }) =>
-									key == 'Enter' &&
-									ctrlKey &&
-									input.value &&
-									(!error ? submit() : input.onBlur()) // blur will trigger the error
-							}
-						/>
-						<button
-							className="ui__ button plain"
-							style={{
-								visibility: sendButtonDisabled ? 'hidden' : 'visible',
-								color: themeColours.textColour,
-								background: themeColours.colour
-							}}
-							onClick={() => (!error ? submit() : null)}>
-							<span className="text">
-								<Trans>valider</Trans>
-							</span>
-							<span className="icon">✓</span>
-						</button>
-					</span>
-					{inputError && <span className="step-input-error">{error}</span>}
-				</span>
-			)
-		}
-	}
-)
diff --git a/source/components/conversation/conversation.css b/source/components/conversation/conversation.css
index ef7336218..0deed9169 100644
--- a/source/components/conversation/conversation.css
+++ b/source/components/conversation/conversation.css
@@ -98,12 +98,20 @@
 
 .step fieldset {
 	margin: 0.8em 0;
+	display: flex;
+	justify-content: flex-end;
+	flex-wrap: wrap;
+	align-items: baseline;
 }
 
 .step fieldset ul {
 	list-style-type: none;
 }
 
+.step fieldset > ul:not(.binaryQuestionList) {
+	width: 100%;
+}
+
 .step.question .variant {
 	margin-bottom: 1em;
 }
@@ -325,6 +333,9 @@
 	margin-left: 0.3em;
 }
 
+.select-answer.commune {
+	flex: 1;
+}
 .select-answer.commune .Select {
 	width: 50%;
 }
diff --git a/source/locales/en.yaml b/source/locales/en.yaml
index 2c9026210..80ccb2566 100644
--- a/source/locales/en.yaml
+++ b/source/locales/en.yaml
@@ -5,8 +5,7 @@ previousSimulationBanner:
 Première estimation: First estimate
 Commencer la simulation: Start simulation
 selectMany: You may pick more than one
-Valider: Accept
-valider: accept
+Suivant: Next
 votre réponse: answer here
 reset: Start over
 resetAll: Discard answers