@thecb/components 4.1.4 → 4.1.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.4",
+  "version": "4.1.6-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -48,7 +48,7 @@
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "6.0.0-alpha.3",
+    "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",

package/src/components/atoms/checkbox/Checkbox.js

@@ -130,10 +130,10 @@ const Checkbox = ({
         </StyledCheckbox>
       </CheckboxContainer>
       <Text
-        variant="pL"
+        variant="p"
         weight={themeValues.textFontWeight}
         color={themeValues.textColor}
-        extraStyles={`margin-left: 0.5rem`}
+        extraStyles={`margin-left: 1rem`}
       >
         {title}
       </Text>

package/src/components/atoms/checkbox/Checkbox.theme.js

@@ -2,17 +2,17 @@ import {
   WHITE,
   TRANSPARENT,
   GHOST_GREY,
-  STORM_GREY,
   SEASHELL_WHITE,
   MATISSE_BLUE,
-  RED
+  RED,
+  CHARADE_GREY
 } from "../../../constants/colors";
 
 const backgroundColor = { default: `${TRANSPARENT}` };
 const textFontSize = { default: "1.1rem" };
 const textFontWeight = { default: "400" };
 const textLineHeight = { default: "2rem" };
-const textColor = { default: `${STORM_GREY}` };
+const textColor = { default: `${CHARADE_GREY}` };
 const disabledCheckColor = { default: `${GHOST_GREY};` };
 const checkColor = { default: `${WHITE};` };
 const errorStyles = { default: `border: 1px solid ${RED};` };

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const AchReturnIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -64.000000)"
+        fill="#B34A00"
+      >
+        <path
+          d="M80,64 C88.836556,64 96,71.163444 96,80 C96,88.836556 88.836556,96 80,96 C71.163444,96 64,88.836556 64,80 C64,71.163444 71.163444,64 80,64 Z M77.4246212,73.2824856 C77.2293591,73.0872234 76.9127766,73.0872234 76.7175144,73.2824856 L76.7175144,73.2824856 L70.3535534,79.6464466 C70.1582912,79.8417088 70.1582912,80.1582912 70.3535534,80.3535534 L70.3535534,80.3535534 L76.7175144,86.7175144 C76.9127766,86.9127766 77.2293591,86.9127766 77.4246212,86.7175144 L77.4246212,86.7175144 L78.131728,86.0104076 C78.3269901,85.8151455 78.3269901,85.498563 78.131728,85.3033009 L78.131728,85.3033009 L73.8271068,80.999039 L89.5,81 C89.7761424,81 90,80.7761424 90,80.5 L90,80.5 L90,79.5 C90,79.2238576 89.7761424,79 89.5,79 L89.5,79 L73.8281068,78.999039 L78.131728,74.6966991 C78.3269901,74.501437 78.3269901,74.1848545 78.131728,73.9895924 L78.131728,73.9895924 Z"
+          id="status-icon---ach-return"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default AchReturnIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const AllocatedIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -112.000000)"
+        fill="#D11053"
+      >
+        <path
+          d="M80,112 C88.836556,112 96,119.163444 96,128 C96,136.836556 88.836556,144 80,144 C71.163444,144 64,136.836556 64,128 C64,119.163444 71.163444,112 80,112 Z M83,120 L73,120 C72.4477153,120 72,120.447715 72,121 L72,121 L72,131 C72,131.552285 72.4477153,132 73,132 L73,132 L76,132 L76,135 C76,135.552285 76.4477153,136 77,136 L77,136 L87,136 C87.5522847,136 88,135.552285 88,135 L88,135 L88,125 C88,124.447715 87.5522847,124 87,124 L87,124 L84,124 L84,121 C84,120.447715 83.5522847,120 83,120 L83,120 Z M86.5,126.56 L86.5,134.5 L78.56,134.5 L86.5,126.56 Z M85.438,125.5 L77.5,133.438 L77.5,125.5 L85.438,125.5 Z M82.5,121.5 L82.5,124 L77,124 C76.4477153,124 76,124.447715 76,125 L76,125 L76,130.5 L73.5,130.5 L73.5,121.5 L82.5,121.5 Z"
+          id="status-icon---allocated"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default AllocatedIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const CalendarIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -352.000000)"
+        fill="#6E727E"
+      >
+        <path
+          d="M80,384 C88.836556,384 96,376.836556 96,368 C96,359.163444 88.836556,352 80,352 C71.163444,352 64,359.163444 64,368 C64,376.836556 71.163444,384 80,384 Z M73,362 L87,362 C87.5522847,362 88,362.447715 88,363 L88,375 C88,375.552285 87.5522847,376 87,376 L73,376 C72.4477153,376 72,375.552285 72,375 L72,363 C72,362.447715 72.4477153,362 73,362 Z M86.5,366 L86.5,374.5 L73.5,374.5 L73.5,366 L86.5,366 Z M76.25,360.5 C76.3880712,360.5 76.5,360.611929 76.5,360.75 L76.5,362 L75,362 L75,360.75 C75,360.611929 75.1119288,360.5 75.25,360.5 L76.25,360.5 Z M84.75,360.5 C84.8880712,360.5 85,360.611929 85,360.75 L85,362 L83.5,362 L83.5,360.75 C83.5,360.611929 83.6119288,360.5 83.75,360.5 L84.75,360.5 Z"
+          id="status-icon---calendar"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default CalendarIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const ChargebackIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -160.000000)"
+        fill="#B34A00"
+      >
+        <path
+          d="M80,192 C88.836556,192 96,184.836556 96,176 C96,167.163444 88.836556,160 80,160 C71.163444,160 64,167.163444 64,176 C64,184.836556 71.163444,192 80,192 Z M89,170 C89.5522847,170 90,170.447715 90,171 L90,181 C90,181.552285 89.5522847,182 89,182 L75,182 C74.4477153,182 74,181.552285 74,181 L74,171 C74,170.447715 74.4477153,170 75,170 L89,170 Z M89,176 L75,176 L75,181 L89,181 L89,176 Z M71.8535534,172.853553 C71.9473216,172.947322 72,173.074499 72,173.207107 L72,178.792893 C72,179.069036 71.7761424,179.292893 71.5,179.292893 C71.3673918,179.292893 71.2402148,179.240215 71.1464466,179.146447 L68.3535534,176.353553 C68.1582912,176.158291 68.1582912,175.841709 68.3535534,175.646447 L71.1464466,172.853553 C71.3417088,172.658291 71.6582912,172.658291 71.8535534,172.853553 Z M86.75,177.75 C87.0261424,177.75 87.25,177.973858 87.25,178.25 L87.25,178.75 C87.25,179.026142 87.0261424,179.25 86.75,179.25 L84.75,179.25 C84.4738576,179.25 84.25,179.026142 84.25,178.75 L84.25,178.25 C84.25,177.973858 84.4738576,177.75 84.75,177.75 L86.75,177.75 Z M89,171 L75,171 L75,173.5 L89,173.5 L89,171 Z"
+          id="status-icon---chargeback"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default ChargebackIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const ChargebackReversalIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -208.000000)"
+        fill="#B34A00"
+      >
+        <path
+          d="M80,240 C88.836556,240 96,232.836556 96,224 C96,215.163444 88.836556,208 80,208 C71.163444,208 64,215.163444 64,224 C64,232.836556 71.163444,240 80,240 Z M85,218 C85.5522847,218 86,218.447715 86,219 L86,229 C86,229.552285 85.5522847,230 85,230 L71,230 C70.4477153,230 70,229.552285 70,229 L70,219 C70,218.447715 70.4477153,218 71,218 L85,218 Z M85,224 L71,224 L71,229 L85,229 L85,224 Z M88.1464466,220.853553 C88.3417088,220.658291 88.6582912,220.658291 88.8535534,220.853553 L88.8535534,220.853553 L91.6464466,223.646447 C91.8417088,223.841709 91.8417088,224.158291 91.6464466,224.353553 L91.6464466,224.353553 L88.8535534,227.146447 C88.7597852,227.240215 88.6326082,227.292893 88.5,227.292893 C88.2238576,227.292893 88,227.069036 88,226.792893 L88,226.792893 L88,221.207107 C88,221.074499 88.0526784,220.947322 88.1464466,220.853553 Z M82.75,225.75 C83.0261424,225.75 83.25,225.973858 83.25,226.25 L83.25,226.75 C83.25,227.026142 83.0261424,227.25 82.75,227.25 L80.75,227.25 C80.4738576,227.25 80.25,227.026142 80.25,226.75 L80.25,226.25 C80.25,225.973858 80.4738576,225.75 80.75,225.75 L82.75,225.75 Z M85,219 L71,219 L71,221.5 L85,221.5 L85,219 Z"
+          id="status-icon---chargeback-reversal"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default ChargebackReversalIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const DuplicateIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -256.000000)"
+        fill="#6E727E"
+      >
+        <path
+          d="M80,288 C88.836556,288 96,280.836556 96,272 C96,263.163444 88.836556,256 80,256 C71.163444,256 64,263.163444 64,272 C64,280.836556 71.163444,288 80,288 Z M83,264 C83.5522847,264 84,264.447715 84,265 L84,268 L87,268 C87.5522847,268 88,268.447715 88,269 L88,279 C88,279.552285 87.5522847,280 87,280 L77,280 C76.4477153,280 76,279.552285 76,279 L76,276 L73,276 C72.4477153,276 72,275.552285 72,275 L72,265 C72,264.447715 72.4477153,264 73,264 L83,264 Z M82.5,265.5 L73.5,265.5 L73.5,274.5 L76,274.5 L76,269 C76,268.447715 76.4477153,268 77,268 L82.5,268 L82.5,265.5 Z M77.5,269.5 L86.5,269.5 L86.5,278.5 L77.5,278.5 L77.5,269.5 Z"
+          id="status-icon---duplicate"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default DuplicateIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const ErroredIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -304.000000)"
+        fill="#D11053"
+      >
+        <path
+          d="M80,336 C88.836556,336 96,328.836556 96,320 C96,311.163444 88.836556,304 80,304 C71.163444,304 64,311.163444 64,320 C64,328.836556 71.163444,336 80,336 Z M72.5492717,327 L87.4507283,327 C88.2791554,327 88.9507283,326.328427 88.9507283,325.5 C88.9507283,325.245084 88.8857626,324.994373 88.7619642,324.771536 L81.3112359,311.360225 C80.9089161,310.636049 79.9957112,310.375133 79.2715356,310.777453 C79.0266755,310.913487 78.8247975,311.115365 78.6887641,311.360225 L71.2380358,324.771536 C70.835716,325.495711 71.0966317,326.408916 71.8208073,326.811236 C72.0436443,326.935034 72.2943553,327 72.5492717,327 Z M72.5,325.5 L87.5,325.5 L80,312.087006 L72.5,325.5 Z M79.5,322.5 L80.5,322.5 C80.6380712,322.5 80.75,322.611929 80.75,322.75 L80.75,323.75 C80.75,323.888071 80.6380712,324 80.5,324 L79.5,324 C79.3619288,324 79.25,323.888071 79.25,323.75 L79.25,322.75 C79.25,322.611929 79.3619288,322.5 79.5,322.5 Z M79.5,315.5 L80.5,315.5 C80.6380712,315.5 80.75,315.611929 80.75,315.75 L80.75,321.25 C80.75,321.388071 80.6380712,321.5 80.5,321.5 L79.5,321.5 C79.3619288,321.5 79.25,321.388071 79.25,321.25 L79.25,315.75 C79.25,315.611929 79.3619288,315.5 79.5,315.5 Z"
+          id="status-icon---errored"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default ErroredIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const FailedIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -400.000000)"
+        fill="#D11053"
+      >
+        <path
+          d="M80,432 C88.836556,432 96,424.836556 96,416 C96,407.163444 88.836556,400 80,400 C71.163444,400 64,407.163444 64,416 C64,424.836556 71.163444,432 80,432 Z M75.4038059,409.989592 L80.0001458,414.586146 L84.5961941,409.989592 C84.7914562,409.79433 85.1080387,409.79433 85.3033009,409.989592 L86.0104076,410.696699 C86.2056698,410.891961 86.2056698,411.208544 86.0104076,411.403806 L81.4141458,416.000146 L86.0104076,420.596194 C86.2056698,420.791456 86.2056698,421.108039 86.0104076,421.303301 L85.3033009,422.010408 C85.1080387,422.20567 84.7914562,422.20567 84.5961941,422.010408 L80.0001458,417.414146 L75.4038059,422.010408 C75.2085438,422.20567 74.8919613,422.20567 74.6966991,422.010408 L73.9895924,421.303301 C73.7943302,421.108039 73.7943302,420.791456 73.9895924,420.596194 L78.5861458,416.000146 L73.9895924,411.403806 C73.7943302,411.208544 73.7943302,410.891961 73.9895924,410.696699 L74.6966991,409.989592 C74.8919613,409.79433 75.2085438,409.79433 75.4038059,409.989592 Z"
+          id="status-icon---failed"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default FailedIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const PendingIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -448.000000)"
+        fill="#6E727E"
+      >
+        <path
+          d="M80,480 C88.836556,480 96,472.836556 96,464 C96,455.163444 88.836556,448 80,448 C71.163444,448 64,455.163444 64,464 C64,472.836556 71.163444,480 80,480 Z M87,466 C88.1045695,466 89,465.104569 89,464 C89,462.895431 88.1045695,462 87,462 C85.8954305,462 85,462.895431 85,464 C85,465.104569 85.8954305,466 87,466 Z M80,462 C81.1045695,462 82,462.895431 82,464 C82,465.104569 81.1045695,466 80,466 C78.8954305,466 78,465.104569 78,464 C78,462.895431 78.8954305,462 80,462 Z M73,462 C74.1045695,462 75,462.895431 75,464 C75,465.104569 74.1045695,466 73,466 C71.8954305,466 71,465.104569 71,464 C71,462.895431 71.8954305,462 73,462 Z"
+          id="status-icon---pending"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default PendingIcon;

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

@@ -0,0 +1,34 @@
+import React from "react";
+
+const RefundIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -496.000000)"
+        fill="#317D4F"
+        fillRule="nonzero"
+      >
+        <path
+          d="M80,528 C88.836556,528 96,520.836556 96,512 C96,503.163444 88.836556,496 80,496 C71.163444,496 64,503.163444 64,512 C64,520.836556 71.163444,528 80,528 Z M82.3230241,504.25 L82.3230241,505.928718 C84.4879725,506.299892 85.8024055,507.750844 85.7766323,509.497047 L85.7766323,509.497047 L83.242268,509.539226 C83.0876289,508.459448 82.5893471,507.801458 81.266323,507.801458 C79.9003436,507.801458 79.0584192,508.408833 79.0584192,509.294589 C79.0584192,510.003194 79.4536082,510.357496 80.8024055,510.703362 L80.8024055,510.703362 L82.8041237,511.184201 C85.0635739,511.715654 86,513.048506 86,514.879067 C86,516.718065 84.5652921,518.000301 82.2714777,518.295553 L82.2714777,518.295553 L82.2714777,519.805556 L80.1065292,519.805556 L80.1065292,518.303989 C77.7525773,518.04248 76.2319588,516.895216 76,514.760966 L76,514.760966 L78.6116838,514.710352 C78.8780069,515.823873 79.8402062,516.414377 81.2147766,516.414377 C82.45189,516.414377 83.3367698,515.764823 83.3367698,514.895939 C83.3367698,513.993312 82.7611684,513.622138 81.5498282,513.352193 L81.5498282,513.352193 L79.5137457,512.921969 C77.6151203,512.54236 76.395189,511.454146 76.3694158,509.581405 C76.3522337,507.590564 77.9329897,506.249277 80.1494845,505.920282 L80.1494845,505.920282 L80.1494845,504.25 L82.3230241,504.25 Z M73.5,508.540312 C73.7761424,508.540312 74,508.76417 74,509.040312 L74,509.040312 L74,514.959688 C74,515.073223 73.9613596,515.183379 73.8904344,515.272035 C73.7179296,515.487666 73.4032834,515.522627 73.1876525,515.350122 L73.1876525,515.350122 L69.488043,512.390434 C69.4592107,512.367369 69.433022,512.34118 69.4099561,512.312348 C69.2374514,512.096717 69.272412,511.78207 69.488043,511.609566 L69.488043,511.609566 L73.1876525,508.649878 C73.276309,508.578953 73.3864643,508.540312 73.5,508.540312 Z"
+          id="status-icon---refund"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default RefundIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const RejectedIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fillRule="none"
+      fillule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -544.000000)"
+        fill="#D11053"
+      >
+        <path
+          d="M80,576 C88.836556,576 96,568.836556 96,560 C96,551.163444 88.836556,544 80,544 C71.163444,544 64,551.163444 64,560 C64,568.836556 71.163444,576 80,576 Z M76.7175144,553.282486 C76.9127766,553.087223 77.2293591,553.087223 77.4246212,553.282486 L78.131728,553.989592 C78.3269901,554.184855 78.3269901,554.501437 78.131728,554.696699 L73.8281068,558.999039 L89.5,559 C89.7761424,559 90,559.223858 90,559.5 L90,560.5 C90,560.776142 89.7761424,561 89.5,561 L73.8271068,560.999039 L78.131728,565.303301 C78.3269901,565.498563 78.3269901,565.815145 78.131728,566.010408 L77.4246212,566.717514 C77.2293591,566.912777 76.9127766,566.912777 76.7175144,566.717514 L70.3535534,560.353553 C70.1582912,560.158291 70.1582912,559.841709 70.3535534,559.646447 L76.7175144,553.282486 Z"
+          id="status-icon---rejected"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default RejectedIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const RejectedVelocityIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -592.000000)"
+        fill="#D11053"
+      >
+        <path
+          d="M80,624 C88.836556,624 96,616.836556 96,608 C96,599.163444 88.836556,592 80,592 C71.163444,592 64,599.163444 64,608 C64,616.836556 71.163444,624 80,624 Z M77.4246212,601.282486 L78.131728,601.989592 C78.3269901,602.184855 78.3269901,602.501437 78.131728,602.696699 L73.8281068,606.999039 L81.5,607 C81.7761424,607 82,607.223858 82,607.5 L82,608.5 C82,608.776142 81.7761424,609 81.5,609 L73.8271068,608.999039 L78.131728,613.303301 C78.3269901,613.498563 78.3269901,613.815145 78.131728,614.010408 L77.4246212,614.717514 C77.2293591,614.912777 76.9127766,614.912777 76.7175144,614.717514 L70.3535534,608.353553 C70.1582912,608.158291 70.1582912,607.841709 70.3535534,607.646447 L76.7175144,601.282486 C76.9127766,601.087223 77.2293591,601.087223 77.4246212,601.282486 Z M89.75,607 C89.8880712,607 90,607.111929 90,607.25 L90,608.75 C90,608.888071 89.8880712,609 89.75,609 L88.25,609 C88.1119288,609 88,608.888071 88,608.75 L88,607.25 C88,607.111929 88.1119288,607 88.25,607 L89.75,607 Z M85.75,607 C85.8880712,607 86,607.111929 86,607.25 L86,608.75 C86,608.888071 85.8880712,609 85.75,609 L84.25,609 C84.1119288,609 84,608.888071 84,608.75 L84,607.25 C84,607.111929 84.1119288,607 84.25,607 L85.75,607 Z"
+          id="status-icon---rejected-velocity"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default RejectedVelocityIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const SuccessfulIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -640.000000)"
+        fill="#317D4F"
+      >
+        <path
+          d="M80,672 C88.836556,672 96,664.836556 96,656 C96,647.163444 88.836556,640 80,640 C71.163444,640 64,647.163444 64,656 C64,664.836556 71.163444,672 80,672 Z M89.6923882,650.464466 C89.8876503,650.659728 89.8876503,650.976311 89.6923882,651.171573 L78.3859015,662.477912 C78.3835247,662.480387 78.3811174,662.482844 78.3786797,662.485281 L77.6715729,663.192388 C77.4763107,663.38765 77.1597282,663.38765 76.9644661,663.192388 L76.2573593,662.485281 L76.2502882,662.476796 L71.3076118,657.535534 C71.1123497,657.340272 71.1123497,657.023689 71.3076118,656.828427 L72.0147186,656.12132 C72.2099808,655.926058 72.5265633,655.926058 72.7218254,656.12132 L77.3180195,660.7161 L88.2781746,649.757359 C88.4734367,649.562097 88.7900192,649.562097 88.9852814,649.757359 L89.6923882,650.464466 Z"
+          id="status-icon---successful"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default SuccessfulIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+const VoidedIcon = () => (
+  <svg
+    width="32px"
+    height="32px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g
+      id="STOR-3203"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Icons"
+        transform="translate(-64.000000, -688.000000)"
+        fill="#317D4F"
+      >
+        <path
+          d="M80,720 C88.836556,720 96,712.836556 96,704 C96,695.163444 88.836556,688 80,688 C71.163444,688 64,695.163444 64,704 C64,712.836556 71.163444,720 80,720 Z M75.4038059,697.989592 L80.0001458,702.586146 L84.5961941,697.989592 C84.7914562,697.79433 85.1080387,697.79433 85.3033009,697.989592 L86.0104076,698.696699 C86.2056698,698.891961 86.2056698,699.208544 86.0104076,699.403806 L81.4141458,704.000146 L86.0104076,708.596194 C86.2056698,708.791456 86.2056698,709.108039 86.0104076,709.303301 L85.3033009,710.010408 C85.1080387,710.20567 84.7914562,710.20567 84.5961941,710.010408 L80.0001458,705.414146 L75.4038059,710.010408 C75.2085438,710.20567 74.8919613,710.20567 74.6966991,710.010408 L73.9895924,709.303301 C73.7943302,709.108039 73.7943302,708.791456 73.9895924,708.596194 L78.5861458,704.000146 L73.9895924,699.403806 C73.7943302,699.208544 73.7943302,698.891961 73.9895924,698.696699 L74.6966991,697.989592 C74.8919613,697.79433 75.2085438,697.79433 75.4038059,697.989592 Z"
+          id="status-icon---voided"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default VoidedIcon;

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

@@ -22,7 +22,21 @@ import {
   GenericCard,
   PaymentIcon,
   AutopayOnIcon,
-  SearchIcon
+  SearchIcon,
+  AchReturnIcon,
+  AllocatedIcon,
+  CalendarIcon,
+  ChargebackIcon,
+  ChargebackReversalIcon,
+  DuplicateIcon,
+  ErroredIcon,
+  FailedIcon,
+  PendingIcon,
+  RefundIcon,
+  RejectedIcon,
+  RejectedVelocityIcon,
+  SuccessfulIcon,
+  VoidedIcon
 } from "./index";
 
 const story = page({
@@ -52,3 +66,17 @@ export const genericCard = () => <GenericCard />;
 export const paymentIcon = () => <PaymentIcon />;
 export const autopayOnIcon = () => <AutopayOnIcon />;
 export const searchIcon = () => <SearchIcon />;
+export const achReturnIcon = () => <AchReturnIcon />;
+export const allocatedIcon = () => <AllocatedIcon />;
+export const calendarIcon = () => <CalendarIcon />;
+export const chargebackIcon = () => <ChargebackIcon />;
+export const chargebackReversalIcon = () => <ChargebackReversalIcon />;
+export const duplicateIcon = () => <DuplicateIcon />;
+export const erroredIcon = () => <ErroredIcon />;
+export const failedIcon = () => <FailedIcon />;
+export const pendingIcon = () => <PendingIcon />;
+export const refundIcon = () => <RefundIcon />;
+export const rejectedIcon = () => <RejectedIcon />;
+export const rejectedVelocityIcon = () => <RejectedVelocityIcon />;
+export const successfulIcon = () => <SuccessfulIcon />;
+export const voidedIcon = () => <VoidedIcon />;

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

@@ -24,6 +24,20 @@ import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
 import SearchIcon from "./SearchIcon";
 import WalletIcon from "./WalletIcon";
+import AchReturnIcon from "./AchReturnIcon";
+import AllocatedIcon from "./AllocatedIcon";
+import CalendarIcon from "./CalendarIcon";
+import ChargebackIcon from "./ChargebackIcon";
+import ChargebackReversalIcon from "./ChargebackReversalIcon";
+import DuplicateIcon from "./DuplicateIcon";
+import ErroredIcon from "./ErroredIcon";
+import FailedIcon from "./FailedIcon";
+import PendingIcon from "./PendingIcon";
+import RefundIcon from "./RefundIcon";
+import RejectedIcon from "./RejectedIcon";
+import RejectedVelocityIcon from "./RejectedVelocityIcon";
+import SuccessfulIcon from "./SuccessfulIcon";
+import VoidedIcon from "./VoidedIcon";
 
 export {
   AccountsIcon,
@@ -51,5 +65,19 @@ export {
   AutopayOnIcon,
   NotFoundIcon,
   SearchIcon,
-  WalletIcon
+  WalletIcon,
+  AchReturnIcon,
+  AllocatedIcon,
+  CalendarIcon,
+  ChargebackIcon,
+  ChargebackReversalIcon,
+  DuplicateIcon,
+  ErroredIcon,
+  FailedIcon,
+  PendingIcon,
+  RefundIcon,
+  RejectedIcon,
+  RejectedVelocityIcon,
+  SuccessfulIcon,
+  VoidedIcon
 };