🎨 Ajout d'icônes aux pages /règle

source/components/rule/Destinataire.css

@@ -6,6 +6,9 @@
 	justify-content: center;
 }
 
+#destinataire a::after {
+	display: none;
+}
 #destinataire img {
 	max-width: 100px;
 	margin: auto;

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;

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">

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>

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
 					}}
 				/>
 

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é.