@thecb/components 10.7.5 → 10.7.6

package/package.json

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

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

@@ -120,6 +120,7 @@ const FormInput = ({
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const { isMobile } = useContext(ThemeContext);
 
   const setValue = value => {
@@ -134,6 +135,7 @@ const FormInput = ({
     if (isRequired && value === "") {
       setValue("");
     }
+    setIsFocused(false);
   };
 
   return (
@@ -226,6 +228,15 @@ const FormInput = ({
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
             required={isRequired}
+            // Additional handler to detect autofilled values
+            {...(autocompleteValue && {
+              onFocus: e => {
+                if (!isFocused) {
+                  setValue(e.target?.value);
+                  setIsFocused(true);
+                }
+              }
+            })}
             {...props}
           />
         ) : (

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -3,27 +3,25 @@ import styled from "styled-components";
 import posed from "react-pose";
 import { fallbackValues } from "./ToggleSwitch.theme";
 import { themeComponent } from "../../../util/themeUtils";
+import Heading from "../heading";
 import { Box, Center, Cover, Cluster } from "../layouts";
-import {
-  FONT_WEIGHT_SEMIBOLD,
-  SCREEN_READER_ONLY
-} from "../../../constants/style_constants";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
 import { ENTER } from "../../../constants/keyboard";
 import { noop } from "../../../util/general";
 
 const HiddenToggleSwitchBox = styled.input`
   opacity: 0;
-  margin: 0;
   position: absolute;
   cursor: ${({ disabled }) => (disabled ? "auto" : "pointer")};
-  height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
-  width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
+  height: 24px;
+  width: 50px;
+  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
 `;
 
-const VisibleSwitchComponent = styled.span`
-  width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
-  height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
+const VisibleSwitchComponent = styled.label`
+  width: 44px;
+  height: 24px;
   border-radius: 12px;
   border: none;
   position: relative;
@@ -39,35 +37,30 @@ const VisibleSwitchComponent = styled.span`
   &:focus {
     box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
   }
+
+  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
 `;
 
-const ToggleSwitchRingComponent = styled.span`
+const ToggleSwitchRingComponent = styled.div`
   position: absolute;
-  width: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
-  height: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
+  width: 16px;
+  height: 16px;
   border: none;
   border-radius: 50%;
   box-sizing: border-box;
 `;
 
 const ToggleSwitch = ({
-  ariaDescribedBy = "",
   isOn = false,
   onToggle = noop,
   disabled = false,
-  name = "toggle",
+  name = "",
   label = null,
   labelLeft = false,
-  labelStyles = "",
-  labelAs = "h4",
-  srOnlyLabel = "",
   themeValues,
   isMobile,
-  dataQa,
-  minWidth = "80px",
-  extraStyles = ""
+  dataQa
 }) => {
-  const nameId = name.replace(/ /g, "-");
   const ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
     off: {
       backgroundColor: disabled
@@ -139,20 +132,12 @@ const ToggleSwitch = ({
   return (
     <Box
       padding="0"
-      extraStyles={`
-        margin: 0 0.5rem;
-        ${
-          labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
-        }${extraStyles}`}
+      extraStyles={
+        labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
+      }
     >
       <Center>
-        <Cluster
-          justify="space-between"
-          align="center"
-          overflow="visible"
-          childGap="0"
-          minWidth={minWidth ?? (isMobile ? "75px" : "84px")}
-        >
+        <Cluster justify="stretch" align="center" overflow="visible">
           <Cover minHeight="100%" singleChild>
             <Box
               minWidth="100%"
@@ -161,18 +146,16 @@ const ToggleSwitch = ({
               dataQa={dataQa}
             >
               <HiddenToggleSwitchBox
-                type="checkbox"
-                aria-checked={isOn}
                 aria-label={name}
-                aria-labelledby={label ? `${nameId}-label` : null}
-                aria-describedby={ariaDescribedBy ? ariaDescribedBy : null}
                 checked={isOn}
                 onChange={disabled ? noop : onToggle}
                 disabled={disabled}
-                id={`#${nameId}`}
+                id={`#toggle-${name}`}
                 isMobile={isMobile}
               />
               <VisibleSwitch
+                name={name}
+                htmlFor={`#toggle-${name}`}
                 onClick={disabled ? noop : onToggle}
                 onKeyDown={disabled ? noop : handleKeyDown}
                 pose={isOn ? "on" : "off"}
@@ -180,30 +163,19 @@ const ToggleSwitch = ({
                 disabled={disabled}
                 isMobile={isMobile}
               >
-                <ToggleSwitchRing isMobile={isMobile} />
+                <ToggleSwitchRing />
               </VisibleSwitch>
             </Box>
           </Cover>
           {label && (
-            <Box
-              as={labelAs}
-              extraStyles={`
-                font-weight: ${FONT_WEIGHT_SEMIBOLD};
-                color: ${CHARADE_GREY};
-                margin: 0 0 0 0.25rem; 
-                position: relative; 
-                bottom: 1px; 
-                display: inline-block; 
-                ${labelStyles}`}
-              id={`${nameId}-label`}
-              htmlFor={labelAs === "label" ? nameId : null}
-              padding="0"
+            <Heading
+              variant={"h4"}
+              weight={FONT_WEIGHT_SEMIBOLD}
+              extraStyles={`margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;`}
+              color={CHARADE_GREY}
             >
-              {srOnlyLabel && (
-                <span style={SCREEN_READER_ONLY}>{srOnlyLabel}</span>
-              )}
               {label}
-            </Box>
+            </Heading>
           )}
         </Cluster>
       </Center>

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

@@ -134,6 +134,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          name="cc-number"
           isRequired={true}
         />
         <FormInputRow