@thecb/components 10.6.4-beta.0 → 10.6.4-beta.2

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

@@ -8,39 +8,55 @@ import { themeComponent } from "../../../util/themeUtils";
 import {
   STORM_GREY,
   GRECIAN_GREY,
-  CHARADE_GREY
+  CHARADE_GREY,
+  WHITE,
+  TRANSPARENT,
+  MANATEE_GREY
 } from "../../../constants/colors";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
   IconAdd,
-  PaymentMethodAddIcon
+  PaymentMethodAddIcon,
+  DisabledAccountsAddIcon,
+  DisabledPropertiesAddIcon,
+  DisabledPaymentMethodsAddIcon
 } from "../icons";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { noop } from "../../../util/general";
 
-const getLargeIcon = iconName => {
+const getLargeIcon = (iconName, isDisabled) => {
   switch (iconName) {
     case "accounts":
-      return <AccountsAddIcon />;
+      return isDisabled ? <DisabledAccountsAddIcon /> : <AccountsAddIcon />;
     case "properties":
-      return <PropertiesAddIcon />;
+      return isDisabled ? <DisabledPropertiesAddIcon /> : <PropertiesAddIcon />;
     case "payments":
-      return <PaymentMethodAddIcon />;
+      return isDisabled ? (
+        <DisabledPaymentMethodsAddIcon />
+      ) : (
+        <PaymentMethodAddIcon />
+      );
     default:
-      return <AccountsAddIcon />;
+      return isDisabled ? <DisabledAccountsAddIcon /> : <AccountsAddIcon />;
   }
 };
 
-const PlaceholderContentWrapper = ({
-  isLink,
-  action,
-  destination,
-  children,
-  dataQa
-}) =>
+const renderDisabledContent = ({ children }) => (
+  <Box
+    padding="0"
+    minHeight="100%"
+    extraStyles="cursor: default;"
+    aria-disabled={true}
+  >
+    {children}
+  </Box>
+);
+
+const renderContent = ({ isLink, destination, dataQa, children, action }) =>
   isLink ? (
     <Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
-      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
+      <Box padding="0" minHeight="100%" extraStyles="cursor: pointer;">
         {children}
       </Box>
     </Link>
@@ -49,13 +65,31 @@ const PlaceholderContentWrapper = ({
       onClick={action}
       padding="0"
       minHeight="100%"
-      extraStyles={`cursor: pointer;`}
+      extraStyles="cursor: pointer;"
       dataQa={dataQa}
     >
       {children}
     </Box>
   );
 
+const PlaceholderContentWrapper = ({
+  isLink,
+  action,
+  destination,
+  children,
+  isDisabled = false,
+  dataQa
+}) =>
+  isDisabled
+    ? renderDisabledContent({ children })
+    : renderContent({
+        children,
+        action,
+        isLink,
+        destination,
+        dataQa
+      });
+
 const Placeholder = ({
   text,
   action,
@@ -65,6 +99,7 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
+  isDisabled = false,
   dataQa
 }) => (
   <PlaceholderContentWrapper
@@ -72,6 +107,7 @@ const Placeholder = ({
     action={action}
     destination={destination}
     dataQa={dataQa}
+    isDisabled={isDisabled}
   >
     <Box
       padding="0"
@@ -79,7 +115,13 @@ const Placeholder = ({
       border="none"
       minHeight={themeValues.height}
       hiddenStyles={!visible}
-      extraStyles={`
+      extraStyles={
+        isDisabled
+          ? `border: 1px dashed ${MANATEE_GREY}; 
+        display: flex;
+        justify-content: center;
+        align-items:center;`
+          : `
         background: linear-gradient(
           to right,
           ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
@@ -99,38 +141,52 @@ const Placeholder = ({
         background-size: 5px 1px, 1px 5px;
         display: flex;
         justify-content: center;
-        align-items:center;`}
+        align-items:center;`
+      }
       hoverStyles={`background-color: ${
-        variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
+        isDisabled
+          ? TRANSPARENT
+          : variant === "large"
+          ? GRECIAN_GREY
+          : tint(0.9, themeValues.color)
       };`}
     >
       <Center maxWidth="300px">
         <Box
           padding="0"
           tabIndex="0"
-          onKeyPress={e => e.key === "Enter" && action()}
+          onKeyPress={e => (isDisabled ? noop : e.key === "Enter" && action())}
         >
           <Cluster justify="center" align="center" minHeight="100%">
             <Switcher maxChildren={2} childGap="0">
               {variant === "large" && <div></div>}
               <Box
                 padding="0"
+                aria-disabled={isDisabled}
                 extraStyles={`.fill { 
                     fill: ${
-                      variant === "large" ? CHARADE_GREY : themeValues.color
+                      isDisabled
+                        ? MANATEE_GREY
+                        : variant === "large"
+                        ? CHARADE_GREY
+                        : themeValues.color
                     }; 
                   } .stroke { 
                     stroke: ${
-                      variant === "large" ? CHARADE_GREY : themeValues.color
+                      isDisabled
+                        ? MANATEE_GREY
+                        : variant === "large"
+                        ? CHARADE_GREY
+                        : themeValues.color
                     }; 
                   } `}
               >
                 {variant === "large" ? (
                   <Center intrinsic>
-                    {getLargeIcon(largeIcon)}
+                    {getLargeIcon(largeIcon, isDisabled)}
                     <Text
                       variant="pS"
-                      color={themeValues.color}
+                      color={isDisabled ? MANATEE_GREY : themeValues.color}
                       weight={FONT_WEIGHT_SEMIBOLD}
                       extraStyles={`text-align: center;`}
                     >
@@ -140,11 +196,14 @@ const Placeholder = ({
                 ) : (
                   <Cover singleChild minHeight="100%">
                     <Cluster justify="center" align="center">
-                      <IconAdd strokeWidth="2" />
+                      <IconAdd
+                        fill={isDisabled ? MANATEE_GREY : WHITE}
+                        strokeWidth="2"
+                      />
                       <Center intrinsic>
                         <Text
                           variant="pS"
-                          color={themeValues.color}
+                          color={isDisabled ? MANATEE_GREY : themeValues.color}
                           weight={FONT_WEIGHT_SEMIBOLD}
                           extraStyles={`padding: 0 0 0 8px; text-align: center;`}
                         >

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

@@ -29,6 +29,7 @@ export const placeholder = () => (
     text={text("text", "Add an Account", "props")}
     largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
     key="placeholder"
+    isDisabled={boolean("isDisabled", false, "props")}
   />
 );
 
@@ -36,4 +37,5 @@ const story = page({
   title: "Components|Atoms/Placeholder",
   Component: Placeholder
 });
+
 export default story;

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

@@ -1,7 +1,13 @@
 import { BRIGHT_GREY, CHARADE_GREY } from "../../../constants/colors";
 
-const color = { default: `${CHARADE_GREY}`, large: `${BRIGHT_GREY}` };
-const height = { default: "3rem", large: "192px" };
+const color = {
+  default: `${CHARADE_GREY}`,
+  large: `${BRIGHT_GREY}`
+};
+const height = {
+  default: "3rem",
+  large: "192px"
+};
 
 export const fallbackValues = {
   color,

package/src/components/atoms/spinner/Spinner.js

@@ -61,7 +61,15 @@ export const SpinnerContainer = styled.div`
   containers. Default is false to preserve legacy behavior for past uses.
 */
 
-const Spinner = ({ size = "24", centerSpinner = false, themeValues }) => (
+const Spinner = ({
+  size = "24",
+  centerSpinner = false,
+  themeValues,
+  cx = "50",
+  cy = "50",
+  radius = "25",
+  strokeWidth = "6"
+}) => (
   <SpinnerContainer centerSpinner={centerSpinner} size={size}>
     <SpinnerSvgAnimation
       size={size}
@@ -70,11 +78,11 @@ const Spinner = ({ size = "24", centerSpinner = false, themeValues }) => (
     >
       <circle
         className="path"
-        cx="50"
-        cy="50"
-        r="25"
+        cx={cx}
+        cy={cy}
+        r={radius}
         fill="none"
-        strokeWidth="6"
+        strokeWidth={strokeWidth}
       />
     </SpinnerSvgAnimation>
   </SpinnerContainer>

package/src/components/atoms/spinner/index.d.ts

@@ -4,6 +4,10 @@ import Expand from "../../../util/expand";
 export interface SpinnerProps {
   size?: string;
   centerSpinner?: boolean;
+  cx?: string;
+  cy?: string;
+  radius?: string;
+  strokeWidth?: string;
 }
 
 export const Spinner: React.FC<Expand<SpinnerProps> &

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
 };

package/src/components/atoms/wallet-name/WalletName.js

@@ -0,0 +1,102 @@
+import React, { Fragment, useContext } from "react";
+import { Box, Cluster } from "../layouts";
+import ButtonWithAction from "../button-with-action";
+import { Center } from "../layouts";
+import Text from "../text/Text";
+import { ThemeContext } from "styled-components";
+import Module from "../../molecules/module/Module";
+import Spinner from "../spinner/Spinner";
+import { CHARADE_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
+
+const WalletName = ({
+  mainText, // left side text
+  action, // right side link/button action
+  text = null, // right side non-hyperlinked text
+  actionText = null, // right side hyperlinked text
+  disableAction = false,
+  linkButtonExtraStyles = "", // hyperlinked text extraStyles
+  isLoading = false // shows a spinner on the left when true
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <Fragment>
+      <Module spacingBottom={isMobile ? "0" : "1.5rem"}>
+        <Cluster
+          align="center"
+          justify={!!text || !!actionText ? "space-between" : "flex-start"}
+          extraStyles={`
+            box-shadow: 0px 1px 2px 0px rgba(${CHARADE_GREY}, 0.1);
+            box-shadow: 0px 2px 6px 0px rgba(${CHARADE_GREY}, 0.2);
+            box-shadow: 0px -1px 0px 0px rgba(${CHARADE_GREY}, 0.1) inset;
+            padding: 1.5rem;
+            ${isMobile ? `span {text-align: right;}` : ``}
+          `}
+        >
+          <Box padding="0">
+            {isLoading ? (
+              <Center as="span" style={{ padding: "24px 24px 0" }} intrinsic>
+                <Spinner
+                  strokeWidth="2"
+                  size="24"
+                  radius="10"
+                  cx="12"
+                  cy="12"
+                />
+              </Center>
+            ) : (
+              mainText && <Text>{mainText}</Text>
+            )}
+          </Box>
+          {!isMobile && (
+            <Box padding="0">
+              {text && <Text variant="pXS">{text}</Text>}
+              {(text || actionText) && <>&nbsp;</>}
+              {action && actionText && (
+                <ButtonWithAction
+                  disabled={disableAction}
+                  text={actionText}
+                  action={action}
+                  variant="smallGhost"
+                  extraStyles={`
+                    margin: 0;
+                    min-width: 0;
+                    span {font-size: 0.75rem;}
+                    ${linkButtonExtraStyles}
+                `}
+                />
+              )}
+            </Box>
+          )}
+        </Cluster>
+      </Module>
+      {isMobile && (
+        <Cluster
+          align="center"
+          justify={text || actionText ? "flex-end" : "flex-start"}
+          extraStyles="margin-top: 0.5rem;"
+        >
+          {text && <Text extraStyles="font-size: 0.857rem;">{text}</Text>}
+          {(text || actionText) && <>&nbsp;</>}
+          {action && actionText && (
+            <ButtonWithAction
+              text={actionText}
+              action={action}
+              variant="smallGhost"
+              disabled={disableAction}
+              extraStyles={`
+                margin: 0;
+                min-width: 0;
+                span {font-size: 0.857rem;}
+                ${linkButtonExtraStyles}
+              `}
+            />
+          )}
+        </Cluster>
+      )}
+    </Fragment>
+  );
+};
+
+export default WalletName;

package/src/components/atoms/wallet-name/WalletName.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import WalletName from "./WalletName";
+import { text, object, boolean } from "@storybook/addon-knobs";
+import page from "../../../../.storybook/page";
+
+export const walletName = () => {
+  return (
+    <WalletName
+      mainText={text("mainText", "Firstname Lastname", "props")}
+      action={object("action", () => window.alert("action fired!"), "props")}
+      actionText={text("actionText", "Check out as a guest", "props")}
+      text={text("text", "Not you?", "props")}
+      disableAction={boolean("disableAction", false, "props")}
+      isLoading={boolean("isLoading", false, "props")}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/WalletName",
+  component: WalletName
+});
+
+export default story;

package/src/components/atoms/wallet-name/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface WalletNameProps {
+  action: () => void;
+  actionText: string;
+  disableAction: boolean;
+  mainText: string;
+  text?: string | null;
+  isLoading: boolean;
+  buttonExtraStyles?: string;
+}
+
+export const WalletName: React.FC<Expand<WalletNameProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/wallet-name/index.js

@@ -0,0 +1,3 @@
+import WalletName from "./WalletName";
+
+export default WalletName;

package/src/components/molecules/editable-list/EditableList.js

@@ -40,7 +40,8 @@ const EditableList = ({
   listPadding = "0rem 0rem 1.5rem 0rem",
   qaPrefix,
   ariaLabel,
-  editItemAriaRole = ""
+  editItemAriaRole = "",
+  disablePlaceholder = false
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -168,6 +169,7 @@ const EditableList = ({
               action={addItem}
               dataQa={"Add " + qaPrefix}
               aria-label={addText}
+              isDisabled={disablePlaceholder}
             />
           </Box>
         )}

package/src/components/molecules/editable-list/EditableList.stories.js

@@ -1,6 +1,4 @@
-import React, { useState } from "react";
-import { boolean } from "@storybook/addon-knobs";
-
+import React from "react";
 import EditableList from "./EditableList";
 import page from "../../../../.storybook/page";