@thecb/components 9.3.0-beta.0 → 9.3.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.3.0-beta.0",
+  "version": "9.3.0-beta.2",
   "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,8 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = null
+  dataQa = null,
+  isRequired = false
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -142,6 +143,7 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
+            aria-required={isRequired}
           >
             <CheckboxIcon
               viewBox="0 0 24 24"

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

@@ -13,12 +13,13 @@ const groupId = "props";
 export const checkbox = () => (
   <Checkbox
     variant={select(variantsLabel, variants, defaultValue, groupId)}
-    title={text("title", "Checkbox", "props")}
-    name={text("name", "Checkbox", "props")}
+    title={text("title", "Checkbox Title", "props")}
+    name={text("name", "Checkbox Name", "props")}
     checked={boolean("checked", false, "props")}
     error={boolean("error", false, "props")}
     disabled={boolean("disabled", false, "props")}
     focused={boolean("focused", false, "props")}
+    isRequired={boolean("isRequired", true, "props")}
   />
 );
 

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

@@ -29,6 +29,7 @@ const FormSelect = ({
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const required = options?.required || isRequired;
 
   const labelId = useMemo(
     () => labelTextWhenNoError => createIdFromString(labelTextWhenNoError),
@@ -105,7 +106,7 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
-        required={options?.required}
+        isRequired={required}
       />
       <Stack direction="row" justify="space-between">
         <Text

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

@@ -25,7 +25,7 @@ const FormStateDropdown = ({
       errorMessages={errorMessages}
       showErrors={showErrors}
       autocompleteValue="address-level1"
-      isRequired={options?.required || isRequired}
+      isRequired={isRequired}
     />
   );
 };

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

@@ -39,6 +39,7 @@ const FormWrapper = ({
     countryCode={countryCode}
     labelTextWhenNoError={labelTextWhenNoError}
     showErrors={showErrors}
+    isRequired={true}
   />
 );
 

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

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

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
@@ -132,6 +136,7 @@ const PaymentFormACH = ({
         <FormInput
           labelTextWhenNoError="Confirm account number"
           dataQa="Confirm account number"
+          isRequired={true}
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
           fieldActions={actions.fields.confirmAccountNumber}
@@ -142,6 +147,7 @@ const PaymentFormACH = ({
         {allowBankAccountType && (
           <FormSelect
             labelTextWhenNoError="Account type"
+            isRequired={true}
             dataQa="Account type"
             options={[
               { text: "Select account type", value: "" },
@@ -182,6 +188,7 @@ const PaymentFormACH = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
+                  isRequired={true}
                 />
               </Cover>
             )}

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

@@ -122,6 +122,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -134,6 +135,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          isRequired={true}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -151,6 +153,7 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
+            isRequired={true}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -167,6 +170,7 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
+            isRequired={true}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -185,6 +189,7 @@ const PaymentFormCard = ({
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
               autocompleteValue="billing postal-code"
+              isRequired={true}
             />
           </Box>
         )}
@@ -206,6 +211,7 @@ const PaymentFormCard = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
+                  isRequired={true}
                 />
               </Cover>
             )}

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

@@ -177,6 +177,7 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
+                            required={section?.required}
                           />
                         </Box>
                       )}
@@ -197,7 +198,7 @@ const RadioSection = ({
                       <Cluster
                         childGap="0.5rem"
                         aria-label={section?.rightIconsLabel || null}
-                        role={section?.rightIconsRole || null}
+                        role={section?.rightIconsRole || "group"}
                       >
                         {section.rightIcons.map(icon => (
                           <RightIcon

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

@@ -49,9 +49,10 @@ const sections = [
     title: "New Card",
     content: <p>The form to add a credit card would go here.</p>,
     rightIconsLabel: cardIconsLabel,
-    rightIcons: cardIcons
+    rightIcons: cardIcons,
+    required: true
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div> },
+  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
   { id: "baz", title: "Baz", content: <div>Content 2</div> }
 ];
 

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

@@ -19,7 +19,8 @@ const RadioButton = ({
   ariaDescribedBy = "",
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null
+  ariaLabel = null,
+  required = false
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -90,6 +91,8 @@ const RadioButton = ({
         type="radio"
         id={`radio-${name}`}
         disabled={disabled}
+        required={required}
+        aria-required={required}
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"

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

@@ -22,6 +22,7 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
+          isRequired={true}
         />
         <Box padding="0 0 0 58px">
           <Stack>

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

@@ -57,6 +57,7 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
+              isRequired={true}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>