@thecb/components 10.8.2-beta.0 → 10.9.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.8.2-beta.0",
+  "version": "10.9.0-beta.1",
   "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,7 +11,9 @@ const CountryDropdown = ({
   showErrors,
   onChange,
   isRequired = false,
-  dataQa = null
+  dataQa = null,
+  htmlFor = null,
+  inputId = null
 }) => (
   <FormSelect
     options={options}
@@ -23,6 +25,8 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
+    htmlFor={htmlFor}
+    inputId={inputId}
     isRequired={isRequired}
   />
 );

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

@@ -135,7 +135,8 @@ const Dropdown = ({
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
   ariaInvalid = false,
-  isRequired = false
+  isRequired = false,
+  inputId = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -329,6 +330,7 @@ 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,6 +117,8 @@ 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);
@@ -154,6 +156,7 @@ const FormInput = ({
                     text-transform: uppercase;
                   }`}
               id={createIdFromString(labelTextWhenNoError)}
+              htmlFor={htmlFor}
             >
               {labelTextWhenNoError}
             </Text>
@@ -173,6 +176,7 @@ const FormInput = ({
                       text-transform: uppercase;
                     }`}
                 id={createIdFromString(labelTextWhenNoError)}
+                htmlFor={htmlFor}
               >
                 {labelTextWhenNoError}
               </Text>
@@ -204,6 +208,7 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
+            id={inputId || props?.id}
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
             aria-describedby={createIdFromString(
               labelTextWhenNoError,
@@ -241,6 +246,7 @@ const FormInput = ({
           />
         ) : (
           <InputField
+            id={inputId || props?.id}
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
             aria-describedby={createIdFromString(
               labelTextWhenNoError,

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

@@ -25,7 +25,9 @@ const FormSelect = ({
   smoothScroll = true, // whether the browser should animate scroll to selected item on first open
   dataQa = null,
   widthFitOptions = false,
-  isRequired = false
+  isRequired = false,
+  htmlFor = null,
+  inputId = null
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -63,12 +65,14 @@ 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,6 +24,8 @@ 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,6 +27,7 @@ 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,6 +46,7 @@ const Box = forwardRef(
       extraStyles,
       srOnly = false,
       dataQa,
+      id,
       children,
       ...rest
     },
@@ -87,6 +88,7 @@ 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,7 +10,9 @@ const FormStateDropdown = ({
   fieldActions,
   showErrors,
   countryCode,
-  isRequired = false
+  isRequired = false,
+  htmlFor = null,
+  inputId = null
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
@@ -24,6 +26,8 @@ const FormStateDropdown = ({
       errorMessages={errorMessages}
       showErrors={showErrors}
       autocompleteValue="address-level1"
+      htmlFor={htmlFor}
+      inputId={inputId}
       isRequired={isRequired}
     />
   );

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

@@ -10,6 +10,8 @@ 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,6 +70,8 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
+          htmlFor="country-name"
+          inputId="country-name"
           dataQa="Country"
           isRequired={true}
         />
@@ -81,6 +83,8 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line1"
+          htmlFor="address-line1"
+          inputId="address-line1"
           dataQa="Address"
           isRequired={true}
         />
@@ -91,6 +95,8 @@ 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
@@ -101,6 +107,8 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-level2"
+          htmlFor="city"
+          inputId="city"
           dataQa="City"
           isRequired={true}
         />
@@ -112,6 +120,9 @@ 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}
         />
@@ -125,6 +136,8 @@ 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}
         />

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -260,6 +260,7 @@ const PaymentDetails = ({
   // end partial void section
   isLoading = false,
   isError = false,
+  multiCartEnabled = false,
   agencyDisplayName
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
@@ -291,7 +292,7 @@ const PaymentDetails = ({
   ));
   const agencySubheading = (
     <>
-      {agencyDisplayName && (
+      {multiCartEnabled && agencyDisplayName && (
         <Cluster
           justify="space-between"
           align="center"

package/src/components/molecules/payment-details/PaymentDetails.stories.js

@@ -160,6 +160,7 @@ export const paymentDetails = () => (
     collapsibleOnMobile={boolean("collapsibleOnMobile", false, "props")}
     initiallyOpen={boolean("initiallyOpen", true, "props")}
     hideTitle={boolean("hideTitle", false, "props")}
+    multiCartEnabled={true}
     agencyDisplayName="Office of Charitable Trust"
   />
 );