Refactor Drawer component and remove framer-motion dependency

Closes #1654

This commit replaces the `framer-motion` dependency with a custom CSS
transition.

To keep the implementation simple, the `visibility` property is being
toggled instead of `display`, as it still removes the element from the
accessibility tree but has the benefit of being animatable. As the
element has a fixed position, it should not have significantly worse
performance.

package.json

@@ -74,7 +74,6 @@
     "date-fns": "^2.30.0",
     "downshift": "6.1.12",
     "focus-visible": "^5.2.1",
-    "framer-motion": "^10.16.4",
     "graphql": "^16.9.0",
     "graphql-iso-date": "^3.6.1",
     "graphql-yoga": "^3.9.1",

src/design-system/components/Drawer/Drawer.tsx

@@ -1,38 +1,21 @@
 import DrawerProps from './Drawer.types';
 
-import { motion } from 'framer-motion';
-
 const Drawer = ({ children, visible, animateFrom }: DrawerProps) => {
   const animateTo = animateFrom === 'right' ? 'left' : 'right';
 
-  const variants = {
-    open: {
-      display: 'block',
-      [animateTo]: '0%',
-    },
-    closed: {
-      [animateTo]: '100%',
-      transitionEnd: {
-        // avoids keyboard users being able to navigate to off-screen elements
-        display: 'none',
-      },
-    },
-  };
-
   return (
-    <motion.div
+    <div
       className="drawer"
-      // motion props
-      variants={variants}
-      animate={visible ? 'open' : 'closed'}
-      transition={{
-        ease: 'easeInOut',
-        duration: 0.3,
+      style={{
+        transition: `0.3s ${animateTo} ease-in-out, 0.3s visibility ease-in-out`,
+        [animateTo]: visible ? '0%' : '100%',
+
+        // Avoids keyboard users being able to navigate to off-screen elements
+        visibility: visible ? 'visible' : 'hidden',
       }}
-      initial={false}
     >
       {children}
-    </motion.div>
+    </div>
   );
 };