@thecb/components 10.6.4-beta.2 → 10.6.4

package/src/components/molecules/obligation/icons/PropertyStorefrontIcon.js

@@ -2,20 +2,98 @@ import React from "react";
 
 const PropertyStorefrontIcon = () => (
   <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
-    fill="none"
+    width="51px"
+    height="51px"
+    viewBox="0 0 81 81"
+    version="1.1"
     xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <path
-      d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
-      fill="#3B5BDB"
-    />
-    <path
-      d="M36.5244 20.7878C36.8705 20.7878 37.1734 20.6724 37.4329 20.4417C37.6925 20.2109 37.8439 19.9297 37.8872 19.5981C37.9305 19.2664 37.8656 18.9419 37.6925 18.6247L33.972 13.0872C33.7124 12.6834 33.3375 12.4815 32.8472 12.4815H15.2829C14.7926 12.4815 14.4177 12.6834 14.1581 13.0872L10.4809 18.6247C10.279 18.9419 10.1997 19.2664 10.243 19.5981C10.2862 19.9297 10.4376 20.2109 10.6972 20.4417C10.9568 20.6724 11.2596 20.7878 11.6057 20.7878H36.5244ZM25.4495 34.6315C25.8244 34.6315 26.1488 34.4945 26.4228 34.2205C26.6968 33.9465 26.8338 33.6221 26.8338 33.2471V22.1721H24.0651V29.094H15.7588V22.1721H12.9901V33.2471C12.9901 33.6221 13.1271 33.9465 13.4011 34.2205C13.6751 34.4945 13.9995 34.6315 14.3745 34.6315H25.4495ZM34.4479 34.6315C34.6498 34.6315 34.8156 34.5666 34.9454 34.4368C35.0752 34.307 35.1401 34.1412 35.1401 33.9393V22.1721H32.3713V33.9393C32.3713 34.1412 32.4362 34.307 32.566 34.4368C32.6958 34.5666 32.8616 34.6315 33.0635 34.6315H34.4479Z"
-      fill="#FEFEFE"
-    />
+    <title>Profile Obligation Icon / Property - Storefront</title>
+    <defs>
+      <circle id="storefront-path-1" cx="33.5" cy="33.5" r="33.5"></circle>
+      <filter
+        x="-17.2%"
+        y="-14.2%"
+        width="134.3%"
+        height="134.3%"
+        filterUnits="objectBoundingBox"
+        id="storefront-filter-2"
+      >
+        <feOffset
+          dx="0"
+          dy="-4"
+          in="SourceAlpha"
+          result="shadowOffsetOuter1"
+        ></feOffset>
+        <feColorMatrix
+          values="0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0"
+          type="matrix"
+          in="shadowOffsetOuter1"
+          result="shadowMatrixOuter1"
+        ></feColorMatrix>
+        <feOffset
+          dx="0"
+          dy="2"
+          in="SourceAlpha"
+          result="shadowOffsetOuter2"
+        ></feOffset>
+        <feGaussianBlur
+          stdDeviation="3.5"
+          in="shadowOffsetOuter2"
+          result="shadowBlurOuter2"
+        ></feGaussianBlur>
+        <feColorMatrix
+          values="0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0"
+          type="matrix"
+          in="shadowBlurOuter2"
+          result="shadowMatrixOuter2"
+        ></feColorMatrix>
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+          <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+        </feMerge>
+      </filter>
+    </defs>
+    <g
+      id="storefront-Profile-/-Icons"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="Outlined" transform="translate(7.000000, -341.000000)">
+        <g
+          id="Potentail-future-property"
+          transform="translate(0.000000, 231.000000)"
+        >
+          <g
+            id="storefront-Profile-Obligation-Icon-/-Property---Storefront"
+            transform="translate(0.000000, 115.000000)"
+          >
+            <g id="Oval-Copy-4">
+              <use
+                fill="black"
+                fillOpacity="1"
+                filter="url(#storefront-filter-2)"
+                xlinkHref="#storefront-path-1"
+              ></use>
+              <use
+                fill="#FFFFFF"
+                fillRule="evenodd"
+                xlinkHref="#storefront-path-1"
+              ></use>
+            </g>
+            <path
+              d="M51.9999094,30.0000381 C52.4999082,30.0000381 52.9374072,29.8333716 53.3124063,29.5000393 C53.6874054,29.1667071 53.9061549,28.7604581 53.9686547,28.2812922 C54.0311546,27.8021264 53.9374048,27.3333775 53.6874054,26.8750456 L53.6874054,26.8750456 L48.3124182,18.8750647 C47.9374191,18.291733 47.3957534,18.0000668 46.6874221,18.0000668 L46.6874221,18.0000668 L21.3124826,18.0000668 C20.6041512,18.0000668 20.0624855,18.291733 19.6874864,18.8750647 L19.6874864,18.8750647 L14.3749991,26.8750456 C14.0833328,27.3333775 13.9687501,27.8021264 14.0312499,28.2812922 C14.0937498,28.7604581 14.3124993,29.1667071 14.6874984,29.5000393 C15.0624975,29.8333716 15.4999964,30.0000381 15.9999952,30.0000381 L15.9999952,30.0000381 L51.9999094,30.0000381 Z M35.9999475,49.9999905 C36.5416132,49.9999905 37.0103621,49.802074 37.4061942,49.4062419 C37.8020263,49.0104098 37.9999428,48.5416609 37.9999428,47.9999952 L37.9999428,47.9999952 L37.9999428,32.0000334 L33.9999523,32.0000334 L33.9999523,42.0000095 L21.9999905,42.0000095 L21.9999905,32.0000334 L17.9999905,32.0000334 L17.9999905,47.9999952 C17.9999905,48.5416609 18.197907,49.0104098 18.593739,49.4062419 C18.9895711,49.802074 19.45832,49.9999905 19.9999905,49.9999905 L19.9999905,49.9999905 L35.9999475,49.9999905 Z M48.9999237,49.9999905 C49.2915828,49.9999905 49.5311653,49.9062407 49.7186648,49.7187411 C49.9061644,49.5312416 49.9999237,49.2916591 49.9999237,48.9999928 L49.9999237,48.9999928 L49.9999237,32.0000334 L45.9999237,32.0000334 L45.9999237,48.9999928 C45.9999237,49.2916591 46.0936735,49.5312416 46.281173,49.7187411 C46.4686726,49.9062407 46.708255,49.9999905 46.9999237,49.9999905 L46.9999237,49.9999905 L48.9999237,49.9999905 Z"
+              id="s"
+              fill="#292A33"
+              fillRule="nonzero"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </g>
   </svg>
 );
 

package/src/components/molecules/obligation/icons/index.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import AccountBillIcon from "./AccountBillIcon";
 import AccountGenericIcon from "./AccountGenericIcon";
 import AccountConstructionIcon from "./AccountConstructionIcon";
@@ -41,34 +39,22 @@ const PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 const MISC_BILL_ICON = "MISC_SINGLE_BILL";
 
 export const iconsMap = {
-  [ACCOUNTS_GENERIC_ICON]: color => <AccountGenericIcon color={color} />,
-  [ACCOUNTS_CONSTRUCTION_ICON]: color => (
-    <AccountConstructionIcon color={color} />
-  ),
-  [ACCOUNTS_HEALTH_ICON]: color => <AccountMedicalIcon color={color} />,
-  [ACCOUNTS_DENTAL_ICON]: color => <AccountDentalIcon color={color} />,
-  [ACCOUNTS_UTILITY_ELECTRIC_ICON]: color => (
-    <AccountElectricIcon color={color} />
-  ),
-  [ACCOUNTS_UTILITY_GARBAGE_ICON]: color => (
-    <AccountGarbageIcon color={color} />
-  ),
-  [ACCOUNTS_UTILITY_GAS_ICON]: color => <AccountGasIcon color={color} />,
-  [ACCOUNTS_UTILITY_WATER_ICON]: color => <AccountWaterIcon color={color} />,
-  [PROPERTIES_PERSONAL_ICON]: color => <PropertyPersonalIcon color={color} />,
-  [PROPERTIES_GARAGE_ICON]: color => <PropertyGarageIcon color={color} />,
-  [PROPERTIES_BUSINESS_ICON]: color => <PropertyBusinessIcon color={color} />,
-  [PROPERTIES_STOREFRONT_ICON]: color => (
-    <PropertyStorefrontIcon color={color} />
-  ),
-  [PROPERTIES_APARTMENT_ICON]: color => <PropertyApartmentIcon color={color} />,
-  [PROPERTIES_LAND_ICON]: color => <PropertyLandIcon color={color} />,
-  [PROPERTIES_CAR_ICON]: color => <PropertyCarIcon color={color} />,
-  [PROPERTIES_MOTORCYCLE_ICON]: color => (
-    <PropertyMotorcycleIcon color={color} />
-  ),
-  [PROPERTIES_COMMERCIAL_AUTO_ICON]: color => (
-    <PropertyCommercialVehicleIcon color={color} />
-  ),
-  [MISC_BILL_ICON]: color => <AccountBillIcon color={color} />
+  [ACCOUNTS_GENERIC_ICON]: AccountGenericIcon,
+  [ACCOUNTS_CONSTRUCTION_ICON]: AccountConstructionIcon,
+  [ACCOUNTS_HEALTH_ICON]: AccountMedicalIcon,
+  [ACCOUNTS_DENTAL_ICON]: AccountDentalIcon,
+  [ACCOUNTS_UTILITY_ELECTRIC_ICON]: AccountElectricIcon,
+  [ACCOUNTS_UTILITY_GARBAGE_ICON]: AccountGarbageIcon,
+  [ACCOUNTS_UTILITY_GAS_ICON]: AccountGasIcon,
+  [ACCOUNTS_UTILITY_WATER_ICON]: AccountWaterIcon,
+  [PROPERTIES_PERSONAL_ICON]: PropertyPersonalIcon,
+  [PROPERTIES_GARAGE_ICON]: PropertyGarageIcon,
+  [PROPERTIES_BUSINESS_ICON]: PropertyBusinessIcon,
+  [PROPERTIES_STOREFRONT_ICON]: PropertyStorefrontIcon,
+  [PROPERTIES_APARTMENT_ICON]: PropertyApartmentIcon,
+  [PROPERTIES_LAND_ICON]: PropertyLandIcon,
+  [PROPERTIES_CAR_ICON]: PropertyCarIcon,
+  [PROPERTIES_MOTORCYCLE_ICON]: PropertyMotorcycleIcon,
+  [PROPERTIES_COMMERCIAL_AUTO_ICON]: PropertyCommercialVehicleIcon,
+  [MISC_BILL_ICON]: AccountBillIcon
 };

package/src/components/molecules/obligation/modules/IconModule.js

@@ -1,20 +1,14 @@
 import React from "react";
 import { iconsMap } from "../icons";
 import { Box, Cluster } from "../../../atoms/layouts";
-import { themeComponent } from "../../../../util/themeUtils";
-import { fallbackValues } from "../../../atoms/icons/Icons.theme";
-
-// Uses the theme values (singleIconColor) for the other icons, located in /atoms/icons
 
 const IconsModule = ({
   icon,
   iconDefault,
   configIconMap,
   iconValue,
-  customAttributes,
-  themeValues
+  customAttributes
 }) => {
-  console.log("theme values is", themeValues);
   let Icon;
   if (typeof icon === "object") {
     const iconID = customAttributes?.[iconValue];
@@ -26,10 +20,10 @@ const IconsModule = ({
   return (
     <Box padding="0 1rem 0 0">
       <Cluster justify="center" align="center">
-        <Icon color={themeValues.singleIconColor} />
+        <Icon />
       </Cluster>
     </Box>
   );
 };
 
-export default themeComponent(IconsModule, "Icon", fallbackValues, "primary");
+export default IconsModule;