@thecb/components 10.5.1-beta.1 → 10.5.1-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.5.1-beta.1",
+  "version": "10.5.1-beta.3",
   "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.8.0"
+    "redux-freeform": "^5.9.0"
   }
 }

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

@@ -35,7 +35,7 @@ import ChargebackIcon from "./ChargebackIcon";
 import ChargebackReversalIcon from "./ChargebackReversalIcon";
 import DuplicateIcon from "./DuplicateIcon";
 import ErroredIcon from "./ErroredIcon";
-import ExternalLinkIcon from "./ExternalLinkicon";
+import ExternalLinkIcon from "./ExternalLinkIcon";
 import FailedIcon from "./FailedIcon";
 import PencilIcon from "./PencilIcon";
 import PendingIcon from "./PendingIcon";

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

@@ -77,7 +77,6 @@ export const modalV2 = () => (
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
     useDangerButton={boolean("useDangerButton", false, groupId)}
-    showCloseIconButton={boolean("showCloseIconButton", true, groupId)}
   />
 );
 

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

@@ -18,8 +18,7 @@ import {
   ButtonLayoutWrapper,
   CancelButton,
   CloseButton,
-  ContinueButton,
-  CloseIconButton
+  ContinueButton
 } from "./__private__";
 
 /*
@@ -62,8 +61,7 @@ const Modal = ({
   onlyCloseButton = false,
   onlyContinueButton = false,
   underlayClickExits = true,
-  useDangerButton = false,
-  showCloseIconButton = false
+  useDangerButton = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -110,7 +108,7 @@ const Modal = ({
             borderRadius: BORDER_RADIUS.MD,
             margin: SPACING.XS,
             overflow: "auto",
-            width: isMobile ? "" : customWidth || "576px"
+            width: isMobile ? "" : customWidth || "615px"
           }}
           underlayClickExits={underlayClickExits}
           aria-modal={true}
@@ -124,11 +122,7 @@ const Modal = ({
               borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
               padding={`${SPACING.XS} ${SPACING.MD}`}
             >
-              <Cluster
-                justify={showCloseIconButton ? "space-between" : "flex-start"}
-                align="center"
-                nowrap
-              >
+              <Cluster justify="flex-start" align="center">
                 <Title
                   as="h2"
                   weight={FONT_WEIGHT_SEMIBOLD}
@@ -136,22 +130,6 @@ const Modal = ({
                 >
                   {modalHeaderText}
                 </Title>
-                {showCloseIconButton && (
-                  <CloseIconButton
-                    hideModal={hideModal}
-                    iconWidth={isMobile ? "20" : "24"}
-                    iconHeight={isMobile ? "20" : "24"}
-                    buttonExtraStyles={`
-                      min-height: auto;
-                      min-width: auto;
-                      height: 1.5rem;
-                      margin: 0;
-                      &:focus {
-                        outline-offset: -3px;
-                      }
-                  `}
-                  />
-                )}
               </Cluster>
             </Box>
             <Box background={modalBodyBg || ATHENS_GREY} padding="0">

package/src/components/molecules/modal/__private__/index.d.ts

@@ -44,14 +44,3 @@ export interface ContinueButtonProps {
 
 export declare const ContinueButton: React.FC<Expand<ContinueButtonProps> &
   React.HTMLAttributes<HTMLElement>>;
-
-export interface CloseIconButtonProps {
-  buttonExtraStyles?: string;
-  hideModal?: action;
-  iconWidth?: string;
-  iconHeight?: string;
-  ariaLabel?: string;
-}
-
-export declare const CloseIconButton: React.FC<Expand<CloseIconButtonProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/modal/__private__/index.js

@@ -2,4 +2,3 @@ export { default as ButtonLayoutWrapper } from "./ButtonLayoutWrapper";
 export { default as CancelButton } from "./CancelButton";
 export { default as CloseButton } from "./CloseButton";
 export { default as ContinueButton } from "./ContinueButton";
-export { default as CloseIconButton } from "./CloseIconButton";

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

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

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

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

package/src/constants/style_constants.js

@@ -8,8 +8,7 @@ export const FONT_SIZE = {
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px
-  LG: "1.125rem", // 18px
-  XLG: "1.25rem" //20px
+  LG: "1.125rem" // 18px
 };
 export const FONT_WEIGHT_REGULAR = "400";
 export const FONT_WEIGHT_SEMIBOLD = "600";

package/src/components/molecules/modal/__private__/CloseIconButton.js

@@ -1,32 +0,0 @@
-import React from "react";
-import { noop } from "../../../../util/general";
-import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
-import { CloseIcon } from "../../../atoms/icons/CloseIcon";
-import { button } from "@storybook/addon-knobs";
-
-export const CloseIconButton = ({
-  buttonExtraStyles = "",
-  hideModal = noop,
-  iconWidth = "24",
-  iconHeight = "24",
-  ariaLabel = ""
-}) => {
-  return (
-    <ButtonWithAction
-      variant="smallGhost"
-      action={hideModal}
-      contentOverride
-      extraStyles={buttonExtraStyles}
-      aria-label={ariaLabel ?? "Close Modal"}
-    >
-      <CloseIcon
-        role="img"
-        aria-hidden="true"
-        iconWidth={iconWidth}
-        iconHeight={iconHeight}
-      />
-    </ButtonWithAction>
-  );
-};
-
-export default CloseIconButton;