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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.0.0-beta.4",
+  "version": "9.0.0-beta.6",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/checkbox/Checkbox.js

@@ -95,7 +95,7 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = "Checkbox Label"
+  dataQa = null
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -130,6 +130,7 @@ const Checkbox = ({
             aria-describedby={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
+            role="checkbox"
             error={error}
             disabled={disabled}
             checked={checked}

package/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -10,14 +10,14 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = "Country Dropdown"
+  dataQa = null
 }) => (
   <FormSelect
     options={options}
     field={field}
     fieldActions={fieldActions}
     labelTextWhenNoError={labelTextWhenNoError}
-    dataQa={dataQa}
+    dataQa={dataQa || "CountryDropdown"}
     errorMessages={errorMessages}
     showErrors={showErrors}
     onChange={onChange}

package/src/components/atoms/display-box/DisplayBox.js

@@ -4,12 +4,7 @@ import { fallbackValues } from "./DisplayBox.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { RED } from "../../../constants/colors";
 
-const DisplayBox = ({
-  children,
-  themeValues,
-  showError,
-  dataQa = "DisplayBox"
-}) => (
+const DisplayBox = ({ children, themeValues, showError, dataQa = null }) => (
   <Box padding="0.5rem 0 1.5rem 0">
     <Box
       padding="1.5rem"

package/src/components/atoms/dropdown/Dropdown.js

@@ -290,13 +290,15 @@ const Dropdown = ({
         as="input"
         aria-multiline="false"
         autoComplete={autocompleteValue}
-        aria-controls={`${createIdFromString(ariaLabelledby)}_listbox`}
+        aria-controls={`${ariaLabelledby}_listbox`}
         aria-activedescendant="focused_option"
         aria-owns={`${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"
@@ -307,6 +309,7 @@ const Dropdown = ({
             ? themeValues.selectedColor
             : GREY_CHATEAU
         }
+        dataQa={placeholder}
         extraStyles={
           disabled
             ? `${inputPlaceholderTextStyle}${inputDisabledStyle}`
@@ -326,6 +329,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        required={options.required}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
@@ -333,10 +337,6 @@ const Dropdown = ({
         tabIndex={0}
         value={inputValue}
         width="100%"
-        dataQa={placeholder}
-        required={options.required}
-        aria-required={options.required}
-        aria-invalid={ariaInvalid}
       />
       <IconWrapper open={isOpen} onClick={onClick}>
         <DropdownIcon />
@@ -384,7 +384,6 @@ const Dropdown = ({
                     themeValues={themeValues}
                     title={hasTitles ? choice.text : null}
                     onFocus={() => setFocusedRef(optionRefs.current[i])}
-                    role="option"
                   >
                     <Text
                       variant="p"

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

@@ -219,7 +219,7 @@ const FormInput = ({
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            data-qa={dataQa || labelTextWhenNoError}
+            data-qa={dataQa}
             autoComplete={autocompleteValue}
             {...props}
           />
@@ -245,7 +245,7 @@ const FormInput = ({
             background={background}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            data-qa={dataQa || labelTextWhenNoError}
+            data-qa={dataQa}
             autoComplete={autocompleteValue}
             {...props}
           />

package/src/components/atoms/form-layouts/index.d.ts

@@ -25,7 +25,7 @@ export interface FormInputProps {
   customHeight?: string;
   autocompleteValue?: string;
   removeFromValue?: RegExp;
-  dataQa?: string;
+  dataQa?: string | null;
 }
 
 export const FormInput: React.FC<Expand<FormInputProps> &

package/src/components/atoms/form-select/FormSelect.js

@@ -21,9 +21,9 @@ const FormSelect = ({
   disabled,
   themeValues,
   hasTitles = false,
-  autocompleteValue = "", // browser autofill value, like country-name or address-level1 for state
+  autocompleteValue = null, // browser autofill value, like country-name
   smoothScroll = true, // whether the browser should animate scroll to selected item on first open
-  dataQa = "FormSelect"
+  dataQa = null
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -42,7 +42,12 @@ const FormSelect = ({
   });
 
   return (
-    <SelectContainer ref={dropdownRef} disabled={disabled} data-qa={dataQa}>
+    <SelectContainer
+      ref={dropdownRef}
+      disabled={disabled}
+      aria-disabled={disabled}
+      data-qa={dataQa}
+    >
       <Box padding="0" minWidth="100%">
         <Cluster justify="space-between" align="center">
           <Text
@@ -62,7 +67,7 @@ const FormSelect = ({
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={labelTextWhenNoError}
+        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
         ariaDescribedBy={createIdFromString(
           labelTextWhenNoError,
           "error message"

package/src/components/atoms/form-select/index.d.ts

@@ -22,7 +22,7 @@ export interface FormSelectProps {
   hasTitles?: boolean;
   autocompleteValue?: string;
   smoothScroll?: boolean;
-  dataQa?: string;
+  dataQa?: string | null;
 }
 
 export const FormSelect: React.FC<Expand<FormSelectProps> &

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -10,8 +10,7 @@ const FormStateDropdown = ({
   fieldActions,
   showErrors,
   countryCode,
-  autocompleteValue = "administrative-area",
-  dataQa = "StateProvinceDropdown"
+  autocompleteValue = null
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
@@ -24,9 +23,7 @@ const FormStateDropdown = ({
       labelTextWhenNoError={labelTextWhenNoError}
       errorMessages={errorMessages}
       showErrors={showErrors}
-      aria-invalid={!!errorMessages?.length}
       autocompleteValue={autocompleteValue}
-      dataQa={dataQa}
     />
   );
 };

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -17,7 +17,7 @@ const AccountAndRoutingModal = ({
   content,
   imageType,
   themeValues,
-  dataQa = "AccountAndRoutingModal"
+  dataQa = null
 }) => (
   <Modal
     modalOpen={isOpen}

package/src/components/molecules/address-form/AddressForm.js

@@ -20,7 +20,8 @@ const AddressForm = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  dataQa = null
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -46,7 +47,12 @@ const AddressForm = ({
   const isUS = fields.country.rawValue === "US";
 
   return (
-    <FormContainer variant={variant} role="form" aria-label="Address">
+    <FormContainer
+      variant={variant}
+      role="form"
+      aria-label="Address"
+      dataQa={dataQa}
+    >
       <FormInputColumn>
         <CountryDropdown
           labelTextWhenNoError="Country"

package/src/components/molecules/link-card/index.d.ts

@@ -5,7 +5,7 @@ export interface LinkCardProps {
   variant?: string; // "default" is only one
   title?: string; // title
   subtitle?: string; // beneath title
-  themeValues?: any;
+  themeValues?: object;
   showLeft?: boolean;
   leftContent?: JSX.Element;
   showRight?: boolean;

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -10,12 +10,11 @@ const TermsAndConditionsControlV1 = ({
   html,
   terms,
   error = false,
-  linkVariant,
-  dataQa = "TermsAndConditionsControlV1"
+  linkVariant
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
-    <DisplayBox dataQ={dataQa}>
+    <DisplayBox dataQa="TermsAndConditionsControlV1">
       <Stack>
         <Checkbox
           name="terms"

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -26,8 +26,7 @@ const TermsAndConditionsControlV2 = ({
   modalVariant = "default",
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
-  modalTitle = "Terms and Conditions",
-  dataQa = "TermsAndConditionsControlV2"
+  modalTitle = "Terms and Conditions"
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -46,7 +45,7 @@ const TermsAndConditionsControlV2 = ({
       background={displayInline ? "transparent" : containerBackground}
       boxShadow={displayInline ? "none" : standardBoxShadow}
       borderRadius={displayInline ? "0" : "4px"}
-      dataQa={dataQa}
+      dataQa="TermsAndConditionsControlV2"
     >
       <Stack childGap="0">
         {html && <Box padding="0">{html}</Box>}