🎨 Surlignage de la variation satisfaite

source/engine/mecanismViews/Barème.css

@@ -27,6 +27,3 @@
 .barème .tranche.activated {
 	background: yellow !important ;
 }
-.barème .tranche.activated:last-of-type {
-	background: chartreuse;
-}

source/engine/mecanismViews/Variations.css

@@ -5,3 +5,6 @@
 	margin-bottom: 1em;
 	list-style: circle;
 }
+.variations > ul > li.satisfied .consequence {
+	background: yellow;
+}

source/engine/mecanismViews/Variations.js

@@ -2,44 +2,35 @@ import React from 'react'
 import { Node } from './common'
 import { makeJsx } from '../evaluation'
 import './Variations.css'
-import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext'
+import classNames from 'classnames'
 
 export default function Variations(nodeValue, explanation) {
 	return (
-		<ShowValuesConsumer>
-			{showValues => (
-				<Node
-					classes="mecanism variations"
-					name="variations"
-					value={nodeValue}
-					child={
-						<ul>
-							{explanation.map(
-								c =>
-									console.log('c', c) || (
-										<li
-											className="variation"
-											key={JSON.stringify(c.condition | 'sinon')}>
-											<div className="condition">
-												{c.condition && (
-													<>
-														<span>Si</span> {makeJsx(c.condition)}
-													</>
-												)}
-												<div>
-													<span>{c.condition ? 'Alors : ' : 'Sinon : '}</span>
-													<span className="content">
-														{makeJsx(c.consequence)}
-													</span>
-												</div>
-											</div>
-										</li>
-									)
-							)}
-						</ul>
-					}
-				/>
-			)}
-		</ShowValuesConsumer>
+		<Node
+			classes="mecanism variations"
+			name="variations"
+			value={nodeValue}
+			child={
+				<ul>
+					{explanation.map(({ condition, consequence, satisfied }) => (
+						<li
+							className={classNames('variation', { satisfied })}
+							key={JSON.stringify(condition | 'sinon')}>
+							<div className="condition">
+								{condition && (
+									<>
+										<span>Si</span> {makeJsx(condition)}
+									</>
+								)}
+								<div className="consequence">
+									<span>{condition ? 'Alors : ' : 'Sinon : '}</span>
+									<span className="content">{makeJsx(consequence)}</span>
+								</div>
+							</div>
+						</li>
+					))}
+				</ul>
+			}
+		/>
 	)
 }

source/engine/mecanisms.js

@@ -193,7 +193,7 @@ export let mecanismVariations = (recurse, k, v, devariate) => {
 			rightMissing = mergeAllMissing(pluck('consequence', candidateVariations)),
 			missingVariables = mergeMissing(bonus(leftMissing), rightMissing)
 
-		return rewriteNode(node, nodeValue, evaluatedExplanation, missingVariables)
+		return rewriteNode(node, nodeValue, resolvedExplanation, missingVariables)
 	}
 
 	// TODO - find an appropriate representation