@thecb/components 4.1.8-beta.1 → 4.1.10-beta.0

package/dist/index.cjs.js

@@ -14720,6 +14720,47 @@ var StatusUnknownIcon = function StatusUnknownIcon() {
   }))));
 };
 
+var CarrotIcon = function CarrotIcon(_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: "10",
+    height: "5",
+    viewBox: "0 0 10 5"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    id: "carrot-path-1",
+    d: "M6.99999958 9.9999994L11.9999993 14.9999991 16.999999 9.9999994z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-423 -974)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(372 958)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(44 6)"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "carrot-mask-2",
+    fill: "#fff"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#carrot-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: "#000",
+    xlinkHref: "#carrot-path-1"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: themeValues.singleIconColor,
+    fillRule: "nonzero",
+    mask: "url(#carrot-mask-2)"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }))))))));
+};
+
+var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$2, "darkMode");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18866,7 +18907,7 @@ function _templateObject3$5() {
 }
 
 function _templateObject2$b() {
-  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: ", ";\n  min-width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
 
   _templateObject2$b = function _templateObject2() {
     return data;
@@ -18876,7 +18917,7 @@ function _templateObject2$b() {
 }
 
 function _templateObject$n() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  padding-left: 8px;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", "\n"]);
 
   _templateObject$n = function _templateObject() {
     return data;
@@ -18889,47 +18930,52 @@ var IconWrapper = styled__default.div(_templateObject$n(), function (_ref) {
   return open ? "transform: rotate(-180deg)" : "";
 });
 var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE, function (_ref2) {
-  var maxHeight = _ref2.maxHeight;
+  var widthFitOptions = _ref2.widthFitOptions;
+  return widthFitOptions ? "fit-content" : "100%";
+}, function (_ref3) {
+  var maxHeight = _ref3.maxHeight;
   return maxHeight || "400px";
 });
-var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref3) {
-  var selected = _ref3.selected,
-      themeValues = _ref3.themeValues;
+var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref4) {
+  var selected = _ref4.selected,
+      themeValues = _ref4.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? "default" : "pointer";
 }, function (_ref5) {
-  var selected = _ref5.selected,
-      disabled = _ref5.disabled,
-      themeValues = _ref5.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  var disabled = _ref5.disabled;
+  return disabled ? "default" : "pointer";
 }, function (_ref6) {
   var selected = _ref6.selected,
       disabled = _ref6.disabled,
       themeValues = _ref6.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref7) {
+  var selected = _ref7.selected,
+      disabled = _ref7.disabled,
+      themeValues = _ref7.themeValues;
+  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled__default.input(_templateObject4$2(), function (_ref7) {
-  var themeValues = _ref7.themeValues;
+var SearchInput = styled__default.input(_templateObject4$2(), function (_ref8) {
+  var themeValues = _ref8.themeValues;
   return themeValues.hoverColor && themeValues.hoverColor;
 });
 
-var Dropdown = function Dropdown(_ref8) {
+var Dropdown = function Dropdown(_ref9) {
   var _options$find;
 
-  var placeholder = _ref8.placeholder,
-      options = _ref8.options,
-      value = _ref8.value,
-      isOpen = _ref8.isOpen,
-      isError = _ref8.isError,
-      onSelect = _ref8.onSelect,
-      _ref8$disabledValues = _ref8.disabledValues,
-      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
-      _ref8$onClick = _ref8.onClick,
-      onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
-      themeValues = _ref8.themeValues,
-      maxHeight = _ref8.maxHeight;
+  var placeholder = _ref9.placeholder,
+      options = _ref9.options,
+      value = _ref9.value,
+      isOpen = _ref9.isOpen,
+      isError = _ref9.isError,
+      onSelect = _ref9.onSelect,
+      _ref9$disabledValues = _ref9.disabledValues,
+      disabledValues = _ref9$disabledValues === void 0 ? [] : _ref9$disabledValues,
+      _ref9$onClick = _ref9.onClick,
+      onClick = _ref9$onClick === void 0 ? noop : _ref9$onClick,
+      themeValues = _ref9.themeValues,
+      maxHeight = _ref9.maxHeight,
+      _ref9$widthFitOptions = _ref9.widthFitOptions,
+      widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19025,7 +19071,7 @@ var Dropdown = function Dropdown(_ref8) {
         break;
     }
 
-    if (keyCode > 64 && keyCode < 91 || keyCode == 32) {
+    if (keyCode > 64 && keyCode < 91 || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
       setInputValue(inputValue + key);
     }
@@ -19096,6 +19142,7 @@ var Dropdown = function Dropdown(_ref8) {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
+    widthFitOptions: widthFitOptions,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
@@ -36550,9 +36597,9 @@ var fallbackValues$u = {
 var NavMenuDesktop = function NavMenuDesktop(_ref) {
   var id = _ref.id,
       _ref$top = _ref.top,
-      top = _ref$top === void 0 ? "125%" : _ref$top,
+      top = _ref$top === void 0 ? "115%" : _ref$top,
       _ref$left = _ref.left,
-      left = _ref$left === void 0 ? "-100%" : _ref$left,
+      left = _ref$left === void 0 ? "-165%" : _ref$left,
       _ref$menuContent = _ref.menuContent,
       menuContent = _ref$menuContent === void 0 ? [] : _ref$menuContent,
       _ref$visible = _ref.visible,
@@ -36575,7 +36622,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     extraStyles: "position: relative; ".concat(menuCarat),
     background: themeValues.backgroundColor,
     borderRadius: "5px",
-    boxShadow: "0px 3px 8px 0px ".concat(themeValues.shadowColor, ", 0px 2px 14px 0px ").concat(themeValues.shadowColor, ";"),
+    boxShadow: "0px 1px 8px -1px rgba(0, 0, 0, 0.3), 0px 1px 4px 0px ".concat(themeValues.shadowColor, ", 0px 7px 32px 0px ").concat(themeValues.shadowColor),
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onFocus: onFocus,
@@ -39296,6 +39343,8 @@ var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirat
 var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
 var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
 
+var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
+
 var PaymentFormCard = function PaymentFormCard(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
@@ -39330,11 +39379,29 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       };
     }
   }, []);
+  var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
     "aria-label": "Card payment"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(CountryDropdown, {
+    labelTextWhenNoError: "Country",
+    errorMessages: countryErrorMessages,
+    field: fields.country,
+    onChange: function onChange(value) {
+      actions.fields.country.set(value); // temporary measure to not dirty fields until
+      // we can write a reset function for fields
+
+      if (fields.stateProvince.rawValue) {
+        actions.fields.stateProvince.set("");
+      }
+
+      if (fields.zipCode.rawValue) {
+        actions.fields.zipCode.set("");
+      }
+    },
+    showErrors: showErrors
+  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
     errorMessages: nameOnCardErrors,
     field: fields.nameOnCard,
@@ -39379,6 +39446,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
+    isNum: isUS,
+    formatter: isUS ? zipFormat : null,
     labelTextWhenNoError: "Zip code",
     errorMessages: zipCodeErrors,
     field: fields.zipCode,
@@ -39408,6 +39477,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 };
 
 var formConfig$7 = {
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
   nameOnCard: {
     validators: [required()]
   },
@@ -39424,8 +39497,8 @@ var formConfig$7 = {
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    validators: [required(), hasLength(5, 5)],
-    constraints: [onlyIntegers(), hasLength(0, 5)]
+    validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
+    constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
   }
 };
 
@@ -40690,6 +40763,7 @@ exports.Breadcrumb = Breadcrumbs;
 exports.ButtonWithAction = ButtonWithAction;
 exports.ButtonWithLink = ButtonWithLink;
 exports.CalendarIcon = CalendarIcon;
+exports.CarrotIcon = CarrotIcon$1;
 exports.Center = Center;
 exports.CenterSingle = CenterSingle$1;
 exports.CenterStack = CenterStack$1;

package/package.json

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -17,6 +17,7 @@ import { themeComponent } from "../../../util/themeUtils";
 
 const IconWrapper = styled.div`
   display: flex;
+  padding-left: 8px;
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
@@ -30,7 +31,8 @@ const DropdownContentWrapper = styled.div`
   background-color: ${WHITE};
   padding: 8px 0 8px;
   position: absolute;
-  width: 100%;
+  width: ${({ widthFitOptions }) => (widthFitOptions ? "fit-content" : "100%")};
+  min-width: 100%;
   max-height: ${({ maxHeight }) => maxHeight || "400px"};
   overflow-y: scroll;
   z-index: 1;
@@ -89,7 +91,8 @@ const Dropdown = ({
   disabledValues = [],
   onClick = noop,
   themeValues,
-  maxHeight
+  maxHeight,
+  widthFitOptions = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -151,7 +154,7 @@ const Dropdown = ({
         setInputValue(inputValue.slice(0, -1));
         break;
     }
-    if ((keyCode > 64 && keyCode < 91) || keyCode == 32) {
+    if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
       setInputValue(inputValue + key);
     }
@@ -247,6 +250,7 @@ const Dropdown = ({
           maxHeight={maxHeight}
           open={isOpen}
           ref={dropdownRef}
+          widthFitOptions={widthFitOptions}
           tabIndex={0}
         >
           <Stack childGap="0">

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const CarrotIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="10"
+      height="5"
+      viewBox="0 0 10 5"
+    >
+      <defs>
+        <path
+          id="carrot-path-1"
+          d="M6.99999958 9.9999994L11.9999993 14.9999991 16.999999 9.9999994z"
+        ></path>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-423 -974)">
+          <g transform="translate(372 958)">
+            <g transform="translate(44 6)">
+              <mask id="carrot-mask-2" fill="#fff">
+                <use xlinkHref="#carrot-path-1"></use>
+              </mask>
+              <use fill="#000" xlinkHref="#carrot-path-1"></use>
+              <g
+                fill={themeValues.singleIconColor}
+                fillRule="nonzero"
+                mask="url(#carrot-mask-2)"
+              >
+                <g>
+                  <path d="M0 0H24V24H0z"></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(CarrotIcon, "Icons", fallbackValues, "darkMode");

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

@@ -39,6 +39,7 @@ import RejectedVelocityIcon from "./RejectedVelocityIcon";
 import SuccessfulIcon from "./SuccessfulIcon";
 import VoidedIcon from "./VoidedIcon";
 import StatusUnknownIcon from "./StatusUnknownIcon";
+import CarrotIcon from "./CarrotIcon";
 
 export {
   AccountsIcon,
@@ -81,5 +82,6 @@ export {
   RejectedVelocityIcon,
   SuccessfulIcon,
   VoidedIcon,
-  StatusUnknownIcon
+  StatusUnknownIcon,
+  CarrotIcon
 };

package/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -5,8 +5,8 @@ import { themeComponent } from "../../../util/themeUtils";
 
 const NavMenuDesktop = ({
   id,
-  top = "125%",
-  left = "-100%",
+  top = "115%",
+  left = "-165%",
   menuContent = [],
   visible = true,
   onMouseEnter,
@@ -25,7 +25,7 @@ const NavMenuDesktop = ({
         extraStyles={`position: relative; ${menuCarat}`}
         background={themeValues.backgroundColor}
         borderRadius="5px"
-        boxShadow={`0px 3px 8px 0px ${themeValues.shadowColor}, 0px 2px 14px 0px ${themeValues.shadowColor};`}
+        boxShadow={`0px 1px 8px -1px rgba(0, 0, 0, 0.3), 0px 1px 4px 0px ${themeValues.shadowColor}, 0px 7px 32px 0px ${themeValues.shadowColor}`}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onFocus={onFocus}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -2,8 +2,13 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
+import CountryDropdown from "../../atoms/country-dropdown";
 import { checkCardBrand, noop } from "../../../util/general";
-import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
+import {
+  expirationDateFormat,
+  creditCardFormat,
+  zipFormat
+} from "../../../util/formats";
 import {
   FormInput,
   FormInputColumn,
@@ -36,6 +41,9 @@ const zipCodeErrors = {
   [required.error]: "Zip code is required",
   [hasLength.error]: "Zip code is invalid"
 };
+const countryErrorMessages = {
+  [required.error]: "Country is required"
+};
 
 const PaymentFormCard = ({
   variant = "default",
@@ -61,9 +69,27 @@ const PaymentFormCard = ({
       return () => actions.form.clear();
     }
   }, []);
+  const isUS = fields.country.rawValue === "US";
   return (
     <FormContainer variant={variant} role="form" aria-label="Card payment">
       <FormInputColumn>
+        <CountryDropdown
+          labelTextWhenNoError="Country"
+          errorMessages={countryErrorMessages}
+          field={fields.country}
+          onChange={value => {
+            actions.fields.country.set(value);
+            // temporary measure to not dirty fields until
+            // we can write a reset function for fields
+            if (fields.stateProvince.rawValue) {
+              actions.fields.stateProvince.set("");
+            }
+            if (fields.zipCode.rawValue) {
+              actions.fields.zipCode.set("");
+            }
+          }}
+          showErrors={showErrors}
+        />
         <FormInput
           labelTextWhenNoError="Name on card"
           errorMessages={nameOnCardErrors}
@@ -111,6 +137,8 @@ const PaymentFormCard = ({
             width={isMobile ? "100%" : "50%"}
           >
             <FormInput
+              isNum={isUS}
+              formatter={isUS ? zipFormat : null}
               labelTextWhenNoError="Zip code"
               errorMessages={zipCodeErrors}
               field={fields.zipCode}

package/src/components/molecules/payment-form-card/PaymentFormCard.state.js

@@ -3,12 +3,17 @@ import {
   required,
   onlyIntegers,
   hasLength,
-  matchesRegex
+  matchesRegex,
+  validateWhen
 } from "redux-freeform";
 
 //TODO: Will make zip code able to have more than 5 digits once we add in the FormattedInput because it will have issues with format of 60606-1111.
 
 const formConfig = {
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
   nameOnCard: {
     validators: [required()]
   },
@@ -29,8 +34,23 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    validators: [required(), hasLength(5, 5)],
-    constraints: [onlyIntegers(), hasLength(0, 5)]
+    validators: [
+      required(),
+      validateWhen(
+        validateWhen(hasLength(5, 5), hasLength(0, 5)),
+        matchesRegex("US"),
+        "country"
+      ),
+      validateWhen(
+        validateWhen(hasLength(9, 9), hasLength(6, 9)),
+        matchesRegex("US"),
+        "country"
+      )
+    ],
+    constraints: [
+      validateWhen(onlyIntegers(), matchesRegex("US"), "country"),
+      validateWhen(hasLength(0, 9), matchesRegex("US"), "country")
+    ]
   }
 };