@thecb/components 4.1.19 → 4.1.21

package/dist/index.cjs.js

@@ -14181,9 +14181,7 @@ var WalletIcon = function WalletIcon(_ref) {
   var themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "299",
-    height: "151",
-    viewBox: "0 0 299 151"
+    viewBox: "0 0 299 160"
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -20595,6 +20593,8 @@ var FormInput = function FormInput(_ref13) {
       errorMessages = _ref13.errorMessages,
       _ref13$isNum = _ref13.isNum,
       isNum = _ref13$isNum === void 0 ? false : _ref13$isNum,
+      _ref13$isEmail = _ref13.isEmail,
+      isEmail = _ref13$isEmail === void 0 ? false : _ref13$isEmail,
       _ref13$helperModal = _ref13.helperModal,
       helperModal = _ref13$helperModal === void 0 ? false : _ref13$helperModal,
       field = _ref13.field,
@@ -20607,7 +20607,7 @@ var FormInput = function FormInput(_ref13) {
       background = _ref13.background,
       customHeight = _ref13.customHeight,
       extraStyles = _ref13.extraStyles,
-      props = _objectWithoutProperties(_ref13, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
+      props = _objectWithoutProperties(_ref13, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -20674,7 +20674,7 @@ var FormInput = function FormInput(_ref13) {
     type: type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
-    inputMode: isNum ? "numeric" : "",
+    inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     formatter: formatter,
     showErrors: showErrors,
@@ -20690,7 +20690,7 @@ var FormInput = function FormInput(_ref13) {
     type: type === "password" && showPassword ? "text" : type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
-    inputMode: isNum ? "numeric" : "",
+    inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
@@ -35002,7 +35002,8 @@ var EmailForm = function EmailForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isEmail: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
@@ -35053,7 +35054,8 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isEmail: true
   });
 };
 
@@ -35156,7 +35158,8 @@ var LoginForm = function LoginForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isEmail: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -38546,6 +38549,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
       },
       placeholder: "$0.00",
       formatter: moneyFormat,
+      isNum: true,
       decorator: /*#__PURE__*/React__default.createElement(Text$1, {
         variant: "p"
       }, "Amount owed:", "  ", /*#__PURE__*/React__default.createElement(Text$1, {
@@ -39116,6 +39120,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
     showErrors: showErrors,
+    isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
@@ -39137,13 +39142,15 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
     errorMessages: accountNumberErrors,
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
+    isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
@@ -39165,7 +39172,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
     options: [{
@@ -39300,7 +39308,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     formatter: creditCardFormat,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: "20rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
@@ -39312,13 +39321,15 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     formatter: expirationDateFormat,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     errorMessages: cvvErrors,
     field: fields.cvv,
     fieldActions: actions.fields.cvv,
     showErrors: showErrors,
+    isNum: true,
     background: checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX" ? "/AmexCVVHint.svg" : "/CVVHint.svg",
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
@@ -39417,7 +39428,8 @@ var PhoneForm = function PhoneForm(_ref) {
     formatter: src_2(phoneFormats, formatDelimiter),
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -39698,7 +39710,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "email"
+    type: "email",
+    isEmail: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,

package/package.json

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

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

@@ -85,6 +85,7 @@ const FormInput = ({
   labelTextWhenNoError = "",
   errorMessages,
   isNum = false,
+  isEmail = false,
   helperModal = false,
   field,
   fieldActions,
@@ -176,7 +177,7 @@ const FormInput = ({
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
-            inputMode={isNum ? "numeric" : ""}
+            inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             formatter={formatter}
             showErrors={showErrors}
@@ -193,7 +194,7 @@ const FormInput = ({
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
-            inputMode={isNum ? "numeric" : ""}
+            inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             showErrors={showErrors}
             data-qa={labelTextWhenNoError}

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

@@ -4,12 +4,7 @@ import { themeComponent } from "../../../util/themeUtils";
 
 const WalletIcon = ({ themeValues }) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="299"
-      height="151"
-      viewBox="0 0 299 151"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299 160">
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g>
           <path

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

@@ -45,6 +45,7 @@ const EmailForm = ({
           fieldActions={actions.fields.email}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isEmail
         />
         {showWalletCheckbox && (
           <Checkbox

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

@@ -26,6 +26,7 @@ const ForgotPasswordForm = ({
       fieldActions={actions.fields.email}
       showErrors={showErrors}
       onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+      isEmail
     />
   );
 };

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

@@ -30,6 +30,7 @@ const LoginForm = ({
         fieldActions={actions.fields.email}
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        isEmail
       />
       <FormInput
         labelTextWhenNoError="Password"

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -57,6 +57,7 @@ const PartialAmountForm = ({
             style={{ textAlign: "right" }}
             placeholder="$0.00"
             formatter={moneyFormat}
+            isNum
             decorator={
               <Text variant="p">
                 Amount owed:{"  "}

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -77,6 +77,7 @@ const PaymentFormACH = ({
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
+          isNum
           helperModal={() => (
             <AccountAndRoutingModal
               link="What is this?"
@@ -97,6 +98,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         <FormInput
           labelTextWhenNoError="Account number"
@@ -104,6 +106,7 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
+          isNum
           helperModal={() => (
             <AccountAndRoutingModal
               link="What is this?"
@@ -124,6 +127,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         {allowBankAccountType && (
           <FormSelect

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -94,6 +94,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           formatter={creditCardFormat}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         <FormInputRow breakpoint="20rem">
           <FormInput
@@ -104,6 +105,7 @@ const PaymentFormCard = ({
             showErrors={showErrors}
             formatter={expirationDateFormat}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            isNum
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -111,6 +113,7 @@ const PaymentFormCard = ({
             field={fields.cvv}
             fieldActions={actions.fields.cvv}
             showErrors={showErrors}
+            isNum
             background={
               checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX"
                 ? "/AmexCVVHint.svg"

package/src/components/molecules/phone-form/PhoneForm.js

@@ -40,6 +40,7 @@ const PhoneForm = ({
           showErrors={showErrors}
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         {showWalletCheckbox && (
           <Checkbox

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

@@ -76,6 +76,7 @@ const RegistrationForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="email"
+        isEmail
       />
       <FormInput
         labelTextWhenNoError="Password"