@thecb/components 10.6.1-beta.0 → 10.6.2-beta.0

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

@@ -6,41 +6,54 @@ import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import {
-  STORM_GREY,
-  GRECIAN_GREY,
-  CHARADE_GREY
+  CHARADE_GREY,
+  TRANSPARENT,
+  MANATEE_GREY
 } from "../../../constants/colors";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
-  IconAdd,
-  PaymentMethodAddIcon
+  PlusCircleIcon,
+  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 +62,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,103 +96,114 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
+  isDisabled = false,
   dataQa
-}) => (
-  <PlaceholderContentWrapper
-    isLink={isLink}
-    action={action}
-    destination={destination}
-    dataQa={dataQa}
-  >
-    <Box
-      padding="0"
-      borderRadius="4px"
-      border="none"
-      minHeight={themeValues.height}
-      hiddenStyles={!visible}
-      extraStyles={`
-        background: linear-gradient(
-          to right,
-          ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
-          rgba(255, 255, 255, 0) 0%
-        ),
-        linear-gradient(${
-          variant === "large" ? STORM_GREY : themeValues.color
-        } 40%, rgba(255, 255, 255, 0) 0%),
-        linear-gradient(to right, ${
-          variant === "large" ? STORM_GREY : themeValues.color
-        } 40%, rgba(255, 255, 255, 0) 0%),
-        linear-gradient(${
-          variant === "large" ? STORM_GREY : themeValues.color
-        } 40%, rgba(255, 255, 255, 0) 0%);
-        background-position: top, right, bottom, left;
-        background-repeat: repeat-x, repeat-y;
-        background-size: 5px 1px, 1px 5px;
-        display: flex;
-        justify-content: center;
-        align-items:center;`}
-      hoverStyles={`background-color: ${
-        variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
-      };`}
+}) => {
+  const borderColor = isDisabled ? MANATEE_GREY : themeValues.color;
+  return (
+    <PlaceholderContentWrapper
+      isLink={isLink}
+      action={action}
+      destination={destination}
+      dataQa={dataQa}
+      isDisabled={isDisabled}
     >
-      <Center maxWidth="300px">
-        <Box
-          padding="0"
-          tabIndex="0"
-          onKeyPress={e => e.key === "Enter" && action()}
-        >
-          <Cluster justify="center" align="center" minHeight="100%">
-            <Switcher maxChildren={2} childGap="0">
-              {variant === "large" && <div></div>}
-              <Box
-                padding="0"
-                extraStyles={`.fill { 
+      <Box
+        padding="0"
+        borderRadius="4px"
+        border="none"
+        minHeight={themeValues.height}
+        hiddenStyles={!visible}
+        extraStyles={`
+          display: flex;
+          justify-content: center;
+          align-items:center;
+          background-image: repeating-linear-gradient(0deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(90deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(180deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(270deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px);
+          background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
+          background-position: 0 0, 0 0, 100% 0, 0 100%;
+          background-repeat: no-repeat;
+        `}
+        hoverStyles={`background-color: ${
+          isDisabled ? TRANSPARENT : tint(0.9, themeValues.color)
+        };`}
+        activeStyles={`background-color: ${
+          isDisabled ? TRANSPARENT : tint(0.8, themeValues.color)
+        };`}
+      >
+        <Center maxWidth="300px">
+          <Box
+            padding="0"
+            tabIndex="0"
+            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)}
-                    <Text
-                      variant="pS"
-                      color={themeValues.color}
-                      weight={FONT_WEIGHT_SEMIBOLD}
-                      extraStyles={`text-align: center;`}
-                    >
-                      {text}
-                    </Text>
-                  </Center>
-                ) : (
-                  <Cover singleChild minHeight="100%">
-                    <Cluster justify="center" align="center">
-                      <IconAdd strokeWidth="2" />
-                      <Center intrinsic>
-                        <Text
-                          variant="pS"
-                          color={themeValues.color}
-                          weight={FONT_WEIGHT_SEMIBOLD}
-                          extraStyles={`padding: 0 0 0 8px; text-align: center;`}
-                        >
-                          {text}
-                        </Text>
-                      </Center>
-                    </Cluster>
-                  </Cover>
-                )}
-              </Box>
-            </Switcher>
-          </Cluster>
-        </Box>
-      </Center>
-    </Box>
-  </PlaceholderContentWrapper>
-);
+                >
+                  {variant === "large" ? (
+                    <Center intrinsic>
+                      {getLargeIcon(largeIcon, isDisabled)}
+                      <Text
+                        variant="pS"
+                        color={isDisabled ? MANATEE_GREY : themeValues.color}
+                        weight={FONT_WEIGHT_SEMIBOLD}
+                        extraStyles={`text-align: center;`}
+                      >
+                        {text}
+                      </Text>
+                    </Center>
+                  ) : (
+                    <Cover singleChild minHeight="100%">
+                      <Cluster justify="center" align="center">
+                        <PlusCircleIcon
+                          color={isDisabled ? MANATEE_GREY : themeValues.color}
+                        />
+                        <Center intrinsic>
+                          <Text
+                            variant="pS"
+                            color={
+                              isDisabled ? MANATEE_GREY : themeValues.color
+                            }
+                            weight={FONT_WEIGHT_SEMIBOLD}
+                            extraStyles={`padding: 0 0 0 8px; text-align: center;`}
+                          >
+                            {text}
+                          </Text>
+                        </Center>
+                      </Cluster>
+                    </Cover>
+                  )}
+                </Box>
+              </Switcher>
+            </Cluster>
+          </Box>
+        </Center>
+      </Box>
+    </PlaceholderContentWrapper>
+  );
+};
 
 export default themeComponent(
   Placeholder,

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