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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.3.0-beta.1",
+  "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/state-province-dropdown/StateProvinceDropdown.stories.js

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

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"