From 03aad549cef0a89f26865a614350595ff581cc34 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Mon, 13 Aug 2018 17:11:19 +0200
Subject: [PATCH] =?UTF-8?q?:art:=20Ajout=20d'ic=C3=B4nes=20aux=20pages=20/?=
 =?UTF-8?q?r=C3=A8gle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/rule/Destinataire.css |  3 +++
 source/components/rule/Header.css       | 10 ++++++++++
 source/components/rule/Header.js        | 15 +++++++++++----
 source/components/rule/Namespace.js     |  2 ++
 source/components/rule/Rule.js          |  5 +++--
 source/règles/base.yaml                 |  3 +++
 6 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/source/components/rule/Destinataire.css b/source/components/rule/Destinataire.css
index 676487ff4..d39a3c054 100644
--- a/source/components/rule/Destinataire.css
+++ b/source/components/rule/Destinataire.css
@@ -6,6 +6,9 @@
 	justify-content: center;
 }
 
+#destinataire a::after {
+	display: none;
+}
 #destinataire img {
 	max-width: 100px;
 	margin: auto;
diff --git a/source/components/rule/Header.css b/source/components/rule/Header.css
index db1b4217f..43c1bc9f8 100644
--- a/source/components/rule/Header.css
+++ b/source/components/rule/Header.css
@@ -2,6 +2,16 @@
 	border-radius: 0.3em;
 	padding: 1em;
 }
+
+#ruleHeader header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+#ruleHeader__icon {
+	font-size: 300%;
+}
 #rule h1 {
 	margin-top: 0.3em;
 	font-size: 2.5rem;
diff --git a/source/components/rule/Header.js b/source/components/rule/Header.js
index 7ed09a830..353127623 100644
--- a/source/components/rule/Header.js
+++ b/source/components/rule/Header.js
@@ -7,6 +7,7 @@ import Destinataire from './Destinataire'
 import './Header.css'
 import Namespace from './Namespace'
 import withColours from 'Components/utils/withColours'
+import emoji from 'react-easy-emoji'
 
 let RuleHeader = withColours(
 	({
@@ -18,14 +19,20 @@ let RuleHeader = withColours(
 		flatRules,
 		name,
 		title,
+		icon,
 		colours
 	}) => (
 		<section id="ruleHeader">
 			<header style={{ background: colours.colour }}>
-				{ns && <Namespace {...{ ns, flatRules, colour: colours.textColour }} />}
-				<h1 style={{ color: colours.textColour }}>
-					{title || capitalise0(name)}
-				</h1>
+				<div id="ruleHeader__main">
+					{ns && (
+						<Namespace {...{ ns, flatRules, colour: colours.textColour }} />
+					)}
+					<h1 style={{ color: colours.textColour }}>
+						{title || capitalise0(name)}
+					</h1>
+				</div>
+				{icon && <span id="ruleHeader__icon"> {emoji(icon)}</span>}
 			</header>
 			<div id="ruleHeader__content">
 				<div id="ruleHeader__description">
diff --git a/source/components/rule/Namespace.js b/source/components/rule/Namespace.js
index 68a2785c9..561b69d05 100644
--- a/source/components/rule/Namespace.js
+++ b/source/components/rule/Namespace.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { capitalise0 } from '../../utils'
 import './Namespace.css'
+import emoji from 'react-easy-emoji'
 
 let Namespace = ({ ns, flatRules, colour }) => (
 	<ul id="namespace">
@@ -25,6 +26,7 @@ let Namespace = ({ ns, flatRules, colour }) => (
 					<li style={style} key={fragments.join()}>
 						<Link style={style} to={'../règle/' + encodeRuleName(ruleName)}>
 							{ruleText}
+							{rule.icon && <span> {emoji(rule.icon)}</span>}
 						</Link>
 						{' › '}
 					</li>
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index a6bfa93e2..5bf19e878 100644
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@@ -43,7 +43,7 @@ export default class Rule extends Component {
 			} = this.props,
 			flatRule = findRuleByDottedName(flatRules, dottedName)
 
-		let { type, name, title, description, question, ns } = flatRule,
+		let { type, name, title, description, question, ns, icon } = flatRule,
 			namespaceRules = findRuleByNamespace(flatRules, dottedName)
 
 		let displayedRule = analysedExample || analysedRule
@@ -63,7 +63,8 @@ export default class Rule extends Component {
 						flatRule,
 						flatRules,
 						name,
-						title
+						title,
+						icon
 					}}
 				/>
 
diff --git a/source/règles/base.yaml b/source/règles/base.yaml
index 7bf4569d8..24b84a8f3 100644
--- a/source/règles/base.yaml
+++ b/source/règles/base.yaml
@@ -572,6 +572,7 @@
 
 - espace: contrat salarié . CDD
   nom: durée contrat
+  icône: ⏳
   titre: durée du contrat
   question: Quelle est la durée du contrat ?
   sous-question: |
@@ -659,6 +660,8 @@
         # CIF, majoration chômage, indemnité de fin de contrat, indemnité compensatrice des congés payés
     hypothèses:
       contrat salarié . type de contrat: CDD
+
+
 - nom: contrat salarié
   description: |
     Le contrat qui lie une entreprise (via son établissement) à un individu, qui est alors son salarié.