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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.7-beta.0",
+  "version": "11.2.8-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -105,7 +105,7 @@
     "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,15 +1,16 @@
 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, Motion } from "../layouts";
+import { Box, Center } from "../layouts";
 import { fallbackValues } from "./ButtonWithAction.theme";
 
 import SpinnerIcon from "../../../deprecated/spinner";
 import { noop } from "../../../util/general";
 import { createThemeValues } from "../../../util/themeUtils";
 
-const variants = {
+const rotate = posed.div({
   fixed: {
     rotate: "0deg"
   },
@@ -23,7 +24,7 @@ const variants = {
       }
     }
   }
-};
+});
 
 const SpinnerContainer = styled.div`
   width: 100%;
@@ -33,16 +34,11 @@ const SpinnerContainer = styled.div`
   justify-content: center;
 `;
 
-const SpinnerIconWrapper = styled(Motion)``;
+const SpinnerIconWrapper = styled(rotate)``;
 
 const Spinner = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIconWrapper
-      padding="0"
-      variants={variants}
-      initial="fixed"
-      animate="rotate"
-    >
+    <SpinnerIconWrapper initialPose="fixed" pose="rotate">
       <SpinnerIcon color={color} isMobile={isMobile} />
     </SpinnerIconWrapper>
   </SpinnerContainer>

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

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

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

@@ -36,39 +36,3 @@ 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,8 +1,9 @@
 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, Motion } from "../layouts";
+import { Box, Center, Cover, Cluster } from "../layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
 import { ENTER } from "../../../constants/keyboard";
@@ -17,7 +18,7 @@ const HiddenToggleSwitchBox = styled.input`
   width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
 `;
 
-const VisibleSwitchComponent = styled(Motion)`
+const VisibleSwitchComponent = styled.span`
   width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
   height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
   border-radius: 12px;
@@ -37,7 +38,7 @@ const VisibleSwitchComponent = styled(Motion)`
   }
 `;
 
-const ToggleSwitchRingComponent = styled(Motion)`
+const ToggleSwitchRingComponent = styled.span`
   position: absolute;
   width: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
   height: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
@@ -63,7 +64,7 @@ const ToggleSwitch = ({
   extraStyles = ""
 }) => {
   const nameId = name.replace(/ /g, "-");
-  const toggleSwitchRingVariants = {
+  const ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
     off: {
       backgroundColor: disabled
         ? themeValues.disabledBackground
@@ -86,9 +87,12 @@ const ToggleSwitch = ({
         ease: "backIn"
       }
     }
-  };
+  });
 
-  const visibleSwitchVariants = {
+  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)"
@@ -120,7 +124,7 @@ const ToggleSwitch = ({
         ease: "easeIn"
       }
     }
-  };
+  });
 
   const handleKeyDown = e => {
     if (e.keyCode === ENTER) {
@@ -164,25 +168,17 @@ const ToggleSwitch = ({
                 id={`#${nameId}`}
                 isMobile={isMobile}
               />
-              <VisibleSwitchComponent
+              <VisibleSwitch
                 onClick={disabled ? noop : onToggle}
                 onKeyDown={disabled ? noop : handleKeyDown}
-                initial={isOn ? "on" : "off"}
-                animate={isOn ? "on" : "off"}
-                variants={visibleSwitchVariants}
-                whileFocus="focus"
-                whileHover="hover"
+                pose={isOn ? "on" : "off"}
                 tabIndex={disabled ? -1 : 0}
                 disabled={disabled}
                 isMobile={isMobile}
-                useSpan
                 tabindex="0"
               >
-                <ToggleSwitchRingComponent
-                  variants={toggleSwitchRingVariants}
-                  isMobile={isMobile}
-                />
-              </VisibleSwitchComponent>
+                <ToggleSwitchRing isMobile={isMobile} />
+              </VisibleSwitch>
             </Box>
           </Cover>
           {label && (

package/src/components/molecules/hero-image/HeroImage.js

@@ -2,7 +2,6 @@ import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 import { Box, Center, Stack } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
-import Paragraph from "../../atoms/paragraph";
 import Title from "../../atoms/title";
 import { fallbackValues } from "./HeroImage.theme";
 import withWindowSize from "../../withWindowSize";
@@ -28,35 +27,42 @@ const HeroImage = ({
   extraStyles
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const heroImageVariantStyles = Styled.getHeroImageVariantStyles({
+  const gradientStyles = Styled.getHeroGradientStyles({
     variant,
-    imageUrl,
     isMobile,
-    heroPrimaryColor: themeValues.heroPrimaryColor
+    heroPrimaryColor: themeValues.heroPrimaryColor,
+    heroSecondaryColor: themeValues.heroSecondaryColor
   });
 
   return (
-    <>
-      <Styled.HeroImageContainer
-        minWidth={minWidth}
-        minHeight={minHeight}
-        padding={isMobile ? "2rem" : "3rem 2rem"}
-        extraStyles={`${heroImageVariantStyles} ${extraStyles}`}
+    <Box
+      minWidth={minWidth}
+      minHeight={minHeight}
+      padding={isMobile ? "2rem" : "3rem 2rem"}
+      extraStyles={`
+        display: flex;
+        background: ${gradientStyles},
+          url(${imageUrl}) center / cover no-repeat, ${themeValues.heroPrimaryColor};
+        ${extraStyles}
+      `}
+    >
+      <Center
+        maxWidth={contentMaxWidth}
+        width={"100%"}
+        intrinsic
+        extraStyles={`
+          flex-flow: unset;
+          justify-content: ${variant === "v2" ? "center" : "flex-start"};
+          flex-wrap: nowrap;
+        `}
       >
-        <Center
-          maxWidth={contentMaxWidth}
-          width={"100%"}
-          intrinsic
-          extraStyles={`
-            flex-flow: unset;
-            justify-content: flex-start;
-            flex-wrap: nowrap;
-          `}
+        <Stack
+          childGap={contentSpacing}
+          extraStyles={`max-width: ${
+            isMobile || variant === "v2" ? "100%" : "50%"
+          };`}
         >
-          <Stack
-            childGap={contentSpacing}
-            extraStyles={`max-width: ${isMobile ? "100%" : "50%"};`}
-          >
+          {variant === "v1" ? (
             <Stack childGap="0">
               {heading && (
                 <Title
@@ -82,22 +88,37 @@ const HeroImage = ({
                 </Title>
               )}
             </Stack>
-            {description && (
-              <Box padding="0">
-                <Paragraph
+          ) : (
+            <>
+              {heading && (
+                <Title
+                  variant="hero"
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
                   color={themeValues.heroTextColor}
-                  extraStyles={`line-height: 150%; ${
-                    !isMobile ? "font-size: 1.25rem;" : ""
-                  }`}
+                  extraStyles={`text-align: center; line-height: ${
+                    isMobile ? "125%" : "115%"
+                  };`}
                 >
-                  {description}
-                </Paragraph>
-              </Box>
-            )}
-          </Stack>
-        </Center>
-      </Styled.HeroImageContainer>
-    </>
+                  {heading}
+                </Title>
+              )}
+            </>
+          )}
+          {description && (
+            <Box padding="0">
+              <Styled.HeroDescription
+                color={themeValues.heroTextColor}
+                isMobile={isMobile}
+                variant={variant}
+              >
+                {description}
+              </Styled.HeroDescription>
+            </Box>
+          )}
+        </Stack>
+      </Center>
+    </Box>
   );
 };
 

package/src/components/molecules/hero-image/HeroImage.stories.js

@@ -118,7 +118,7 @@ export const DesktopV1 = {
   }
 };
 
-export const NoImage = {
+export const NoImageV1 = {
   args: {
     variant: "v1",
     minWidth: "1000px",
@@ -126,3 +126,24 @@ export const NoImage = {
     imageUrl: undefined
   }
 };
+
+export const DesktopV2 = {
+  args: {
+    heading: "Cityville Payment Center",
+    variant: "v2",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl:
+      "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/hero.jpg"
+  }
+};
+
+export const NoImageV2 = {
+  args: {
+    heading: "Cityville Payment Center",
+    variant: "v2",
+    minWidth: "1000px",
+    minHeight: "274px",
+    imageUrl: undefined
+  }
+};

package/src/components/molecules/hero-image/HeroImage.styled.js

@@ -1,30 +1,41 @@
+import React from "react";
 import styled from "styled-components";
-import { Box } from "../../atoms";
+import { Paragraph } from "../../atoms";
 import { rgba } from "polished";
 
-export const getHeroImageVariantStyles = ({
+export const getHeroGradientStyles = ({
   variant,
-  imageUrl,
   isMobile,
-  heroPrimaryColor
+  heroPrimaryColor,
+  heroSecondaryColor
 }) => {
-  return `
-    background: ${
-      !isMobile
-        ? `linear-gradient(
-            90deg,
-            ${heroPrimaryColor} 33%,
-            transparent 100%
-            )`
-        : `linear-gradient(
-            ${rgba(heroPrimaryColor, 0.8)},
-            ${rgba(heroPrimaryColor, 0.8)}
-            )`
-    },
-      url(${imageUrl}) center / cover no-repeat, ${heroPrimaryColor};
-  `;
+  const v1Gradient = `linear-gradient(
+    90deg,
+    ${heroPrimaryColor} 33%,
+    transparent 100%
+  )`;
+  const v1GradientMobile = `linear-gradient(
+    ${rgba(heroPrimaryColor, 0.8)},
+    ${rgba(heroPrimaryColor, 0.8)}
+  )`;
+  const v2Gradient = `linear-gradient(
+    90deg,
+    ${rgba(heroPrimaryColor, 0.8)} 0%,
+    ${rgba(heroSecondaryColor, 0.8)} 100%
+  )`;
+
+  return {
+    v1: isMobile ? v1GradientMobile : v1Gradient,
+    v2: v2Gradient
+  }[variant];
 };
 
-export const HeroImageContainer = styled(Box)`
-  display: flex;
+export const HeroDescription = styled(({ variant, isMobile, ...props }) => (
+  <Paragraph {...props} />
+))`
+  line-height: 150%;
+  font-size: ${({ isMobile }) => (!isMobile ? "1.25rem" : "inherit")};
+  text-align: ${({ variant }) => (variant === "v2" ? "center" : "inherit")};
+  font-size: ${({ variant, isMobile }) =>
+    variant === "v2" ? (isMobile ? "1.125rem" : "1.25rem") : "inherit"};
 `;

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

@@ -1,11 +1,12 @@
 import React from "react";
 import styled from "styled-components";
+import posed from "react-pose";
 import { easeIn, easeOut } from "@popmotion/easing";
-import { Box, Motion } from "../../atoms/layouts";
+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",
@@ -34,9 +35,9 @@ const menuVariants = {
       }
     }
   }
-};
+});
 
-const ImposterMenu = styled(Motion)`
+const ImposterMenu = styled(menu)`
   position: fixed;
   top: ${({ headerSize }) => headerSize};
 `;
@@ -51,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,9 +1,9 @@
 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 rotateVariants = {
+const rotate = posed.div({
   fixed: {
     rotate: "0deg"
   },
@@ -17,7 +17,7 @@ const rotateVariants = {
       }
     }
   }
-};
+});
 
 export const SpinnerContainer = styled.div`
   width: 100%;
@@ -27,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="fixed"
-      animate="rotate"
-      isMobile={isMobile}
-      variants={rotateVariants}
-    >
+    <SpinnerIconWrapper initialPose="fixed" pose="rotate" isMobile={isMobile}>
       <svg
         viewBox={`0 0 24 24`}
         height="100%"