From 05f8e2e23b99700a93ff8cb1a36e98ca2948ddd0 Mon Sep 17 00:00:00 2001
From: Martin STIEVENART <martin.stievenart@axa.fr>
Date: Fri, 28 Jan 2022 16:18:25 +0100
Subject: [PATCH] feat(Restitution): allow ReactNode in value

---
 packages/restitution/README.md                              | 5 ++++-
 packages/restitution/src/Restitution.stories.tsx            | 5 ++++-
 packages/restitution/src/Restitution.tsx                    | 4 ++--
 packages/restitution/src/__tests__/Restitution.spec.tsx     | 5 ++++-
 .../src/__tests__/__snapshots__/Restitution.spec.tsx.snap   | 6 +++++-
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/restitution/README.md b/packages/restitution/README.md
index f6abed8bb..ce53c82ed 100644
--- a/packages/restitution/README.md
+++ b/packages/restitution/README.md
@@ -97,7 +97,10 @@ const RestititutionDefault = () => (
         </SectionRestitutionColumn>
         <SectionRestitutionColumn>
           <Restitution label="TA" value="99,99 %" />
-          <Restitution label="EURO" value="EURO" />
+          <Restitution
+            label="EURO"
+            value={<span style={{ textDecoration: 'underline' }}>EURO</span>}
+          />
           <Restitution
             label="Garanties complémentaires"
             classModifier="marge"
diff --git a/packages/restitution/src/Restitution.stories.tsx b/packages/restitution/src/Restitution.stories.tsx
index c752d24ec..9e4c378ab 100644
--- a/packages/restitution/src/Restitution.stories.tsx
+++ b/packages/restitution/src/Restitution.stories.tsx
@@ -94,7 +94,10 @@ export const Default = () => (
         </SectionRestitutionColumn>
         <SectionRestitutionColumn>
           <Restitution label="TA" value="99,99 %" />
-          <Restitution label="EURO" value="EURO" />
+          <Restitution
+            label="EURO"
+            value={<span style={{ textDecoration: 'underline' }}>EURO</span>}
+          />
           <Restitution
             label="Garanties complémentaires"
             classModifier="marge"
diff --git a/packages/restitution/src/Restitution.tsx b/packages/restitution/src/Restitution.tsx
index cb12a2041..46286d88b 100644
--- a/packages/restitution/src/Restitution.tsx
+++ b/packages/restitution/src/Restitution.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import {
   withClassDefault,
   withClassModifier,
@@ -21,7 +21,7 @@ const RestitutionValues = ({ values }: Pick<RestitutionProps, 'values'>) => {
 
 type RestitutionProps = ComponentPropsWithoutRef<'dl'> & {
   label: string;
-  value?: string;
+  value?: ReactNode;
   values?: string[];
 };
 const Restitution = ({
diff --git a/packages/restitution/src/__tests__/Restitution.spec.tsx b/packages/restitution/src/__tests__/Restitution.spec.tsx
index ec115bd30..66c2e0c01 100644
--- a/packages/restitution/src/__tests__/Restitution.spec.tsx
+++ b/packages/restitution/src/__tests__/Restitution.spec.tsx
@@ -78,7 +78,10 @@ const Component = (
         </SectionRestitutionColumn>
         <SectionRestitutionColumn>
           <Restitution label="TA" value="99,99 %" />
-          <Restitution label="EURO" value="EURO" />
+          <Restitution
+            label="EURO"
+            value={<span style={{ textDecoration: 'underline' }}>EURO</span>}
+          />
           <Restitution
             label="Garanties complémentaires"
             classModifier="marge"
diff --git a/packages/restitution/src/__tests__/__snapshots__/Restitution.spec.tsx.snap b/packages/restitution/src/__tests__/__snapshots__/Restitution.spec.tsx.snap
index 00cff87a7..7c64e771c 100644
--- a/packages/restitution/src/__tests__/__snapshots__/Restitution.spec.tsx.snap
+++ b/packages/restitution/src/__tests__/__snapshots__/Restitution.spec.tsx.snap
@@ -401,7 +401,11 @@ exports[`<ArticleRestitution /> should render component 1`] = `
               <dd
                 class="af-restitution__listdef-value"
               >
-                EURO
+                <span
+                  style="text-decoration: underline;"
+                >
+                  EURO
+                </span>
               </dd>
             </dl>
             <dl