From 5d25aed7659df265d413bc5a370f28fc780eb611 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 17 Apr 2024 10:24:22 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB(app-desk)=20add=20effect=20prop=20?=
 =?UTF-8?q?on=20Box=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add the effect prop on Box component.
2 effects are available: 'show' and 'hide'.
---
 .../apps/impress/src/components/Box.tsx       | 11 ++++++++++
 .../apps/impress/src/components/Effect.tsx    | 20 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/frontend/apps/impress/src/components/Effect.tsx

diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index dd82c5f7..7d8b0e95 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -2,6 +2,8 @@ import { ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
 import { CSSProperties } from 'styled-components/dist/types';
 
+import { hideEffect, showEffect } from './Effect';
+
 export interface BoxProps {
   as?: keyof ReactHTML;
   $align?: CSSProperties['alignItems'];
@@ -10,6 +12,7 @@ export interface BoxProps {
   $css?: string;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
+  $effect?: 'show' | 'hide';
   $flex?: boolean;
   $gap?: CSSProperties['gap'];
   $height?: CSSProperties['height'];
@@ -43,4 +46,12 @@ export const Box = styled('div')<BoxProps>`
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
+  ${({ $effect }) => {
+    switch ($effect) {
+      case 'show':
+        return showEffect;
+      case 'hide':
+        return hideEffect;
+    }
+  }}
 `;
diff --git a/src/frontend/apps/impress/src/components/Effect.tsx b/src/frontend/apps/impress/src/components/Effect.tsx
new file mode 100644
index 00000000..40983550
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/Effect.tsx
@@ -0,0 +1,20 @@
+import { css, keyframes } from 'styled-components';
+
+const show = keyframes`
+ 0% { transform: scaleY(0); opacity: 0; max-height: 0; }
+ 100% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+`;
+
+const hide = keyframes`
+ 0% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+ 100% { display:none; transform: scaleY(0); opacity: 0; max-height: 0;  }
+`;
+
+export const showEffect = css`
+  animation: ${show} 0.3s ease-in-out;
+`;
+
+export const hideEffect = css`
+  animation: ${hide} 0.3s ease-in-out;
+  animation-fill-mode: forwards;
+`;