@thecb/components 4.0.23 → 4.0.24

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.15.3

package/dist/index.cjs.js

@@ -14130,6 +14130,49 @@ var NotFoundIcon = function NotFoundIcon() {
   }))))));
 };
 
+var SearchIcon = function SearchIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "22px",
+    height: "22px",
+    viewBox: "0 0 22 22",
+    version: "1.1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Debt-Search",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Debt-Search---Expanded",
+    transform: "translate(-155.000000, -258.000000)",
+    stroke: "#292A33",
+    strokeWidth: "2"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "debt-search",
+    transform: "translate(132.000000, 189.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "search",
+    transform: "translate(0.000000, 44.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "search_icon",
+    transform: "translate(24.000000, 26.000000)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    id: "Oval-2",
+    transform: "translate(7.407407, 7.407407) scale(-1, 1) translate(-7.407407, -7.407407) ",
+    cx: "7.40740741",
+    cy: "7.40740741",
+    r: "7.40740741"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "19.6296296",
+    y1: "12.962963",
+    x2: "12.9219369",
+    y2: "19.6706557",
+    id: "Line",
+    strokeLinecap: "round",
+    transform: "translate(16.296296, 16.296296) scale(-1, 1) translate(-16.296296, -16.296296) "
+  })))))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -20224,7 +20267,9 @@ var ERRORS = {
   "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found.\n"
+  "74": "CSS variable not found and no default was provided.\n\n",
+  "75": "important requires a valid style object, got a %s instead.\n\n",
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
 };
 /**
  * super basic version of sprintf
@@ -31879,6 +31924,55 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
 
 var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$p);
 
+var background$1 = "".concat(ATHENS_GREY);
+var white$1 = "".concat(WHITE);
+var black = "#000";
+var focusBorder = "".concat(MATISSE_BLUE);
+var themeValues = {
+  background: background$1,
+  white: white$1,
+  black: black,
+  focusBorder: focusBorder
+};
+
+function _templateObject$w() {
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  background: ", ";\n\n  input {\n    border: 0;\n    height: 72px;\n    width: 100%;\n    padding: 1.5rem;\n    padding-left: 1rem;\n    min-width: 100px;\n    margin: 0;\n    box-sizing: border-box;\n    position: relative;\n    font-size: 1.1rem;\n    line-height: 2rem;\n    font-weight: 400;\n    background-color: ", ";\n    color: ", ";\n    box-shadow: none;\n    border: 1px solid transparent;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n"]);
+
+  _templateObject$w = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var TypeaheadInputWrapper = styled__default.div(_templateObject$w(), themeValues.background, themeValues.background, themeValues.black, themeValues.focusBorder);
+
+var TypeaheadInput = function TypeaheadInput(_ref) {
+  var handleChange = _ref.handleChange,
+      placeholder = _ref.placeholder,
+      id = _ref.id,
+      labelText = _ref.labelText;
+
+  var onChange = function onChange(el) {
+    return handleChange(el.currentTarget.value);
+  };
+
+  return /*#__PURE__*/React__default.createElement(TypeaheadInputWrapper, null, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem 0 1.5rem 1.5rem"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, null)), /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
+    color: "black",
+    variant: "pS",
+    weight: 500,
+    extraStyles: "\n          border: 0;\n          clip: rect(0 0 0 0);\n          height: 1px;\n          margin: -1px;\n          overflow: hidden;\n          padding: 0;\n          position: absolute;\n          width: 1px;\n        ",
+    id: id
+  }, labelText), /*#__PURE__*/React__default.createElement("input", {
+    "aria-labelledby": id,
+    type: "text",
+    placeholder: placeholder,
+    onChange: onChange
+  }));
+};
+
 const validatorToPredicate = (validatorFn, emptyCase) => (
   value,
   ...rest
@@ -33877,16 +33971,16 @@ function _templateObject2$j() {
   return data;
 }
 
-function _templateObject$w() {
+function _templateObject$x() {
   var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"]);
 
-  _templateObject$w = function _templateObject() {
+  _templateObject$x = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableListItem = styled__default.div(_templateObject$w(), WHITE, function (_ref) {
+var EditableListItem = styled__default.div(_templateObject$x(), WHITE, function (_ref) {
   var listItemSize = _ref.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
 });
@@ -34071,16 +34165,16 @@ function _templateObject2$k() {
   return data;
 }
 
-function _templateObject$x() {
+function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  flex: 1;\n"]);
 
-  _templateObject$x = function _templateObject() {
+  _templateObject$y = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableTableContainer = styled__default.div(_templateObject$x(), function (_ref) {
+var EditableTableContainer = styled__default.div(_templateObject$y(), function (_ref) {
   var hide = _ref.hide;
   return hide ? "none" : "flex";
 });
@@ -35806,10 +35900,10 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
 
 var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$t, "profile");
 
-function _templateObject$y() {
+function _templateObject$z() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
 
-  _templateObject$y = function _templateObject() {
+  _templateObject$z = function _templateObject() {
     return data;
   };
 
@@ -35845,7 +35939,7 @@ var menu = posed.div({
     }
   }
 });
-var ImposterMenu = styled__default(menu)(_templateObject$y());
+var ImposterMenu = styled__default(menu)(_templateObject$z());
 
 var NavMenuMobile = function NavMenuMobile(_ref) {
   var id = _ref.id,
@@ -38254,16 +38348,16 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$w, "default");
 
-function _templateObject$z() {
+function _templateObject$A() {
   var data = _taggedTemplateLiteral([""]);
 
-  _templateObject$z = function _templateObject() {
+  _templateObject$A = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var ModalWrapper = styled__default.div(_templateObject$z());
+var ModalWrapper = styled__default.div(_templateObject$A());
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -38637,10 +38731,10 @@ var fallbackValues$x = {
   focusStyles: focusStyles
 };
 
-function _templateObject$A() {
+function _templateObject$B() {
   var data = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "]);
 
-  _templateObject$A = function _templateObject() {
+  _templateObject$B = function _templateObject() {
     return data;
   };
 
@@ -38710,7 +38804,7 @@ var RadioSection = function RadioSection(_ref) {
     }
   };
   var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
-  var RightIcon = styled__default.img(_templateObject$A(), function (_ref2) {
+  var RightIcon = styled__default.img(_templateObject$B(), function (_ref2) {
     var isMobile = _ref2.isMobile;
     return isMobile ? "14px" : "18px";
   }, function (_ref3) {
@@ -39271,16 +39365,16 @@ function _templateObject2$l() {
   return data;
 }
 
-function _templateObject$B() {
+function _templateObject$C() {
   var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
 
-  _templateObject$B = function _templateObject() {
+  _templateObject$C = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var CheckboxWrapper = styled__default.div(_templateObject$B());
+var CheckboxWrapper = styled__default.div(_templateObject$C());
 var ModalWrapper$1 = styled__default.div(_templateObject2$l());
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
@@ -39396,16 +39490,16 @@ var fallbackValues$A = {
   imageBackgroundColor: imageBackgroundColor
 };
 
-function _templateObject$C() {
+function _templateObject$D() {
   var data = _taggedTemplateLiteral(["\n  width: auto;\n  height: 215px;\n"]);
 
-  _templateObject$C = function _templateObject() {
+  _templateObject$D = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var WelcomeImage = styled__default.img(_templateObject$C());
+var WelcomeImage = styled__default.img(_templateObject$D());
 
 var WelcomeModule = function WelcomeModule(_ref) {
   var heading = _ref.heading,
@@ -39856,6 +39950,7 @@ exports.ResetConfirmationForm = ResetConfirmationForm$1;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.ResetPasswordSuccess = ResetPasswordSuccess;
 exports.RoutingNumberImage = RoutingNumberImage;
+exports.SearchIcon = SearchIcon;
 exports.SettingsIconSmall = SettingsIconSmall$1;
 exports.Sidebar = Sidebar;
 exports.SidebarSingleContent = SidebarSingleContent$1;
@@ -39873,6 +39968,7 @@ exports.Text = Text$1;
 exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
+exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;

package/package.json

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

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

@@ -0,0 +1,45 @@
+import React from "react";
+
+const SearchIcon = () => (
+  <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1">
+    <g
+      id="Debt-Search"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="Debt-Search---Expanded"
+        transform="translate(-155.000000, -258.000000)"
+        stroke="#292A33"
+        strokeWidth="2"
+      >
+        <g id="debt-search" transform="translate(132.000000, 189.000000)">
+          <g id="search" transform="translate(0.000000, 44.000000)">
+            <g id="search_icon" transform="translate(24.000000, 26.000000)">
+              <circle
+                id="Oval-2"
+                transform="translate(7.407407, 7.407407) scale(-1, 1) translate(-7.407407, -7.407407) "
+                cx="7.40740741"
+                cy="7.40740741"
+                r="7.40740741"
+              ></circle>
+              <line
+                x1="19.6296296"
+                y1="12.962963"
+                x2="12.9219369"
+                y2="19.6706557"
+                id="Line"
+                strokeLinecap="round"
+                transform="translate(16.296296, 16.296296) scale(-1, 1) translate(-16.296296, -16.296296) "
+              ></line>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default SearchIcon;

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

@@ -21,7 +21,8 @@ import {
   BankIcon,
   GenericCard,
   PaymentIcon,
-  AutopayOnIcon
+  AutopayOnIcon,
+  SearchIcon
 } from "./index";
 
 const story = page({
@@ -50,3 +51,4 @@ export const bankIcon = () => <BankIcon />;
 export const genericCard = () => <GenericCard />;
 export const paymentIcon = () => <PaymentIcon />;
 export const autopayOnIcon = () => <AutopayOnIcon />;
+export const searchIcon = () => <SearchIcon />;

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

@@ -22,6 +22,7 @@ import IconAdd from "./IconAdd";
 import TimeoutImage from "./TimeoutImage";
 import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
+import SearchIcon from "./SearchIcon";
 
 export {
   AccountsIcon,
@@ -47,5 +48,6 @@ export {
   IconAdd,
   TimeoutImage,
   AutopayOnIcon,
-  NotFoundIcon
+  NotFoundIcon,
+  SearchIcon
 };

package/src/components/atoms/index.js

@@ -36,3 +36,4 @@ export { default as Spinner } from "./spinner";
 export { default as StateProvinceDropdown } from "./state-province-dropdown";
 export { default as Text } from "./text";
 export { default as ToggleSwitch } from "./toggle-switch";
+export { default as TypeaheadInput } from "./typeahead-input";

package/src/components/atoms/typeahead-input/TypeaheadIinput.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import TypeaheadInput from "./TypeaheadInput";
+import page from "../../../../.storybook/page";
+
+export const text = () => (
+  <TypeaheadInput
+    id="typeahead-1"
+    labelText="typeahead-index"
+    placeholder={"Search items..."}
+    handleChange={data => console.log(data)}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/TypeaheadInput",
+  Component: TypeaheadInput
+});
+export default story;

package/src/components/atoms/typeahead-input/TypeaheadInput.js

@@ -0,0 +1,77 @@
+import React from "react";
+import styled from "styled-components";
+
+import { SearchIcon } from "../icons";
+import { Box } from "../layouts";
+import Text from "../text";
+
+import { themeValues } from "./TypeaheadInput.theme";
+
+export const TypeaheadInputWrapper = styled.div`
+  display: flex;
+  align-content: center;
+  align-items: center;
+  background: ${themeValues.background};
+
+  input {
+    border: 0;
+    height: 72px;
+    width: 100%;
+    padding: 1.5rem;
+    padding-left: 1rem;
+    min-width: 100px;
+    margin: 0;
+    box-sizing: border-box;
+    position: relative;
+    font-size: 1.1rem;
+    line-height: 2rem;
+    font-weight: 400;
+    background-color: ${themeValues.background};
+    color: ${themeValues.black};
+    box-shadow: none;
+    border: 1px solid transparent;
+
+    &:focus {
+      border: 1px solid ${themeValues.focusBorder};
+    }
+  }
+`;
+
+const TypeaheadInput = ({ handleChange, placeholder, id, labelText }) => {
+  const onChange = el => handleChange(el.currentTarget.value);
+  return (
+    <TypeaheadInputWrapper>
+      <Box padding="1.5rem 0 1.5rem 1.5rem">
+        <SearchIcon />
+      </Box>
+
+      <Text
+        as="label"
+        color={"black"}
+        variant="pS"
+        weight={500}
+        extraStyles={`
+          border: 0;
+          clip: rect(0 0 0 0);
+          height: 1px;
+          margin: -1px;
+          overflow: hidden;
+          padding: 0;
+          position: absolute;
+          width: 1px;
+        `}
+        id={id}
+      >
+        {labelText}
+      </Text>
+      <input
+        aria-labelledby={id}
+        type="text"
+        placeholder={placeholder}
+        onChange={onChange}
+      />
+    </TypeaheadInputWrapper>
+  );
+};
+
+export default TypeaheadInput;

package/src/components/atoms/typeahead-input/TypeaheadInput.theme.js

@@ -0,0 +1,13 @@
+import { ATHENS_GREY, WHITE, MATISSE_BLUE } from "../../../constants/colors";
+
+const background = `${ATHENS_GREY}`;
+const white = `${WHITE}`;
+const black = "#000";
+const focusBorder = `${MATISSE_BLUE}`;
+
+export const themeValues = {
+  background,
+  white,
+  black,
+  focusBorder
+};

package/src/components/atoms/typeahead-input/index.js

@@ -0,0 +1,3 @@
+import TypeaheadInput from "./TypeaheadInput";
+
+export default TypeaheadInput;