@thecb/components 10.5.4 → 10.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.5.4",
+  "version": "10.5.5",
   "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

@@ -20,9 +20,9 @@ const HiddenToggleSwitchBox = styled.input`
 `;
 
 const VisibleSwitchComponent = styled.label`
-  width: 48px;
+  width: 44px;
   height: 24px;
-  border-radius: 48px;
+  border-radius: 12px;
   border: none;
   position: relative;
   box-sizing: border-box;
@@ -41,27 +41,15 @@ const VisibleSwitchComponent = styled.label`
   ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
 `;
 
-const ToggleSwitchMiddleRingComponent = styled.div`
+const ToggleSwitchRingComponent = styled.div`
   position: absolute;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   border: none;
   border-radius: 50%;
   box-sizing: border-box;
 `;
 
-const ToggleSwitchInnerRingComponent = styled.div`
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  top: 3px;
-  left: 3px;
-  right: 3px;
-  bottom: 3px;
-  border-radius: 50%;
-  box-sizing: border-box;
-`;
-
 const ToggleSwitch = ({
   isOn = false,
   onToggle = noop,
@@ -73,51 +61,28 @@ const ToggleSwitch = ({
   isMobile,
   dataQa
 }) => {
-  const ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
-    off: {
-      backgroundColor: themeValues.offBackground,
-      transition: {
-        ease: "easeOut"
-      }
-    },
-    on: {
-      backgroundColor: themeValues.onBackground,
-      transition: {
-        ease: "easeIn"
-      }
-    },
-    disabled: {
-      backgroundColor: themeValues.disabledBackground
-    }
-  });
-
-  const ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
+  const ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
     off: {
-      backgroundColor: themeValues.white,
-      left: "2px",
-      top: "2px",
-      bottom: "2px",
-      right: "24px",
+      backgroundColor: disabled
+        ? themeValues.disabledBackground
+        : themeValues.onBackground,
+      left: "4px",
+      top: "3px",
+      bottom: "3px",
+      right: "20px",
       transition: {
         ease: "backIn"
       }
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "1px",
-      top: "2px",
-      bottom: "2px",
-      left: "25px",
+      right: "8px",
+      top: "3px",
+      bottom: "3px",
+      left: "22px",
       transition: {
         ease: "backIn"
       }
-    },
-    disabled: {
-      backgroundColor: themeValues.white,
-      left: "2px",
-      top: "2px",
-      bottom: "2px",
-      right: "24px"
     }
   });
 
@@ -133,19 +98,28 @@ const ToggleSwitch = ({
       boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
     },
     off: {
-      backgroundColor: themeValues.offBackground,
+      border: "1px solid",
+      backgroundColor: disabled
+        ? themeValues.disabledBackgroundLight
+        : themeValues.white,
+      borderColor: disabled
+        ? themeValues.disabledBackground
+        : themeValues.onBackground,
       transition: {
         ease: "easeOut"
       }
     },
     on: {
-      backgroundColor: themeValues.onBackground,
+      border: "1px solid",
+      backgroundColor: disabled
+        ? themeValues.disabledBackground
+        : themeValues.onBackground,
+      borderColor: disabled
+        ? themeValues.disabledBackground
+        : themeValues.onBackground,
       transition: {
         ease: "easeIn"
       }
-    },
-    disabled: {
-      backgroundColor: themeValues.disabledBackground
     }
   });
 
@@ -184,14 +158,12 @@ const ToggleSwitch = ({
                 htmlFor={`#toggle-${name}`}
                 onClick={disabled ? noop : onToggle}
                 onKeyDown={disabled ? noop : handleKeyDown}
-                pose={disabled ? "disabled" : isOn ? "on" : "off"}
+                pose={isOn ? "on" : "off"}
                 tabIndex={disabled ? -1 : 0}
                 disabled={disabled}
                 isMobile={isMobile}
               >
-                <ToggleSwitchMiddleRing>
-                  <ToggleSwitchInnerRing />
-                </ToggleSwitchMiddleRing>
+                <ToggleSwitchRing />
               </VisibleSwitch>
             </Box>
           </Cover>

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

@@ -1,5 +1,5 @@
 import React, { useState, Fragment } from "react";
-import { boolean } from "@storybook/addon-knobs";
+import { boolean, text } from "@storybook/addon-knobs";
 import ToggleSwitch from "./ToggleSwitch";
 import page from "../../../../.storybook/page";
 
@@ -7,12 +7,11 @@ export const toggleSwitchDefault = () => {
   const [isOn, onToggle] = useState(false);
 
   const disabled = boolean("disabled", false, "props");
-
   return (
     <Fragment>
       <ToggleSwitch
         name="toggle-switch"
-        label="Toggle Switch Label"
+        label={text("label", "Toggle Switch Label", "props")}
         isOn={isOn}
         onToggle={() => onToggle(!isOn)}
         disabled={disabled}

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

@@ -1,14 +1,14 @@
 import {
   WHITE,
-  REGENT_GREY,
-  IRON_GREY,
+  ATHENS_GREY,
+  MANATEE_GREY,
   MATISSE_BLUE
 } from "../../../constants/colors";
 
 const onBackground = `${MATISSE_BLUE}`;
-const disabledBackground = `${IRON_GREY}`;
+const disabledBackground = `${MANATEE_GREY}`;
+const disabledBackgroundLight = `${ATHENS_GREY}`;
 const white = `${WHITE}`;
-const offBackground = `${REGENT_GREY}`;
 
 const labelStyles = `
   display: flex;
@@ -29,8 +29,8 @@ const leftLabelStyles = `
 export const fallbackValues = {
   onBackground,
   disabledBackground,
+  disabledBackgroundLight,
   white,
-  offBackground,
   rightLabelStyles,
   leftLabelStyles
 };