@thecb/components 4.0.7-beta.0 → 4.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.7-beta.0",
+  "version": "4.0.9",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -76,6 +76,7 @@
     "formatted-input": "^0.1.3",
     "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",

package/src/components/atoms/card/Card.js

@@ -0,0 +1,121 @@
+import React, { Fragment, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { Box, Stack, Cover } from "../layouts";
+import Text from "../text";
+import Heading from "../heading";
+import ButtonWithAction from "../button-with-action";
+import { fallbackValues } from "./Card.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import {
+  AccountsAddIcon,
+  PropertiesAddIcon,
+  PaymentMethodIcon
+} from "../icons";
+import withWindowSize from "../../withWindowSize";
+
+const CardVariantSwitcher = ({ variant, children }) => {
+  return variant === "vertical" ? (
+    <Fragment>{children}</Fragment>
+  ) : (
+    <Box padding="0" extraStyles={`width: 100%`}>
+      <Stack childGap="0" maxWidth="100%" fullHeight>
+        {children}
+      </Stack>
+    </Box>
+  );
+};
+
+const Card = ({
+  themeValues,
+  icon,
+  heading,
+  text,
+  cardAction = "/profile",
+  buttonText,
+  variant = "vertical"
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+  let navigate = useNavigate();
+
+  const renderIcon = icon => {
+    switch (icon) {
+      case "accounts":
+        return <AccountsAddIcon />;
+      case "properties":
+        return <PropertiesAddIcon />;
+      case "payment":
+        return <PaymentMethodIcon />;
+      default:
+        return <PaymentMethodIcon />;
+    }
+  };
+
+  return (
+    <Box
+      background={themeValues.backgroundColor}
+      borderRadius="4px"
+      boxShadow=" 0px 1px 10px 0px rgb(246, 246, 249),
+    0px 2px 5px 0px rgb(202, 206, 216)"
+      padding="0"
+      maxWidth="100%"
+      minHeight="100%"
+      minWidth={variant !== "vertical" && "300px"}
+    >
+      <Cover singleChild fillCenter>
+        <Stack
+          direction={variant === "vertical" ? "column" : "row"}
+          justify={variant === "vertical" && "center"}
+          fullHeight
+          childGap="0"
+        >
+          {icon && (
+            <Box padding="0" background={themeValues.iconBackgroundColor}>
+              <Stack
+                direction={variant === "vertical" ? "row" : "column"}
+                justify="center"
+                fullHeight
+              >
+                <Box
+                  padding={
+                    variant === "vertical"
+                      ? "0.5rem 0"
+                      : isMobile
+                      ? "1rem 1.5rem"
+                      : "2rem 2.5rem"
+                  }
+                >
+                  {renderIcon(icon)}
+                </Box>
+              </Stack>
+            </Box>
+          )}
+          <CardVariantSwitcher variant={variant}>
+            <Box
+              padding="0.5rem 1rem"
+              width="100%"
+              extraStyles={`flex-grow: 1; width: 100%;`}
+            >
+              <Cover singleChild fillCenter>
+                <Box padding="0">
+                  <Heading variant="h6">{heading}</Heading>
+                  <Text variant="pS">{text}</Text>
+                </Box>
+              </Cover>
+            </Box>
+            <Box padding="0.5rem 1rem 1rem">
+              <ButtonWithAction
+                variant="smallPrimary"
+                text={buttonText}
+                action={() => navigate(cardAction)}
+                extraStyles={`width: 100%;`}
+              />
+            </Box>
+          </CardVariantSwitcher>
+        </Stack>
+      </Cover>
+    </Box>
+  );
+};
+
+export default themeComponent(withWindowSize(Card), "Card", fallbackValues);

package/src/components/atoms/card/Card.theme.js

@@ -0,0 +1,9 @@
+import { WHITE, GRECIAN_GREY } from "../../../constants/colors";
+
+const backgroundColor = WHITE;
+const iconBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  backgroundColor,
+  iconBackgroundColor
+};

package/src/components/atoms/card/index.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Card from "./Card";
+
+export const cardRegistry = {
+  accounts: props => (
+    <Card
+      icon="accounts"
+      heading="Add an Account"
+      buttonText="Add Account"
+      text="Add your accounts to this profile to make your payments simple."
+      cardAction="/profile/accounts"
+      {...props}
+    />
+  ),
+  properties: props => (
+    <Card
+      icon="properties"
+      heading="Add a Property"
+      buttonText="Add Property"
+      text="Add a home, car, or other types of personal or business property."
+      cardAction="/profile/properties"
+      {...props}
+    />
+  ),
+  payment: props => (
+    <Card
+      icon="payment"
+      heading="Add a Payment Method"
+      buttonText="Add Payment Method"
+      text="Save cards and/or bank accounts to your profile for fast future payments."
+      cardAction="/profile/settings"
+      {...props}
+    />
+  )
+};
+
+export default cardRegistry;

package/src/components/atoms/icons/PropertiesAddIcon.js

@@ -3,12 +3,7 @@ import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 const PropertiesAddIcon = ({ themeValues }) => {
   return (
-    <svg
-      width={100}
-      height={100}
-      viewBox="0 0 100 100"
-      style={{ paddingLeft: "16px" }}
-    >
+    <svg width={100} height={100} viewBox="0 0 84 100">
       <title>{"8330C897-662E-49C5-B716-3661563AA1FB@1.00x"}</title>
       <defs>
         <path id="prefix__a" d="M0 0h100v100H0z" />

package/src/components/atoms/index.js

@@ -4,6 +4,7 @@ export { default as AmountCallout } from "./amount-callout";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonWithAction } from "./button-with-action";
 export { default as ButtonWithLink } from "./button-with-link";
+export { default as cardRegistry } from "./card";
 export { default as Checkbox } from "./checkbox";
 export { default as CheckboxList } from "./checkbox-list";
 export { default as CountryDropdown } from "./country-dropdown";

package/src/components/atoms/placeholder/Placeholder.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { tint } from "polished";
 import { Link } from "react-router-dom";
 import Text from "../text";
 import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
@@ -63,19 +64,27 @@ const Placeholder = ({
       extraStyles={`
         background: linear-gradient(
           to right,
-          ${STORM_GREY} 40%,
+          ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
           rgba(255, 255, 255, 0) 0%
         ),
-        linear-gradient(${STORM_GREY} 40%, rgba(255, 255, 255, 0) 0%),
-        linear-gradient(to right, ${STORM_GREY} 40%, rgba(255, 255, 255, 0) 0%),
-        linear-gradient(${STORM_GREY} 40%, rgba(255, 255, 255, 0) 0%);
+        linear-gradient(${
+          variant === "large" ? STORM_GREY : themeValues.color
+        } 40%, rgba(255, 255, 255, 0) 0%),
+        linear-gradient(to right, ${
+          variant === "large" ? STORM_GREY : themeValues.color
+        } 40%, rgba(255, 255, 255, 0) 0%),
+        linear-gradient(${
+          variant === "large" ? STORM_GREY : themeValues.color
+        } 40%, rgba(255, 255, 255, 0) 0%);
         background-position: top, right, bottom, left;
         background-repeat: repeat-x, repeat-y;
         background-size: 5px 1px, 1px 5px;
         display: flex;
         justify-content: center;
         align-items:center;`}
-      hoverStyles={`background-color: ${GRECIAN_GREY};`}
+      hoverStyles={`background-color: ${
+        variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
+      };`}
     >
       <Center maxWidth="300px">
         <Box padding="0px 0px 0px 0px">
@@ -85,9 +94,13 @@ const Placeholder = ({
               <Box
                 padding="0"
                 extraStyles={`.fill { 
-                    fill: ${CHARADE_GREY}; 
+                    fill: ${
+                      variant === "large" ? CHARADE_GREY : themeValues.color
+                    }; 
                   } .stroke { 
-                    stroke: ${CHARADE_GREY}; 
+                    stroke: ${
+                      variant === "large" ? CHARADE_GREY : themeValues.color
+                    }; 
                   }`}
               >
                 {variant === "large" ? (

package/src/components/molecules/index.js

@@ -28,4 +28,5 @@ export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
 export { default as Timeout } from "./timeout";
+export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";

package/src/components/molecules/welcome-module/WelcomeModule.js

@@ -0,0 +1,52 @@
+import React, { Fragment, memo } from "react";
+import styled from "styled-components";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./WelcomeModule.theme";
+import Heading from "../../atoms/heading";
+import { Box, Cluster } from "../../atoms/layouts";
+
+const WelcomeImage = styled.img`
+  width: 100%;
+  height: auto;
+`;
+
+const WelcomeModule = ({ heading, isMobile, themeValues }) => {
+  const welcomeImage =
+    "https://cb-public-assets.s3-us-west-2.amazonaws.com/profile-assets/profile-welcome-image.png";
+
+  return (
+    <Fragment>
+      <Box padding="0">
+        {isMobile && (
+          <Box padding="0" background={themeValues.imageBackgroundColor}>
+            <Cluster justify="center">
+              <WelcomeImage src={welcomeImage} />
+            </Cluster>
+          </Box>
+        )}
+        <Box background={themeValues.headerBackgroundColor}>
+          <Heading
+            variant="h5"
+            weight={themeValues.fontWeight}
+            color={themeValues.fontColor}
+            textAlign={themeValues.textAlign}
+            aria-level="3"
+          >
+            {heading}
+          </Heading>
+        </Box>
+        {!isMobile && (
+          <Box padding="0" background={themeValues.imageBackgroundColor}>
+            <Cluster justify="center" align="flex-end">
+              <WelcomeImage src={welcomeImage} />
+            </Cluster>
+          </Box>
+        )}
+      </Box>
+    </Fragment>
+  );
+};
+
+export default memo(
+  themeComponent(WelcomeModule, "WelcomeModule", fallbackValues)
+);

package/src/components/molecules/welcome-module/WelcomeModule.theme.js

@@ -0,0 +1,15 @@
+import { MATISSE_BLUE, BRIGHT_GREY, WHITE } from "../../../constants/colors";
+
+const fontWeight = "600";
+const fontColor = WHITE;
+const textAlign = "left";
+const headerBackgroundColor = BRIGHT_GREY;
+const imageBackgroundColor = MATISSE_BLUE;
+
+export const fallbackValues = {
+  fontWeight,
+  fontColor,
+  textAlign,
+  headerBackgroundColor,
+  imageBackgroundColor
+};

package/src/components/molecules/welcome-module/index.js

@@ -0,0 +1,3 @@
+import WelcomeModule from "./WelcomeModule";
+
+export default WelcomeModule;