@thecb/components 4.0.6 → 4.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.6",
+  "version": "4.0.10",
   "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/button-with-action/ButtonWithAction.js

@@ -82,7 +82,9 @@ const ButtonWithAction = ({
     "Button",
     variant
   );
-  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem;`;
+  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ${
+    themeContext.isMobile ? "50px" : "57px"
+  } `;
   const hoverStyles = `
     outline: none;
     background-color: ${themeValues.hoverBackgroundColor};

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/form-layouts/FormLayouts.theme.js

@@ -1,5 +1,5 @@
 import {
-  STORM_GREY,
+  FIREFLY_GREY,
   MATISSE_BLUE,
   WHITE,
   SEASHELL_WHITE,
@@ -23,7 +23,7 @@ const inputBackgroundColor = {
   disabled: `${SEASHELL_WHITE}`
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
-const labelColor = { default: `${STORM_GREY}`, disabled: `${STORM_GREY}` };
+const labelColor = { default: `${FIREFLY_GREY}`, disabled: `${FIREFLY_GREY}` };
 const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };

package/src/components/atoms/heading/Heading.js

@@ -15,12 +15,14 @@ const Heading = ({
   extraStyles = ``,
   className,
   variant = "h1",
+  as = variant,
   dataQa,
   children,
   ...rest
 }) => (
   <HeadingText
-    as={variant}
+    variant={variant}
+    as={as}
     weight={weight}
     color={color}
     margin={margin}

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/labeled-amount/LabeledAmount.js

@@ -5,12 +5,13 @@ import { Stack } from "../layouts";
 import Heading from "../heading";
 import Paragraph from "../paragraph";
 
-const LabeledAmount = ({ variant = "pL", label, amount, themeValues }) => {
+const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
   const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
   return (
     <Stack direction="row">
       <LabeledAmountText
         variant={variant}
+        as={as}
         weight={themeValues.fontWeight}
         extraStyles="text-align: start; flex: 3;"
       >
@@ -18,6 +19,7 @@ const LabeledAmount = ({ variant = "pL", label, amount, themeValues }) => {
       </LabeledAmountText>
       <LabeledAmountText
         variant={variant}
+        as={as}
         weight={themeValues.fontWeight}
         extraStyles="text-align: end; flex: 1;"
       >

package/src/components/atoms/paragraph/Paragraph.js

@@ -14,6 +14,7 @@ const Paragraph = ({
   extraStyles = ``,
   dataQa,
   children,
+  as,
   ...rest
 }) => (
   <ParagraphText
@@ -22,6 +23,7 @@ const Paragraph = ({
     margin={margin}
     fontFamily={themeValues.fontFamily}
     fontSize={themeValues.fontSize}
+    as={as}
     extraStyles={extraStyles}
     data-qa={dataQa}
     {...rest}

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/atoms/text/Text.js

@@ -13,6 +13,7 @@ const Text = ({
   extraStyles = ``,
   hoverStyles,
   onClick,
+  as,
   dataQa,
   children,
   ...rest
@@ -22,6 +23,7 @@ const Text = ({
     weight={weight}
     color={color}
     fontFamily={themeValues.fontFamily}
+    as={as}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
     onClick={onClick}

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -86,7 +86,7 @@ const CollapsibleSection = ({
                 variant="h6"
                 weight={FONT_WEIGHT_SEMIBOLD}
                 color={themeValues.titleColor}
-                aria-level="3"
+                as="h6"
               >
                 {title}
               </Heading>

package/src/components/molecules/editable-list/EditableList.js

@@ -43,7 +43,6 @@ const EditableList = ({
             weight={titleWeight}
             color={CHARADE_GREY}
             extraStyles="letter-spacing: 0.29px;"
-            aria-level="3"
           >
             {title}
           </Paragraph>

package/src/components/molecules/editable-table/TableListItem.js

@@ -29,7 +29,7 @@ const TableListItem = ({
     <ItemWrapper>
       <EditableTableListItem isMobile={isMobile}>
         <TableItemKey isMobile={isMobile}>
-          <Text variant="pS" color={CHARADE_GREY} aria-level="3">
+          <Text variant="pS" color={CHARADE_GREY}>
             {title}
           </Text>
         </TableItemKey>

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/module/Module.js

@@ -16,12 +16,11 @@ const Module = ({
   <Fragment>
     {heading && (
       <Heading
-        variant={variant === "default" ? "h5" : "h3"}
+        variant={variant === "default" ? "h5" : "h2"}
         weight={themeValues.fontWeight}
         color={themeValues.fontColor}
         margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
         textAlign={themeValues.textAlign}
-        aria-level={variant === "default" ? "3" : "1"}
       >
         {heading}
       </Heading>

package/src/components/molecules/module/Module.theme.js

@@ -5,7 +5,7 @@ const fontWeight = { default: "600", largeTitle: "700" };
 const fontColor = { default: CHARADE_GREY, largeTitle: CHARADE_GREY };
 const lineHeight = { default: "2rem", largeTitle: "2rem" };
 const textAlign = { default: "left", largeTitle: "left" };
-const titleType = { default: "h5", largeTitle: "h3" };
+const titleType = { default: "h5", largeTitle: "h1" };
 const titleSpacing = { default: "0.5rem", largeTitle: "1.125rem" };
 const boxShadow = {
   default:

package/src/components/molecules/obligation/modules/TitleModule.js

@@ -11,11 +11,11 @@ const TitleModule = ({ title, subtitle, titleColor, subtitleColor }) => (
         variant="h6"
         weight={FONT_WEIGHT_SEMIBOLD}
         color={titleColor}
-        aria-level="2"
+        as="h2"
       >
         {title}
       </Heading>
-      <Text variant="pS" color={subtitleColor} aria-level="3">
+      <Text variant="pS" color={subtitleColor}>
         {subtitle}
       </Text>
     </Stack>

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -31,6 +31,7 @@ const PaymentDetailsContent = ({
     </Box>
     <SolidDivider />
     <LabeledAmount
+      as="h2"
       variant={themeValues.labeledAmountTotal}
       label="Total"
       amount={displayCurrency(total)}
@@ -123,14 +124,14 @@ const PaymentDetails = ({
   ) : isCollapsible ? (
     <Box width="100%" padding="none">
       <Cluster justify="space-between" align="center">
-        <Heading variant="h6" weight="700">
+        <Heading variant="h5" weight="700" as="h1">
           {titleText}
         </Heading>
         {displayCurrency(total)}
       </Cluster>
     </Box>
   ) : (
-    <Heading variant="h3" weight="700" margin="1rem 0 0 0">
+    <Heading as="h1" variant="h3" weight="700" margin="1rem 0 0 0">
       {titleText}
     </Heading>
   );

package/src/components/molecules/radio-section/RadioSection.js

@@ -168,7 +168,7 @@ const RadioSection = ({
                         <Cluster align="center">{section.titleIcon}</Cluster>
                       )}
                       <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
-                        <Text variant="p" color={CHARADE_GREY} aria-level="3">
+                        <Text variant="p" color={CHARADE_GREY}>
                           {section.title}
                         </Text>
                       </Box>
@@ -181,6 +181,7 @@ const RadioSection = ({
                             key={icon.img}
                             fade={!icon.enabled}
                             isMobile={isMobile}
+                            alt={icon.altText}
                           />
                         ))}
                       </Cluster>

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}
+            as="h5"
+          >
+            {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;