@thecb/components 9.2.4-beta.11 → 9.2.4-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +38 -18
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +38 -18
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/dropdown/Dropdown.js +3 -2
- package/src/components/atoms/form-layouts/FormInput.js +3 -0
- package/src/components/atoms/form-select/FormSelect.js +3 -1
- package/src/components/molecules/payment-form-ach/PaymentFormACH.js +6 -0
- package/src/components/molecules/payment-form-card/PaymentFormCard.js +5 -0
- package/src/components/molecules/radio-section/RadioSection.js +5 -1
package/dist/index.cjs.js
CHANGED
|
@@ -23799,7 +23799,9 @@ var Dropdown = function Dropdown(_ref13) {
|
|
|
23799
23799
|
_ref13$smoothScroll = _ref13.smoothScroll,
|
|
23800
23800
|
smoothScroll = _ref13$smoothScroll === void 0 ? true : _ref13$smoothScroll,
|
|
23801
23801
|
_ref13$ariaInvalid = _ref13.ariaInvalid,
|
|
23802
|
-
ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid
|
|
23802
|
+
ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
|
|
23803
|
+
_ref13$isRequired = _ref13.isRequired,
|
|
23804
|
+
isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
|
|
23803
23805
|
|
|
23804
23806
|
var _useState = React.useState(""),
|
|
23805
23807
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -24070,7 +24072,7 @@ var Dropdown = function Dropdown(_ref13) {
|
|
|
24070
24072
|
},
|
|
24071
24073
|
padding: "12px",
|
|
24072
24074
|
placeholder: getSelection(),
|
|
24073
|
-
required: options.required,
|
|
24075
|
+
required: options.required || isRequired,
|
|
24074
24076
|
role: "combobox",
|
|
24075
24077
|
themeValues: themeValues,
|
|
24076
24078
|
title: hasTitles ? getSelection() : null,
|
|
@@ -24238,7 +24240,9 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
24238
24240
|
_ref$dataQa = _ref.dataQa,
|
|
24239
24241
|
dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
|
|
24240
24242
|
_ref$widthFitOptions = _ref.widthFitOptions,
|
|
24241
|
-
widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions
|
|
24243
|
+
widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
|
|
24244
|
+
_ref$isRequired = _ref.isRequired,
|
|
24245
|
+
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
24242
24246
|
|
|
24243
24247
|
var _useState = React.useState(false),
|
|
24244
24248
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -24300,7 +24304,8 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
24300
24304
|
},
|
|
24301
24305
|
disabled: disabled,
|
|
24302
24306
|
autocompleteValue: autocompleteValue,
|
|
24303
|
-
smoothScroll: smoothScroll
|
|
24307
|
+
smoothScroll: smoothScroll,
|
|
24308
|
+
isRequired: isRequired
|
|
24304
24309
|
}), /*#__PURE__*/React__default.createElement(Stack, {
|
|
24305
24310
|
direction: "row",
|
|
24306
24311
|
justify: "space-between"
|
|
@@ -25929,7 +25934,7 @@ var fallbackValues$k = {
|
|
|
25929
25934
|
};
|
|
25930
25935
|
|
|
25931
25936
|
var _excluded$p = ["showErrors", "themeValues"],
|
|
25932
|
-
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
|
|
25937
|
+
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
|
|
25933
25938
|
var InputField = styled__default.input.withConfig({
|
|
25934
25939
|
displayName: "FormInput__InputField",
|
|
25935
25940
|
componentId: "sc-l094r1-0"
|
|
@@ -26016,6 +26021,8 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26016
26021
|
removeFromValue = _ref15.removeFromValue,
|
|
26017
26022
|
_ref15$dataQa = _ref15.dataQa,
|
|
26018
26023
|
dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
|
|
26024
|
+
_ref15$isRequired = _ref15.isRequired,
|
|
26025
|
+
isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
|
|
26019
26026
|
props = _objectWithoutProperties(_ref15, _excluded2);
|
|
26020
26027
|
|
|
26021
26028
|
var _useState = React.useState(false),
|
|
@@ -26102,7 +26109,8 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26102
26109
|
$customHeight: customHeight,
|
|
26103
26110
|
$extraStyles: extraStyles,
|
|
26104
26111
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26105
|
-
autoComplete: autocompleteValue
|
|
26112
|
+
autoComplete: autocompleteValue,
|
|
26113
|
+
required: isRequired
|
|
26106
26114
|
}, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
|
|
26107
26115
|
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
26108
26116
|
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
@@ -26121,7 +26129,8 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26121
26129
|
$customHeight: customHeight,
|
|
26122
26130
|
$extraStyles: extraStyles,
|
|
26123
26131
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26124
|
-
autoComplete: autocompleteValue
|
|
26132
|
+
autoComplete: autocompleteValue,
|
|
26133
|
+
required: isRequired
|
|
26125
26134
|
}, props))), /*#__PURE__*/React__default.createElement(Stack, {
|
|
26126
26135
|
direction: "row",
|
|
26127
26136
|
justify: "space-between",
|
|
@@ -47990,7 +47999,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47990
47999
|
onKeyDown: function onKeyDown(e) {
|
|
47991
48000
|
return e.key === "Enter" && handleSubmit(e);
|
|
47992
48001
|
},
|
|
47993
|
-
autocompleteValue: "name"
|
|
48002
|
+
autocompleteValue: "name",
|
|
48003
|
+
isRequired: true
|
|
47994
48004
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
47995
48005
|
labelTextWhenNoError: "Routing number",
|
|
47996
48006
|
dataQa: "Routing number",
|
|
@@ -48012,7 +48022,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48012
48022
|
},
|
|
48013
48023
|
onKeyDown: function onKeyDown(e) {
|
|
48014
48024
|
return e.key === "Enter" && handleSubmit(e);
|
|
48015
|
-
}
|
|
48025
|
+
},
|
|
48026
|
+
isRequired: true
|
|
48016
48027
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48017
48028
|
labelTextWhenNoError: "Confirm routing number",
|
|
48018
48029
|
dataQa: "Confirm routing number",
|
|
@@ -48023,7 +48034,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48023
48034
|
onKeyDown: function onKeyDown(e) {
|
|
48024
48035
|
return e.key === "Enter" && handleSubmit(e);
|
|
48025
48036
|
},
|
|
48026
|
-
isNum: true
|
|
48037
|
+
isNum: true,
|
|
48038
|
+
isRequired: true
|
|
48027
48039
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48028
48040
|
labelTextWhenNoError: "Account number",
|
|
48029
48041
|
dataQa: "Account number",
|
|
@@ -48045,7 +48057,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48045
48057
|
},
|
|
48046
48058
|
onKeyDown: function onKeyDown(e) {
|
|
48047
48059
|
return e.key === "Enter" && handleSubmit(e);
|
|
48048
|
-
}
|
|
48060
|
+
},
|
|
48061
|
+
isRequired: true
|
|
48049
48062
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48050
48063
|
labelTextWhenNoError: "Confirm account number",
|
|
48051
48064
|
dataQa: "Confirm account number",
|
|
@@ -48056,6 +48069,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48056
48069
|
onKeyDown: function onKeyDown(e) {
|
|
48057
48070
|
return e.key === "Enter" && handleSubmit(e);
|
|
48058
48071
|
},
|
|
48072
|
+
isRequired: true,
|
|
48059
48073
|
isNum: true
|
|
48060
48074
|
}), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
|
|
48061
48075
|
labelTextWhenNoError: "Account type",
|
|
@@ -48073,7 +48087,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48073
48087
|
fieldActions: actions.fields.accountType,
|
|
48074
48088
|
showErrors: showErrors,
|
|
48075
48089
|
errorMessages: accountTypeErrors,
|
|
48076
|
-
field: fields.accountType
|
|
48090
|
+
field: fields.accountType,
|
|
48091
|
+
isRequired: true
|
|
48077
48092
|
}), !hideDefaultPayment && /*#__PURE__*/React__default.createElement(Checkbox$1, {
|
|
48078
48093
|
title: "Save as Default Payment Method",
|
|
48079
48094
|
dataQa: "default-payment-ach",
|
|
@@ -48211,7 +48226,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48211
48226
|
onKeyDown: function onKeyDown(e) {
|
|
48212
48227
|
return e.key === "Enter" && handleSubmit(e);
|
|
48213
48228
|
},
|
|
48214
|
-
autocompleteValue: "cc-name"
|
|
48229
|
+
autocompleteValue: "cc-name",
|
|
48230
|
+
isRequired: true
|
|
48215
48231
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48216
48232
|
labelTextWhenNoError: "Credit card number",
|
|
48217
48233
|
dataQa: "Credit card number",
|
|
@@ -48224,7 +48240,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48224
48240
|
return e.key === "Enter" && handleSubmit(e);
|
|
48225
48241
|
},
|
|
48226
48242
|
isNum: true,
|
|
48227
|
-
autocompleteValue: "cc-number"
|
|
48243
|
+
autocompleteValue: "cc-number",
|
|
48244
|
+
isRequired: true
|
|
48228
48245
|
}), /*#__PURE__*/React__default.createElement(FormInputRow, {
|
|
48229
48246
|
breakpoint: isMobile ? "1000rem" : "21rem",
|
|
48230
48247
|
childGap: isMobile ? "0rem" : "1rem"
|
|
@@ -48242,7 +48259,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48242
48259
|
isNum: true,
|
|
48243
48260
|
removeFromValue: /\// // removes "/" from browser autofill
|
|
48244
48261
|
,
|
|
48245
|
-
autocompleteValue: "cc-exp"
|
|
48262
|
+
autocompleteValue: "cc-exp",
|
|
48263
|
+
isRequired: true
|
|
48246
48264
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48247
48265
|
labelTextWhenNoError: "CVV",
|
|
48248
48266
|
dataQa: "CVV",
|
|
@@ -48255,7 +48273,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48255
48273
|
onKeyDown: function onKeyDown(e) {
|
|
48256
48274
|
return e.key === "Enter" && handleSubmit(e);
|
|
48257
48275
|
},
|
|
48258
|
-
autocompleteValue: "cc-csc"
|
|
48276
|
+
autocompleteValue: "cc-csc",
|
|
48277
|
+
isRequired: true
|
|
48259
48278
|
})), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
|
|
48260
48279
|
padding: isMobile ? "0" : "0 0.5rem 0 0",
|
|
48261
48280
|
width: isMobile ? "100%" : "50%"
|
|
@@ -48271,7 +48290,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48271
48290
|
onKeyDown: function onKeyDown(e) {
|
|
48272
48291
|
return e.key === "Enter" && handleSubmit(e);
|
|
48273
48292
|
},
|
|
48274
|
-
autocompleteValue: "billing postal-code"
|
|
48293
|
+
autocompleteValue: "billing postal-code",
|
|
48294
|
+
isRequired: true
|
|
48275
48295
|
})), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
|
|
48276
48296
|
childGap: "4px",
|
|
48277
48297
|
align: "center"
|
|
@@ -48682,7 +48702,7 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48682
48702
|
extraStyles: containerStyles
|
|
48683
48703
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
48684
48704
|
childGap: "0",
|
|
48685
|
-
role: "radiogroup",
|
|
48705
|
+
"aria-role": "radiogroup",
|
|
48686
48706
|
"aria-required": isSectionRequired
|
|
48687
48707
|
}, sections.filter(function (section) {
|
|
48688
48708
|
return !section.hidden;
|