@thecb/components 9.0.0-beta.4 → 9.0.0-beta.5

package/dist/index.d.ts

@@ -457,7 +457,7 @@ interface FormInputProps {
   customHeight?: string;
   autocompleteValue?: string;
   removeFromValue?: RegExp;
-  dataQa?: string;
+  dataQa?: string | null;
 }
 
 declare const FormInput: React.FC<Expand<FormInputProps> &
@@ -478,7 +478,7 @@ interface FormSelectProps {
   hasTitles?: boolean;
   autocompleteValue?: string;
   smoothScroll?: boolean;
-  dataQa?: string;
+  dataQa?: string | null;
 }
 
 declare const FormSelect: React.FC<Expand<FormSelectProps> &

package/dist/index.esm.js

@@ -22107,7 +22107,7 @@ var Checkbox = function Checkbox(_ref4) {
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
       _ref4$dataQa = _ref4.dataQa,
-      dataQa = _ref4$dataQa === void 0 ? "Checkbox Label" : _ref4$dataQa;
+      dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22150,6 +22150,7 @@ var Checkbox = function Checkbox(_ref4) {
     "aria-invalid": error,
     "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }), /*#__PURE__*/React.createElement(StyledCheckbox, {
+    role: "checkbox",
     error: error,
     disabled: disabled,
     checked: checked,
@@ -23986,17 +23987,20 @@ var Dropdown = function Dropdown(_ref8) {
     as: "input",
     "aria-multiline": "false",
     autoComplete: autocompleteValue,
-    "aria-controls": "".concat(createIdFromString(ariaLabelledby), "_listbox"),
+    "aria-controls": "".concat(ariaLabelledby, "_listbox"),
     "aria-activedescendant": "focused_option",
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
+    "aria-required": options.required,
+    "aria-invalid": ariaInvalid,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
+    dataQa: placeholder,
     extraStyles: disabled ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle) : inputPlaceholderTextStyle,
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     isOpen: isOpen,
@@ -24012,17 +24016,14 @@ var Dropdown = function Dropdown(_ref8) {
     },
     padding: "12px",
     placeholder: getSelection(),
+    required: options.required,
     role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
     type: "text",
     tabIndex: 0,
     value: inputValue,
-    width: "100%",
-    dataQa: placeholder,
-    required: options.required,
-    "aria-required": options.required,
-    "aria-invalid": ariaInvalid
+    width: "100%"
   }), /*#__PURE__*/React.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24064,8 +24065,7 @@ var Dropdown = function Dropdown(_ref8) {
       title: hasTitles ? choice.text : null,
       onFocus: function onFocus() {
         return setFocusedRef(optionRefs.current[i]);
-      },
-      role: "option"
+      }
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
@@ -24174,11 +24174,11 @@ var FormSelect = function FormSelect(_ref) {
       _ref$hasTitles = _ref.hasTitles,
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
       _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? "" : _ref$autocompleteValu,
+      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu,
       _ref$smoothScroll = _ref.smoothScroll,
       smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "FormSelect" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24202,6 +24202,7 @@ var FormSelect = function FormSelect(_ref) {
   return /*#__PURE__*/React.createElement(SelectContainer, {
     ref: dropdownRef,
     disabled: disabled,
+    "aria-disabled": disabled,
     "data-qa": dataQa
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -24217,7 +24218,7 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
-    ariaLabelledby: labelTextWhenNoError,
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
     ariaDescribedBy: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
@@ -25007,13 +25008,13 @@ var CountryDropdown = function CountryDropdown(_ref) {
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "Country Dropdown" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React.createElement(FormSelect$1, {
     options: options,
     field: field,
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
-    dataQa: dataQa,
+    dataQa: dataQa || "CountryDropdown",
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
@@ -25165,7 +25166,7 @@ var DisplayBox = function DisplayBox(_ref) {
       themeValues = _ref.themeValues,
       showError = _ref.showError,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "DisplayBox" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0.5rem 0 1.5rem 0"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -37949,9 +37950,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       showErrors = _ref.showErrors,
       countryCode = _ref.countryCode,
       _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? "administrative-area" : _ref$autocompleteValu,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "StateProvinceDropdown" : _ref$dataQa;
+      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React.createElement(FormSelect$1, {
@@ -37961,9 +37960,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    "aria-invalid": !!(errorMessages !== null && errorMessages !== void 0 && errorMessages.length),
-    autocompleteValue: autocompleteValue,
-    dataQa: dataQa
+    autocompleteValue: autocompleteValue
   });
 };
 
@@ -40355,7 +40352,9 @@ var AddressForm = function AddressForm(_ref) {
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
-      walletCheckboxMarked = _ref.walletCheckboxMarked;
+      walletCheckboxMarked = _ref.walletCheckboxMarked,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   if (clearOnDismount) {
     useEffect$1(function () {
@@ -40379,7 +40378,8 @@ var AddressForm = function AddressForm(_ref) {
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
-    "aria-label": "Address"
+    "aria-label": "Address",
+    dataQa: dataQa
   }, /*#__PURE__*/React.createElement(FormInputColumn, null, /*#__PURE__*/React.createElement(CountryDropdown, {
     labelTextWhenNoError: "Country",
     errorMessages: countryErrorMessages,
@@ -48528,7 +48528,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       imageType = _ref.imageType,
       themeValues = _ref.themeValues,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "AccountAndRoutingModal" : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
   return /*#__PURE__*/React.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -48677,9 +48677,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "TermsAndConditionsControlV1" : _ref$dataQa;
+      linkVariant = _ref.linkVariant;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -48687,7 +48685,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       toggleShowTerms = _useState2[1];
 
   return /*#__PURE__*/React.createElement(DisplayBox$1, {
-    dataQ: dataQa
+    dataQa: "TermsAndConditionsControlV1"
   }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "terms",
     title: "Terms and Conditions",
@@ -48770,9 +48768,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$checkboxMargin = _ref.checkboxMargin,
       checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
       _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? "TermsAndConditionsControlV2" : _ref$dataQa;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -48795,7 +48791,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     background: displayInline ? "transparent" : containerBackground,
     boxShadow: displayInline ? "none" : standardBoxShadow,
     borderRadius: displayInline ? "0" : "4px",
-    dataQa: dataQa
+    dataQa: "TermsAndConditionsControlV2"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, html && /*#__PURE__*/React.createElement(Box, {