@thecb/components 8.4.11-beta.9 → 8.4.11

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -92,7 +92,6 @@ const Alert = ({
       borderSize={noBorder ? "0px" : "1px"}
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
-      role="alert"
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

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

@@ -126,7 +126,7 @@ const Checkbox = ({
             onChange={onChange}
             tabIndex="-1"
             aria-invalid={error}
-            aria-describedby={name}
+            aria-describedby={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
             error={error}

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

@@ -9,8 +9,7 @@ const CountryDropdown = ({
   field,
   fieldActions,
   showErrors,
-  onChange,
-  ...rest
+  onChange
 }) => (
   <FormSelect
     options={options}
@@ -21,7 +20,6 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
-    {...rest}
   />
 );
 export default CountryDropdown;

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

@@ -26,8 +26,6 @@ const story = page({
 const CountryFormWrapper = ({ fields, actions }) => (
   <Box minHeight="300px">
     <CountryDropdown
-      aria-label="Country"
-      labelTextWhenNoError="Country"
       errorMessages={errorMessages}
       options={options}
       field={fields.country}

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

@@ -288,13 +288,14 @@ const Dropdown = ({
         as="input"
         aria-multiline="false"
         aria-autocomplete="list"
-        // aria-activedescendant="focused_option"
-        // aria-owns={`${ariaLabelledby}_listbox`}
-        // aria-controls={`${ariaLabelledby}_listbox`}
+        aria-controls={`${ariaLabelledby}_listbox`}
+        aria-activedescendant="focused_option"
+        aria-owns={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
-        autoComplete={autocompleteValue}
+        aria-expanded={isOpen}
+        autocomplete={autocompleteValue}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
         borderSize="1px"
@@ -315,7 +316,6 @@ const Dropdown = ({
         minHeight="48px"
         minWidth="100%"
         name={autocompleteValue}
-        // aria-expanded={isOpen}
         onChange={e => {
           // support autofill and copy/paste
           if (e.target.value !== inputValue) {
@@ -325,6 +325,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
         type="text"
@@ -390,14 +391,14 @@ const Dropdown = ({
                           : MINESHAFT_GREY
                       }
                       extraStyles={`padding-left: 16px; 
-                    cursor: ${
-                      disabledValues.includes(choice.value)
-                        ? "default"
-                        : "pointer"
-                    }; 
-                    white-space: nowrap; 
-                    overflow: hidden; 
-                    text-overflow: ellipsis;`}
+                      cursor: ${
+                        disabledValues.includes(choice.value)
+                          ? "default"
+                          : "pointer"
+                      }; 
+                      white-space: nowrap; 
+                      overflow: hidden; 
+                      text-overflow: ellipsis;`}
                     >
                       {choice.text}
                     </Text>

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

@@ -127,7 +127,7 @@ const FormInput = ({
   };
 
   return (
-    <Stack childGap="0.25rem" aria-live="assertive">
+    <Stack childGap="0.25rem">
       <Box padding="0">
         {helperModal ? (
           <Cluster justify="space-between" align="center">
@@ -194,11 +194,14 @@ const FormInput = ({
           </Box>
         )}
       </Box>
-      <Box padding="0" aria-live="assertive">
+      <Box padding="0">
         {formatter ? (
           <FormattedInputField
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
-            aria-describedby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -215,13 +218,16 @@ const FormInput = ({
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            autoComplete={autocomplete}
             {...props}
           />
         ) : (
           <InputField
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
-            aria-describedby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -238,12 +244,12 @@ const FormInput = ({
             background={background}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            autoComplete={autocomplete}
             {...props}
           />
         )}
       </Box>
-      <Stack direction="row" justify="space-between" role="alert">
+      <Stack direction="row" justify="space-between" aria-live="polite">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}

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

@@ -62,7 +62,10 @@ const FormSelect = ({
       </Box>
       <Dropdown
         ariaLabelledby={createIdFromString(labelTextWhenNoError)}
-        ariaDescribedby={createIdFromString(labelTextWhenNoError)}
+        ariaDescribedby={createIdFromString(
+          labelTextWhenNoError,
+          "error message"
+        )}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
@@ -80,24 +83,25 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
-        required={options.required}
       />
-      <Stack direction="row" justify="space-between" role="alert">
-        <Text
-          color={ERROR_COLOR}
-          variant="pXS"
-          weight={themeValues.fontWeight}
-          extraStyles={`word-break: break-word;
-            font-family: Public Sans;
-            &::first-letter {
-              text-transform: uppercase;
-            }`}
-          id={createIdFromString(labelTextWhenNoError, "error message")}
-        >
-          {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
-            ? errorMessages[field.errors[0]]
-            : ""}
-        </Text>
+      <Stack direction="row" justify="space-between" aria-live="polite">
+        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
+          <Text
+            color={ERROR_COLOR}
+            variant="pXS"
+            weight={themeValues.fontWeight}
+            extraStyles={`word-break: break-word;
+                font-family: Public Sans;
+                &::first-letter {
+                  text-transform: uppercase;
+                }`}
+            id={createIdFromString(labelTextWhenNoError, "error message")}
+          >
+            {errorMessages[field.errors[0]]}
+          </Text>
+        ) : (
+          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
+        )}
       </Stack>
     </SelectContainer>
   );

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

@@ -64,18 +64,15 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
-          aria-label="Country"
         />
         <FormInput
           labelTextWhenNoError="Address"
           errorMessages={street1ErrorMessages}
-          required={true}
           field={fields.street1}
           fieldActions={actions.fields.street1}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocomplete="address-line1"
-          aria-label="Address Line 1"
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -84,18 +81,15 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocomplete="address-line2"
-          aria-label="Address Line 2"
         />
         <FormInput
           labelTextWhenNoError="City"
-          required={true}
           errorMessages={cityErrorMessages}
           field={fields.city}
           fieldActions={actions.fields.city}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="city"
-          aria-label="City"
+          autocomplete="address-level2"
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -105,8 +99,7 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          aria-label={isUS ? "State" : "State or Province"}
-          required={true}
+          autocomplete="address-level1"
         />
         <FormInput
           isNum={isUS}
@@ -117,14 +110,12 @@ const AddressForm = ({
           fieldActions={actions.fields.zip}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          aria-label="zip code"
           autocomplete="postal-code"
-          required={true}
         />
         {showWalletCheckbox && (
           <Checkbox
             name="address checkbox"
-            title="Save address to Wallet"
+            title="Save address to wallet"
             checked={walletCheckboxMarked}
             onChange={saveToWallet}
           />

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -13,6 +13,7 @@ import { displayCurrency } from "../../../util/general";
 import { themeComponent } from "../../../util/themeUtils";
 import CollapsibleSection from "../collapsible-section";
 
+import LoadingLine from "../../atoms/loading-line";
 import LabeledAmount from "../../atoms/labeled-amount";
 import LineItem from "../../atoms/line-item";
 import Title from "../../atoms/title";
@@ -120,22 +121,41 @@ const PaymentDetailsContent = ({
 );
 
 const LoadingDetails = () => (
-  <Box
-    padding="0"
-    background={GRECIAN_GREY}
-    borderRadius="4px"
-    minHeight="196px"
-  >
-    <Cover minHeight="196px" singleChild fillCenter>
-      <Center intrinsic>
-        <Box
-          padding="0"
-          extraStyles={`flex-grow: 1; display: flex; justify-content: center; align-items: center;`}
-        >
-          <Spinner size="100" centerSpinner />
-        </Box>
-      </Center>
-    </Cover>
+  <Box padding="0" minHeight="196px">
+    <Box
+      padding="0"
+      extraStyles={`position: absolute;
+        height: 200px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;`}
+    >
+      <Spinner size="100" centerSpinner />
+    </Box>
+    <Stack childGap="16px">
+      <Cluster nowrap justify="space-between" align="start">
+        <LoadingLine exactWidth="110" height="27px" />
+        <LoadingLine exactWidth="60" height="27px" />
+      </Cluster>
+      <SolidDivider />
+      <Box padding="0.5rem 0">
+        <Cluster justify="space-between" align="start">
+          <LoadingLine exactWidth="80" height="27px" />
+          <LoadingLine exactWidth="60" height="27px" />
+        </Cluster>
+        <Box padding="4px 0" />
+        <Cluster justify="space-between" align="start">
+          <LoadingLine exactWidth="100" height="27px" />
+          <LoadingLine exactWidth="50" height="27px" />
+        </Cluster>
+      </Box>
+      <SolidDivider />
+      <Stack justify="space-between" direction="row">
+        <LoadingLine exactWidth="55" height="30px" />
+        <LoadingLine exactWidth="70" height="30px" />
+      </Stack>
+    </Stack>
   </Box>
 );