@thecb/components 10.4.6-beta.6 → 10.4.7-beta.0

package/package.json

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

package/src/components/atoms/index.js

@@ -48,5 +48,4 @@ export { default as TypeaheadInput } from "./typeahead-input";
 export { default as Card } from "./card";
 export { default as NavTabs } from "./nav-tabs";
 export { default as LoadingLine } from "./loading-line";
-export { default as WalletName } from "./wallet-name";
 export * from "./table";

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,54 +61,32 @@ 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: "4px",
+      left: "23px",
       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,
@@ -133,19 +99,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 +159,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,12 @@ export const toggleSwitchDefault = () => {
   const [isOn, onToggle] = useState(false);
 
   const disabled = boolean("disabled", false, "props");
-
+  const label = text(label, "Toggle Switch Label", "props");
   return (
     <Fragment>
       <ToggleSwitch
         name="toggle-switch"
-        label="Toggle Switch Label"
+        label={label}
         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
 };

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -3,6 +3,7 @@ import Modal from "../modal";
 import Text from "../../atoms/text";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Stack, Center } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action/ButtonWithAction";
 import { fallbackValues } from "./AccountAndRoutingModal.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { AccountNumberImage, RoutingNumberImage } from "../../atoms/icons";
@@ -18,57 +19,56 @@ const AccountAndRoutingModal = ({
   imageType,
   themeValues,
   dataQa = null
-}) => (
-  <Modal
-    modalOpen={isOpen}
-    hideModal={() => toggleOpen(false)}
-    showModal={() => toggleOpen(true)}
-    modalHeaderText={title}
-    dataQa={dataQa}
-    modalBodyText={
-      <Box extraStyles="overflow: scroll; max-height: 20rem;">
-        <Stack>
-          <Paragraph variant="p">{content}</Paragraph>
-          {imageType === "Account" ? (
-            <Center intrinsic>
-              <AccountNumberImage />
-            </Center>
-          ) : imageType === "Routing" ? (
-            <Center intrinsic>
-              <RoutingNumberImage />
-            </Center>
-          ) : (
-            <Fragment />
-          )}
-        </Stack>
-      </Box>
-    }
-    defaultWrapper={false}
-    onlyCloseButton={!acceptText}
-    continueButtonText={acceptText}
-    continueAction={() => {
-      toggleAccepted(true);
-      toggleOpen(false);
-    }}
-    initialFocusSelector={"[name='Close']"}
-  >
-    <Text
-      variant="pS"
-      onClick={() => toggleOpen(true)}
-      onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
-      tabIndex="0"
-      color={themeValues.linkColor}
-      weight={themeValues.fontWeight}
-      hoverStyles={themeValues.modalLinkHoverFocus}
-      textDecoration={themeValues.linkTextDecoration}
-      extraStyles={`cursor: pointer;`}
-      role="button"
-      className="modal-trigger"
+}) => {
+  return (
+    <Modal
+      modalOpen={isOpen}
+      hideModal={() => toggleOpen(false)}
+      showModal={() => toggleOpen(true)}
+      modalHeaderText={title}
+      dataQa={dataQa}
+      modalBodyText={
+        <Box extraStyles="overflow: scroll; max-height: 20rem;">
+          <Stack>
+            <Paragraph variant="p">{content}</Paragraph>
+            {imageType === "Account" ? (
+              <Center intrinsic>
+                <AccountNumberImage />
+              </Center>
+            ) : imageType === "Routing" ? (
+              <Center intrinsic>
+                <RoutingNumberImage />
+              </Center>
+            ) : (
+              <Fragment />
+            )}
+          </Stack>
+        </Box>
+      }
+      defaultWrapper={false}
+      onlyCloseButton={!acceptText}
+      continueButtonText={acceptText}
+      continueAction={() => {
+        toggleAccepted(true);
+        toggleOpen(false);
+      }}
+      initialFocusSelector={"[name='Close']"}
     >
-      {link}
-    </Text>
-  </Modal>
-);
+      <ButtonWithAction
+        variant="ghost"
+        tabIndex="0"
+        onClick={() => toggleOpen(true)}
+        onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
+        extraStyles="min-width: 0; min-height: 0;margin: 0; padding: 0; text-transform: none;"
+        text={
+          <Text variant="pS" color="inherit">
+            {link}
+          </Text>
+        }
+      />
+    </Modal>
+  );
+};
 
 export default themeComponent(
   AccountAndRoutingModal,