From 2fb40dc8b9cb99d0a3412abeb4d47b6cd587e5ca Mon Sep 17 00:00:00 2001
From: Aurelie Crouillebois <aurelie.crouillebois@gmail.com>
Date: Fri, 15 Nov 2024 16:58:54 +0100
Subject: [PATCH] style(junior): add transition on feedback messages

---
 junior/app/components/bubble.gjs             |  4 ++--
 junior/app/components/challenge/template.hbs | 10 +++++++++-
 junior/app/styles/components/bubble.scss     |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/junior/app/components/bubble.gjs b/junior/app/components/bubble.gjs
index 4ba082c2828..14898561274 100644
--- a/junior/app/components/bubble.gjs
+++ b/junior/app/components/bubble.gjs
@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import {tracked} from '@glimmer/tracking';
 import MarkdownToHtml from 'junior/components/markdown-to-html';
 import * as markdownConverter from 'junior/utils/markdown-converter';
 
@@ -22,7 +22,7 @@ export default class Bubble extends Component {
     return className;
   }
   get getDelayedClass() {
-    if (typeof this.args.shouldDisplayIn === 'number') {
+    if (typeof this.args.shouldDisplayIn === 'number' || this.args.withTransition) {
       return 'bubble-container__delayed';
     }
     return '';
diff --git a/junior/app/components/challenge/template.hbs b/junior/app/components/challenge/template.hbs
index 29b07efa65a..2df7a014845 100644
--- a/junior/app/components/challenge/template.hbs
+++ b/junior/app/components/challenge/template.hbs
@@ -14,6 +14,7 @@
         @status="success"
         @oralization={{@oralization}}
         aria-live="polite"
+        @withTransition={{true}}
       />
     {{/if}}
     {{#if (eq this.answer.result "ko")}}
@@ -22,10 +23,17 @@
         @oralization={{@oralization}}
         @status="error"
         aria-live="polite"
+        @withTransition={{true}}
       />
     {{/if}}
     {{#if this.displayValidationWarning}}
-      <Bubble @message={{this.validationWarning}} @status="warning" aria-live="polite" @oralization={{@oralization}} />
+      <Bubble
+        @message={{this.validationWarning}}
+        @status="warning"
+        aria-live="polite"
+        @oralization={{@oralization}}
+        @withTransition={{true}}
+      />
     {{/if}}
   </RobotDialog>
   <Challenge::Item
diff --git a/junior/app/styles/components/bubble.scss b/junior/app/styles/components/bubble.scss
index d5d3b048ab9..1073d5032b4 100644
--- a/junior/app/styles/components/bubble.scss
+++ b/junior/app/styles/components/bubble.scss
@@ -8,7 +8,7 @@
   }
 
   &__delayed {
-    transition: all 1s;
+    transition: all 2s;
   }
 }