@thecb/components 10.9.0-beta.3 → 10.9.0-beta.4

package/package.json

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

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

@@ -11,9 +11,7 @@ const CountryDropdown = ({
   showErrors,
   onChange,
   isRequired = false,
-  dataQa = null,
-  htmlFor = null,
-  inputId = null
+  dataQa = null
 }) => (
   <FormSelect
     options={options}
@@ -25,8 +23,6 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
-    htmlFor={htmlFor}
-    inputId={inputId}
     isRequired={isRequired}
   />
 );

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

@@ -135,8 +135,7 @@ const Dropdown = ({
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
   ariaInvalid = false,
-  isRequired = false,
-  inputId = false
+  isRequired = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -330,7 +329,6 @@ const Dropdown = ({
       dataQa={`${ariaLabelledby}-dropdown`}
     >
       <Box
-        id={inputId}
         as="input"
         autoComplete={autocompleteValue}
         aria-controls={`${ariaLabelledby}_listbox`}

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

@@ -117,8 +117,6 @@ const FormInput = ({
   removeFromValue, // regex of characters to remove before setting value
   dataQa = null,
   isRequired = false,
-  htmlFor = null,
-  inputId = null,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -156,7 +154,6 @@ const FormInput = ({
                     text-transform: uppercase;
                   }`}
               id={createIdFromString(labelTextWhenNoError)}
-              htmlFor={htmlFor}
             >
               {labelTextWhenNoError}
             </Text>
@@ -176,7 +173,6 @@ const FormInput = ({
                       text-transform: uppercase;
                     }`}
                 id={createIdFromString(labelTextWhenNoError)}
-                htmlFor={htmlFor}
               >
                 {labelTextWhenNoError}
               </Text>
@@ -208,7 +204,6 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            id={inputId || props?.id}
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
             aria-describedby={createIdFromString(
               labelTextWhenNoError,
@@ -246,7 +241,6 @@ const FormInput = ({
           />
         ) : (
           <InputField
-            id={inputId || props?.id}
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
             aria-describedby={createIdFromString(
               labelTextWhenNoError,

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

@@ -25,9 +25,7 @@ const FormSelect = ({
   smoothScroll = true, // whether the browser should animate scroll to selected item on first open
   dataQa = null,
   widthFitOptions = false,
-  isRequired = false,
-  htmlFor = null,
-  inputId = null
+  isRequired = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -65,14 +63,12 @@ const FormSelect = ({
                 text-transform: uppercase;
               }`}
             id={createIdFromString(labelTextWhenNoError)}
-            htmlFor={htmlFor}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
-        inputId={inputId}
         ariaLabelledby={createIdFromString(labelTextWhenNoError)}
         ariaDescribedby={createIdFromString(
           labelTextWhenNoError,

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

@@ -24,8 +24,6 @@ export interface FormSelectProps {
   smoothScroll?: boolean;
   dataQa?: string | null;
   widthFitOptions?: boolean;
-  htmlFor?: string;
-  inputId?: string;
 }
 
 export const FormSelect: React.FC<Expand<FormSelectProps> &

package/src/components/atoms/layouts/Box.d.ts

@@ -27,7 +27,6 @@ export interface BoxProps {
   extraStyles?: string;
   srOnly?: boolean;
   dataQa?: string;
-  id?: string;
 }
 
 export const Box: React.FC<Expand<BoxProps> &

package/src/components/atoms/layouts/Box.js

@@ -46,7 +46,6 @@ const Box = forwardRef(
       extraStyles,
       srOnly = false,
       dataQa,
-      id,
       children,
       ...rest
     },
@@ -88,7 +87,6 @@ const Box = forwardRef(
       onBlur={onBlur}
       onTouchEnd={onTouchEnd}
       ref={ref}
-      id={id}
       {...rest}
     >
       {children && safeChildren(children, <Fragment />)}

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

@@ -10,9 +10,7 @@ const FormStateDropdown = ({
   fieldActions,
   showErrors,
   countryCode,
-  isRequired = false,
-  htmlFor = null,
-  inputId = null
+  isRequired = false
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
@@ -26,8 +24,6 @@ const FormStateDropdown = ({
       errorMessages={errorMessages}
       showErrors={showErrors}
       autocompleteValue="address-level1"
-      htmlFor={htmlFor}
-      inputId={inputId}
       isRequired={isRequired}
     />
   );

package/src/components/atoms/text/index.d.ts

@@ -10,8 +10,6 @@ export interface TextProps {
   as?: string;
   dataQa?: string;
   variant?: string;
-  htmlFor?: string;
-  inputId?: string;
 }
 
 export const Text: React.FC<Expand<TextProps> &

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

@@ -70,8 +70,6 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
-          htmlFor="country-name"
-          inputId="country-name"
           dataQa="Country"
           isRequired={true}
         />
@@ -83,8 +81,6 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line1"
-          htmlFor="address-line1"
-          inputId="address-line1"
           dataQa="Address"
           isRequired={true}
         />
@@ -95,8 +91,6 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
-          htmlFor="address-line2"
-          inputId="address-line2"
           dataQa="Address Line 2"
         />
         <FormInput
@@ -107,8 +101,6 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-level2"
-          htmlFor="city"
-          inputId="city"
           dataQa="City"
           isRequired={true}
         />
@@ -120,9 +112,6 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocompleteValue="address-level1"
-          htmlFor="stateOrProvince"
-          inputId="stateOrProvince"
           dataQa="State or Province"
           isRequired={true}
         />
@@ -136,8 +125,6 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="postal-code"
-          htmlFor="postal-code"
-          inputId="postal-code"
           dataQa="Zip code"
           isRequired={true}
         />