@thecb/components 4.1.0 → 4.1.2

package/dist/index.cjs.js

@@ -14175,6 +14175,190 @@ var SearchIcon = function SearchIcon() {
   })))))));
 };
 
+var WalletIcon = function WalletIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "299",
+    height: "150",
+    viewBox: "0 0 299 150"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-154 -340)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(132 261)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(22 79)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeWidth: "4.08",
+    transform: "translate(52.686 118.445)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M208.2 0.375L175.611 0.776"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M233.568 0.375L218.318 0.776"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M44.527 0.375L17.757 0.776"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.759 0.375L0 0.776"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#B8E4F4",
+    d: "M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    transform: "translate(150.58 129.154)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    d: "M97.135 97.043L85.756 106.925"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    d: "M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeWidth: "4.08",
+    d: "M257.527 89.028L274.395 89.028"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(255.032 47.73)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "40.703",
+    height: "25.03",
+    x: "1.02",
+    y: "1.02",
+    fill: "#E8FFEF",
+    stroke: "#45B770",
+    strokeWidth: "2.04",
+    rx: "2.72"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#45B770",
+    d: "M0 6.411H42.743V12.11H0z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(249.333 54.141)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "40.703",
+    height: "25.03",
+    x: "1.02",
+    y: "1.02",
+    fill: "#CACED8",
+    stroke: "#3B414D",
+    strokeWidth: "2.04",
+    rx: "2.72"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#3B414D",
+    d: "M0 6.411H42.743V12.11H0z"
+  }), /*#__PURE__*/React__default.createElement("rect", {
+    width: "9.973",
+    height: "2.85",
+    x: "27.163",
+    y: "18.367",
+    fill: "#3B414D",
+    rx: "1.36"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(237.223 59.128)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "8.905",
+    cy: "8.905",
+    r: "8.905",
+    fill: themeValues.subIconColor
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: "#FFF",
+    transform: "translate(4.274 4.274)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.562 0H5.699V9.261H3.562z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 3.562H9.261V5.699H0z"
+  }))), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#B8E4F4",
+    stroke: "#3B414D",
+    strokeWidth: "4.08",
+    d: "M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
+  }), /*#__PURE__*/React__default.createElement("rect", {
+    width: "32.964",
+    height: "11.592",
+    x: "97.499",
+    y: "22.699",
+    stroke: "#3B414D",
+    strokeWidth: "4.08",
+    rx: "5.796"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#B8E4F4",
+    d: "M121.817 24.933H141.051V32.057H121.817z"
+  }), /*#__PURE__*/React__default.createElement("rect", {
+    width: "133.928",
+    height: "98.309",
+    x: "95.459",
+    y: "32.057",
+    fill: "#FFF",
+    rx: "10.88"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#3B414D",
+    strokeWidth: "4.08",
+    d: "M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    d: "M85.756 106.925L111.684 112.988"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "4.08",
+    transform: "translate(112.486 110.241)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.887.053a3.887 3.887 0 000 7.775h3.396"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "3.791",
+    transform: "translate(147.003 64.237)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeWidth: "3.791",
+    d: "M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: "#B8E4F4"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
+  })))))));
+};
+
+var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$2, "info");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -34325,6 +34509,7 @@ var EmailForm = function EmailForm(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
+      guestCheckout = _ref.guestCheckout,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
 
@@ -34341,7 +34526,9 @@ var EmailForm = function EmailForm(_ref) {
     variant: variant,
     role: "form",
     "aria-label": "Email"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
+  }, guestCheckout && /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    margin: "0 0 1.125rem 0"
+  }, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email",
     errorMessages: emailFieldErrorMessages,
     type: "email",
@@ -40001,6 +40188,7 @@ exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
+exports.WalletIcon = WalletIcon$1;
 exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;
 exports.cardRegistry = cardRegistry;

package/package.json

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

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

@@ -0,0 +1,190 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const WalletIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="299"
+      height="150"
+      viewBox="0 0 299 150"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-154 -340)">
+          <g transform="translate(132 261)">
+            <g transform="translate(22 79)">
+              <g
+                stroke="#3B414D"
+                strokeLinecap="round"
+                strokeWidth="4.08"
+                transform="translate(52.686 118.445)"
+              >
+                <path d="M208.2 0.375L175.611 0.776"></path>
+                <path d="M233.568 0.375L218.318 0.776"></path>
+                <path d="M44.527 0.375L17.757 0.776"></path>
+                <path d="M7.759 0.375L0 0.776"></path>
+              </g>
+              <path
+                fill="#B8E4F4"
+                d="M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
+              ></path>
+              <g
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                transform="translate(150.58 129.154)"
+              >
+                <path d="M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"></path>
+                <path d="M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"></path>
+              </g>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                d="M97.135 97.043L85.756 106.925"
+              ></path>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                d="M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
+              ></path>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeWidth="4.08"
+                d="M257.527 89.028L274.395 89.028"
+              ></path>
+              <g transform="translate(255.032 47.73)">
+                <rect
+                  width="40.703"
+                  height="25.03"
+                  x="1.02"
+                  y="1.02"
+                  fill="#E8FFEF"
+                  stroke="#45B770"
+                  strokeWidth="2.04"
+                  rx="2.72"
+                ></rect>
+                <path fill="#45B770" d="M0 6.411H42.743V12.11H0z"></path>
+              </g>
+              <g transform="translate(249.333 54.141)">
+                <rect
+                  width="40.703"
+                  height="25.03"
+                  x="1.02"
+                  y="1.02"
+                  fill="#CACED8"
+                  stroke="#3B414D"
+                  strokeWidth="2.04"
+                  rx="2.72"
+                ></rect>
+                <path fill="#3B414D" d="M0 6.411H42.743V12.11H0z"></path>
+                <rect
+                  width="9.973"
+                  height="2.85"
+                  x="27.163"
+                  y="18.367"
+                  fill="#3B414D"
+                  rx="1.36"
+                ></rect>
+              </g>
+              <g transform="translate(237.223 59.128)">
+                <circle
+                  cx="8.905"
+                  cy="8.905"
+                  r="8.905"
+                  fill={themeValues.subIconColor}
+                ></circle>
+                <g fill="#FFF" transform="translate(4.274 4.274)">
+                  <path d="M3.562 0H5.699V9.261H3.562z"></path>
+                  <path d="M0 3.562H9.261V5.699H0z"></path>
+                </g>
+              </g>
+              <path
+                fill="#B8E4F4"
+                stroke="#3B414D"
+                strokeWidth="4.08"
+                d="M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
+              ></path>
+              <rect
+                width="32.964"
+                height="11.592"
+                x="97.499"
+                y="22.699"
+                stroke="#3B414D"
+                strokeWidth="4.08"
+                rx="5.796"
+              ></rect>
+              <path
+                fill="#B8E4F4"
+                d="M121.817 24.933H141.051V32.057H121.817z"
+              ></path>
+              <rect
+                width="133.928"
+                height="98.309"
+                x="95.459"
+                y="32.057"
+                fill="#FFF"
+                rx="10.88"
+              ></rect>
+              <path
+                stroke="#3B414D"
+                strokeWidth="4.08"
+                d="M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
+              ></path>
+              <path
+                fill="#FFF"
+                d="M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
+              ></path>
+              <path
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                d="M85.756 106.925L111.684 112.988"
+              ></path>
+              <g
+                stroke="#45B770"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="4.08"
+                transform="translate(112.486 110.241)"
+              >
+                <path d="M3.887.053a3.887 3.887 0 000 7.775h3.396"></path>
+              </g>
+              <g
+                stroke="#3B414D"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3.791"
+                transform="translate(147.003 64.237)"
+              >
+                <path d="M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"></path>
+                <path d="M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"></path>
+              </g>
+              <path
+                stroke="#3B414D"
+                strokeLinecap="round"
+                strokeWidth="3.791"
+                d="M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
+              ></path>
+              <g fill="#B8E4F4">
+                <path d="M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"></path>
+                <path d="M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"></path>
+                <path d="M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
+                <path d="M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(WalletIcon, "Icons", fallbackValues, "info");

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

@@ -23,6 +23,7 @@ import TimeoutImage from "./TimeoutImage";
 import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
 import SearchIcon from "./SearchIcon";
+import WalletIcon from "./WalletIcon";
 
 export {
   AccountsIcon,
@@ -49,5 +50,6 @@ export {
   TimeoutImage,
   AutopayOnIcon,
   NotFoundIcon,
-  SearchIcon
+  SearchIcon,
+  WalletIcon
 };

package/src/components/molecules/email-form/EmailForm.js

@@ -5,6 +5,7 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
 
 const EmailForm = ({
@@ -13,6 +14,7 @@ const EmailForm = ({
   fields,
   actions,
   showErrors,
+  guestCheckout,
   handleSubmit = noop
 }) => {
   if (clearOnDismount) {
@@ -25,6 +27,11 @@ const EmailForm = ({
 
   return (
     <FormContainer variant={variant} role="form" aria-label="Email">
+      {guestCheckout && (
+        <Paragraph margin="0 0 1.125rem 0">
+          If desired, you can create a wallet later for faster checkout
+        </Paragraph>
+      )}
       <FormInputColumn>
         <FormInput
           labelTextWhenNoError="Email"