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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.7-beta.1",
+  "version": "11.2.8-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": "12.4.7",
+    "framer-motion": "^1.11.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,14 +1,32 @@
 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 SpinnerContainer = styled(Motion)`
+const rotate = posed.div({
+  fixed: {
+    rotate: "0deg"
+  },
+  rotate: {
+    rotate: "360deg",
+    transition: {
+      rotate: {
+        ease: linear,
+        duration: 1000,
+        loop: Infinity
+      }
+    }
+  }
+});
+
+const SpinnerContainer = styled.div`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -16,9 +34,13 @@ const SpinnerContainer = styled(Motion)`
   justify-content: center;
 `;
 
+const SpinnerIconWrapper = styled(rotate)``;
+
 const Spinner = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIcon color={color} isMobile={isMobile} />
+    <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,8 +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";
 import {
@@ -27,80 +25,111 @@ const HeroImage = ({
   secondaryHeadingVariant = "h2",
   extraStyles
 }) => {
-  const { isMobile } = useContext(ThemeContext);
-  const heroImageVariantStyles = Styled.getHeroImageVariantStyles({
-    variant,
-    imageUrl,
-    isMobile,
-    heroPrimaryColor: themeValues.heroPrimaryColor
-  });
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
 
   return (
-    <>
-      <Styled.HeroImageContainer
-        minWidth={minWidth}
-        minHeight={minHeight}
-        padding={isMobile ? "2rem" : "3rem 2rem"}
-        extraStyles={`${heroImageVariantStyles} ${extraStyles}`}
+    <Styled.HeroContainer
+      variant={variant}
+      minWidth={minWidth}
+      minHeight={minHeight}
+      padding={isMobile ? "2rem" : "3rem 2rem"}
+      extraStyles={extraStyles}
+      imageUrl={imageUrl}
+      isMobile={isMobile}
+      theme={themeValues}
+    >
+      <Center
+        maxWidth={contentMaxWidth}
+        width={"100%"}
+        intrinsic
+        extraStyles={`
+          flex-flow: unset;
+          justify-content: ${Styled.getDeviceStyles(
+            isMobile,
+            themeValues.justifyContent
+          )};
+          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
+                <Styled.HeroHeading
                   variant="hero"
                   as={headingVariant}
                   weight={FONT_WEIGHT_BOLD}
                   color={themeValues.heroTextColor}
-                  extraStyles={`line-height: ${isMobile ? "125%" : "115%"};`}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
+                  isMobile={isMobile}
+                  theme={themeValues}
                 >
                   {heading}
-                </Title>
+                </Styled.HeroHeading>
               )}
               {subheading && (
-                <Title
-                  variant={"large"}
+                <Styled.HeroSubheading
+                  variant="large"
                   as={secondaryHeadingVariant}
                   weight={FONT_WEIGHT_SEMIBOLD}
-                  fontSize={isMobile ? "2rem" : "2.5rem"}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
                   color={themeValues.heroTextColor}
-                  extraStyles={`line-height: ${isMobile ? "150%" : "115%"};`}
+                  isMobile={isMobile}
+                  theme={themeValues}
                 >
                   {subheading}
-                </Title>
+                </Styled.HeroSubheading>
               )}
             </Stack>
-            {description && (
-              <Box padding="0">
-                <Paragraph
+          ) : (
+            <>
+              {heading && (
+                <Styled.HeroHeading
+                  variant="hero"
+                  as={headingVariant}
+                  weight={FONT_WEIGHT_BOLD}
                   color={themeValues.heroTextColor}
-                  extraStyles={`line-height: 150%; ${
-                    !isMobile ? "font-size: 1.25rem;" : ""
-                  }`}
+                  textAlign={Styled.getDeviceStyles(
+                    isMobile,
+                    themeValues.textAlign
+                  )}
+                  isMobile={isMobile}
+                  theme={themeValues}
                 >
-                  {description}
-                </Paragraph>
-              </Box>
-            )}
-          </Stack>
-        </Center>
-      </Styled.HeroImageContainer>
-    </>
+                  {heading}
+                </Styled.HeroHeading>
+              )}
+            </>
+          )}
+          {description && (
+            <Box padding="0">
+              <Styled.HeroDescription
+                color={themeValues.heroTextColor}
+                isMobile={isMobile}
+                theme={themeValues}
+              >
+                {description}
+              </Styled.HeroDescription>
+            </Box>
+          )}
+        </Stack>
+      </Center>
+    </Styled.HeroContainer>
   );
 };
 
 export default withWindowSize(
-  themeComponent(HeroImage, "HeroImage", fallbackValues)
+  themeComponent(HeroImage, "HeroImage", fallbackValues, "v1")
 );

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,83 @@
+import React from "react";
 import styled from "styled-components";
-import { Box } from "../../atoms";
-import { rgba } from "polished";
+import { Paragraph, Box } from "../../atoms";
+import Title from "../../atoms/title/Title.js";
+import { rgba, adjustHue, darken } from "polished";
 
-export const getHeroImageVariantStyles = ({
-  variant,
-  imageUrl,
-  isMobile,
-  heroPrimaryColor
-}) => {
-  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 getHeroGradientStyles = ({ variant, isMobile, heroPrimaryColor }) => {
+  const v1Gradient = `linear-gradient(
+    90deg,
+    ${heroPrimaryColor} 33%,
+    transparent 100%
+  )`;
+  const v1GradientMobile = `linear-gradient(
+    ${rgba(heroPrimaryColor, 0.8)},
+    ${rgba(heroPrimaryColor, 0.8)}
+  )`;
+  const heroSecondaryColor = darken(0.18, adjustHue(-29, heroPrimaryColor));
+  const v2Gradient = `linear-gradient(
+    90deg,
+    ${rgba(heroPrimaryColor, 0.8)} 0%,
+    ${rgba(heroSecondaryColor, 0.8)} 100%
+  )`;
+
+  return variant === "v1"
+    ? isMobile
+      ? v1GradientMobile
+      : v1Gradient
+    : v2Gradient;
 };
 
-export const HeroImageContainer = styled(Box)`
+export const getDeviceStyles = (isMobile, theme) =>
+  isMobile ? theme.mobile : theme.desktop;
+
+export const HeroContainer = styled(
+  ({ variant, imageUrl, isMobile, theme, extraStyles, ...props }) => (
+    <Box {...props} />
+  )
+)`
   display: flex;
+  background: ${({ variant, imageUrl, isMobile, theme }) =>
+    `${getHeroGradientStyles({
+      variant,
+      isMobile,
+      heroPrimaryColor: theme.heroPrimaryColor
+    })},
+    url(${imageUrl}) center / cover no-repeat, ${theme.heroPrimaryColor}`};
+  ${({ extraStyles }) => extraStyles}
+`;
+
+export const HeroHeading = styled(({ theme, isMobile, ...props }) => (
+  <Title {...props} />
+))`
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.headingFontSize)};
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  text-align: ${({ textAlign }) => textAlign};
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.headingLineHeight)};
+`;
+
+export const HeroSubheading = styled(({ theme, isMobile, ...props }) => (
+  <Title {...props} />
+))`
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.subheadingFontSize)};
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  text-align: ${({ textAlign }) => textAlign};
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.subheadingLineHeight)};
+`;
+
+export const HeroDescription = styled(({ theme, isMobile, ...props }) => (
+  <Paragraph {...props} />
+))`
+  line-height: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.descriptionLineHeight)};
+  font-size: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.descriptionFontSize)};
+  text-align: ${({ theme, isMobile }) =>
+    getDeviceStyles(isMobile, theme.textAlign)};
 `;

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

@@ -3,13 +3,107 @@ import {
   ROYAL_BLUE_VIVID,
   WHITE
 } from "../../../constants/colors";
+import { FONT_SIZE } from "../../../constants/style_constants";
 
+// Colors
 const heroPrimaryColor = ROYAL_BLUE_VIVID;
-const heroSecondaryColor = MATISSE_BLUE;
 const heroTextColor = WHITE;
 
+// Font Sizes
+const headingFontSize = {
+  v1: {
+    mobile: "3.00rem",
+    desktop: "3.50rem"
+  },
+  v2: {
+    mobile: "2.50rem",
+    desktop: "3.50rem"
+  }
+};
+const subheadingFontSize = {
+  v1: {
+    mobile: "2.00rem",
+    desktop: "2.50rem"
+  }
+};
+
+const descriptionFontSize = {
+  v1: {
+    mobile: FONT_SIZE.MD,
+    desktop: FONT_SIZE.XL
+  },
+  v2: {
+    mobile: FONT_SIZE.LG,
+    desktop: FONT_SIZE.XL
+  }
+};
+
+// Line Heights
+const headingLineHeight = {
+  v1: {
+    mobile: 1.25,
+    desktop: 1.15
+  },
+  v2: {
+    mobile: 1.25,
+    desktop: 1.15
+  }
+};
+
+const subheadingLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.15
+  }
+};
+
+const descriptionLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.5
+  },
+  v2: {
+    mobile: 1.5,
+    desktop: 1.5
+  }
+};
+
+// Alignment
+const textAlign = {
+  v1: {
+    mobile: "left",
+    desktop: "left"
+  },
+  v2: {
+    mobile: "left",
+    desktop: "center"
+  }
+};
+
+const justifyContent = {
+  v1: {
+    mobile: "flex-start",
+    desktop: "flex-start"
+  },
+  v2: {
+    mobile: "flex-start",
+    desktop: "center"
+  }
+};
+
 export const fallbackValues = {
+  // Colors
   heroPrimaryColor,
-  heroSecondaryColor,
-  heroTextColor
+  heroTextColor,
+  // Font sizes
+  headingFontSize,
+  descriptionFontSize,
+  subheadingFontSize,
+  // Line heights
+  headingLineHeight,
+  subheadingLineHeight,
+  descriptionLineHeight,
+  // Alignment
+  textAlign,
+  justifyContent
 };