@thecb/components 10.4.3-beta.0 → 10.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.4.3-beta.0",
+  "version": "10.4.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/IconAdd.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const IconAdd = () => (
+const IconAdd = ({ strokeWidth = 1 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -15,7 +15,7 @@ const IconAdd = () => (
         d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
       ></path>
     </defs>
-    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
       <g transform="translate(-407 -563)">
         <g transform="translate(408 562)">
           <g transform="translate(0 2)">
@@ -25,7 +25,13 @@ const IconAdd = () => (
               </mask>
               <use className="fill" xlinkHref="#path-1"></use>
             </g>
-            <circle className="stroke" cx="8.155" cy="8.072" r="8"></circle>
+            <circle
+              className="stroke"
+              strokeWidth={strokeWidth}
+              cx="8.155"
+              cy="8.072"
+              r="8"
+            ></circle>
           </g>
         </g>
       </g>

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

@@ -16,7 +16,7 @@ import {
   IconAdd,
   PaymentMethodAddIcon
 } from "../icons";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -123,7 +123,7 @@ const Placeholder = ({
                     stroke: ${
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
-                  }`}
+                  } `}
               >
                 {variant === "large" ? (
                   <Center intrinsic>
@@ -131,7 +131,7 @@ const Placeholder = ({
                     <Text
                       variant="pS"
                       color={themeValues.color}
-                      weight={FONT_WEIGHT_REGULAR}
+                      weight={FONT_WEIGHT_SEMIBOLD}
                       extraStyles={`text-align: center;`}
                     >
                       {text}
@@ -140,12 +140,12 @@ const Placeholder = ({
                 ) : (
                   <Cover singleChild minHeight="100%">
                     <Cluster justify="center" align="center">
-                      <IconAdd />
+                      <IconAdd strokeWidth="2" />
                       <Center intrinsic>
                         <Text
                           variant="pS"
                           color={themeValues.color}
-                          weight={FONT_WEIGHT_REGULAR}
+                          weight={FONT_WEIGHT_SEMIBOLD}
                           extraStyles={`padding: 0 0 0 8px; text-align: center;`}
                         >
                           {text}

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

@@ -13,7 +13,8 @@ const groupId = "props";
 
 const icons = {
   accounts: "accounts",
-  properties: "properties"
+  properties: "properties",
+  payments: "payments"
 };
 
 const iconLabel = "largeIcon";

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -3,6 +3,7 @@ import Modal from "../modal";
 import Text from "../../atoms/text";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Stack, Center } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action/ButtonWithAction";
 import { fallbackValues } from "./AccountAndRoutingModal.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { AccountNumberImage, RoutingNumberImage } from "../../atoms/icons";
@@ -18,57 +19,56 @@ const AccountAndRoutingModal = ({
   imageType,
   themeValues,
   dataQa = null
-}) => (
-  <Modal
-    modalOpen={isOpen}
-    hideModal={() => toggleOpen(false)}
-    showModal={() => toggleOpen(true)}
-    modalHeaderText={title}
-    dataQa={dataQa}
-    modalBodyText={
-      <Box extraStyles="overflow: scroll; max-height: 20rem;">
-        <Stack>
-          <Paragraph variant="p">{content}</Paragraph>
-          {imageType === "Account" ? (
-            <Center intrinsic>
-              <AccountNumberImage />
-            </Center>
-          ) : imageType === "Routing" ? (
-            <Center intrinsic>
-              <RoutingNumberImage />
-            </Center>
-          ) : (
-            <Fragment />
-          )}
-        </Stack>
-      </Box>
-    }
-    defaultWrapper={false}
-    onlyCloseButton={!acceptText}
-    continueButtonText={acceptText}
-    continueAction={() => {
-      toggleAccepted(true);
-      toggleOpen(false);
-    }}
-    initialFocusSelector={"[name='Close']"}
-  >
-    <Text
-      variant="pS"
-      onClick={() => toggleOpen(true)}
-      onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
-      tabIndex="0"
-      color={themeValues.linkColor}
-      weight={themeValues.fontWeight}
-      hoverStyles={themeValues.modalLinkHoverFocus}
-      textDecoration={themeValues.linkTextDecoration}
-      extraStyles={`cursor: pointer;`}
-      role="button"
-      className="modal-trigger"
+}) => {
+  return (
+    <Modal
+      modalOpen={isOpen}
+      hideModal={() => toggleOpen(false)}
+      showModal={() => toggleOpen(true)}
+      modalHeaderText={title}
+      dataQa={dataQa}
+      modalBodyText={
+        <Box extraStyles="overflow: scroll; max-height: 20rem;">
+          <Stack>
+            <Paragraph variant="p">{content}</Paragraph>
+            {imageType === "Account" ? (
+              <Center intrinsic>
+                <AccountNumberImage />
+              </Center>
+            ) : imageType === "Routing" ? (
+              <Center intrinsic>
+                <RoutingNumberImage />
+              </Center>
+            ) : (
+              <Fragment />
+            )}
+          </Stack>
+        </Box>
+      }
+      defaultWrapper={false}
+      onlyCloseButton={!acceptText}
+      continueButtonText={acceptText}
+      continueAction={() => {
+        toggleAccepted(true);
+        toggleOpen(false);
+      }}
+      initialFocusSelector={"[name='Close']"}
     >
-      {link}
-    </Text>
-  </Modal>
-);
+      <ButtonWithAction
+        variant="ghost"
+        tabIndex="0"
+        onClick={() => toggleOpen(true)}
+        onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
+        extraStyles="min-width: 0; min-height: 0;margin: 0; padding: 0; text-transform: none;"
+        text={
+          <Text variant="pS" color="inherit">
+            {link}
+          </Text>
+        }
+      />
+    </Modal>
+  );
+};
 
 export default themeComponent(
   AccountAndRoutingModal,