(feat): modal & background style props

Author: divshekhar

src/components/animatedModal/AnimatedModal.stories.tsx

@@ -20,7 +20,12 @@ const AnimatedModalTemplate: Story = () => {
 
   return (
     <>
-      <AnimatedModal ref={ref} animation={ModalAnimation.Unfold} />
+      <AnimatedModal
+        ref={ref}
+        animation={ModalAnimation.Unfold}
+        backgroundStyle={{ backgroundColor: 'blue', opacity: '0.8' }}
+        modalStyle={{ background: 'rgba(122,242,154, 0.5)' }}
+      />
       <AnimatedModalFrame>
         <button onClick={() => ref.current?.OpenModal()}>Open Unfold Modal</button>
         <br />

src/components/animatedModal/AnimatedModal.styles.scss

@@ -24,7 +24,8 @@ body {
 
   #animated-modal-background {
     display:table-cell;
-    background:rgba(0,0,0,.8);
+    background-color: black;
+    opacity: 0.8;
     text-align:center;
     vertical-align:middle;
 

src/components/animatedModal/AnimatedModal.tsx

@@ -11,12 +11,16 @@ import { ModalAnimation } from './AnimatedModal.enums';
  * @property {ModalAnimation} animation Modal animation
  * @property {React.ReactNode} [children] Modal's children
  * @property {boolean} [closeOnBackgroundClick] Close modal on background click?
+ * @property {React.CSSProperties} [backgroundStyle] Background Style
+ * @property {React.CSSProperties} [modalStyle] Modal Style
  */
 interface IAnimatedModalProps {
   startOpen?: boolean;
   animation: ModalAnimation;
   children?: React.ReactNode;
   closeOnBackgroundClick?: boolean;
+  backgroundStyle?: React.CSSProperties;
+  modalStyle?: React.CSSProperties;
 }
 
 /**
@@ -156,8 +160,9 @@ const AnimatedModal = forwardRef(
       <div id="animated-modal-container" className={modalClass}>
         <div
           id="animated-modal-background"
-          onClick={props.closeOnBackgroundClick ? onBackgroundClick : undefined}>
-          <div id="animated-modal">
+          onClick={props.closeOnBackgroundClick ? onBackgroundClick : undefined}
+          style={props.backgroundStyle}>
+          <div id="animated-modal" style={props.modalStyle}>
             {modalClass.includes(ModalAnimation.Sketch) ? sketchSVG() : undefined}
             <div id="modal-content">{props.children ? props.children : defaultModal()}</div>
           </div>