From d9b4d2cadb493c9347798f8c7f03176a2d138d39 Mon Sep 17 00:00:00 2001
From: Steven Fountain <steven.fountain@digital.cabinet-office.gov.uk>
Date: Mon, 31 Jul 2023 18:57:07 +0100
Subject: [PATCH] PP-13510: transition card movement and reduce flash

---
 browser/src/dashboard/EventCard.tsx | 18 ++++++++++++++++--
 src/assets/payuk-toolbox.scss       | 20 ++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/browser/src/dashboard/EventCard.tsx b/browser/src/dashboard/EventCard.tsx
index f4175715..5e8b5a0b 100644
--- a/browser/src/dashboard/EventCard.tsx
+++ b/browser/src/dashboard/EventCard.tsx
@@ -75,7 +75,20 @@ interface EventCardProps {
   showAllEvents: boolean
 }
 
-export class EventCard extends React.Component<EventCardProps, {}> {
+export class EventCard extends React.Component<EventCardProps, { shouldShow: boolean, showTimer?: NodeJS.Timer }> {
+  state = {
+    shouldShow: false,
+  }
+
+  componentDidMount() {
+    setTimeout(() => this.setState({ shouldShow: true }))
+  }
+  componentWillUnmount() {
+    // if(this.state.showTimer) {
+        // clearTimeout(this.state.showTimer)
+    // }
+  }
+
   render() {
     const profile = this.props.showAllEvents ? (profileMap[this.props.event.event_type] || DefaultProfile) : DefaultProfile
     const paymentTypeIcon = paymentTypeMap[this.props.event.card_brand] || UnknownIcon
@@ -104,8 +117,9 @@ export class EventCard extends React.Component<EventCardProps, {}> {
     if (this.props.event.is_recent) {
       recentTag = <div style={{ textAlign: 'left', marginBottom: '8px', marginLeft: '8px', marginTop: '16px' }}><span className="govuk-tag govuk-tag--blue">new service</span></div>
     }
+    const showClass = this.state.shouldShow ? 'show' : ''
     return (
-      <div>
+      <div className={ "slide-card slide-fade " + showClass }>
         <OpacitySpring>
           { recentTag }
           <div className="event-card govuk-!-margin-bottom-2" style={{ backgroundColor: profile.backgroundColour }}>
diff --git a/src/assets/payuk-toolbox.scss b/src/assets/payuk-toolbox.scss
index c9188a68..8f423b58 100644
--- a/src/assets/payuk-toolbox.scss
+++ b/src/assets/payuk-toolbox.scss
@@ -260,3 +260,23 @@
       transform: rotate(360deg);
   }
 }
+
+.slide-card {
+  height: 0px;
+  // line-height: 75px;
+  transform: translateY(-100px);
+}
+
+.slide-card.slide-fade {
+  transition: all 0.7s ease;
+  opacity: 0;
+}
+
+.slide-card.slide-fade.show {
+  opacity: 1;
+  height: 75px;
+  transform: translateY(0px);
+
+  // temporary - needs to be worked out how this interacts with event-card etc.
+  margin-bottom: 10px;
+}
\ No newline at end of file