👽 Traduit la présentation des exemples

source/components/rule/Examples.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Trans, translate } from 'react-i18next'
 import { evolve, path, isEmpty, compose } from 'ramda'
 import classNames from 'classnames'
 import { connect } from 'react-redux'
@@ -49,6 +50,7 @@ export let runExamples = (examples, rule, parsedRules) =>
 		setExample: compose(dispatch, setExample)
 	})
 )
+@translate()
 export default class Examples extends Component {
 	render() {
 		let {
@@ -66,15 +68,10 @@ export default class Examples extends Component {
 		return (
 			<div id="examples">
 				<h2>
-					Exemples de calcul{' '}
-					<small>Cliquez sur un exemple pour le tester</small>
+					<Trans i18nKey="examples">Exemples de calcul</Trans>{' '}
+					<small><Trans i18nKey="clickexample">Cliquez sur un exemple pour le tester</Trans></small>
 				</h2>
-				{isEmpty(examples) ? (
-					<p>
-						<i className="fa fa-exclamation-triangle" aria-hidden="true" />
-						<em>Cette règle manque d'exemples...</em>
-					</p>
-				) : (
+				{!isEmpty(examples) && (
 					<ul>
 						{examples.map(
 							({ nom, ok, rule, 'valeur attendue': expected, situation }) => (
@@ -102,9 +99,9 @@ export default class Examples extends Component {
 										currentExample &&
 										currentExample.name == nom && (
 											<div className="ko">
-												Ce test ne passe pas
+												<Trans i18nKey="fail">Ce test ne passe pas</Trans>
 												<span>
-													: le résultat attendu était{' '}
+													: <Trans i18nKey="expected">le résultat attendu était</Trans>{' '}
 													<span className="expected">{expected}</span>
 												</span>
 											</div>
@@ -121,7 +118,7 @@ export default class Examples extends Component {
 								id="injectSituation"
 								onClick={() => setExample(null)}
 								style={{ background: colour }}>
-								Revenir à votre situation
+								<Trans i18nKey="cancelExample">Revenir à votre situation</Trans>
 							</button>
 						</div>
 					)}

source/locales/en.yaml

@@ -78,3 +78,8 @@ aide: aid or subsidy
 indemnité: benefit
 salaire: salary
 taxe: tax
+examples: Example situations
+clickexample: Click on a situation to see the result
+fail: This test failed
+expected: the expected result was
+cancelExample: Back to your situation