@thecb/components 9.1.1-beta.3 → 9.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.1-beta.3",
+  "version": "9.1.1",
   "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,8 +64,7 @@ const StyledCheckbox = styled.div`
     focusedStyles,
     errorStyles,
     disabledStyles,
-    disabledCheckedStyles,
-    required = false
+    disabledCheckedStyles
   }) =>
     error
       ? css`
@@ -129,7 +128,6 @@ 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,8 +10,7 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = null,
-  isRequired = false
+  dataQa = null
 }) => (
   <FormSelect
     options={options}
@@ -23,7 +22,6 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
-    required={isRequired}
   />
 );
 export default CountryDropdown;

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

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

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

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

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

@@ -71,7 +71,6 @@ const AddressForm = ({
           }}
           showErrors={showErrors}
           dataQa="Country"
-          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -82,7 +81,6 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line1"
           dataQa="Address"
-          required={true}
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -92,7 +90,6 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
           dataQa="Address Line 2"
-          required={true}
         />
         <FormInput
           labelTextWhenNoError="City"
@@ -103,7 +100,6 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-level2"
           dataQa="City"
-          required={true}
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -114,7 +110,6 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           dataQa="State or Province"
-          required={true}
         />
         <FormInput
           isNum={isUS}
@@ -127,7 +122,6 @@ 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,7 +37,6 @@ const EditNameForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="given-name"
-          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Last Name"
@@ -48,7 +47,6 @@ 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,8 +19,7 @@ const EmailForm = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked,
-  isRequired = false
+  walletCheckboxMarked
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -33,7 +32,7 @@ const EmailForm = ({
   return (
     <FormContainer variant={variant} role="form" aria-label="Email address">
       {guestCheckout && (
-        <Paragraph margin="0 0 1.125rem 0" id="explanation">
+        <Paragraph margin="0 0 1.125rem 0">
           If desired, you can create a wallet later for faster checkout
         </Paragraph>
       )}
@@ -49,7 +48,6 @@ const EmailForm = ({
           isEmail
           autocompleteValue="email"
           dataQa="Email address"
-          required={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox
@@ -57,7 +55,6 @@ 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,7 +76,6 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
-          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -98,7 +97,6 @@ const PaymentFormACH = ({
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Confirm routing number"
@@ -108,7 +106,6 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={true}
           isNum
         />
         <FormInput
@@ -118,7 +115,6 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
-          isRequired={true}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -135,7 +131,6 @@ const PaymentFormACH = ({
         />
         <FormInput
           labelTextWhenNoError="Confirm account number"
-          isRequired={true}
           dataQa="Confirm account number"
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
@@ -162,7 +157,6 @@ 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,7 +110,6 @@ const PaymentFormCard = ({
             }}
             showErrors={showErrors}
             dataQa="Country"
-            isRequired={true}
           />
         )}
         <FormInput
@@ -122,7 +121,6 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
-          required={true}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -135,7 +133,6 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
-          required={true}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -153,7 +150,6 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
-            required={true}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -170,7 +166,6 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
-            required={true}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -189,7 +184,6 @@ 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,8 +19,7 @@ const PhoneForm = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked,
-  isRequired = false
+  walletCheckboxMarked
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -44,7 +43,6 @@ const PhoneForm = ({
           autocompleteValue="tel-national"
           dataQa="Phone number"
           isNum={true}
-          required={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox

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

@@ -29,24 +29,19 @@ 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,
-  role = "radiogroup",
-  isRequired = false
+  fieldActions
 }) => {
   const setValue = value => fieldActions.set(value);
   return (
-    <StyledFieldset $extraStyles={extraStyles}>
+    <StyledFieldset
+      role="radiogroup"
+      aria-labelledby={`radio-group-${groupName}-heading`}
+      $extraStyles={extraStyles}
+    >
       {Heading !== null && Heading}
-      <Stack
-        childGap="4px"
-        role={role}
-        required={isRequired}
-        aria-labelledby={`radio-group-${groupName}-heading`}
-      >
+      <Stack childGap="4px">
         {config.map((c, idx) => (
           <RadioButtonWithLabel
-            required={isRequired}
-            role="radio"
             index={idx}
             key={c.id}
             {...c}

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

@@ -33,8 +33,6 @@ export const radioGroup = () => (
     fieldActions={{
       set: () => noop()
     }}
-    isRequired={true}
-    role="radiogroup"
   />
 );
 

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

@@ -47,10 +47,7 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy,
-  role = "radiogroup",
-  required = false,
-  label = ""
+  ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -107,10 +104,8 @@ const RadioSection = ({
       border={`1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
       extraStyles={containerStyles}
-      role={role}
-      required={required}
     >
-      <Stack childGap="0">
+      <Stack childGap="0" role="radiogroup">
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -129,7 +124,6 @@ const RadioSection = ({
               role="radio"
               aria-checked={openSection === section.id}
               aria-disabled={section.disabled}
-              aria-label={label || section.title}
             >
               <Stack childGap="0">
                 <Box
@@ -183,7 +177,6 @@ const RadioSection = ({
                                 : () => toggleOpenSection(section.id)
                             }
                             tabIndex="-1"
-                            isRequired={required}
                           />
                         </Box>
                       )}

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

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { text, boolean, object } from "@storybook/addon-knobs";
+import { text, boolean } from "@storybook/addon-knobs";
+
 import RadioSection from "./RadioSection";
 import page from "../../../../.storybook/page";
 
@@ -58,16 +59,12 @@ export const radioSection = () => {
   const [openSection, setOpenSection] = useState("");
   return (
     <RadioSection
-      required={true}
-      role="radiogroup"
       isMobile={boolean("isMobile", false, "props")}
       supportsTouch={boolean("isMobile", false, "props")}
       toggleOpenSection={setOpenSection}
-      openSection={text("openSection", "bar", "props")}
+      openSection={openSection}
       staggeredAnimation={boolean("staggeredAnimation", false, "props")}
-      sections={object("sections", sections, "props")}
-      title={text("title", "Example Radio Section", "props")}
-      initiallyOpen={boolean("initiallyOpen", true, "props")}
+      sections={sections}
     />
   );
 };

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

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

package/src/components/templates/center-single/CenterSingle.js

@@ -30,12 +30,7 @@ const CenterSingle = ({
     >
       <Cover centerOverride={isMobile && !centeredMobileContent}>
         {header ? header : <Box padding="0" />}
-        <Box
-          padding="0"
-          minWidth="100%"
-          extraStyles={`z-index: 1;`}
-          role="main"
-        >
+        <Box padding="0" minWidth="100%" extraStyles={`z-index: 1;`}>
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (
@@ -44,6 +39,7 @@ const CenterSingle = ({
           <Center
             maxWidth={isMobile && fullWidthMobile ? "100%" : maxContentWidth}
             intrinsic={!isMobile}
+            role="main"
           >
             {centeredMobileContent ? (
               <Cover minHeight="100%" singleChild>

package/src/components/templates/center-stack/CenterStack.js

@@ -15,7 +15,8 @@ const CenterStack = ({
   maxContentWidth = "36.75rem",
   fullWidthMobile = true,
   content,
-  themeValues
+  themeValues,
+  role = "main"
 }) => {
   const themeContext = useContext(ThemeContext);
   const { isMobile } = themeContext;
@@ -29,7 +30,7 @@ const CenterStack = ({
     >
       <Cover>
         {header ? header : <Box padding="0" />}
-        <Box padding="0" minWidth="100%" role="main">
+        <Box padding="0" minWidth="100%">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (
@@ -38,6 +39,7 @@ const CenterStack = ({
           <Center
             maxWidth={isMobile && fullWidthMobile ? "100%" : maxContentWidth}
             intrinsic={!isMobile}
+            role={role}
           >
             <Cover minHeight="100%" singleChild>
               <Stack childGap={contentSpacing}>{content}</Stack>

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -38,14 +38,13 @@ const CenterSingle = ({
           minWidth="100%"
           minHeight="100%"
           extraStyles={`z-index: 1;`}
-          role="main"
         >
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (
             <Fragment />
           )}
-          <Center maxWidth={maxWidth} gutters={gutters}>
+          <Center maxWidth={maxWidth} gutters={gutters} role="main">
             {content}
           </Center>
         </Box>