@thecb/components 10.6.0-beta.4 → 10.6.0-beta.6

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

@@ -1,23 +1,22 @@
 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";
+import { CHARADE_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
 
 const WalletName = ({
-  mainText,
-  action,
-  text,
-  actionText,
-  themeValues,
+  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,
-  buttonExtraStyles = "",
-  isLoading = false
+  linkButtonExtraStyles = "", // hyperlinked text extraStyles
+  isLoading = false // shows a spinner on the left when true
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -28,12 +27,14 @@ const WalletName = ({
           align="center"
           justify={!!text || !!actionText ? "space-between" : "flex-start"}
           extraStyles={`
-            box-shadow: ${themeValues.boxShadow};
+            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" extraStyles="">
+          <Box padding="0">
             {isLoading ? (
               <Center as="span" style={{ padding: "24px 24px 0" }} intrinsic>
                 <Spinner
@@ -45,7 +46,7 @@ const WalletName = ({
                 />
               </Center>
             ) : (
-              <Text>{mainText}</Text>
+              mainText && <Text>{mainText}</Text>
             )}
           </Box>
           {!isMobile && (
@@ -59,10 +60,10 @@ const WalletName = ({
                   action={action}
                   variant="smallGhost"
                   extraStyles={`
-                  margin: 0;
-                  min-width: 0;
-                  span {font-size: 0.75rem;}
-                  ${buttonExtraStyles}
+                    margin: 0;
+                    min-width: 0;
+                    span {font-size: 0.75rem;}
+                    ${linkButtonExtraStyles}
                 `}
                 />
               )}
@@ -98,9 +99,4 @@ const WalletName = ({
   );
 };
 
-export default themeComponent(
-  WalletName,
-  "WalletName",
-  fallbackValues,
-  "primary"
-);
+export default WalletName;

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

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

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/partial-amount-form/PartialAmountField.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { equals } from "ramda";
+import { FormInput } from "../../atoms/form-layouts";
+import { displayCurrency } from "../../../util/general";
+import Text from "../../atoms/text";
+
+const PartialAmountField = ({
+  lineItem,
+  field,
+  showErrors,
+  errorMessages,
+  moneyFormat,
+  fieldActions
+}) => (
+  <FormInput
+    labelTextWhenNoError={lineItem.description}
+    key={lineItem.id}
+    field={field}
+    fieldActions={fieldActions}
+    showErrors={showErrors}
+    errorMessages={errorMessages}
+    style={{ textAlign: "right" }}
+    placeholder="$0.00"
+    formatter={moneyFormat}
+    isNum
+    decorator={
+      <Text variant="p">
+        Amount owed:{"  "}
+        {
+          <Text variant="p" weight="600">
+            {displayCurrency(lineItem.amount)}
+          </Text>
+        }
+      </Text>
+    }
+  />
+);
+
+function arePropsEqual(prevProps, nextProps) {
+  return (
+    equals(prevProps.errorMessages, nextProps.errorMessages) &&
+    equals(prevProps.field, nextProps.field) &&
+    equals(prevProps.showErrors, nextProps.showErrors) &&
+    equals(prevProps.moneyFormat, nextProps.moneyFormat) &&
+    equals(prevProps.lineItem, nextProps.lineItem)
+  );
+}
+
+export default React.memo(PartialAmountField, arePropsEqual);

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -4,13 +4,11 @@ import {
   numberGreaterThanOrEqualTo,
   numberLessThanOrEqualTo
 } from "redux-freeform";
+
+import PartialAmountField from "./PartialAmountField";
 import { displayCurrency } from "../../../util/general";
 import Text from "../../atoms/text";
-import {
-  FormInput,
-  FormInputColumn,
-  FormContainer
-} from "../../atoms/form-layouts";
+import { FormInputColumn, FormContainer } from "../../atoms/form-layouts";
 import { moneyFormat } from "../../../util/formats";
 
 const PartialAmountForm = ({
@@ -68,27 +66,15 @@ const PartialAmountForm = ({
       <div style={{ height: "16px" }}></div>
       <FormInputColumn>
         {lineItemsNew.map(li => (
-          <FormInput
-            labelTextWhenNoError={li.description}
+          <PartialAmountField
             key={li.id}
+            lineItem={li}
             field={fields[li.id]}
-            fieldActions={actions.fields[li.id]}
+            actions={actions}
             showErrors={showErrors}
+            moneyFormat={moneyFormat}
+            fieldActions={actions.fields[li.id]}
             errorMessages={getPartialAmountFormErrors(li.amount)}
-            style={{ textAlign: "right" }}
-            placeholder="$0.00"
-            formatter={moneyFormat}
-            isNum
-            decorator={
-              <Text variant="p">
-                Amount owed:{"  "}
-                {
-                  <Text variant="p" weight="600">
-                    {displayCurrency(li.amount)}
-                  </Text>
-                }
-              </Text>
-            }
           />
         ))}
       </FormInputColumn>

package/src/components/molecules/radio-section/InnerRadioSection.js

@@ -94,12 +94,17 @@ const InnerRadioSection = ({
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
       onClick={
-        (isMobile && supportsTouch) || section.disabled
+        (isMobile && supportsTouch) ||
+        section.disabled ||
+        section.id === openSection
           ? noop
           : () => toggleOpenSection(section.id)
       }
       onTouchEnd={
-        isMobile && supportsTouch && !section.disabled
+        isMobile &&
+        supportsTouch &&
+        !section.disabled &&
+        section.id !== openSection
           ? () => toggleOpenSection(section.id)
           : noop
       }

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

@@ -1,25 +0,0 @@
-import {
-  CHARADE_GREY,
-  ROYAL_BLUE_VIVID,
-  WHITE
-} from "../../../constants/colors";
-
-const backgroundColor = {
-  primary: WHITE
-};
-
-const color = {
-  primary: ROYAL_BLUE_VIVID
-};
-
-const boxShadow = {
-  primary: `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;`
-};
-
-export const fallbackValues = {
-  backgroundColor,
-  color,
-  boxShadow
-};