🎨 Améliore le design des règles virtuelle et dépliée dans la documentation

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;
 	}
 `

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