✨(frontend) create side modal component

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.

Author: AntoLC

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
 

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>
+    </>
+  );
+};