@thecb/components 9.1.0 → 9.1.1-beta.0

package/package.json

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

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

@@ -64,7 +64,8 @@ const StyledCheckbox = styled.div`
     focusedStyles,
     errorStyles,
     disabledStyles,
-    disabledCheckedStyles
+    disabledCheckedStyles,
+    required = false
   }) =>
     error
       ? css`
@@ -128,6 +129,7 @@ const Checkbox = ({
             tabIndex="-1"
             aria-invalid={error}
             aria-describedby={error ? `${name}-error-message` : ""}
+            required={required}
           />
           <StyledCheckbox
             role="checkbox"

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

@@ -10,7 +10,8 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = null
+  dataQa = null,
+  isRequired = false
 }) => (
   <FormSelect
     options={options}
@@ -22,6 +23,7 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
+    required={isRequired}
   />
 );
 export default CountryDropdown;

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

@@ -55,9 +55,14 @@ const InputField = styled.input`
 `;
 
 // eslint-disable-next-line no-unused-vars
-const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
-  <FormattedInput {...props} />
-))`
+const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => {
+  const { isRequired } = props;
+  return (
+    <FormattedInput
+      {...(isRequired ? { ...props, required: true } : { ...props })}
+    />
+  );
+})`
   border: 1px solid
     ${({ field, showErrors, themeValues }) =>
       (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
@@ -116,6 +121,7 @@ const FormInput = ({
   extraStyles,
   removeFromValue, // regex of characters to remove before setting value
   dataQa = null,
+  isRequired = false,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -221,6 +227,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            required={isRequired}
             {...props}
           />
         ) : (
@@ -247,6 +254,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            required={isRequired}
             {...props}
           />
         )}

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js

@@ -59,7 +59,8 @@ const RadioButtonWithLabel = ({
   index,
   handleChange = noop, // optional, for custom event handling in ingesting app
   field,
-  config
+  config,
+  required = false
 }) => {
   const getDefaultChecked = (value, idx) => {
     const selectionExistsInConfig = config
@@ -91,6 +92,7 @@ const RadioButtonWithLabel = ({
           handleChange(e);
         }}
         defaultChecked={getDefaultChecked(value, index)}
+        required={required}
       />
       <Text
         as="label"

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

@@ -71,6 +71,7 @@ const AddressForm = ({
           }}
           showErrors={showErrors}
           dataQa="Country"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -81,6 +82,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line1"
           dataQa="Address"
+          required={true}
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -90,6 +92,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
           dataQa="Address Line 2"
+          required={true}
         />
         <FormInput
           labelTextWhenNoError="City"
@@ -100,6 +103,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-level2"
           dataQa="City"
+          required={true}
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -110,6 +114,7 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           dataQa="State or Province"
+          required={true}
         />
         <FormInput
           isNum={isUS}
@@ -122,6 +127,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="postal-code"
           dataQa="Zip code"
+          required={true}
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/edit-name-form/EditNameForm.js

@@ -37,6 +37,7 @@ const EditNameForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="given-name"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Last Name"
@@ -47,6 +48,7 @@ const EditNameForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="family-name"
+          isRequired={true}
         />
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/email-form/EmailForm.js

@@ -19,7 +19,8 @@ const EmailForm = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  isRequired = false
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -32,7 +33,7 @@ const EmailForm = ({
   return (
     <FormContainer variant={variant} role="form" aria-label="Email address">
       {guestCheckout && (
-        <Paragraph margin="0 0 1.125rem 0">
+        <Paragraph margin="0 0 1.125rem 0" id="explanation">
           If desired, you can create a wallet later for faster checkout
         </Paragraph>
       )}
@@ -48,6 +49,7 @@ const EmailForm = ({
           isEmail
           autocompleteValue="email"
           dataQa="Email address"
+          required={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox
@@ -55,6 +57,7 @@ const EmailForm = ({
             title="Save email address to wallet"
             checked={walletCheckboxMarked}
             onChange={saveToWallet}
+            aria-describedby="explanation"
           />
         )}
       </FormInputColumn>

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -76,6 +76,7 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -97,6 +98,7 @@ const PaymentFormACH = ({
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Confirm routing number"
@@ -106,6 +108,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
           isNum
         />
         <FormInput
@@ -115,6 +118,7 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
+          isRequired={true}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -131,6 +135,7 @@ const PaymentFormACH = ({
         />
         <FormInput
           labelTextWhenNoError="Confirm account number"
+          isRequired={true}
           dataQa="Confirm account number"
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
@@ -157,6 +162,7 @@ const PaymentFormACH = ({
         {!hideDefaultPayment && (
           <Checkbox
             title="Save as Default Payment Method"
+            required={true}
             dataQa="default-payment-ach"
             name="default-payment-ach"
             onChange={toggleCheckbox}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -110,6 +110,7 @@ const PaymentFormCard = ({
             }}
             showErrors={showErrors}
             dataQa="Country"
+            isRequired={true}
           />
         )}
         <FormInput
@@ -121,6 +122,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
+          required={true}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -133,6 +135,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          required={true}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -150,6 +153,7 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
+            required={true}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -166,6 +170,7 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
+            required={true}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -184,6 +189,7 @@ const PaymentFormCard = ({
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
               autocompleteValue="billing postal-code"
+              required={true}
             />
           </Box>
         )}

package/src/components/molecules/phone-form/PhoneForm.js

@@ -19,7 +19,8 @@ const PhoneForm = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  isRequired = false
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -43,6 +44,7 @@ const PhoneForm = ({
           autocompleteValue="tel-national"
           dataQa="Phone number"
           isNum={true}
+          required={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/radio-group/RadioGroup.js

@@ -29,7 +29,8 @@ const RadioGroup = ({
   handleChange = noop, // optional, for custom event handling in ingesting app
   // redux-freeform props - this is similar to how FormInput works, duplicated because the radio input is hidden for styling overrides
   field,
-  fieldActions
+  fieldActions,
+  isRequired = false
 }) => {
   const setValue = value => fieldActions.set(value);
   return (
@@ -42,6 +43,7 @@ const RadioGroup = ({
       <Stack childGap="4px">
         {config.map((c, idx) => (
           <RadioButtonWithLabel
+            required={isRequired}
             index={idx}
             key={c.id}
             {...c}

package/src/components/molecules/radio-section/RadioSection.js

@@ -177,6 +177,7 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
+                            isRequired={true}
                           />
                         </Box>
                       )}

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -19,7 +19,8 @@ const RadioButton = ({
   ariaDescribedBy = "",
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null
+  ariaLabel = null,
+  isRequired = false
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -91,6 +92,7 @@ const RadioButton = ({
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
+        required={isRequired}
         {...extraProps}
       />
       <Motion