From 461a1b2e2feb28f77c5da11d44cd9951c58c6593 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Thu, 21 Apr 2022 11:25:02 +0200
Subject: [PATCH] Ajoute une animation pour l'apparition des notifications

---
 site/source/components/Notifications.tsx | 43 +++++++++++++-----------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/site/source/components/Notifications.tsx b/site/source/components/Notifications.tsx
index 17819a29f..c8aa780ee 100644
--- a/site/source/components/Notifications.tsx
+++ b/site/source/components/Notifications.tsx
@@ -10,6 +10,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
 import RuleLink from './RuleLink'
+import { Appear } from './ui/animate'
 import { Markdown } from './utils/markdown'
 
 // To add a new notification to a simulator, you should create a publicodes rule
@@ -67,27 +68,29 @@ export default function Notifications() {
 				margin-top: 1rem;
 			`}
 		>
-			{messages.map(({ sévérité, dottedName, résumé, description }) => (
-				<Message
-					icon
-					type={sévérité === 'avertissement' ? 'info' : 'primary'}
-					key={dottedName}
-				>
-					<Markdown>{résumé ?? description ?? ''}</Markdown>{' '}
-					{résumé && (
-						<RuleLink dottedName={dottedName as DottedName}>
-							<Trans>En savoir plus</Trans>
-						</RuleLink>
-					)}
-					<HideButton
-						className="hide"
-						aria-label="close"
-						onClick={() => dispatch(hideNotification(dottedName))}
+			<Appear>
+				{messages.map(({ sévérité, dottedName, résumé, description }) => (
+					<Message
+						icon
+						type={sévérité === 'avertissement' ? 'info' : 'primary'}
+						key={dottedName}
 					>
-						×
-					</HideButton>
-				</Message>
-			))}
+						<Markdown>{résumé ?? description ?? ''}</Markdown>{' '}
+						{résumé && (
+							<RuleLink dottedName={dottedName as DottedName}>
+								<Trans>En savoir plus</Trans>
+							</RuleLink>
+						)}
+						<HideButton
+							className="hide"
+							aria-label="close"
+							onClick={() => dispatch(hideNotification(dottedName))}
+						>
+							×
+						</HideButton>
+					</Message>
+				))}
+			</Appear>
 		</div>
 	)
 }