@thecb/components 3.3.0 → 3.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.3.0",
+  "version": "3.3.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -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

@@ -17,12 +17,16 @@ const AddObligation = ({
   &: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 = `
@@ -37,6 +41,7 @@ const AddObligation = ({
       hoverStyles={hoverStyles}
       activeStyles={activeStyles}
       extraStyles={defaultStyles}
+      onClick={action}
     >
       <Cover singleChild minHeight="100%">
         <Cluster justify="center" align="center" minHeight="100%">

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}