@thecb/components 10.4.2-beta.2 → 10.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.4.2-beta.2",
+  "version": "10.4.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -90,6 +90,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.9.0-beta.2"
+    "redux-freeform": "^5.8.0"
   }
 }

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -3,6 +3,7 @@ import Modal from "../modal";
 import Text from "../../atoms/text";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Stack, Center } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action/ButtonWithAction";
 import { fallbackValues } from "./AccountAndRoutingModal.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { AccountNumberImage, RoutingNumberImage } from "../../atoms/icons";
@@ -18,57 +19,56 @@ const AccountAndRoutingModal = ({
   imageType,
   themeValues,
   dataQa = null
-}) => (
-  <Modal
-    modalOpen={isOpen}
-    hideModal={() => toggleOpen(false)}
-    showModal={() => toggleOpen(true)}
-    modalHeaderText={title}
-    dataQa={dataQa}
-    modalBodyText={
-      <Box extraStyles="overflow: scroll; max-height: 20rem;">
-        <Stack>
-          <Paragraph variant="p">{content}</Paragraph>
-          {imageType === "Account" ? (
-            <Center intrinsic>
-              <AccountNumberImage />
-            </Center>
-          ) : imageType === "Routing" ? (
-            <Center intrinsic>
-              <RoutingNumberImage />
-            </Center>
-          ) : (
-            <Fragment />
-          )}
-        </Stack>
-      </Box>
-    }
-    defaultWrapper={false}
-    onlyCloseButton={!acceptText}
-    continueButtonText={acceptText}
-    continueAction={() => {
-      toggleAccepted(true);
-      toggleOpen(false);
-    }}
-    initialFocusSelector={"[name='Close']"}
-  >
-    <Text
-      variant="pS"
-      onClick={() => toggleOpen(true)}
-      onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
-      tabIndex="0"
-      color={themeValues.linkColor}
-      weight={themeValues.fontWeight}
-      hoverStyles={themeValues.modalLinkHoverFocus}
-      textDecoration={themeValues.linkTextDecoration}
-      extraStyles={`cursor: pointer;`}
-      role="button"
-      className="modal-trigger"
+}) => {
+  return (
+    <Modal
+      modalOpen={isOpen}
+      hideModal={() => toggleOpen(false)}
+      showModal={() => toggleOpen(true)}
+      modalHeaderText={title}
+      dataQa={dataQa}
+      modalBodyText={
+        <Box extraStyles="overflow: scroll; max-height: 20rem;">
+          <Stack>
+            <Paragraph variant="p">{content}</Paragraph>
+            {imageType === "Account" ? (
+              <Center intrinsic>
+                <AccountNumberImage />
+              </Center>
+            ) : imageType === "Routing" ? (
+              <Center intrinsic>
+                <RoutingNumberImage />
+              </Center>
+            ) : (
+              <Fragment />
+            )}
+          </Stack>
+        </Box>
+      }
+      defaultWrapper={false}
+      onlyCloseButton={!acceptText}
+      continueButtonText={acceptText}
+      continueAction={() => {
+        toggleAccepted(true);
+        toggleOpen(false);
+      }}
+      initialFocusSelector={"[name='Close']"}
     >
-      {link}
-    </Text>
-  </Modal>
-);
+      <ButtonWithAction
+        variant="ghost"
+        tabIndex="0"
+        onClick={() => toggleOpen(true)}
+        onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
+        extraStyles="min-width: 0; min-height: 0;margin: 0; padding: 0; text-transform: none;"
+        text={
+          <Text variant="pS" color="inherit">
+            {link}
+          </Text>
+        }
+      />
+    </Modal>
+  );
+};
 
 export default themeComponent(
   AccountAndRoutingModal,

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -7,8 +7,7 @@ import {
   hasLowercaseLetter,
   hasUppercaseLetter,
   hasSpecialCharacter,
-  isProbablyEmail,
-  validName
+  isProbablyEmail
 } from "redux-freeform";
 import PasswordRequirements from "../../atoms/password-requirements";
 import { Box } from "../../atoms/layouts";
@@ -27,12 +26,10 @@ const RegistrationForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const firstNameErrorMessages = {
-    [required.error]: "First name is required",
-    [validName.error]: "First name contains invalid characters"
+    [required.error]: "First name is required"
   };
   const lastNameErrorMessages = {
-    [required.error]: "Last name is required",
-    [validName.error]: "Last name contains invalid characters"
+    [required.error]: "Last name is required"
   };
   const emailErrorMessages = {
     [required.error]: "Email is required",

package/src/components/molecules/registration-form/RegistrationForm.state.js

@@ -7,16 +7,15 @@ import {
   hasLowercaseLetter,
   hasUppercaseLetter,
   hasSpecialCharacter,
-  isProbablyEmail,
-  validName
+  isProbablyEmail
 } from "redux-freeform";
 
 const formConfig = {
   firstName: {
-    validators: [required(), validName()]
+    validators: [required()]
   },
   lastName: {
-    validators: [required(), validName()]
+    validators: [required()]
   },
   email: {
     validators: [required(), isProbablyEmail()]