@thecb/components 4.1.24 → 4.1.27

package/dist/index.cjs.js

@@ -20484,6 +20484,9 @@ var hoverFocusStyles$1 = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6E727E;"
 };
+var formFooterPanel = {
+  "default": "".concat(INFO_BLUE)
+};
 var fallbackValues$h = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
@@ -20495,7 +20498,8 @@ var fallbackValues$h = {
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
   fontWeight: fontWeight$3,
-  hoverFocusStyles: hoverFocusStyles$1
+  hoverFocusStyles: hoverFocusStyles$1,
+  formFooterPanel: formFooterPanel
 };
 
 function _templateObject4$3() {
@@ -20765,6 +20769,30 @@ var FormContainer = function FormContainer(_ref) {
 
 var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$h, "default");
 
+var FormFooterPanel = function FormFooterPanel(_ref) {
+  var themeValues = _ref.themeValues,
+      link = _ref.link,
+      linkText = _ref.linkText;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.formFooterPanel,
+    minWidth: "100%",
+    padding: isMobile ? "1.5rem" : "2rem"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+    url: link,
+    variant: "smallGhost",
+    text: linkText
+  })));
+};
+
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$h, "default");
+
 var fontSize$7 = {
   "default": "1rem",
   radio: "1.0625rem"
@@ -34990,15 +35018,15 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
 
-  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
+  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
-    "aria-label": "Email"
+    "aria-label": "Email address"
   }, guestCheckout && /*#__PURE__*/React__default.createElement(Paragraph$1, {
     margin: "0 0 1.125rem 0"
   }, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Email",
+    labelTextWhenNoError: "Email address",
     errorMessages: emailFieldErrorMessages,
     type: "email",
     field: fields.email,
@@ -35049,9 +35077,9 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     }, []);
   }
 
-  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email is not valid"), _EmailErrorMessages);
+  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Email",
+    labelTextWhenNoError: "Email address",
     errorMessages: EmailErrorMessages,
     field: fields.email,
     fieldActions: actions.fields.email,
@@ -35146,7 +35174,7 @@ var LoginForm = function LoginForm(_ref) {
     }, []);
   }
 
-  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
+  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
 
   var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
 
@@ -35154,7 +35182,7 @@ var LoginForm = function LoginForm(_ref) {
     role: "form",
     "aria-label": "Login"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Email",
+    labelTextWhenNoError: "Email address",
     errorMessages: emailErrorMessages,
     type: "email",
     field: fields.email,
@@ -38752,7 +38780,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       redirectURL = _ref.redirectURL,
       _ref$redirectText = _ref.redirectText,
       redirectText = _ref$redirectText === void 0 ? "Return" : _ref$redirectText,
-      buttonFlexOverride = _ref.buttonFlexOverride;
+      buttonFlexOverride = _ref.buttonFlexOverride,
+      _ref$hideForwardButto = _ref.hideForwardButton,
+      hideForwardButton = _ref$hideForwardButto === void 0 ? false : _ref$hideForwardButto;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -38792,7 +38822,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     justify: buttonFlexOverride ? buttonFlexOverride : !!backButton ? "space-between" : "flex-end",
     align: "center",
     childGap: "0.75rem"
-  }, backButton, forwardButton)));
+  }, backButton, !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
 };
 
 var backgroundColor$8 = {
@@ -40598,6 +40628,7 @@ exports.FailedIcon = FailedIcon;
 exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.ForgotPasswordIcon = ForgotPasswordIcon$1;
 exports.FormContainer = FormContainer$1;
+exports.FormFooterPanel = FormFooterPanel$1;
 exports.FormInput = FormInput$1;
 exports.FormInputColumn = FormInputColumn;
 exports.FormInputRow = FormInputRow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.24",
+  "version": "4.1.27",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/form-layouts/FormFooterPanel.js

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Cluster } from "../layouts";
+import ButtonWithLink from "../button-with-link";
+import withWindowSize from "../../withWindowSize";
+
+const FormFooterPanel = ({ themeValues, link, linkText }) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
+    <Box
+      background={themeValues.formFooterPanel}
+      minWidth="100%"
+      padding={isMobile ? "1.5rem" : "2rem"}
+    >
+      <Cluster justify="center" align="center">
+        <ButtonWithLink url={link} variant="smallGhost" text={linkText} />
+      </Cluster>
+    </Box>
+  );
+};
+
+export default themeComponent(
+  withWindowSize(FormFooterPanel),
+  "FormFooterPanel",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -6,7 +6,8 @@ import {
   MINESHAFT_GREY,
   DUSTY_GREY,
   GREY_CHATEAU,
-  ATHENS_GREY
+  ATHENS_GREY,
+  INFO_BLUE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
@@ -36,6 +37,9 @@ const hoverFocusStyles = {
   default: `color: #0E506D; outline: none; text-decoration: underline;  `,
   disabled: `color: #6E727E;`
 };
+const formFooterPanel = {
+  default: `${INFO_BLUE}`
+};
 
 export const fallbackValues = {
   linkColor,
@@ -48,5 +52,6 @@ export const fallbackValues = {
   fontSize,
   errorFontSize,
   fontWeight,
-  hoverFocusStyles
+  hoverFocusStyles,
+  formFooterPanel
 };

package/src/components/atoms/form-layouts/index.js

@@ -2,5 +2,12 @@ import FormInput from "./FormInput";
 import FormInputRow from "./FormInputRow";
 import FormInputColumn from "./FormInputColumn";
 import FormContainer from "./FormContainer";
+import FormFooterPanel from "./FormFooterPanel";
 
-export { FormInput, FormInputRow, FormInputColumn, FormContainer };
+export {
+  FormInput,
+  FormInputRow,
+  FormInputColumn,
+  FormContainer,
+  FormFooterPanel
+};

package/src/components/molecules/email-form/EmailForm.js

@@ -25,12 +25,12 @@ const EmailForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const emailFieldErrorMessages = {
-    [required.error]: "Email is required",
+    [required.error]: "Email address is required",
     [isProbablyEmail.error]: "Invalid email address"
   };
 
   return (
-    <FormContainer variant={variant} role="form" aria-label="Email">
+    <FormContainer variant={variant} role="form" aria-label="Email address">
       {guestCheckout && (
         <Paragraph margin="0 0 1.125rem 0">
           If desired, you can create a wallet later for faster checkout
@@ -38,7 +38,7 @@ const EmailForm = ({
       )}
       <FormInputColumn>
         <FormInput
-          labelTextWhenNoError="Email"
+          labelTextWhenNoError="Email address"
           errorMessages={emailFieldErrorMessages}
           type="email"
           field={fields.email}

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -14,13 +14,13 @@ const ForgotPasswordForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const EmailErrorMessages = {
-    [required.error]: "Email is required",
-    [isProbablyEmail.error]: "Email is not valid"
+    [required.error]: "Email address is required",
+    [isProbablyEmail.error]: "Email address is not valid"
   };
 
   return (
     <FormInput
-      labelTextWhenNoError="Email"
+      labelTextWhenNoError="Email address"
       errorMessages={EmailErrorMessages}
       field={fields.email}
       fieldActions={actions.fields.email}

package/src/components/molecules/login-form/LoginForm.js

@@ -14,7 +14,7 @@ const LoginForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const emailErrorMessages = {
-    [required.error]: "Email is required",
+    [required.error]: "Email address is required",
     [isProbablyEmail.error]: "Invalid email address"
   };
   const passwordErrorMessages = {
@@ -23,7 +23,7 @@ const LoginForm = ({
   return (
     <FormInputColumn role="form" aria-label="Login">
       <FormInput
-        labelTextWhenNoError="Email"
+        labelTextWhenNoError="Email address"
         errorMessages={emailErrorMessages}
         type="email"
         field={fields.email}

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -17,7 +17,8 @@ const PaymentButtonBar = ({
   cancelText = "Cancel",
   redirectURL,
   redirectText = "Return",
-  buttonFlexOverride
+  buttonFlexOverride,
+  hideForwardButton = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -80,7 +81,7 @@ const PaymentButtonBar = ({
           childGap="0.75rem"
         >
           {backButton}
-          {forwardButton}
+          {!hideForwardButton && <Fragment>{forwardButton}</Fragment>}
         </Cluster>
       </Box>
     </Fragment>