From 4ee0d7852e91f05e2af62f7d86574ac87947c0d9 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Wed, 15 Sep 2021 17:24:54 +0200
Subject: [PATCH] =?UTF-8?q?:bug:=20R=C3=A9pare=20l'affichage=20des=20r?=
 =?UTF-8?q?=C3=A8gles=20remplac=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

:art: Ajoute un espacement au dessus du bloc cotiz forfaitaire indépendant
---
 .../IndépendantExplanation.tsx                     | 14 ++++++++------
 .../ui-react/source/mecanisms/Replacement.tsx      | 13 ++-----------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx b/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx
index 131af5d7b..c015acd28 100644
--- a/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx
+++ b/mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx
@@ -26,12 +26,14 @@ export default function IndépendantExplanation() {
 
 	return (
 		<>
-			<WhenApplicable dottedName="dirigeant . indépendant . cotisations et contributions . début activité">
-				<CotisationsForfaitaires />
-			</WhenApplicable>
-			<WhenNotApplicable dottedName="dirigeant . indépendant . cotisations et contributions . début activité">
-				<CotisationsRégularisation />
-			</WhenNotApplicable>
+			<section>
+				<WhenApplicable dottedName="dirigeant . indépendant . cotisations et contributions . début activité">
+					<CotisationsForfaitaires />
+				</WhenApplicable>
+				<WhenNotApplicable dottedName="dirigeant . indépendant . cotisations et contributions . début activité">
+					<CotisationsRégularisation />
+				</WhenNotApplicable>
+			</section>
 			<InstitutionsPartenaires />
 			<Condition expression="dirigeant . rémunération . nette après impôt > 0 €/an">
 				<section>
diff --git a/publicodes/ui-react/source/mecanisms/Replacement.tsx b/publicodes/ui-react/source/mecanisms/Replacement.tsx
index 339640e33..c1b88e7aa 100644
--- a/publicodes/ui-react/source/mecanisms/Replacement.tsx
+++ b/publicodes/ui-react/source/mecanisms/Replacement.tsx
@@ -3,8 +3,8 @@ import { useState } from 'react'
 import emoji from 'react-easy-emoji'
 import Variations from './Variations'
 import Overlay from '../Overlay'
+import Explanation from '../Explanation'
 import { RuleLinkWithContext } from '../RuleLink'
-import { NodeValuePointer, UnfoldIsEnabledContext } from './common'
 import { EvaluatedNode } from 'publicodes/source/AST/types'
 
 export default function Replacement(node: VariationNode & EvaluatedNode) {
@@ -18,16 +18,7 @@ export default function Replacement(node: VariationNode & EvaluatedNode) {
 	const [displayReplacements, changeDisplayReplacement] = useState(false)
 	return (
 		<span>
-			<RuleLinkWithContext dottedName={replacedNode.dottedName} />
-			&nbsp;
-			{applicableReplacement && (
-				<span>
-					<NodeValuePointer
-						data={(applicableReplacement as any).nodeValue}
-						unit={(applicableReplacement as any).unit}
-					/>
-				</span>
-			)}
+			<Explanation node={applicableReplacement} />
 			&nbsp;
 			<button
 				onClick={() => changeDisplayReplacement(true)}