@thecb/components 9.2.3-beta.3 → 9.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.3-beta.3",
+  "version": "9.2.3",
   "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,8 +95,7 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = null,
-  isRequired = false
+  dataQa = null
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -143,7 +142,6 @@ 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,13 +13,12 @@ const groupId = "props";
 export const checkbox = () => (
   <Checkbox
     variant={select(variantsLabel, variants, defaultValue, groupId)}
-    title={text("title", "Checkbox Title", "props")}
-    name={text("name", "Checkbox Name", "props")}
+    title={text("title", "Checkbox", "props")}
+    name={text("name", "Checkbox", "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/country-dropdown/CountryDropdown.js

@@ -10,8 +10,8 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = null,
-  isRequired = false
+  isRequired = false,
+  dataQa = null
 }) => (
   <FormSelect
     options={options}

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

@@ -30,7 +30,6 @@ const CountryFormWrapper = ({ fields, actions }) => (
       options={options}
       field={fields.country}
       fieldActions={actions.fields.country}
-      isRequired={true}
     />
   </Box>
 );

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

@@ -136,7 +136,6 @@ const Dropdown = ({
   ariaInvalid = false,
   isRequired = false
 }) => {
-  const required = options.required || isRequired;
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
   const [filteredOptions, setFilteredOptions] = useState([]);
@@ -264,13 +263,13 @@ const Dropdown = ({
   useEffect(() => {
     if (autoEraseTypeAhead) {
       clearTimeout(timer);
-      setTimer(setTimeout(() => setInputValue(""), 3000));
+      setTimer(setTimeout(() => setInputValue(""), 20000));
     }
     setFilteredOptions(
       options.filter(
         option =>
-          option.value.toLowerCase().startsWith(inputValue.toLowerCase()) ||
-          option.text.toLowerCase().startsWith(inputValue.toLowerCase())
+          option.value.toLowerCase().match(inputValue.toLowerCase()) ||
+          option.text.toLowerCase().match(inputValue.toLowerCase())
       )
     );
   }, [inputValue]);
@@ -326,7 +325,7 @@ const Dropdown = ({
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
         aria-expanded={isOpen}
-        aria-required={required}
+        aria-required={options.required}
         aria-invalid={ariaInvalid}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
@@ -358,6 +357,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        required={options.required || isRequired}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
@@ -365,8 +365,6 @@ const Dropdown = ({
         tabIndex={0}
         value={inputValue}
         width="100%"
-        /* Non-semantic elements need the aria-* version of the attribute */
-        aria-disabled={disabledValues.includes(inputValue)}
       />
       <IconWrapper open={isOpen} onClick={onClick}>
         <DropdownIcon />
@@ -381,7 +379,6 @@ const Dropdown = ({
             tabIndex={0}
             role="listbox"
             id={`${ariaLabelledby}_listbox`}
-            required={required}
           >
             <Stack childGap="0" as="ul">
               {filteredOptions.map((choice, i) => {

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
 import { ERROR_COLOR } from "../../../constants/colors";
@@ -29,20 +29,6 @@ const FormSelect = ({
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
-  const required = options?.required || isRequired;
-
-  const labelId = useMemo(
-    () => labelTextWhenNoError => createIdFromString(labelTextWhenNoError),
-    [labelTextWhenNoError]
-  );
-
-  const descriptionId = useMemo(
-    () => (field, labelTextWhenNoError) =>
-      field.hasErrors && field.dirty
-        ? labelId(labelTextWhenNoError) + "error-message"
-        : "",
-    [field, labelTextWhenNoError]
-  );
 
   const handleClickAway = event => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -60,8 +46,8 @@ const FormSelect = ({
   return (
     <SelectContainer
       ref={dropdownRef}
-      aria-role="group"
       disabled={disabled}
+      aria-disabled={disabled}
       data-qa={dataQa}
     >
       <Box padding="0" minWidth="100%">
@@ -76,15 +62,18 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
-            id={labelId(labelTextWhenNoError)}
+            id={createIdFromString(labelTextWhenNoError)}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={labelId(labelTextWhenNoError)}
-        ariaDescribedby={descriptionId(field, labelTextWhenNoError)}
+        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
+        ariaDescribedby={createIdFromString(
+          labelTextWhenNoError,
+          "error message"
+        )}
         maxHeight={dropdownMaxHeight}
         widthFitOptions={widthFitOptions}
         hasTitles={hasTitles}
@@ -106,7 +95,7 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
-        isRequired={required}
+        isRequired={isRequired}
       />
       <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (

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

@@ -12,7 +12,7 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   }
 });
 const errorMessages = {
-  [required.error]: "This field is required."
+  [required.error]: "thing is required"
 };
 const options = [
   { value: "", text: "choose name" },
@@ -34,7 +34,7 @@ const story = page({
 const FormWrapper = props => (
   <FormSelect
     autocompleteValue={props.autocompleteValue}
-    labelTextWhenNoError="Form Select Label"
+    labelTextWhenNoError="Form Select"
     errorMessages={errorMessages}
     options={options}
     field={props.fields.thing}

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

@@ -18,7 +18,7 @@ const Circle = styled.div`
   flex-shrink: 0;
   margin-right: 8px;
   width: 1.5rem;
-  height: 1.5rem;
+  height 1.5rem;
   border: ${({ inactiveBorderColor }) => `1px solid ${inactiveBorderColor}`};
   border-radius: 50%;
   box-sizing: border-box;
@@ -30,24 +30,21 @@ const Circle = styled.div`
     display: block;
     background: ${({ activeColor }) => activeColor};
     border-radius: 50%;
-    transform: scale(0);
-  }
+    transform: scale(0);  
+  }  
 `;
 
 const InputAndLabelContainer = styled(Cluster)`
   overflow: visible;
-
   ${HiddenRadioInput}:checked + label ${Circle}:after {
     transform: scale(0.85);
     transition: transform 0.15s;
   }
-
   ${HiddenRadioInput}:checked + label ${Circle} {
-    border: ${({ activeColor }) => "1px solid " + activeColor};
+    border: ${({ activeColor }) => `1px solid ${activeColor};`}
   }
-
-  ${HiddenRadioInput}:focus + label ${Circle} {
-    box-shadow: ${({ activeColor }) => "0px 0px 2px 1px " + activeColor};
+  ${HiddenRadioInput}:focus + label ${Circle} { {
+    box-shadow: ${({ activeColor }) => `0px 0px 2px 1px ${activeColor};`}
   }
 `;
 

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

@@ -15,7 +15,6 @@ const FormStateDropdown = ({
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   const options = [placeholder, ...getOptions(countryCode)];
-
   return (
     <FormSelect
       options={options}

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

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

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

@@ -58,7 +58,6 @@ const AddressForm = ({
           labelTextWhenNoError="Country"
           errorMessages={countryErrorMessages}
           field={fields.country}
-          isRequired={true}
           onChange={value => {
             actions.fields.country.set(value);
             // temporary measure to not dirty fields until
@@ -72,6 +71,7 @@ const AddressForm = ({
           }}
           showErrors={showErrors}
           dataQa="Country"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -92,7 +92,6 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
           dataQa="Address Line 2"
-          isRequired={false}
         />
         <FormInput
           labelTextWhenNoError="City"

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(), []);
@@ -48,6 +49,7 @@ const EmailForm = ({
           isEmail
           autocompleteValue="email"
           dataQa="Email address"
+          isRequired={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox

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

@@ -108,8 +108,8 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={true}
           isNum
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Account number"
@@ -118,7 +118,6 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
-          isRequired={true}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -132,22 +131,22 @@ const PaymentFormACH = ({
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Confirm account number"
           dataQa="Confirm account number"
-          isRequired={true}
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
           isNum
         />
         {allowBankAccountType && (
           <FormSelect
             labelTextWhenNoError="Account type"
-            isRequired={true}
             dataQa="Account type"
             options={[
               { text: "Select account type", value: "" },
@@ -158,6 +157,7 @@ const PaymentFormACH = ({
             showErrors={showErrors}
             errorMessages={accountTypeErrors}
             field={fields.accountType}
+            isRequired={true}
           />
         )}
         {!hideDefaultPayment && (

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

@@ -98,7 +98,6 @@ const PaymentFormCard = ({
         {!hideZipCode && (
           <CountryDropdown
             labelTextWhenNoError="Country"
-            isRequired={true}
             errorMessages={countryErrorMessages}
             field={fields.country}
             onChange={value => {
@@ -125,7 +124,6 @@ const PaymentFormCard = ({
           isRequired={true}
         />
         <FormInput
-          isRequired={true}
           labelTextWhenNoError="Credit card number"
           dataQa="Credit card number"
           errorMessages={creditCardNumberErrors}
@@ -136,6 +134,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          isRequired={true}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}

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}
+          isRequired={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox

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

@@ -7,7 +7,7 @@ import { noop } from "../../../util/general";
 
 const DefaultHeading = styled.div`
   font-size: 0.875rem;
-  color: ${colors.CHARADE_GREY};
+  color: ${colors.CHARADE_GREY}
   margin: 0;
   padding: 8px 0px;
 `;

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

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

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

@@ -66,6 +66,7 @@ export const radioSection = () => {
       openSection={openSection}
       staggeredAnimation={boolean("staggeredAnimation", false, "props")}
       sections={sections}
+      isSectionRequired={true}
     />
   );
 };

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

@@ -20,7 +20,7 @@ const RadioButton = ({
   themeValues,
   ariaLabelledBy = "",
   ariaLabel = null,
-  required = false
+  isRequired = false
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -91,11 +91,10 @@ const RadioButton = ({
         type="radio"
         id={`radio-${name}`}
         disabled={disabled}
-        required={required}
-        aria-required={required}
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
+        required={isRequired}
         {...extraProps}
       />
       <Motion