@thecb/components 10.3.2-beta.1 → 10.3.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.3.2-beta.1",
+  "version": "10.3.3-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/modal/Modal.js

@@ -46,8 +46,7 @@ const Modal = ({
   buttonExtraStyles,
   children,
   dataQa = null,
-  initialFocusSelector = "",
-  blurUnderlay = true
+  initialFocusSelector = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
@@ -67,10 +66,7 @@ const Modal = ({
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
-            alignItems: "center",
-            background: "rgba(41, 42, 51, 0.45)",
-            backdropFilter: blurUnderlay ? "blur(4px)" : "none",
-            WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
+            alignItems: "center"
           }}
           dialogStyle={{
             width: customWidth || "615px",

package/src/components/molecules/modal/Modal.stories.js

@@ -35,7 +35,6 @@ export const modal = () => (
     defaultWrapper={boolean("defaultWrapper", true, groupId)}
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     maxHeight={text("maxHeight", null, groupId)}
-    blurUnderlay={boolean("blurUnderlay", true, groupId)}
   />
 );
 
@@ -81,7 +80,6 @@ export const modalWithoutButtons = () => {
       defaultWrapper={boolean("defaultWrapper", true, groupId)}
       noButtons={boolean("noButtons", true, groupId)}
       maxHeight={text("maxHeight", null, groupId)}
-      blurUnderlay={boolean("blurUnderlay", false, groupId)}
     />
   );
 };

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -13,7 +13,8 @@ import Title from "../../atoms/title";
 import SolidDivider from "../../atoms/solid-divider";
 import {
   FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_REGULAR
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
 } from "../../../constants/style_constants";
 import { ATHENS_GREY } from "../../../constants/colors";
 import ButtonWithAction from "../../atoms/button-with-action";
@@ -255,7 +256,9 @@ const PaymentDetails = ({
   remainingBalance = false,
   // end partial void section
   isLoading = false,
-  isError = false
+  isError = false,
+  multiCartEnabled,
+  agencyDisplayName
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
   const fees = _fees
@@ -345,15 +348,28 @@ const PaymentDetails = ({
       </Cluster>
     </Box>
   ) : (
-    <Title
-      as="h2"
-      weight={FONT_WEIGHT_BOLD}
-      margin="1rem 0 0 0"
-      extraStyles={`font-size: 1.75rem;`}
-      id="payment-details-title"
-    >
-      {titleText}
-    </Title>
+    <Box width="100%" padding="none">
+      <Cluster justify="space-between" align="center">
+        <Title
+          as="h2"
+          weight={FONT_WEIGHT_BOLD}
+          margin="1rem 0 0 0"
+          extraStyles={`font-size: 1.75rem;`}
+          id="payment-details-title"
+        >
+          {titleText} HERE
+        </Title>
+        {multiCartEnabled && (
+          <Title
+            weight={FONT_WEIGHT_SEMIBOLD}
+            as="h3"
+            extraStyles={`font-size: 1.375rem;`}
+          >
+            {agencyDisplayName}
+          </Title>
+        )}
+      </Cluster>
+    </Box>
   );
   return isCollapsible ? (
     <Collapsible

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

@@ -7,8 +7,7 @@ import {
   hasLowercaseLetter,
   hasUppercaseLetter,
   hasSpecialCharacter,
-  isProbablyEmail,
-  matchesRegex
+  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",
-    [matchesRegex.error]: "First name contains invalid characters"
+    [required.error]: "First name is required"
   };
   const lastNameErrorMessages = {
-    [required.error]: "Last name is required",
-    [matchesRegex.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,
-  matchesRegex
+  isProbablyEmail
 } from "redux-freeform";
 
 const formConfig = {
   firstName: {
-    validators: [required(), matchesRegex(/[A-Za-z]+(\s?[A-Za-z\-,'])*/i)]
+    validators: [required()]
   },
   lastName: {
-    validators: [required(), matchesRegex(/[A-Za-z]+(\s?[A-Za-z\-,'])*/i)]
+    validators: [required()]
   },
   email: {
     validators: [required(), isProbablyEmail()]