@thecb/components 10.6.0-beta.3 → 10.6.0-beta.5

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/wallet-name/WalletName.js

@@ -2,10 +2,12 @@ import React, { Fragment, useContext } from "react";
 import { Box, Cluster } from "../layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import ButtonWithAction from "../button-with-action";
+import { Center } from "../layouts";
 import Text from "../text/Text";
 import { ThemeContext } from "styled-components";
 import { fallbackValues } from "./WalletName.theme";
 import Module from "../../molecules/module/Module";
+import Spinner from "../spinner/Spinner";
 
 const WalletName = ({
   mainText,
@@ -14,7 +16,8 @@ const WalletName = ({
   actionText,
   themeValues,
   disableAction = false,
-  buttonExtraStyles = ""
+  buttonExtraStyles = "",
+  isLoading = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -23,21 +26,27 @@ const WalletName = ({
       <Module spacingBottom={isMobile ? "0" : "1.5rem"}>
         <Cluster
           align="center"
-          justify={
-            !!text || !!actionText
-              ? "space-between"
-              : !text && !actionText && isMobile
-              ? "flex-end"
-              : "flex-end"
-          }
+          justify={!!text || !!actionText ? "space-between" : "flex-start"}
           extraStyles={`
-            box-shadow: ${themeValues.boxShadow}; 
+            box-shadow: ${themeValues.boxShadow};
             padding: 1.5rem;
             ${isMobile ? `span {text-align: right;}` : ``}
           `}
         >
-          <Box padding="0 0 0">
-            <Text>{mainText}</Text>
+          <Box padding="0" extraStyles="">
+            {isLoading ? (
+              <Center as="span" style={{ padding: "24px 24px 0" }} intrinsic>
+                <Spinner
+                  strokeWidth="2"
+                  size="24"
+                  radius="10"
+                  cx="12"
+                  cy="12"
+                />
+              </Center>
+            ) : (
+              <Text>{mainText}</Text>
+            )}
           </Box>
           {!isMobile && (
             <Box padding="0">
@@ -65,7 +74,7 @@ const WalletName = ({
         <Cluster
           align="center"
           justify={text || actionText ? "flex-end" : "flex-start"}
-          extraStyles="margin-top: 0.75rem;"
+          extraStyles="margin-top: 0.5rem;"
         >
           {text && <Text extraStyles="font-size: 12px">{text}</Text>}
           {(text || actionText) && <>&nbsp;</>}

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

@@ -11,6 +11,7 @@ export const walletName = () => {
       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")}
     />
   );
 };

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

@@ -1,11 +1,15 @@
-import { CHARADE_GREY, ROYAL_BLUE, WHITE } from "../../../constants/colors";
+import {
+  CHARADE_GREY,
+  ROYAL_BLUE_VIVID,
+  WHITE
+} from "../../../constants/colors";
 
 const backgroundColor = {
   primary: WHITE
 };
 
 const color = {
-  primary: ROYAL_BLUE
+  primary: ROYAL_BLUE_VIVID
 };
 
 const boxShadow = {

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

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

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