@thecb/components 10.4.7-beta.1 → 10.4.8-beta.0

package/package.json

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

package/src/components/atoms/icons/IconAdd.js

@@ -1,10 +1,10 @@
 import React from "react";
 
-const IconAdd = () => (
+const IconAdd = ({ strokeWidth = 1 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
-    width="18"
+    width={"18"}
     height="18"
     viewBox="0 0 18 18"
     className="icon"
@@ -12,10 +12,11 @@ const IconAdd = () => (
     <defs>
       <path
         id="path-1"
+        strokeWidth={strokeWidth}
         d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
       ></path>
     </defs>
-    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
       <g transform="translate(-407 -563)">
         <g transform="translate(408 562)">
           <g transform="translate(0 2)">
@@ -25,7 +26,13 @@ const IconAdd = () => (
               </mask>
               <use className="fill" xlinkHref="#path-1"></use>
             </g>
-            <circle className="stroke" cx="8.155" cy="8.072" r="8"></circle>
+            <circle
+              className="stroke"
+              strokeWidth={strokeWidth}
+              cx="8.155"
+              cy="8.072"
+              r={strokeWidth == 1 ? "8" : "7"}
+            ></circle>
           </g>
         </g>
       </g>

package/src/components/atoms/placeholder/Placeholder.js

@@ -16,7 +16,7 @@ import {
   IconAdd,
   PaymentMethodAddIcon
 } from "../icons";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -123,7 +123,7 @@ const Placeholder = ({
                     stroke: ${
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
-                  }`}
+                  } `}
               >
                 {variant === "large" ? (
                   <Center intrinsic>
@@ -131,7 +131,7 @@ const Placeholder = ({
                     <Text
                       variant="pS"
                       color={themeValues.color}
-                      weight={FONT_WEIGHT_REGULAR}
+                      weight={FONT_WEIGHT_SEMIBOLD}
                       extraStyles={`text-align: center;`}
                     >
                       {text}
@@ -140,12 +140,12 @@ const Placeholder = ({
                 ) : (
                   <Cover singleChild minHeight="100%">
                     <Cluster justify="center" align="center">
-                      <IconAdd />
+                      <IconAdd strokeWidth="2" />
                       <Center intrinsic>
                         <Text
                           variant="pS"
                           color={themeValues.color}
-                          weight={FONT_WEIGHT_REGULAR}
+                          weight={FONT_WEIGHT_SEMIBOLD}
                           extraStyles={`padding: 0 0 0 8px; text-align: center;`}
                         >
                           {text}

package/src/components/atoms/placeholder/Placeholder.stories.js

@@ -13,7 +13,8 @@ const groupId = "props";
 
 const icons = {
   accounts: "accounts",
-  properties: "properties"
+  properties: "properties",
+  payments: "payments"
 };
 
 const iconLabel = "largeIcon";

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,32 +73,54 @@ 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: "4px",
-      left: "23px",
+      right: "1px",
+      top: "2px",
+      bottom: "2px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px"
     }
   });
 
-  // to do: for disabled, background color should not be white (should be lighter disabled background)
   const VisibleSwitch = posed(VisibleSwitchComponent)({
     focusable: true,
     hoverable: true,
@@ -99,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
     }
   });
 
@@ -159,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
 };