From a0fea64630dba462402b1ddca8a38fbdfa2004fa Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 8 Jul 2024 16:37:55 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20create=20side=20modal=20c?=
 =?UTF-8?q?omponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create SideModal component for
displaying modal on the side of the screen.
This component is build above the Cunningham
component, so all the cunnighama props are
still available.
---
 CHANGELOG.md                                  |  1 +
 .../apps/impress/src/components/SideModal.tsx | 44 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/frontend/apps/impress/src/components/SideModal.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0481b633..f37aa757 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to
 ## Added
 
 - 🤡(demo) generate dummy documents on dev users #120 
+- ✨(frontend) create side modal component #134
 
 ## Changed
 
diff --git a/src/frontend/apps/impress/src/components/SideModal.tsx b/src/frontend/apps/impress/src/components/SideModal.tsx
new file mode 100644
index 00000000..217088e3
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/SideModal.tsx
@@ -0,0 +1,44 @@
+import { Modal, ModalSize } from '@openfun/cunningham-react';
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+interface SideModalStyleProps {
+  side: 'left' | 'right';
+  width: string;
+}
+
+const SideModalStyle = createGlobalStyle<SideModalStyleProps>`
+  & .c__modal{
+    width: ${({ width }) => width};
+    ${({ side }) => side === 'right' && 'left: auto;'};
+    
+    .c__modal__scroller {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+`;
+
+type SideModalType = Omit<ComponentPropsWithRef<typeof Modal>, 'size'>;
+
+interface SideModalProps extends SideModalType {
+  side: 'left' | 'right';
+  width: string;
+}
+
+export const SideModal = ({
+  children,
+  side,
+  width,
+  ...modalProps
+}: PropsWithChildren<SideModalProps>) => {
+  return (
+    <>
+      <SideModalStyle width={width} side={side} />
+      <Modal {...modalProps} size={ModalSize.FULL}>
+        {children}
+      </Modal>
+    </>
+  );
+};