🎨 Design de la conversation générique

Prochainement :

- l'objectif de calcul dans l'URL
- faire marcher toutes les règles de co2.yaml
- rendre l'exploration correcte (ex. formatter correctemnt les nombres,
bien afficher les 'une possibilité')
- faire marcher publi.codes/App.js plutôt que d'écraser /embauche

index.html

@@ -12,7 +12,7 @@
 	<meta name="msvalidate.01" content="65161AFDF93A706CED3F68C7621C00D7" />
 	<meta name="description" content="<%= htmlWebpackPlugin.options.description %>" data-react-helmet="true">
 	<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
-	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,600|IBM+Plex+Sans:300,400' rel='stylesheet'
+	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,600|IBM+Plex+Sans:300,400' rel='stylesheet'
 	 type='text/css'>
 	<link rel="manifest" href="/manifest.webmanifest">
 	<title>

source/components/GenericSimulation.css

@@ -0,0 +1,10 @@
+#GenericSimulation {
+}
+#GenericSimulation > button {
+	padding: 0.6em 1em;
+	text-align: center;
+	margin: 1em auto;
+	display: block;
+	border-radius: 6px;
+	font-weight: 500;
+}

source/components/GenericSimulation.js

@@ -1,20 +1,32 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import { isEmpty } from 'ramda'
 import Answers from 'Components/AnswerList'
 import Conversation from 'Components/conversation/Conversation'
 import withColours from 'Components/utils/withColours'
 import Targets from 'Components/Targets'
+import './GenericSimulation.css'
 
 @withColours
+@connect(state => ({
+	previousAnswers: state.conversationSteps.foldedSteps
+}))
 export default class YO extends React.Component {
 	state = {
 		displayAnswers: false
 	}
 	render() {
+		let colours = this.props.colours
 		return (
-			<div>
-				<button onClick={() => this.setState({ displayAnswers: true })}>
-					Mes réponses
-				</button>
+			<div className="ui__ container" id="GenericSimulation">
+				<h1>Quel est l'impact de vos douches ? </h1>
+				{!isEmpty(this.props.previousAnswers) && (
+					<button
+						style={{ background: colours.colour, color: colours.textColour }}
+						onClick={() => this.setState({ displayAnswers: true })}>
+						Mes réponses
+					</button>
+				)}
 
 				{this.state.displayAnswers && (
 					<Answers onClose={() => this.setState({ displayAnswers: false })} />

source/components/Targets.css

@@ -0,0 +1,33 @@
+#targets {
+	width: 60%;
+	margin: 5% auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+#targets > .content {
+	border-radius: 6px;
+	border: 3px solid var(--colour);
+	padding: 1em;
+	min-width: 60%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+#targets > .icon {
+	margin: 0 0.6em;
+	font-size: 200%;
+	color: var(--colour);
+}
+#targets .value {
+	font-weight: 600;
+}
+#targets .unit {
+	font-weight: normal;
+	color: #666;
+}
+
+#targets .explanation {
+	font-size: 140%;
+	text-decoration: none;
+}

source/components/Targets.js

@@ -1,15 +1,39 @@
 import React from 'react'
 import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 import { connect } from 'react-redux'
+import './Targets.css'
+import withColours from 'Components/utils/withColours'
+import { Link } from 'react-router-dom'
+import emoji from 'react-easy-emoji'
 
 @connect(state => ({ analysis: analysisWithDefaultsSelector(state) }))
+@withColours
 export default class Targets extends React.Component {
 	render() {
-		let { title, nodeValue } = this.props.analysis.targets[0]
+		let {
+			title,
+			nodeValue,
+			unité: unit,
+			dottedName
+		} = this.props.analysis.targets[0]
 		return (
-			<div>
-				<span className="targetTitle">{title}</span>{' '}
-				<span className="targetValue">{nodeValue}</span>
+			<div id="targets">
+				<span className="icon">→</span>
+				<span className="content">
+					{/*<span className="title">{title}</span>
+					{' : '} */}
+					<span className="figure">
+						<span className="value">{nodeValue}</span>{' '}
+						<span className="unit">{unit}</span>
+					</span>
+					<Link
+						title="Quel est calcul ?"
+						style={{ color: this.props.colours.colour }}
+						to={'/règle/' + dottedName}
+						className="explanation">
+						{emoji('📖')}
+					</Link>
+				</span>
 			</div>
 		)
 	}

source/règles/co2.yaml

@@ -6,6 +6,7 @@
 
 - nom: impact
   période: flexible
+  unité: kgCO2eq
   formule: impact par douche * nombre de douches
 
 - nom: nombre de douches
@@ -41,7 +42,7 @@
   par défaut: non
 
 - nom: impact par litre froid
-  unité:  kgCO2e/l
+  unité:  kgCO2eq/l
   formule: 0.000132
 
 
@@ -58,7 +59,7 @@
 
 - espace: chauffage
   nom: impact par kWh
-  unité: kgCO2e/kWh PCI
+  unité: kgCO2eq/kWh PCI
   formule: 
     variations: 
       - si: type = 'gaz'