@thecb/components 4.0.14 → 4.0.17-beta.0

package/dist/index.cjs.js

@@ -19917,9 +19917,7 @@ var ERRORS = {
   "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found and no default was provided.\n\n",
-  "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  "74": "CSS variable not found.\n"
 };
 /**
  * super basic version of sprintf
@@ -20717,13 +20715,13 @@ var RadioButton$1 = function RadioButton(_ref2) {
   var buttonCenter = {
     on: {
       backgroundColor: themeValues.activeColor,
-      height: "1rem",
-      width: "1rem"
+      height: "16px",
+      width: "16px"
     },
     onFocused: {
       backgroundColor: themeValues.activeColor,
-      height: "1rem",
-      width: "1rem"
+      height: "16px",
+      width: "16px"
     },
     offFocused: {
       backgroundColor: "transparent",
@@ -20750,16 +20748,16 @@ var RadioButton$1 = function RadioButton(_ref2) {
   }), /*#__PURE__*/React__default.createElement(Motion, {
     borderWidth: "1px",
     borderStyle: "solid",
-    borderRadius: "0.75rem",
-    margin: "0.25rem 0.875rem 0.25rem 0.25rem",
-    height: "1.5rem",
-    width: "1.5rem",
+    borderRadius: "12px",
+    margin: "4px 14px 4px 4px",
+    height: "24px",
+    width: "24px",
     variants: buttonBorder,
     display: "flex",
     extraStyles: "justify-content: center; align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Motion, {
     variants: buttonCenter,
-    borderRadius: "0.5rem"
+    borderRadius: "8px"
   })));
 };
 
@@ -37697,7 +37695,9 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       subtotal = _ref.subtotal,
       total = _ref.total,
       themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(Stack, null, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "16px"
+  }, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
     variant: themeValues.labeledAmountSubtotal,
@@ -37800,13 +37800,19 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return /*#__PURE__*/React__default.createElement(React.Fragment, {
       key: fee.label
     }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0.25rem 0"
+      padding: "4px 0"
     }), /*#__PURE__*/React__default.createElement(LabeledAmount$1, _extends({
       key: fee.label,
       variant: themeValues.labeledAmountSubtotal
     }, fee)));
   });
-  var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
+  var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "4.5px"
+  }), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "8px"
+  }), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
     subtotal: subtotal,
@@ -37829,7 +37835,11 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     variant: "h5",
     weight: "700",
     as: "h1"
-  }, titleText), displayCurrency(total))) : /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, titleText), /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h5",
+    weight: "700",
+    as: "h1"
+  }, displayCurrency(total)))) : /*#__PURE__*/React__default.createElement(Heading$1, {
     as: "h1",
     variant: "h3",
     weight: "700",
@@ -37960,7 +37970,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
-      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
 
@@ -38095,13 +38104,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), !!(fees === null || fees === void 0 ? void 0 : fees.value) && /*#__PURE__*/React__default.createElement(Alert$1, {
-    heading: "Processing Fee",
-    text: "There is a processing fee of ".concat(fees.type === "FLAT" ? "".concat(displayCurrency(fees.value)) : "".concat(fees.value * 100, "%"), " ").concat(ifElse(isNil, always(""), function (a) {
-      return "with a minimum of ".concat(displayCurrency(a), " ");
-    })(fees.minimumInCents), "on all bank account payments."),
-    variant: "info",
-    showQuitLink: false
   })));
 };
 
@@ -38158,7 +38160,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
-      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       isMobile = _ref.isMobile;
@@ -39355,7 +39356,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Sidebar, {
     width: sidebarTargetWidth,
     childGap: sidebarContentGap,
-    onRight: sidebarOnRight,
+    sidebarOnRight: sidebarOnRight,
     contentMinWidth: mainContentMinWidth
   }, sidebarOnRight ? /*#__PURE__*/React__default.createElement(React.Fragment, null) : sidebarContent, mainContent, sidebarOnRight ? sidebarContent : /*#__PURE__*/React__default.createElement(React.Fragment, null))))), footer ? footer : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -39417,7 +39418,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Sidebar, {
     width: sidebarTargetWidth,
     childGap: sidebarContentGap,
-    onRight: sidebarOnRight,
+    sidebarOnRight: sidebarOnRight,
     contentMinWidth: mainContentMinWidth,
     key: "content-sidebar"
   }, sidebarOnRight ? /*#__PURE__*/React__default.createElement(React.Fragment, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.14",
+  "version": "4.0.17-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.js

@@ -3,7 +3,7 @@ import React from "react";
 import Sidebar from "../../Sidebar";
 
 const SidebarExample = ({ width, onRight, childGap, children }) => (
-  <Sidebar width={width} onRight={onRight} childGap={childGap}>
+  <Sidebar width={width} sidebarOnRight={onRight} childGap={childGap}>
     {children}
   </Sidebar>
 );

package/src/components/atoms/radio-button/RadioButton.js

@@ -40,13 +40,13 @@ const RadioButton = ({
   const buttonCenter = {
     on: {
       backgroundColor: themeValues.activeColor,
-      height: "1rem",
-      width: "1rem"
+      height: "16px",
+      width: "16px"
     },
     onFocused: {
       backgroundColor: themeValues.activeColor,
-      height: "1rem",
-      width: "1rem"
+      height: "16px",
+      width: "16px"
     },
     offFocused: {
       backgroundColor: "transparent",
@@ -85,15 +85,15 @@ const RadioButton = ({
       <Motion
         borderWidth="1px"
         borderStyle="solid"
-        borderRadius="0.75rem"
-        margin="0.25rem 0.875rem 0.25rem 0.25rem"
-        height="1.5rem"
-        width="1.5rem"
+        borderRadius="12px"
+        margin="4px 14px 4px 4px"
+        height="24px"
+        width="24px"
         variants={buttonBorder}
         display="flex"
         extraStyles={`justify-content: center; align-items: center;`}
       >
-        <Motion variants={buttonCenter} borderRadius="0.5rem" />
+        <Motion variants={buttonCenter} borderRadius="8px" />
       </Motion>
     </Motion>
   );

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -18,7 +18,7 @@ const PaymentDetailsContent = ({
   total,
   themeValues
 }) => (
-  <Stack>
+  <Stack childGap="16px">
     {lineItemElems}
     <SolidDivider />
     <Box padding="0.5rem 0">
@@ -99,7 +99,7 @@ const PaymentDetails = ({
   ));
   const feeElems = fees.map(fee => (
     <Fragment key={fee.label}>
-      <Box padding="0.25rem 0" />
+      <Box padding="4px 0" />
       <LabeledAmount
         key={fee.label}
         variant={themeValues.labeledAmountSubtotal}
@@ -108,8 +108,10 @@ const PaymentDetails = ({
     </Fragment>
   ));
   const content = isCollapsible ? (
-    <Stack>
+    <Stack childGap="0">
+      <Box padding="4.5px" />
       <SolidDivider />
+      <Box padding="8px" />
       <PaymentDetailsContent
         {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
       />
@@ -127,7 +129,9 @@ const PaymentDetails = ({
         <Heading variant="h5" weight="700" as="h1">
           {titleText}
         </Heading>
-        {displayCurrency(total)}
+        <Heading variant="h5" weight="700" as="h1">
+          {displayCurrency(total)}
+        </Heading>
       </Cluster>
     </Box>
   ) : (

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { ifElse, isNil, always } from "ramda";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -14,9 +13,8 @@ import {
   FormInputColumn,
   FormContainer
 } from "../../atoms/form-layouts";
-import Alert from "../../atoms/alert";
 import AccountAndRoutingModal from "../account-and-routing-modal";
-import { displayCurrency, noop } from "../../../util/general";
+import { noop } from "../../../util/general";
 
 const ModalWrapper = styled.div``;
 
@@ -30,7 +28,6 @@ const PaymentFormACH = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop
 }) => {
   if (clearOnDismount) {
@@ -165,22 +162,6 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {!!fees?.value && (
-          <Alert
-            heading="Processing Fee"
-            text={`There is a processing fee of ${
-              fees.type === "FLAT"
-                ? `${displayCurrency(fees.value)}`
-                : `${fees.value * 100}%`
-            } ${ifElse(
-              isNil,
-              always(""),
-              a => `with a minimum of ${displayCurrency(a)} `
-            )(fees.minimumInCents)}on all bank account payments.`}
-            variant="info"
-            showQuitLink={false}
-          />
-        )}
       </FormInputColumn>
     </FormContainer>
   );

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
-import { ifElse, isNil, always } from "ramda";
-import { checkCardBrand, displayCurrency, noop } from "../../../util/general";
+import { checkCardBrand, noop } from "../../../util/general";
 import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
   FormInput,
@@ -10,7 +9,6 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
-import Alert from "../../atoms/alert";
 
 const nameOnCardErrors = {
   [required.error]: "Name is required"
@@ -40,7 +38,6 @@ const PaymentFormCard = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop,
   isMobile
 }) => {

package/src/components/templates/sidebar-single-content/SidebarSingleContent.js

@@ -44,7 +44,7 @@ const SidebarSingleContent = ({
               <Sidebar
                 width={sidebarTargetWidth}
                 childGap={sidebarContentGap}
-                onRight={sidebarOnRight}
+                sidebarOnRight={sidebarOnRight}
                 contentMinWidth={mainContentMinWidth}
               >
                 {sidebarOnRight ? <Fragment /> : sidebarContent}

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -46,7 +46,7 @@ const SidebarStackContent = ({
               <Sidebar
                 width={sidebarTargetWidth}
                 childGap={sidebarContentGap}
-                onRight={sidebarOnRight}
+                sidebarOnRight={sidebarOnRight}
                 contentMinWidth={mainContentMinWidth}
                 key="content-sidebar"
               >

package/.tool-versions

@@ -1 +0,0 @@
-nodejs 10.15.3