@thecb/components 4.0.12 → 4.0.13

package/dist/index.cjs.js

@@ -13000,6 +13000,70 @@ var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
 
 var PaymentsIconSmall$1 = themeComponent(PaymentsIconSmall, "Icons", fallbackValues$2, "primary");
 
+var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    id: "path-1",
+    d: "M0 0H103V100H0z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    id: "path-3",
+    d: "M16.624999 11.3749994L11.3749994 11.3749994 11.3749994 16.624999 9.62499952 16.624999 9.62499952 11.3749994 4.37499993 11.3749994 4.37499993 9.62499952 9.62499952 9.62499952 9.62499952 4.37499993 11.3749994 4.37499993 11.3749994 9.62499952 16.624999 9.62499952z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1",
+    transform: "translate(-1)"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask-2",
+    fill: themeValues.primaryColor
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#path-1"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask-2)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(11.33 11)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: themeValues.primaryColor,
+    fillRule: "evenodd",
+    d: "M85.49 9v38H40.17v16.251c0 .918-.726 1.67-1.65 1.743l-.147.006h-27.41c-1.966-2.87-3.557-5.537-4.842-8H31.93v-4H5.15v2.055C-1.194 41.772 1.678 35 1.678 35H15.45V9h70.04z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: themeValues.accentColor,
+    fillRule: "nonzero",
+    d: "M39.963 0c8.67 0 16.925 2.695 23.741 7.603l.461.336H85.49c.547 0 .997.414 1.055.945l.006.116v38c0 .547-.414.997-.945 1.055l-.116.006h-6.75l-.01.04c-4.35 17.186-20.282 29.496-38.767 29.496C17.92 77.597.038 60.235.038 38.799c0-11.976 5.58-22.68 14.35-29.795V9c0-.547.415-.997.946-1.055l.116-.006h.31c6.716-4.981 15.105-7.94 24.203-7.94zM76.095 48.06H40.201v15.19c0 1.5-1.185 2.717-2.672 2.805l-.172.005H15.346c6.573 5.588 15.185 8.976 24.617 8.976 17.105 0 31.859-11.237 36.132-26.976zM13.053 63.94l24.304-.001c.37 0 .668-.263.715-.595l.007-.093L38.078 48H3.813c1.642 6.084 4.874 11.545 9.24 15.94zM84.428 10.06H17.197c-.231.172-.46.347-.687.524l.001 23.354h20.846c1.508 0 2.75 1.163 2.84 2.64l.004.17v9.19l44.227-.001V10.061zm-25.629 25.59l.226.14.334.217.869.584 2.017 1.396c.608.413 1.147.76 1.657 1.066 1.562.934 2.772 1.404 3.545 1.353.706-.047 1.215-.139 1.724-.306l.257-.092 2.175-.952.957-.407.352-.143.32-.126c1.831-.702 3.446.022 4.737 1.553.534.632.903 1.26 1.106 1.7a.875.875 0 01-1.538.828l-.15-.29-.113-.198a6.64 6.64 0 00-.642-.912c-.863-1.023-1.773-1.432-2.774-1.048l-.456.182-.798.335-2.562 1.116-.046.018c-.749.277-1.463.424-2.434.487-1.234.082-2.708-.49-4.558-1.597-.433-.259-.882-.545-1.369-.869l-2.409-1.66-.857-.577-.377-.243a2.382 2.382 0 00-.057-.034c-2.004-1.14-4.756 1.386-6.683 5.22a.875.875 0 11-1.564-.785c.088-.173.176-.344.266-.513l.275-.5c.464-.821.962-1.582 1.488-2.258l.318-.396c2.035-2.442 4.432-3.615 6.764-2.288zm-56.09.34l-.032.426A35.67 35.67 0 002.666 41L38.078 41v-4.25a.701.701 0 00-.623-.682l-.098-.007H3.09c-.134 0-.263-.025-.381-.07zm.22-2.04l.045-.006.116-.006h11.298V12.377C8.276 17.947 4.097 25.487 2.93 33.952zM77.352 14v1.697c1.402.247 2.599.742 3.634 1.48l-1.963 2.457c-1.295-.826-2.71-1.238-3.965-1.238-.95 0-1.417.34-1.417.807v.036c0 .574.487.824 2.47 1.22 3.236.627 5.259 1.56 5.259 3.91v.035c0 2.11-1.551 3.515-4.018 3.947V30h-3.737v-1.671c-1.735-.278-3.33-.916-4.605-1.916l2.184-2.314c1.416.986 2.954 1.507 4.592 1.507 1.072 0 1.639-.324 1.639-.862v-.035c0-.538-.465-.808-2.407-1.22-3.015-.61-5.341-1.363-5.341-3.928v-.035c0-1.953 1.466-3.45 3.938-3.885V14h3.737zM49.44 26.625a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h29.87zm-12.36-6a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h17.51zm11.33-6a.875.875 0 01.11 1.743l-.11.007H35.02a.875.875 0 01-.11-1.743l.11-.007h13.39zm-17.51 0a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007H30.9zM39.963 2.56c-7.19 0-13.902 1.969-19.599 5.38h39.197c-5.824-3.489-12.562-5.38-19.598-5.38z"
+  })))), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(59 61)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "13.3",
+    cy: "13.3",
+    r: "13.3",
+    fill: themeValues.subIconColor
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(2.8 2.8)"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask-4",
+    fill: "#fff"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#path-3"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: "#000",
+    xlinkHref: "#path-3"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: themeValues.primaryColor,
+    mask: "url(#mask-4)"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H21V21H0z"
+  })))))));
+};
+
+var PaymentMethodAddIcon$1 = themeComponent(PaymentMethodAddIcon, "Icons", fallbackValues$2, "info");
+
 var ProfileIconSmall = function ProfileIconSmall(_ref) {
   var themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -16445,10 +16509,10 @@ var Card = function Card(_ref2) {
         return /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
 
       case "payment":
-        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+        return /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
 
       default:
-        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+        return /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
     }
   };
 
@@ -16522,7 +16586,7 @@ var cardRegistry = {
       icon: "properties",
       heading: "Add a Property",
       buttonText: "Add Property",
-      text: "Find and attach your properties to make your payments simple.",
+      text: "Find and attach your properties to make your tax payments simple.",
       cardAction: "/profile/properties"
     }, props));
   },
@@ -39465,6 +39529,7 @@ exports.PaymentDetails = PaymentDetails$1;
 exports.PaymentFormACH = PaymentFormACH;
 exports.PaymentFormCard = PaymentFormCard;
 exports.PaymentIcon = PaymentIcon;
+exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PhoneForm = PhoneForm;

package/package.json

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

package/src/components/atoms/card/Card.js

@@ -10,7 +10,7 @@ import { themeComponent } from "../../../util/themeUtils";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
-  PaymentMethodIcon
+  PaymentMethodAddIcon
 } from "../icons";
 import withWindowSize from "../../withWindowSize";
 
@@ -45,9 +45,9 @@ const Card = ({
       case "properties":
         return <PropertiesAddIcon />;
       case "payment":
-        return <PaymentMethodIcon />;
+        return <PaymentMethodAddIcon />;
       default:
-        return <PaymentMethodIcon />;
+        return <PaymentMethodAddIcon />;
     }
   };
 

package/src/components/atoms/card/index.js

@@ -17,7 +17,7 @@ export const cardRegistry = {
       icon="properties"
       heading="Add a Property"
       buttonText="Add Property"
-      text="Find and attach your properties to make your payments simple."
+      text="Find and attach your properties to make your tax payments simple."
       cardAction="/profile/properties"
       {...props}
     />

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

@@ -0,0 +1,76 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const PaymentMethodAddIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <path id="path-1" d="M0 0H103V100H0z"></path>
+        <path
+          id="path-3"
+          d="M16.624999 11.3749994L11.3749994 11.3749994 11.3749994 16.624999 9.62499952 16.624999 9.62499952 11.3749994 4.37499993 11.3749994 4.37499993 9.62499952 9.62499952 9.62499952 9.62499952 4.37499993 11.3749994 4.37499993 11.3749994 9.62499952 16.624999 9.62499952z"
+        ></path>
+      </defs>
+      <g
+        fill="none"
+        fillRule="evenodd"
+        stroke="none"
+        strokeWidth="1"
+        transform="translate(-1)"
+      >
+        <g>
+          <mask id="mask-2" fill={themeValues.primaryColor}>
+            <use xlinkHref="#path-1"></use>
+          </mask>
+          <g mask="url(#mask-2)">
+            <g transform="translate(11.33 11)">
+              <path
+                fill={themeValues.primaryColor}
+                fillRule="evenodd"
+                d="M85.49 9v38H40.17v16.251c0 .918-.726 1.67-1.65 1.743l-.147.006h-27.41c-1.966-2.87-3.557-5.537-4.842-8H31.93v-4H5.15v2.055C-1.194 41.772 1.678 35 1.678 35H15.45V9h70.04z"
+              ></path>
+              <path
+                fill={themeValues.accentColor}
+                fillRule="nonzero"
+                d="M39.963 0c8.67 0 16.925 2.695 23.741 7.603l.461.336H85.49c.547 0 .997.414 1.055.945l.006.116v38c0 .547-.414.997-.945 1.055l-.116.006h-6.75l-.01.04c-4.35 17.186-20.282 29.496-38.767 29.496C17.92 77.597.038 60.235.038 38.799c0-11.976 5.58-22.68 14.35-29.795V9c0-.547.415-.997.946-1.055l.116-.006h.31c6.716-4.981 15.105-7.94 24.203-7.94zM76.095 48.06H40.201v15.19c0 1.5-1.185 2.717-2.672 2.805l-.172.005H15.346c6.573 5.588 15.185 8.976 24.617 8.976 17.105 0 31.859-11.237 36.132-26.976zM13.053 63.94l24.304-.001c.37 0 .668-.263.715-.595l.007-.093L38.078 48H3.813c1.642 6.084 4.874 11.545 9.24 15.94zM84.428 10.06H17.197c-.231.172-.46.347-.687.524l.001 23.354h20.846c1.508 0 2.75 1.163 2.84 2.64l.004.17v9.19l44.227-.001V10.061zm-25.629 25.59l.226.14.334.217.869.584 2.017 1.396c.608.413 1.147.76 1.657 1.066 1.562.934 2.772 1.404 3.545 1.353.706-.047 1.215-.139 1.724-.306l.257-.092 2.175-.952.957-.407.352-.143.32-.126c1.831-.702 3.446.022 4.737 1.553.534.632.903 1.26 1.106 1.7a.875.875 0 01-1.538.828l-.15-.29-.113-.198a6.64 6.64 0 00-.642-.912c-.863-1.023-1.773-1.432-2.774-1.048l-.456.182-.798.335-2.562 1.116-.046.018c-.749.277-1.463.424-2.434.487-1.234.082-2.708-.49-4.558-1.597-.433-.259-.882-.545-1.369-.869l-2.409-1.66-.857-.577-.377-.243a2.382 2.382 0 00-.057-.034c-2.004-1.14-4.756 1.386-6.683 5.22a.875.875 0 11-1.564-.785c.088-.173.176-.344.266-.513l.275-.5c.464-.821.962-1.582 1.488-2.258l.318-.396c2.035-2.442 4.432-3.615 6.764-2.288zm-56.09.34l-.032.426A35.67 35.67 0 002.666 41L38.078 41v-4.25a.701.701 0 00-.623-.682l-.098-.007H3.09c-.134 0-.263-.025-.381-.07zm.22-2.04l.045-.006.116-.006h11.298V12.377C8.276 17.947 4.097 25.487 2.93 33.952zM77.352 14v1.697c1.402.247 2.599.742 3.634 1.48l-1.963 2.457c-1.295-.826-2.71-1.238-3.965-1.238-.95 0-1.417.34-1.417.807v.036c0 .574.487.824 2.47 1.22 3.236.627 5.259 1.56 5.259 3.91v.035c0 2.11-1.551 3.515-4.018 3.947V30h-3.737v-1.671c-1.735-.278-3.33-.916-4.605-1.916l2.184-2.314c1.416.986 2.954 1.507 4.592 1.507 1.072 0 1.639-.324 1.639-.862v-.035c0-.538-.465-.808-2.407-1.22-3.015-.61-5.341-1.363-5.341-3.928v-.035c0-1.953 1.466-3.45 3.938-3.885V14h3.737zM49.44 26.625a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h29.87zm-12.36-6a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h17.51zm11.33-6a.875.875 0 01.11 1.743l-.11.007H35.02a.875.875 0 01-.11-1.743l.11-.007h13.39zm-17.51 0a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007H30.9zM39.963 2.56c-7.19 0-13.902 1.969-19.599 5.38h39.197c-5.824-3.489-12.562-5.38-19.598-5.38z"
+              ></path>
+            </g>
+          </g>
+        </g>
+        <g transform="translate(59 61)">
+          <circle
+            cx="13.3"
+            cy="13.3"
+            r="13.3"
+            fill={themeValues.subIconColor}
+          ></circle>
+          <g transform="translate(2.8 2.8)">
+            <mask id="mask-4" fill="#fff">
+              <use xlinkHref="#path-3"></use>
+            </mask>
+            <use fill="#000" xlinkHref="#path-3"></use>
+            <g fill={themeValues.primaryColor} mask="url(#mask-4)">
+              <g>
+                <path d="M0 0H21V21H0z"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  PaymentMethodAddIcon,
+  "Icons",
+  fallbackValues,
+  "info"
+);

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

@@ -6,6 +6,7 @@ import VerifiedEmailIcon from "./VerifiedEmailIcon";
 import PaymentMethodIcon from "./PaymentMethodIcon";
 import AccountsIconSmall from "./AccountsIconSmall";
 import PaymentsIconSmall from "./PaymentsIconSmall";
+import PaymentMethodAddIcon from "./PaymentMethodAddIcon";
 import ProfileIconSmall from "./ProfileIconSmall";
 import SettingsIconSmall from "./SettingsIconSmall";
 import ChevronIcon from "./ChevronIcon";
@@ -30,6 +31,7 @@ export {
   PaymentMethodIcon,
   AccountsIconSmall,
   PaymentsIconSmall,
+  PaymentMethodAddIcon,
   ProfileIconSmall,
   SettingsIconSmall,
   ChevronIcon,