From 5cd52ae9c0cd3d7d40bcf90a79646c78c16a3772 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Mon, 22 Mar 2021 17:32:48 +0100
Subject: [PATCH] =?UTF-8?q?:art:=20Am=C3=A9liore=20le=20design=20des=20r?=
 =?UTF-8?q?=C3=A8gles=20virtuelle=20et=20d=C3=A9pli=C3=A9e=20dans=20la=20d?=
 =?UTF-8?q?ocumentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publicodes/ui-react/source/mecanisms/Rule.tsx | 25 +++++++++++++------
 .../ui-react/source/mecanisms/common.tsx      |  6 ++---
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/publicodes/ui-react/source/mecanisms/Rule.tsx b/publicodes/ui-react/source/mecanisms/Rule.tsx
index 3ea6f4dfc..5f3645f51 100644
--- a/publicodes/ui-react/source/mecanisms/Rule.tsx
+++ b/publicodes/ui-react/source/mecanisms/Rule.tsx
@@ -2,10 +2,17 @@ import { capitalise0 } from 'publicodes'
 import styled from 'styled-components'
 import Explanation from '../Explanation'
 
-export default function RuleMecanism({ rawNode, explanation }) {
+export default function RuleMecanism({
+	rawNode,
+	explanation,
+	title,
+	virtualRule,
+}) {
 	return (
 		<Styled>
-			<code className="ui__ light-bg">{capitalise0(rawNode.nom)}</code>
+			<span className="ui__ small label">
+				{capitalise0(virtualRule ? rawNode.nom : title)}
+			</span>
 			<Explanation node={explanation.valeur} />
 		</Styled>
 	)
@@ -14,10 +21,14 @@ export default function RuleMecanism({ rawNode, explanation }) {
 const Styled = styled.div`
 	display: flex;
 	flex-direction: column;
-
-	code {
-		align-self: flex-start;
-		margin: 0;
-		margin-bottom: 0.2rem;
+	padding: 1rem;
+	padding-top: 0rem;
+	margin: 1rem 0;
+	border: 1px solid var(--darkColor);
+	border-radius: 3px;
+	> .label {
+		margin: 0 -1rem;
+		margin-bottom: 1rem;
+		border-radius: 0rem;
 	}
 `
diff --git a/publicodes/ui-react/source/mecanisms/common.tsx b/publicodes/ui-react/source/mecanisms/common.tsx
index 1d0e48033..d96967084 100644
--- a/publicodes/ui-react/source/mecanisms/common.tsx
+++ b/publicodes/ui-react/source/mecanisms/common.tsx
@@ -296,7 +296,6 @@ export function Leaf(
 	if (!rule) {
 		throw new Error('Unknown node')
 	}
-
 	const [folded, setFolded] = useState(true)
 	const foldButton = useContext(UnfoldIsEnabledContext) ? (
 		<UnfoldButton
@@ -306,13 +305,12 @@ export function Leaf(
 			{folded ? 'déplier' : 'replier'}
 		</UnfoldButton>
 	) : null
-
 	if (
 		node.dottedName === node.contextDottedName + ' . ' + node.name &&
 		!node.name.includes(' . ') &&
 		rule.virtualRule
 	) {
-		return <Explanation node={rule} />
+		return <Explanation node={engine?.evaluate(rule)} />
 	}
 	return (
 		<div style={{ display: 'inline' }}>
@@ -339,7 +337,7 @@ export function Leaf(
 					}}
 				>
 					<UnfoldIsEnabledContext.Provider value={false}>
-						<Explanation node={engine?.evaluate(rule).explanation.valeur} />
+						<Explanation node={engine?.evaluate(rule)} />
 					</UnfoldIsEnabledContext.Provider>
 				</div>
 			)}