@thecb/components 3.3.8-beta.0 → 3.3.10

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@thecb/components",
-  "version": "3.3.8-beta.0",
+  "version": "3.3.10",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "source": "src/index.js",
   "scripts": {
     "storybook": "start-storybook",
-    "build": "rollup -c"
+    "build": "rollup -cm"
   },
   "repository": {
     "type": "git",
@@ -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,6 +73,7 @@
     }
   },
   "dependencies": {
+    "ramda": "^0.27.0",
     "formatted-input": "^0.1.3",
     "framer-motion": "^1.11.0",
     "numeral": "^2.0.6",

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

@@ -135,6 +135,7 @@ const FormInput = ({
                   color={themeValues.linkColor}
                   weight={themeValues.fontWeight}
                   hoverStyles={themeValues.hoverFocusStyles}
+                  focusStyles={themeValues.hoverFocusStyles}
                   extraStyles={`cursor: pointer;`}
                   onClick={() => setShowPassword(!showPassword)}
                   aria-label="Show password"

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

@@ -15,6 +15,7 @@ const Heading = ({
   extraStyles = ``,
   className,
   variant = "h1",
+  dataQa,
   children,
   ...rest
 }) => (
@@ -28,6 +29,7 @@ const Heading = ({
     className={className}
     fontFamily={themeValues.fontFamily}
     fontSize={themeValues.fontSize}
+    data-qa={dataQa}
     {...rest}
   >
     {safeChildren(children, <span />)}

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

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

@@ -6,7 +6,6 @@ export const CoverOuterContainer = styled.div`
   flex-direction: column;
   min-height: ${({ minHeight }) => minHeight};
   padding: ${({ padding }) => padding};
-  min-width: ${({ fillCenter }) => (fillCenter ? "100%" : "auto")};
 
   > * {
     margin-top: ${({ childGap }) => childGap};

package/src/components/atoms/layouts/Imposter.styled.js

@@ -16,5 +16,4 @@ export const ImposterWrapper = styled.div`
     max-width: calc(100% - (${horizontalMargin} * 2));
     max-height: calc(100% - (${verticalMargin} * 2));
   `}
-  ${({ extraStyles }) => extraStyles};
 `;

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

@@ -12,6 +12,7 @@ const Paragraph = ({
   color = FIREFLY_GREY,
   margin = 0,
   extraStyles = ``,
+  dataQa,
   children,
   ...rest
 }) => (
@@ -22,6 +23,7 @@ const Paragraph = ({
     fontFamily={themeValues.fontFamily}
     fontSize={themeValues.fontSize}
     extraStyles={extraStyles}
+    data-qa={dataQa}
     {...rest}
   >
     {safeChildren(children, <span />)}

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/obligation/icons/AccountBillIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountBillIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountConstructionIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountConstructionIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountDentalIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountDentalIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountElectricIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountElectricIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountGarbageIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountGarbageIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountGasIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountGasIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountGenericIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountGenericIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountMedicalIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountMedicalIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountWaterIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountWaterIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyApartmentIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyApartmentIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyBusinessIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyBusinessIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyCarIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyCarIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"