@thecb/components 11.2.8 → 11.2.9-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.8",
+  "version": "11.2.9-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -100,12 +100,12 @@
     "@types/styled-components": "^5.1.34",
     "core-js": "^3.22.5",
     "formatted-input": "^1.0.0",
-    "framer-motion": "^1.11.0",
+    "framer-motion": "7.0.0",
     "numeral": "^2.0.6",
     "polished": "^4.0.3",
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
-    "react-pose": "^4.0.10",
     "redux-freeform": "6.2.1"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -1,32 +1,14 @@
 import React, { useContext, forwardRef } from "react";
 import styled, { ThemeContext } from "styled-components";
-import posed from "react-pose";
-import { linear } from "@popmotion/easing";
 import Text from "../text";
-import { Box, Center } from "../layouts";
+import { Box, Center, Motion } from "../layouts";
 import { fallbackValues } from "./ButtonWithAction.theme";
 
 import SpinnerIcon from "../../../deprecated/spinner";
 import { noop } from "../../../util/general";
 import { createThemeValues } from "../../../util/themeUtils";
 
-const rotate = posed.div({
-  fixed: {
-    rotate: "0deg"
-  },
-  rotate: {
-    rotate: "360deg",
-    transition: {
-      rotate: {
-        ease: linear,
-        duration: 1000,
-        loop: Infinity
-      }
-    }
-  }
-});
-
-const SpinnerContainer = styled.div`
+const SpinnerContainer = styled(Motion)`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -34,13 +16,9 @@ const SpinnerContainer = styled.div`
   justify-content: center;
 `;
 
-const SpinnerIconWrapper = styled(rotate)``;
-
 const Spinner = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIconWrapper initialPose="fixed" pose="rotate">
-      <SpinnerIcon color={color} isMobile={isMobile} />
-    </SpinnerIconWrapper>
+    <SpinnerIcon color={color} isMobile={isMobile} />
   </SpinnerContainer>
 );
 

package/src/components/atoms/layouts/Motion.js

@@ -1,5 +1,5 @@
 import React, { Fragment, forwardRef } from "react";
-import { MotionWrapper } from "./Motion.styled";
+import { MotionWrapper, MotionSpanWrapper } from "./Motion.styled";
 import { safeChildren } from "../../../util/general";
 
 /*
@@ -38,11 +38,30 @@ import { safeChildren } from "../../../util/general";
 */
 
 export const Motion = forwardRef(
-  ({ position = "relative", padding = "0", children, ...rest }, ref) => (
-    <MotionWrapper position={position} padding={padding} ref={ref} {...rest}>
-      {safeChildren(children, <Fragment />)}
-    </MotionWrapper>
-  )
+  (
+    {
+      position = "relative",
+      padding = "0",
+      children,
+      useSpan = false,
+      ...rest
+    },
+    ref
+  ) =>
+    useSpan ? (
+      <MotionSpanWrapper
+        position={position}
+        padding={padding}
+        ref={ref}
+        {...rest}
+      >
+        {safeChildren(children, <Fragment />)}
+      </MotionSpanWrapper>
+    ) : (
+      <MotionWrapper position={position} padding={padding} ref={ref} {...rest}>
+        {safeChildren(children, <Fragment />)}
+      </MotionWrapper>
+    )
 );
 
 export default Motion;

package/src/components/atoms/layouts/Motion.styled.js

@@ -36,3 +36,39 @@ export const MotionWrapper = styled(motion.div)`
 
   ${({ extraStyles }) => extraStyles};
 `;
+
+export const MotionSpanWrapper = styled(motion.span)`
+  position: ${({ position }) => position};
+  display: ${({ display }) => display};
+  box-sizing: border-box;
+  padding: ${({ padding }) => padding};
+  border: ${({ borderShorthand }) => borderShorthand};
+  border-color: ${({ borderColor }) => borderColor};
+  border-size: ${({ borderSize }) => borderSize};
+  border-style: ${({ borderStyle }) => borderStyle};
+  border-width: ${({ borderWidth }) => borderWidth};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  box-shadow: ${({ boxShadow }) => boxShadow};
+  min-height: ${({ minHeight }) => minHeight};
+  min-width: ${({ minWidth }) => minWidth};
+  height: ${({ height }) => height};
+  width: ${({ width }) => width};
+  text-align: ${({ textAlign }) => textAlign};
+  margin: ${({ margin }) => margin};
+
+  &:hover,
+  &:focus {
+    ${({ hoverStyles }) => hoverStyles};
+  }
+
+  &:active {
+    ${({ activeStyles }) => activeStyles};
+  }
+
+  &:disabled {
+    ${({ disabledStyles }) => disabledStyles};
+  }
+
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -1,9 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import posed from "react-pose";
 import { fallbackValues } from "./ToggleSwitch.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Box, Center, Cover, Cluster } from "../layouts";
+import { Box, Center, Cover, Cluster, Motion } from "../layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
 import { ENTER } from "../../../constants/keyboard";
@@ -18,7 +17,7 @@ const HiddenToggleSwitchBox = styled.input`
   width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
 `;
 
-const VisibleSwitchComponent = styled.span`
+const VisibleSwitchComponent = styled(Motion)`
   width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
   height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
   border-radius: 12px;
@@ -38,7 +37,7 @@ const VisibleSwitchComponent = styled.span`
   }
 `;
 
-const ToggleSwitchRingComponent = styled.span`
+const ToggleSwitchRingComponent = styled(Motion)`
   position: absolute;
   width: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
   height: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
@@ -64,7 +63,7 @@ const ToggleSwitch = ({
   extraStyles = ""
 }) => {
   const nameId = name.replace(/ /g, "-");
-  const ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
+  const toggleSwitchRingVariants = {
     off: {
       backgroundColor: disabled
         ? themeValues.disabledBackground
@@ -87,19 +86,9 @@ const ToggleSwitch = ({
         ease: "backIn"
       }
     }
-  });
+  };
 
-  const VisibleSwitch = posed(VisibleSwitchComponent)({
-    focusable: true,
-    hoverable: true,
-    pressable: true,
-    focus: {
-      outline: "0px ridge rgba(170, 50, 220, 0)",
-      boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
-    },
-    hover: {
-      boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
-    },
+  const visibleSwitchVariants = {
     off: {
       border: "1px solid",
       backgroundColor: disabled
@@ -124,7 +113,7 @@ const ToggleSwitch = ({
         ease: "easeIn"
       }
     }
-  });
+  };
 
   const handleKeyDown = e => {
     if (e.keyCode === ENTER) {
@@ -168,17 +157,23 @@ const ToggleSwitch = ({
                 id={`#${nameId}`}
                 isMobile={isMobile}
               />
-              <VisibleSwitch
+              <VisibleSwitchComponent
                 onClick={disabled ? noop : onToggle}
                 onKeyDown={disabled ? noop : handleKeyDown}
-                pose={isOn ? "on" : "off"}
+                initial={isOn ? "on" : "off"}
+                animate={isOn ? "on" : "off"}
+                variants={visibleSwitchVariants}
                 tabIndex={disabled ? -1 : 0}
                 disabled={disabled}
                 isMobile={isMobile}
+                useSpan
                 tabindex="0"
               >
-                <ToggleSwitchRing isMobile={isMobile} />
-              </VisibleSwitch>
+                <ToggleSwitchRingComponent
+                  variants={toggleSwitchRingVariants}
+                  isMobile={isMobile}
+                />
+              </VisibleSwitchComponent>
             </Box>
           </Cover>
           {label && (

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

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

package/src/deprecated/spinner/Spinner.js

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