@thecb/components 9.0.0-beta.7 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -90,6 +90,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.6.0"
+    "redux-freeform": "^5.8.0"
   }
 }

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

@@ -134,6 +134,7 @@ const Checkbox = ({
             error={error}
             disabled={disabled}
             checked={checked}
+            aria-checked={checked}
             focused={focused}
             defaultStyles={themeValues.defaultStyles}
             checkedStyles={themeValues.checkedStyles}

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

@@ -4,7 +4,7 @@ import FormSelect from "../form-select";
 import { options } from "./options";
 
 const CountryDropdown = ({
-  labelTextWhenNoError,
+  labelTextWhenNoError = "Country",
   errorMessages,
   field,
   fieldActions,

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

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

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

@@ -3,7 +3,6 @@ import { Box, Stack } from "../layouts";
 import Text from "../text";
 import {
   noop,
-  createIdFromString,
   inputDisabledStyle,
   inputPlaceholderTextStyle
 } from "../../../util/general";
@@ -383,6 +382,7 @@ const Dropdown = ({
                     data-qa={choice.text}
                     themeValues={themeValues}
                     title={hasTitles ? choice.text : null}
+                    role="option"
                     onFocus={() => setFocusedRef(optionRefs.current[i])}
                   >
                     <Text
@@ -395,14 +395,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

@@ -112,10 +112,10 @@ const FormInput = ({
   themeValues,
   background,
   customHeight,
-  autocompleteValue = "",
+  autocompleteValue = null,
   extraStyles,
   removeFromValue, // regex of characters to remove before setting value
-  dataQa,
+  dataQa = null,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -256,7 +256,6 @@ const FormInput = ({
         justify="space-between"
         aria-live="polite"
         aria-atomic={true}
-        data-qa={`${labelTextWhenNoError} error message`}
       >
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text

package/src/components/atoms/form-layouts/index.d.ts

@@ -23,7 +23,7 @@ export interface FormInputProps {
   themeValues?: object;
   background?: string;
   customHeight?: string;
-  autocompleteValue?: string;
+  autocompleteValue?: string | null;
   removeFromValue?: RegExp;
   dataQa?: string | null;
 }

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

@@ -68,7 +68,7 @@ const FormSelect = ({
       </Box>
       <Dropdown
         ariaLabelledby={createIdFromString(labelTextWhenNoError)}
-        ariaDescribedBy={createIdFromString(
+        ariaDescribedby={createIdFromString(
           labelTextWhenNoError,
           "error message"
         )}

package/src/components/atoms/form-select/index.d.ts

@@ -20,7 +20,7 @@ export interface FormSelectProps {
   disabledValues?: string[];
   themeValues?: object;
   hasTitles?: boolean;
-  autocompleteValue?: string;
+  autocompleteValue?: string | null;
   smoothScroll?: boolean;
   dataQa?: string | null;
 }

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -52,7 +52,6 @@ const AccountAndRoutingModal = ({
     }}
   >
     <Text
-      role="button"
       variant="pS"
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

package/src/components/molecules/link-card/index.d.ts

@@ -5,7 +5,7 @@ export interface LinkCardProps {
   variant?: string; // "default" is only one
   title?: string; // title
   subtitle?: string; // beneath title
-  themeValues?: object;
+  themeValues?: any;
   showLeft?: boolean;
   leftContent?: JSX.Element;
   showRight?: boolean;

package/src/components/molecules/modal/Modal.js

@@ -45,7 +45,7 @@ const Modal = ({
   isLoading,
   buttonExtraStyles,
   children,
-  dataQa = ""
+  dataQa = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);

package/src/components/molecules/partial-amount-form/PartialAmountForm.state.js

@@ -14,28 +14,13 @@ export const createPartialAmountFormState = (
   blockPartialPaymentOverpay = false
 ) => {
   const formConfig = lineItems.reduce((acc, item) => {
-    const validators = [
-      required(),
-      validateSum(
-        numberGreaterThanOrEqualTo(minimum),
-        lineItems
-          .filter(lineItem => lineItem != item)
-          .reduce((acc, curr) => [...acc, curr.id], [])
-      )
-    ];
-    if (!!maximum) {
-      validators.push(
-        validateSum(
-          numberLessThanOrEqualTo(maximum),
-          lineItems
-            .filter(lineItem => lineItem != item)
-            .reduce((acc, curr) => [...acc, curr.id], [])
-        )
-      );
-    }
-    if (blockPartialPaymentOverpay) {
-      validators.push(numberLessThanOrEqualTo(item.amount));
-    }
+    const validators = createPartialAmountFormValidators(
+      item,
+      lineItems,
+      maximum,
+      minimum,
+      blockPartialPaymentOverpay
+    );
     return {
       ...acc,
       [item.id]: {
@@ -54,3 +39,36 @@ export const createPartialAmountFormState = (
     partialAmountFormMapDispatchToProps: mapDispatchToProps
   };
 };
+
+export const createPartialAmountFormValidators = (
+  item,
+  lineItems,
+  maximum,
+  minimum = 1,
+  blockPartialPaymentOverpay = false
+) => {
+  const validators = [
+    required(),
+    validateSum(
+      numberGreaterThanOrEqualTo(minimum),
+      lineItems
+        .filter(lineItem => lineItem != item)
+        .reduce((acc, curr) => [...acc, curr.id], [])
+    )
+  ];
+  if (!!maximum) {
+    validators.push(
+      validateSum(
+        numberLessThanOrEqualTo(maximum),
+        lineItems
+          .filter(lineItem => lineItem != item)
+          .reduce((acc, curr) => [...acc, curr.id], [])
+      )
+    );
+  }
+  if (blockPartialPaymentOverpay) {
+    validators.push(numberLessThanOrEqualTo(item.amount));
+  }
+
+  return validators;
+};

package/src/components/molecules/partial-amount-form/index.js

@@ -1,4 +1,11 @@
 import PartialAmountForm from "./PartialAmountForm";
-import { createPartialAmountFormState } from "./PartialAmountForm.state";
+import {
+  createPartialAmountFormState,
+  createPartialAmountFormValidators
+} from "./PartialAmountForm.state";
 
-export { PartialAmountForm, createPartialAmountFormState };
+export {
+  PartialAmountForm,
+  createPartialAmountFormState,
+  createPartialAmountFormValidators
+};

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>
 );
 

package/src/components/molecules/phone-form/PhoneForm.js

@@ -42,6 +42,7 @@ const PhoneForm = ({
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="tel"
           dataQa="Phone number"
+          isNum={true}
         />
         {showWalletCheckbox && (
           <Checkbox

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

@@ -14,12 +14,11 @@ const TermsAndConditionsControlV1 = ({
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
-    <DisplayBox dataQa="TermsAndConditionsControlV1">
+    <DisplayBox>
       <Stack>
         <Checkbox
           name="terms"
           title="Terms and Conditions"
-          dataQa="Terms and Conditions"
           error={error}
           checked={isChecked}
           onChange={onCheck}

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

@@ -45,7 +45,6 @@ const TermsAndConditionsControlV2 = ({
       background={displayInline ? "transparent" : containerBackground}
       boxShadow={displayInline ? "none" : standardBoxShadow}
       borderRadius={displayInline ? "0" : "4px"}
-      dataQa="TermsAndConditionsControlV2"
     >
       <Stack childGap="0">
         {html && <Box padding="0">{html}</Box>}

package/src/components/atoms/dropdown/index.d.ts

@@ -1,32 +0,0 @@
-import React from "react";
-import Expand from "../../../util/expand";
-
-export interface DropdownOption {
-  text: string;
-  value: string;
-}
-
-export interface DropdownProps {
-  placeholder?: string;
-  options?: DropdownOption[];
-  value?: string;
-  isOpen?: boolean;
-  isError?: boolean;
-  onSelect?: (event: React.SyntheticEvent<HTMLElement>) => void;
-  disabledValues?: string[];
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  themeValues?: object;
-  maxHeight?: string;
-  widthFitOptions?: boolean;
-  disabled?: boolean;
-  hasTitles?: boolean;
-  autoEraseTypeAhead?: true;
-  ariaLabelledby?: string;
-  ariaDescribedby?: string;
-  autocompleteValue?: string;
-  smoothScroll?: boolean;
-  ariaInvalid?: boolean;
-}
-
-export const Dropdown: React.FC<Expand<DropdownProps> &
-  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/state-province-dropdown/index.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-
-import {
-  ErrorMessageDictionary,
-  Field,
-  FieldActions,
-  FormSelectOption
-} from "../../../types/common";
-import Expand from "../../../util/expand";
-
-export interface StateProvinceDropdownProps {
-  labelTextWhenNoError?: string;
-  errorMessages?: ErrorMessageDictionary;
-  field?: Field;
-  fieldActions?: FieldActions;
-  options?: FormSelectOption[];
-  showErrors?: boolean;
-  countryCode?: string;
-  autocompleteValue?: string;
-  dataQa?: string;
-}
-
-export const StateProvinceDropdown: React.FC<Expand<
-  StateProvinceDropdownProps
-> &
-  React.HTMLAttributes<HTMLElement>>;