@thecb/components 3.3.5-beta.0 → 3.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.3.5-beta.0",
+  "version": "3.3.5",
   "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.19",
+    "@storybook/addon-a11y": "^5.3.14",
     "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-console": "^1.2.1",
     "@storybook/addon-docs": "^5.3.19",
@@ -61,7 +61,6 @@
     "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",
@@ -74,12 +73,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/add-obligation/AddObligation.js

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,18 @@
+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

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

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

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

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -44,7 +44,7 @@ const ButtonWithLink = ({
       url={url}
       disabled={disabled}
       newTab={newTab}
-      extraStyles={`text-decoration: none; ${extraStyles} &:hover {
+      extraStyles={`text-decoration: none; &:hover {
         text-decoration: none; }`}
     >
       <ButtonWithAction {...otherProps} extraStyles={extraStyles} />

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

@@ -0,0 +1,36 @@
+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;

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

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

package/src/components/atoms/index.js

@@ -1,3 +1,4 @@
+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 = "100%",
+  minHeight = "100vh",
   childGap,
   padding,
   fillCenter,

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

@@ -1,15 +1,16 @@
-import React, { useContext } from "react";
-import { ThemeContext } from "styled-components";
+import React from "react";
 import { Link } from "react-router-dom";
 import Text from "../text";
-import { Box, Switcher, Center, Cluster } from "../layouts";
+import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { IconAdd } from "../../../deprecated/icons";
-import { STORM_GREY, GRECIAN_GREY } from "../../../constants/colors";
-import { AccountsAddIcon, PropertiesAddIcon } from "../icons";
+import {
+  STORM_GREY,
+  GRECIAN_GREY,
+  CHARADE_GREY
+} from "../../../constants/colors";
+import { AccountsAddIcon, PropertiesAddIcon, IconAdd } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import withWindowSize from "../../withWindowSize";
 
 const PlaceholderContentWrapper = ({
   isLink,
@@ -40,30 +41,26 @@ const Placeholder = ({
   text,
   action,
   visible = true,
-  iconID,
   isLink = false,
   destination,
   variant,
   largeIcon,
   themeValues,
   dataQa
-}) => {
-  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={`
+}) => (
+  <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%,
@@ -78,45 +75,65 @@ 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>}
-                <Cluster justify="center" align="center" minHeight="100%">
-                  {variant === "large" ? (
-                    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>}
+              <Box
+                padding="0"
+                extraStyles={`.fill { 
+                    fill: ${CHARADE_GREY}; 
+                  } .stroke { 
+                    stroke: ${CHARADE_GREY}; 
+                  }`}
+              >
+                {variant === "large" ? (
+                  <Center intrinsic>
+                    {largeIcon === "accounts" ? (
                       <AccountsAddIcon />
                     ) : (
                       <PropertiesAddIcon />
-                    )
-                  ) : (
-                    <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>
-  );
-};
+                    )}
+                    <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>
+);
+
 export default themeComponent(
-  withWindowSize(Placeholder),
+  Placeholder,
   "Placeholder",
   fallbackValues,
   "default"

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { required, matchesField, isProbablyEmail } from "redux-freeform";
+import { required, isProbablyEmail } from "redux-freeform";
 import {
   FormInput,
   FormContainer,
@@ -22,10 +22,6 @@ 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">
@@ -39,15 +35,6 @@ 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,16 +1,8 @@
-import {
-  createFormState,
-  required,
-  matchesField,
-  isProbablyEmail
-} from "redux-freeform";
+import { createFormState, required, 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,5 +1,7 @@
 const backgroundColor = "#3b414d";
+const shadowColor = "#292A33";
 
 export const fallbackValues = {
-  backgroundColor
+  backgroundColor,
+  shadowColor
 };

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.backgroundColor}, 0px 2px 14px 0px ${themeValues.backgroundColor};`}
+        boxShadow={`0px 3px 8px 0px ${themeValues.shadowColor}, 0px 2px 14px 0px ${themeValues.shadowColor};`}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onFocus={onFocus}

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

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

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

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

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

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

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

@@ -25,13 +25,8 @@ const SidebarSingleContent = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box
-      padding="0"
-      minWidth="100%"
-      background={themeValues.pageBackground}
-      extraStyles="flex-grow: 1;"
-    >
-      <Cover centerOverride={!sidebarVerticalCenter}>
+    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
+      <Cover minHeight="100vh" 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,9 +31,12 @@ const SidebarStackContent = ({
       minWidth="100%"
       background={themeValues.pageBackground}
       key="page-bg"
-      extraStyles="flex-grow: 1;"
     >
-      <Cover centerOverride={!sidebarVerticalCenter} key="page-cover">
+      <Cover
+        minHeight="100vh"
+        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/index.js

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

package/src/util/index.js

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

package/src/deprecated/icons/IconAdd.js

@@ -1,44 +0,0 @@
-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>
-);