@thecb/components 10.5.5 → 10.5.6-beta.0

package/package.json

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

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

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

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

@@ -1,14 +1,14 @@
 import {
   WHITE,
-  ATHENS_GREY,
-  MANATEE_GREY,
+  REGENT_GREY,
+  IRON_GREY,
   MATISSE_BLUE
 } from "../../../constants/colors";
 
 const onBackground = `${MATISSE_BLUE}`;
-const disabledBackground = `${MANATEE_GREY}`;
-const disabledBackgroundLight = `${ATHENS_GREY}`;
+const disabledBackground = `${IRON_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
 };

package/src/components/molecules/link-card/LinkCard.theme.js

@@ -8,27 +8,13 @@ import {
   TRANSPARENT
 } from "../../../constants/colors";
 
-const disabledBackgroundColor = {
-  primary: TRANSPARENT
-};
-const disabledBorderColor = {
-  primary: GHOST_GREY
-};
-const disabledColor = {
-  primary: MANATEE_GREY
-};
-const activeBackgroundColor = {
-  primary: CORNFLOWER_BLUE
-};
-const backgroundColor = {
-  primary: LINK_WATER
-};
-const borderColor = {
-  primary: MOON_RAKER
-};
-const color = {
-  primary: ROYAL_BLUE_VIVID
-};
+const disabledBackgroundColor = TRANSPARENT;
+const disabledBorderColor = GHOST_GREY;
+const disabledColor = MANATEE_GREY;
+const activeBackgroundColor = CORNFLOWER_BLUE;
+const backgroundColor = LINK_WATER;
+const borderColor = MOON_RAKER;
+const color = ROYAL_BLUE_VIVID;
 
 export const fallbackValues = {
   disabledBackgroundColor,