@thecb/components 10.6.1-beta.0 → 10.6.1

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

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,