From f2286145c7e4ad2b1d18bb1ea68ae0ca686541ea Mon Sep 17 00:00:00 2001
From: Diego Gonzalez <dgonzalez@perimetre.co>
Date: Wed, 9 Jun 2021 09:14:15 -0500
Subject: [PATCH 1/3] Added `placement` and `hideBackdrop` property to Drawer
 component

---
 CHANGELOG.md                    |  2 ++
 src/components/Drawer/index.tsx | 24 +++++++++++++++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3f48dc..1c73c1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added `placement` and `hideBackdrop` property to Drawer component
+
 ### Fixed
 
 ## [3.0.3] - 2021-06-03
diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index ad8976c..b3fe6cd 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -5,8 +5,8 @@ import classnames from 'classnames';
 
 // The variants for the drawer itself
 const variants = {
-  open: { opacity: 1, x: 0 },
-  closed: { opacity: 0, x: '-100%' }
+  open: { opacity: 1, width: 'auto' },
+  closed: { opacity: 0, width: '0' }
 };
 
 // The variants for the drawer backdrop overlay
@@ -22,6 +22,8 @@ export type DrawerWrapperProps = {
    * @default false
    */
   isOpen: boolean;
+  placement: 'left' | 'right';
+  hideBackdrop: boolean;
   /**
    * Callback to update the open state
    */
@@ -35,11 +37,16 @@ export type DrawerWrapperProps = {
  * @param props.isOpen Whether or not the drawer should be open
  * @param props.onOpen Callback to update the open state
  * @param props.children The children provided to this component
+ * @param props.placement Which side the drawer should open
+ * @param props.hideBackdrop Whether or not the drawer backdrop should be shown
+
  */
 // Ref: https://codesandbox.io/s/framer-motion-drawer-dcnuv?file=/src/Drawer.tsx
 export const DrawerWrapper: React.FC<DrawerWrapperProps> = ({
   isOpen = false,
   onOpen = (isOpen?: boolean) => console.log('onOpen: ', isOpen),
+  placement = 'left',
+  hideBackdrop = true,
   children
 }) => {
   // Stores whether or not hammer was loaded
@@ -127,11 +134,11 @@ export const DrawerWrapper: React.FC<DrawerWrapperProps> = ({
   return (
     <>
       {/* Just a trigger to have a swipe right if drawer is closed */}
-      <div ref={pannerRef} className="z-20 fixed inset-y-0 left-0 p-4" />
+      <div ref={pannerRef} className="z-20 fixed inset-y-0 p-4 left-0" />
 
       {/* The backdrop overlay that appears behind the drawer */}
       <motion.div
-        className="z-10 fixed inset-0 bg-black"
+        className={classnames('z-10 fixed inset-0 bg-black', { hidden: hideBackdrop })}
         style={
           {
             '--tw-bg-opacity': 0.4
@@ -147,11 +154,14 @@ export const DrawerWrapper: React.FC<DrawerWrapperProps> = ({
       {/* The element that animates in and out */}
       <motion.div
         ref={drawerRef}
-        className="fixed inset-y-0 left-0 z-30"
+        className={classnames(
+          'fixed inset-y-0 z-30 overflow-hidden shadow-lg',
+          placement === 'right' ? 'right-0' : 'left-0'
+        )}
         initial="closed"
         animate={isOpen ? 'open' : 'closed'}
         variants={variants}
-        transition={{ type: 'spring', stiffness: 350, damping: 40 }}
+        transition={{ type: 'spring', stiffness: 450, damping: 40 }}
       >
         {children}
       </motion.div>
@@ -190,7 +200,7 @@ export const Drawer: React.FC<DrawerProps> = ({
 }) => (
   <DrawerWrapper onOpen={onOpen} {...props}>
     {/* Adds a "card-like" look to the drawer */}
-    <div style={{ width }} className="bg-white border border-gray-300 h-full select-text">
+    <div style={{ width }} className="bg-white border border-gray-100 h-full select-text">
       {/* Aligns the close button to the end */}
       <div className={classnames('flex items-center', { 'justify-between': onBack, 'justify-end': !onBack })}>
         {/* If there's the back button, display it */}

From dfc2ebade79fa800310e76eab84ca484b626c80b Mon Sep 17 00:00:00 2001
From: Diego Gonzalez <dgonzalez@perimetre.co>
Date: Wed, 9 Jun 2021 09:17:02 -0500
Subject: [PATCH 2/3] build: bumping version: 3.0.4

---
 CHANGELOG.md | 8 ++++++--
 package.json | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c73c1e..b4fd491 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,10 +23,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added `placement` and `hideBackdrop` property to Drawer component
-
 ### Fixed
 
+## [3.0.4] - 2021-06-09
+
+### Added
+
+- Added `placement` and `hideBackdrop` property to Drawer component
+
 ## [3.0.3] - 2021-06-03
 
 ### Changes
diff --git a/package.json b/package.json
index 808dd5e..1e95cd7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

From 2a9c85ecfbb17c94a1244189fedd46af7dca1933 Mon Sep 17 00:00:00 2001
From: Diego Gonzalez <dgonzalez@perimetre.co>
Date: Wed, 9 Jun 2021 10:17:35 -0500
Subject: [PATCH 3/3] fix alignment on JSDoc block on drawer index

---
 src/components/Drawer/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index b3fe6cd..0424dba 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -39,7 +39,6 @@ export type DrawerWrapperProps = {
  * @param props.children The children provided to this component
  * @param props.placement Which side the drawer should open
  * @param props.hideBackdrop Whether or not the drawer backdrop should be shown
-
  */
 // Ref: https://codesandbox.io/s/framer-motion-drawer-dcnuv?file=/src/Drawer.tsx
 export const DrawerWrapper: React.FC<DrawerWrapperProps> = ({