Side drawer fucntionality

components/modal/docs/Overview.mdx

@@ -183,4 +183,42 @@ return (
 )
 ```
 
+</Documenter>
+
+### Side Drawer Modal 
+
+<Documenter>
+
+```preview
+return (
+  <Modal type="SIDE_DRAWER" trigger="Open Modal" title="Modal Title" actions={close => <Button onClick={close}>Done</Button>}>
+    <p>
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+    </p>
+  </Modal>
+)
+```
+
+</Documenter>
+
+### Side Drawer Modal  - Without Title
+
+<Documenter>
+
+```preview
+return (
+  <Modal type="SIDE_DRAWER" trigger="Open Modal" actions={close => <Button onClick={close}>Done</Button>}>
+    <p>
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, accusantium odit. Molestias impedit repellendus possimus quibusdam a esse, quisquam odio nihil ullam voluptatibus adipisci nostrum? Sed consequuntur laboriosam porro ducimus!
+      Dolores, rerum, a qui labore earum ipsa consectetur nam, harum ex iure vero dignissimos hic aperiam facere maxime tenetur nobis inventore tempore deserunt. Reprehenderit, alias earum debitis nostrum pariatur corrupti.
+      Amet delectus harum aut, facere rem assumenda porro ratione optio laboriosam veritatis officia voluptates eos asperiores quaerat non, totam quis, error vitae libero. Distinctio assumenda labore consectetur optio blanditiis voluptas!
+      Cupiditate quod consequatur quaerat ullam aliquid ex alias minus ipsa, culpa dignissimos sunt rem, quae quos officiis saepe adipisci molestiae quisquam nemo laborum, ratione quo laudantium odit recusandae distinctio. Quisquam?
+      Facere rem accusamus, temporibus facilis dolor harum neque, repellendus obcaecati delectus nulla error, saepe totam illum aut sint fugiat quia commodi amet. Sunt in quos tempore ex corrupti qui mollitia.
+    </p>
+
+    <Image src="//picsum.photos/200" height={200}  width={200} />
+  </Modal>
+)
+```
+
 </Documenter>

components/modal/src/constants.ts

@@ -1,4 +1,5 @@
 export const MODAL_TYPE = {
+  SIDE_DRAWER: 'SIDE_DRAWER',
   MOBILE_DRAWER: 'MOBILE_DRAWER',
   DESKTOP: 'DESKTOP',
 }

components/modal/src/modal.module.scss

@@ -28,12 +28,21 @@
   position: relative;
 }
 
+.side_drawer_body{
+  position: relative;
+  position: fixed;
+    right: 0;
+    left: 50%;
+  height: 100vh;
+  background: white;
+}
+
 .close {
   position: absolute;
-  top: negative(size('2x'));
-  right: negative(size('4x'));
+  top: (size('7x'));
+  right: (size('7x'));
   padding-right: 0;
-  color: text-color('light');
+  color: color('gray-dark-base');
 
   svg {
     width: 24px;

components/modal/src/modal.tsx

@@ -119,7 +119,8 @@ export default class Modal extends PureComponent<Props> {
         />
         <div
           className={classnames('body', {
-            ['drawer-body']: type === MODAL_TYPE.MOBILE_DRAWER,
+            'drawer-body': type === MODAL_TYPE.MOBILE_DRAWER,
+            side_drawer_body: type === MODAL_TYPE.SIDE_DRAWER,
           })}
         >
           {render({