@thecb/components 11.2.7-beta.1 → 11.2.8-beta.1

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -1,20 +1,22 @@
 import React from "react";
 import styled from "styled-components";
-import { Box, Motion } from "../../atoms/layouts";
+import posed from "react-pose";
+import { easeIn, easeOut } from "@popmotion/easing";
+import { Box } from "../../atoms/layouts";
 import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 
-const menuVariants = {
+const menu = posed.div({
   invisible: {
     left: "-100vw",
     right: "100vw",
     transition: {
       right: {
-        ease: "easeOut",
+        ease: easeOut,
         duration: 500
       },
       left: {
-        ease: "easeOut",
+        ease: easeOut,
         duration: 500
       }
     }
@@ -24,18 +26,18 @@ const menuVariants = {
     right: "0",
     transition: {
       left: {
-        ease: "easeIn",
+        ease: easeIn,
         duration: 500
       },
       right: {
-        ease: "easeIn",
+        ease: easeIn,
         duration: 500
       }
     }
   }
-};
+});
 
-const ImposterMenu = styled(Motion)`
+const ImposterMenu = styled(menu)`
   position: fixed;
   top: ${({ headerSize }) => headerSize};
 `;
@@ -50,9 +52,8 @@ const NavMenuMobile = ({
   return (
     <ImposterMenu
       id={id}
-      variants={menuVariants}
-      initial="invisible"
-      animate={visible ? "visible" : "invisible"}
+      initialPose="invisible"
+      pose={visible ? "visible" : "invisible"}
       headerSize={headerSize}
     >
       <Box

package/src/deprecated/spinner/Spinner.js

@@ -1,6 +1,23 @@
 import React from "react";
 import styled from "styled-components";
-import { Motion } from "../../components/atoms/layouts";
+import posed from "react-pose";
+import { linear } from "@popmotion/easing";
+
+const rotate = posed.div({
+  fixed: {
+    rotate: "0deg"
+  },
+  rotate: {
+    rotate: "360deg",
+    transition: {
+      rotate: {
+        ease: linear,
+        duration: 1000,
+        loop: Infinity
+      }
+    }
+  }
+});
 
 export const SpinnerContainer = styled.div`
   width: 100%;
@@ -10,19 +27,14 @@ export const SpinnerContainer = styled.div`
   justify-content: center;
 `;
 
-export const SpinnerIconWrapper = styled(Motion)`
+export const SpinnerIconWrapper = styled(rotate)`
   width: ${({ isMobile }) => (isMobile ? "18" : "21")}px;
   height: ${({ isMobile }) => (isMobile ? "18" : "21")}px;
 `;
 
 const SpinnerIcon = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIconWrapper
-      initial={{ rotate: 0 }}
-      animate={{ rotate: 360 }}
-      transition={{ duration: 1, ease: "linear", repeat: Infinity }}
-      isMobile={isMobile}
-    >
+    <SpinnerIconWrapper initialPose="fixed" pose="rotate" isMobile={isMobile}>
       <svg
         viewBox={`0 0 24 24`}
         height="100%"