@thecb/components 10.7.6 → 10.7.7

package/package.json

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

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

@@ -3,7 +3,6 @@ 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 } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
@@ -12,16 +11,16 @@ import { noop } from "../../../util/general";
 
 const HiddenToggleSwitchBox = styled.input`
   opacity: 0;
+  margin: 0;
   position: absolute;
   cursor: ${({ disabled }) => (disabled ? "auto" : "pointer")};
-  height: 24px;
-  width: 50px;
-  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
+  height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
+  width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
 `;
 
-const VisibleSwitchComponent = styled.label`
-  width: 44px;
-  height: 24px;
+const VisibleSwitchComponent = styled.span`
+  width: ${({ isMobile }) => (isMobile ? `40px` : `44px`)};
+  height: ${({ isMobile }) => (isMobile ? `22px` : `24px`)};
   border-radius: 12px;
   border: none;
   position: relative;
@@ -37,30 +36,34 @@ const VisibleSwitchComponent = styled.label`
   &:focus {
     box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
   }
-
-  ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
 `;
 
-const ToggleSwitchRingComponent = styled.div`
+const ToggleSwitchRingComponent = styled.span`
   position: absolute;
-  width: 16px;
-  height: 16px;
+  width: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
+  height: ${({ isMobile }) => (isMobile ? `14px` : `16px`)};
   border: none;
   border-radius: 50%;
   box-sizing: border-box;
 `;
 
 const ToggleSwitch = ({
+  ariaDescribedBy = "",
   isOn = false,
   onToggle = noop,
   disabled = false,
-  name = "",
+  name = "toggle",
   label = null,
   labelLeft = false,
+  labelStyles = "",
+  labelAs = "label",
   themeValues,
   isMobile,
-  dataQa
+  dataQa,
+  minWidth = "80px",
+  extraStyles = ""
 }) => {
+  const nameId = name.replace(/ /g, "-");
   const ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
     off: {
       backgroundColor: disabled
@@ -131,13 +134,21 @@ const ToggleSwitch = ({
 
   return (
     <Box
-      padding="0"
-      extraStyles={
-        labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
-      }
+      padding="0.5rem"
+      extraStyles={`
+        margin: 0 0.5rem;
+        ${
+          labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
+        }${extraStyles}`}
     >
       <Center>
-        <Cluster justify="stretch" align="center" overflow="visible">
+        <Cluster
+          justify="space-between"
+          align="center"
+          overflow="visible"
+          childGap="0"
+          minWidth={minWidth ?? (isMobile ? "75px" : "84px")}
+        >
           <Cover minHeight="100%" singleChild>
             <Box
               minWidth="100%"
@@ -146,36 +157,48 @@ 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={`#toggle-${name}`}
+                id={`#${nameId}`}
                 isMobile={isMobile}
               />
               <VisibleSwitch
-                name={name}
-                htmlFor={`#toggle-${name}`}
                 onClick={disabled ? noop : onToggle}
                 onKeyDown={disabled ? noop : handleKeyDown}
                 pose={isOn ? "on" : "off"}
                 tabIndex={disabled ? -1 : 0}
                 disabled={disabled}
                 isMobile={isMobile}
+                tabindex="0"
               >
-                <ToggleSwitchRing />
+                <ToggleSwitchRing isMobile={isMobile} />
               </VisibleSwitch>
             </Box>
           </Cover>
           {label && (
-            <Heading
-              variant={"h4"}
-              weight={FONT_WEIGHT_SEMIBOLD}
-              extraStyles={`margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;`}
-              color={CHARADE_GREY}
+            <Box
+              as={labelAs}
+              aria-label={`${name}: ${label}`}
+              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"
             >
               {label}
-            </Heading>
+            </Box>
           )}
         </Cluster>
       </Center>