@thecb/components 3.3.4 → 3.3.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.3.4",
+  "version": "3.3.5-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -25,7 +25,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.6.2",
     "@rollup/plugin-json": "^4.0.3",
-    "@storybook/addon-a11y": "^5.3.14",
+    "@storybook/addon-a11y": "^5.3.19",
     "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-console": "^1.2.1",
     "@storybook/addon-docs": "^5.3.19",
@@ -61,6 +61,7 @@
     "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
+    "ramda": "^0.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "6.0.0-alpha.3",
@@ -73,12 +74,12 @@
     }
   },
   "dependencies": {
-    "ramda": "^0.27.0",
     "formatted-input": "^0.1.3",
     "framer-motion": "^1.11.0",
     "numeral": "^2.0.6",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
+    "react-router": "^5.2.0",
     "redux-freeform": "^4.1.3"
   }
 }

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

@@ -17,7 +17,6 @@ import CheckmarkIcon from "./CheckmarkIcon";
 import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
 import PaymentIcon from "./PaymentIcon";
-import IconAdd from "./IconAdd";
 
 export {
   AccountsIcon,
@@ -38,6 +37,5 @@ export {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
-  PaymentIcon,
-  IconAdd
+  PaymentIcon
 };

package/src/components/atoms/index.js

@@ -1,4 +1,3 @@
-export { default as AddObligation } from "./add-obligation";
 export { default as Alert } from "./alert";
 export { default as AmountCallout } from "./amount-callout";
 export { default as Breadcrumb } from "./breadcrumb";

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

@@ -23,7 +23,7 @@ import { CoverOuterContainer } from "./Cover.styled";
 */
 
 const Cover = ({
-  minHeight = "100vh",
+  minHeight = "100%",
   childGap,
   padding,
   fillCenter,

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

@@ -1,16 +1,15 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
 import { Link } from "react-router-dom";
 import Text from "../text";
-import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
+import { Box, Switcher, Center, Cluster } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import {
-  STORM_GREY,
-  GRECIAN_GREY,
-  CHARADE_GREY
-} from "../../../constants/colors";
-import { AccountsAddIcon, PropertiesAddIcon, IconAdd } from "../icons";
+import { IconAdd } from "../../../deprecated/icons";
+import { STORM_GREY, GRECIAN_GREY } from "../../../constants/colors";
+import { AccountsAddIcon, PropertiesAddIcon } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import withWindowSize from "../../withWindowSize";
 
 const PlaceholderContentWrapper = ({
   isLink,
@@ -41,26 +40,30 @@ const Placeholder = ({
   text,
   action,
   visible = true,
+  iconID,
   isLink = false,
   destination,
   variant,
   largeIcon,
   themeValues,
   dataQa
-}) => (
-  <PlaceholderContentWrapper
-    isLink={isLink}
-    action={action}
-    destination={destination}
-    dataQa={dataQa}
-  >
-    <Box
-      padding="0"
-      borderRadius="4px"
-      border="none"
-      minHeight={themeValues.height}
-      hiddenStyles={!visible}
-      extraStyles={`
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <PlaceholderContentWrapper
+      isLink={isLink}
+      action={action}
+      destination={destination}
+      dataQa={dataQa}
+    >
+      <Box
+        padding="0"
+        borderRadius="4px"
+        border="none"
+        minHeight={themeValues.height}
+        hiddenStyles={!visible}
+        extraStyles={`
         background: linear-gradient(
           to right,
           ${STORM_GREY} 40%,
@@ -75,65 +78,45 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
-      hoverStyles={`background-color: ${GRECIAN_GREY};`}
-    >
-      <Center maxWidth="300px">
-        <Box padding="0px 0px 0px 0px">
-          <Cluster justify="center" align="center" minHeight="100%">
-            <Switcher maxChildren={2} childGap="0">
-              {variant === "large" && <div></div>}
-              <Box
-                padding="0"
-                extraStyles={`.fill { 
-                    fill: ${CHARADE_GREY}; 
-                  } .stroke { 
-                    stroke: ${CHARADE_GREY}; 
-                  }`}
-              >
-                {variant === "large" ? (
-                  <Center intrinsic>
-                    {largeIcon === "accounts" ? (
+        hoverStyles={`background-color: ${GRECIAN_GREY};`}
+      >
+        <Center maxWidth="300px">
+          <Box padding="0px 0px 0px 0px">
+            <Cluster justify="center" align="center" minHeight="100%">
+              <Switcher maxChildren={2} childGap="0">
+                {variant === "large" && <div></div>}
+                <Cluster justify="center" align="center" minHeight="100%">
+                  {variant === "large" ? (
+                    largeIcon === "accounts" ? (
                       <AccountsAddIcon />
                     ) : (
                       <PropertiesAddIcon />
-                    )}
-                    <Text
-                      variant="pS"
-                      color={themeValues.color}
-                      weight={FONT_WEIGHT_REGULAR}
-                      extraStyles={`text-align: center;`}
-                    >
-                      {text}
-                    </Text>
-                  </Center>
-                ) : (
-                  <Cover singleChild minHeight="100%">
-                    <Cluster justify="center" align="center">
-                      <IconAdd />
-                      <Center intrinsic>
-                        <Text
-                          variant="pS"
-                          color={themeValues.color}
-                          weight={FONT_WEIGHT_REGULAR}
-                          extraStyles={`padding: 0 0 0 8px; text-align: center;`}
-                        >
-                          {text}
-                        </Text>
-                      </Center>
-                    </Cluster>
-                  </Cover>
-                )}
-              </Box>
-            </Switcher>
-          </Cluster>
-        </Box>
-      </Center>
-    </Box>
-  </PlaceholderContentWrapper>
-);
-
+                    )
+                  ) : (
+                    <IconAdd iconID={iconID} isMobile={isMobile} />
+                  )}
+                </Cluster>
+                <Center intrinsic>
+                  <Text
+                    variant="pS"
+                    color={themeValues.color}
+                    weight={FONT_WEIGHT_REGULAR}
+                    textAlign="center"
+                    extraStyles={variant !== "large" && `padding: 0 0 0 8px;`}
+                  >
+                    {text}
+                  </Text>
+                </Center>
+              </Switcher>
+            </Cluster>
+          </Box>
+        </Center>
+      </Box>
+    </PlaceholderContentWrapper>
+  );
+};
 export default themeComponent(
-  Placeholder,
+  withWindowSize(Placeholder),
   "Placeholder",
   fallbackValues,
   "default"

package/src/components/molecules/email-form/EmailForm.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { required, isProbablyEmail } from "redux-freeform";
+import { required, matchesField, isProbablyEmail } from "redux-freeform";
 import {
   FormInput,
   FormContainer,
@@ -22,6 +22,10 @@ const EmailForm = ({
     [required.error]: "Email is required",
     [isProbablyEmail.error]: "Invalid email address"
   };
+  const confirmEmailFieldErrorMessages = {
+    [matchesField.error]: "Confirm email must match email",
+    [required.error]: "Confirm email must match email"
+  };
 
   return (
     <FormContainer variant={variant} role="form" aria-label="Email">
@@ -35,6 +39,15 @@ const EmailForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
+        <FormInput
+          labelTextWhenNoError="Confirm email"
+          errorMessages={confirmEmailFieldErrorMessages}
+          type="email"
+          field={fields.confirmEmail}
+          fieldActions={actions.fields.confirmEmail}
+          showErrors={showErrors}
+          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        />
       </FormInputColumn>
     </FormContainer>
   );

package/src/components/molecules/email-form/EmailForm.state.js

@@ -1,8 +1,16 @@
-import { createFormState, required, isProbablyEmail } from "redux-freeform";
+import {
+  createFormState,
+  required,
+  matchesField,
+  isProbablyEmail
+} from "redux-freeform";
 
 const formConfig = {
   email: {
     validators: [required(), isProbablyEmail()]
+  },
+  confirmEmail: {
+    validators: [required(), matchesField("email")]
   }
 };
 

package/src/components/molecules/nav-menu/NavMenu.theme.js

@@ -1,7 +1,5 @@
 const backgroundColor = "#3b414d";
-const shadowColor = "#292A33";
 
 export const fallbackValues = {
-  backgroundColor,
-  shadowColor
+  backgroundColor
 };

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

@@ -24,7 +24,7 @@ const NavMenuDesktop = ({
         extraStyles={`position: relative; ${menuCarat}`}
         background={themeValues.backgroundColor}
         borderRadius="5px"
-        boxShadow={`0px 3px 8px 0px ${themeValues.shadowColor}, 0px 2px 14px 0px ${themeValues.shadowColor};`}
+        boxShadow={`0px 3px 8px 0px ${themeValues.backgroundColor}, 0px 2px 14px 0px ${themeValues.backgroundColor};`}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onFocus={onFocus}

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

@@ -146,9 +146,8 @@ const RadioSection = ({
                     justify="space-between"
                     align="center"
                     childGap="0.5rem"
-                    nowrap
                   >
-                    <Cluster justify="flex-start" align="center" nowrap>
+                    <Cluster justify="flex-start" align="center">
                       {!section.hideRadioButton && (
                         <Box padding="0">
                           <RadioButton

package/src/components/templates/center-single/CenterSingle.js

@@ -20,11 +20,13 @@ const CenterSingle = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover
-        minHeight="100vh"
-        centerOverride={isMobile && !centeredMobileContent}
-      >
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover centerOverride={isMobile && !centeredMobileContent}>
         {header ? header : <Box padding="0" />}
         <Box
           padding="0"

package/src/components/templates/center-stack/CenterStack.js

@@ -20,8 +20,13 @@ const CenterStack = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover minHeight="100vh">
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover>
         {header ? header : <Box padding="0" />}
         <Box padding="0" minWidth="100%" role="main">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -19,8 +19,13 @@ const CenterSingle = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover minHeight="100vh" childGap="0" fillCenter>
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover childGap="0" fillCenter>
         {header ? header : <Box padding="0" />}
         <Box
           padding="0"

package/src/components/templates/sidebar-single-content/SidebarSingleContent.js

@@ -25,8 +25,13 @@ const SidebarSingleContent = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover minHeight="100vh" centerOverride={!sidebarVerticalCenter}>
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover centerOverride={!sidebarVerticalCenter}>
         {header ? header : <Box padding="0" />}
         <Box padding="0" minWidth="100%" role="main">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -31,12 +31,9 @@ const SidebarStackContent = ({
       minWidth="100%"
       background={themeValues.pageBackground}
       key="page-bg"
+      extraStyles="flex-grow: 1;"
     >
-      <Cover
-        minHeight="100vh"
-        centerOverride={!sidebarVerticalCenter}
-        key="page-cover"
-      >
+      <Cover centerOverride={!sidebarVerticalCenter} key="page-cover">
         {header ? header : <Box padding="0" key="header-box" />}
         <Box padding="0" minWidth="100%" key="content-box" role="main">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (

package/src/deprecated/icons/IconAdd.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { WHITE, CHARADE_GREY } from "../../constants/colors";
+
+export const IconAdd = ({ fill = CHARADE_GREY, iconID, isMobile }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="18"
+    height="18"
+    viewBox={isMobile ? "0 -0.25 20 20" : "-0.5 -0.5 18 18"}
+    id={`icon-add-${iconID}`}
+  >
+    <defs>
+      <path
+        id="path-1"
+        d="M9.91666623 6.78508747L6.78508747 6.78508747 6.78508747 9.91666623 5.74122788 9.91666623 5.74122788 6.78508747 2.60964912 6.78508747 2.60964912 5.74122788 5.74122788 5.74122788 5.74122788 2.60964912 6.78508747 2.60964912 6.78508747 5.74122788 9.91666623 5.74122788z"
+      ></path>
+    </defs>
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+      <g transform="translate(-383 -15)">
+        <g transform="translate(384 16)">
+          <g>
+            <g transform="translate(1.94 1.858)">
+              <mask id="mask-2" fill={WHITE}>
+                <use xlinkHref="#path-1"></use>
+              </mask>
+              <use fill="#000" fillRule="evenodd" xlinkHref="#path-1"></use>
+              <g fill={fill} fillRule="evenodd" mask="url(#mask-2)">
+                <path d="M0 0H12.526V12.526H0z"></path>
+              </g>
+            </g>
+            <circle
+              cx="8.155"
+              cy="8.072"
+              r="8"
+              stroke={fill}
+              strokeWidth="0.644"
+            ></circle>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);

package/src/deprecated/icons/index.js

@@ -1,3 +1,4 @@
+import { IconAdd } from "./IconAdd";
 import { IconWarn } from "./IconWarn";
 import { IconCheck } from "./IconCheck";
 import { IconCheckEmail } from "./IconCheckEmail";
@@ -23,6 +24,7 @@ const AlertIcons = {
 };
 
 export {
+  IconAdd,
   IconWarn,
   IconCheck,
   IconCheckEmail,

package/src/util/index.js

@@ -1,4 +1,5 @@
 import * as formats from "./formats";
 import * as general from "./general";
+import * as theme from "./themeUtils";
 
-export { formats, general };
+export { formats, general, theme };

package/src/components/atoms/add-obligation/AddObligation.js

@@ -1,64 +0,0 @@
-import React from "react";
-import ButtonWithAction from "../button-with-action";
-import { Box, Center, Cluster, Cover } from "../layouts";
-import { IconAdd } from "../icons";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { fallbackValues } from "./AddObligation.theme";
-import { themeComponent } from "../../../util/themeUtils";
-
-const AddObligation = ({
-  text,
-  action,
-  themeValues,
-  extraStyles,
-  textExtraStyles
-}) => {
-  const hoverStyles = `
-  &:hover {
-    .fill { fill: ${themeValues.hoverColor}; }
-    .stroke { stroke: ${themeValues.hoverColor}; }
-    button { text-decoration: underline; text-decoration-color: ${themeValues.hoverColor}; }
-    span { color: ${themeValues.hoverColor}; }
-  }`;
-
-  const activeStyles = `
-   &:active {
-     .fill { fill: ${themeValues.activeColor}; }
-     .stroke { stroke: ${themeValues.activeColor}; }
-    button { text-decoration: underline; text-decoration-color: ${themeValues.activeColor}; }
-    span { color: ${themeValues.activeColor}; }
-    }`;
-
-  const defaultStyles = `
-      min-height: 0;
-      .fill { fill: ${themeValues.color}; }
-      .stroke { stroke: ${themeValues.color}; }
-     `;
-  return (
-    <Box
-      className="button"
-      padding="0.5rem 0"
-      hoverStyles={hoverStyles}
-      activeStyles={activeStyles}
-      extraStyles={defaultStyles}
-      onClick={action}
-    >
-      <Cover singleChild minHeight="100%">
-        <Cluster justify="center" align="center" minHeight="100%">
-          <IconAdd />
-          <Center intrinsic>
-            <ButtonWithAction
-              action={action}
-              text={text}
-              variant="smallGhost"
-              extraStyles={`min-height: 0; ${extraStyles}`}
-              textExtraStyles={`padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ${FONT_WEIGHT_SEMIBOLD}; ${textExtraStyles}`}
-            />
-          </Center>
-        </Cluster>
-      </Cover>
-    </Box>
-  );
-};
-
-export default themeComponent(AddObligation, "AddObligation", fallbackValues);

package/src/components/atoms/add-obligation/AddObligation.stories.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-import AddObligation from "./AddObligation";
-import page from "../../../../.storybook/page";
-
-export const addObligation = () => (
-  <AddObligation
-    text={text("text", "Lorem", "props")}
-    extraStyles={text("extraStyles", "", "props")}
-    textExtraStyles={text("textExtraStyles", "", "props")}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/AddObligation",
-  Component: AddObligation
-});
-export default story;

package/src/components/atoms/add-obligation/AddObligation.theme.js

@@ -1,9 +0,0 @@
-const color = "#15749D";
-const hoverColor = "#116285";
-const activeColor = "#0E506D";
-
-export const fallbackValues = {
-  color,
-  hoverColor,
-  activeColor
-};

package/src/components/atoms/add-obligation/index.js

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

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

@@ -1,36 +0,0 @@
-import React from "react";
-
-const IconAdd = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    className="icon"
-  >
-    <defs>
-      <path
-        id="path-1"
-        d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
-      ></path>
-    </defs>
-    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
-      <g transform="translate(-407 -563)">
-        <g transform="translate(408 562)">
-          <g transform="translate(0 2)">
-            <g transform="translate(3.94 3.858)">
-              <mask fill="#fff">
-                <use xlinkHref="#path-1"></use>
-              </mask>
-              <use className="fill" xlinkHref="#path-1"></use>
-            </g>
-            <circle className="stroke" cx="8.155" cy="8.072" r="8"></circle>
-          </g>
-        </g>
-      </g>
-    </g>
-  </svg>
-);
-
-export default IconAdd;