@thecb/components 10.5.1-beta.3 → 10.5.1

package/package.json

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

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

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

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

@@ -18,6 +18,7 @@ import {
   ButtonLayoutWrapper,
   CancelButton,
   CloseButton,
+  CloseIconButton,
   ContinueButton
 } from "./__private__";
 
@@ -38,10 +39,12 @@ const Modal = ({
   buttonExtraStyles = "",
   cancelAction = noop,
   cancelButtonText = "Cancel",
+  cancelButtonVariant = "secondary",
   children = [],
   closeButtonText = "Close",
   continueAction = noop,
   continueButtonText = "Continue",
+  continueButtonVariant = "primary",
   continueURL = "",
   customWidth = "",
   dataQa = null,
@@ -60,6 +63,7 @@ const Modal = ({
   onExit = hideModal,
   onlyCloseButton = false,
   onlyContinueButton = false,
+  showCloseIconButton = false,
   underlayClickExits = true,
   useDangerButton = false
 }) => {
@@ -108,7 +112,7 @@ const Modal = ({
             borderRadius: BORDER_RADIUS.MD,
             margin: SPACING.XS,
             overflow: "auto",
-            width: isMobile ? "" : customWidth || "615px"
+            width: isMobile ? "" : customWidth || "576px"
           }}
           underlayClickExits={underlayClickExits}
           aria-modal={true}
@@ -122,7 +126,13 @@ const Modal = ({
               borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
               padding={`${SPACING.XS} ${SPACING.MD}`}
             >
-              <Cluster justify="flex-start" align="center">
+              <Cluster
+                justify={showCloseIconButton ? "space-between" : "flex-start"}
+                align={
+                  showCloseIconButton && isMobile ? "flex-start" : "center"
+                }
+                nowrap
+              >
                 <Title
                   as="h2"
                   weight={FONT_WEIGHT_SEMIBOLD}
@@ -130,6 +140,9 @@ const Modal = ({
                 >
                   {modalHeaderText}
                 </Title>
+                {showCloseIconButton && (
+                  <CloseIconButton hideModal={hideModal} />
+                )}
               </Cluster>
             </Box>
             <Box background={modalBodyBg || ATHENS_GREY} padding="0">
@@ -161,6 +174,7 @@ const Modal = ({
                         buttonExtraStyles={buttonExtraStyles}
                         cancelAction={cancelAction}
                         cancelButtonText={cancelButtonText}
+                        cancelButtonVariant={cancelButtonVariant}
                         hideModal={hideModal}
                         isMobile={isMobile}
                         key="cancel"
@@ -172,6 +186,7 @@ const Modal = ({
                         continueAction={continueAction}
                         continueButtonText={continueButtonText}
                         continueURL={continueURL}
+                        continueButtonVariant={continueButtonVariant}
                         isContinueActionDisabled={isContinueActionDisabled}
                         isLoading={isLoading}
                         isMobile={isMobile}

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

@@ -10,6 +10,7 @@ export const CancelButton = ({
   buttonExtraStyles = "",
   cancelAction = noop,
   cancelButtonText = "",
+  cancelButtonVariant = "secondary",
   hideModal = noop,
   isMobile = false
 }) => {
@@ -27,7 +28,7 @@ export const CancelButton = ({
       role="button"
       text={cancelButtonText}
       textExtraStyles={`${fontSize}`}
-      variant="secondary"
+      variant={cancelButtonVariant}
     />
   );
 };

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

@@ -0,0 +1,40 @@
+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 = "Close Modal"
+}) => {
+  return (
+    <ButtonWithAction
+      action={hideModal}
+      aria-label={ariaLabel}
+      contentOverride
+      extraStyles={`
+        min-height: auto;
+        min-width: auto;
+        height: 1.5rem;
+        margin: 0 0 0 0.5rem;
+        &:focus {
+            outline-offset: -3px;
+        }
+     `}
+      variant="smallGhost"
+    >
+      <CloseIcon
+        role="img"
+        aria-hidden="true"
+        iconWidth={iconWidth}
+        iconHeight={iconHeight}
+      />
+    </ButtonWithAction>
+  );
+};
+
+export default CloseIconButton;

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

@@ -12,6 +12,7 @@ export const ContinueButton = ({
   continueAction = noop,
   continueButtonText = "",
   continueURL = "",
+  continueButtonVariant = "primary",
   isContinueActionDisabled = false,
   isLoading = false,
   isMobile = false,
@@ -36,7 +37,7 @@ export const ContinueButton = ({
       text={continueButtonText}
       textExtraStyles={`${fontSize}`}
       url={continueURL}
-      variant={useDangerButton ? "danger" : "primary"}
+      variant={useDangerButton ? "danger" : continueButtonVariant}
     />
   );
 };

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

@@ -14,6 +14,7 @@ export interface CancelButtonProps {
   buttonExtraStyles?: string;
   cancelAction?: Function;
   cancelButtonText?: string;
+  cancelButtonVariant?: string;
   hideModal?: Function;
   isMobile?: boolean;
 }
@@ -31,11 +32,23 @@ export interface CloseButtonProps {
 export declare const CloseButton: React.FC<Expand<CloseButtonProps> &
   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>>;
+
 export interface ContinueButtonProps {
   buttonExtraStyles?: string;
   continueAction?: Function;
   continueButtonText?: string;
   continueURL?: string;
+  continueButtonVariant?: string;
   isContinueActionDisabled?: boolean;
   isLoading?: boolean;
   isMobile?: boolean;

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

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

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()]

package/src/constants/style_constants.js

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