@thecb/components 4.0.23-beta.1 → 4.1.0

package/package.json

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

package/src/components/atoms/box-with-shadow/BoxWithShadow.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { rgba } from "polished";
+import { fallbackValues } from "./BoxWithShadow.theme";
+import Box from "../layouts/Box";
+import { themeComponent } from "../../../util/themeUtils";
+import { BLACK } from "../../../constants/colors";
+
+const BoxWithShadow = ({ variant, themeValues, children, ...props }) => {
+  const shadowRegistry = {
+    baseStandard: `0px 3px 7px 2px ${rgba(BLACK, 0.1)}, 0px 1px 2px 1px ${rgba(
+      BLACK,
+      0.1
+    )};`,
+    baseHover: `0px 1px 7px 0px ${rgba(BLACK, 0.3)}, 0px 1px 4px 0px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 7px 12px 0px ${rgba(BLACK, 0.2)};`,
+    baseClick: `0px 4px 7px 0px ${rgba(BLACK, 0.3)}, 0px 1px 4px 0px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 7px 12px 0px ${rgba(BLACK, 0.2)};`,
+    insetStandard: `0px 1px 4px 2px ${rgba(BLACK, 0.1)}, 0px 2px 1px 0px ${rgba(
+      BLACK,
+      0.15
+    )};`,
+    insetHover: `0px 1px 4px 0px ${rgba(BLACK, 0.3)}, 0px 1px 2px 2px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 4px 8px 0px ${rgba(BLACK, 0.2)};`,
+    insetClick: `0px 4px 4px 0px ${rgba(BLACK, 0.3)}, 0px 1px 2px 2px ${rgba(
+      BLACK,
+      0.2
+    )}, 0px 4px 8px 0px ${rgba(BLACK, 0.2)};`,
+    linkShadowFocus: `0px 0px 5px 2px ${rgba(
+      themeValues.linkColor,
+      0.3
+    )}, 0px 1px 2px 0px ${rgba(
+      themeValues.linkColor,
+      0.3
+    )}, 0px 4px 8px 0px ${rgba(themeValues.linkColor, 0.2)};`,
+    overlayShadow: `0px 1px 8px -1px ${rgba(
+      BLACK,
+      0.3
+    )}, 0px 1px 4px 0px ${rgba(BLACK, 0.2)}, 0px 7px 32px 0px ${rgba(
+      BLACK,
+      0.2
+    )};`
+  };
+  return (
+    <Box boxShadow={shadowRegistry[variant]} {...props}>
+      {children}
+    </Box>
+  );
+};
+export default themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues);

package/src/components/atoms/box-with-shadow/BoxWithShadow.theme.js

@@ -0,0 +1,7 @@
+import { MATISSE_BLUE } from "../../../constants/colors";
+
+const linkColor = MATISSE_BLUE;
+
+export const fallbackValues = {
+  linkColor
+};

package/src/components/atoms/box-with-shadow/index.js

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

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

@@ -1,6 +1,7 @@
 export { default as AddObligation } from "./add-obligation";
 export { default as Alert } from "./alert";
 export { default as AmountCallout } from "./amount-callout";
+export { default as BoxWithShadow } from "./box-with-shadow";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonWithAction } from "./button-with-action";
 export { default as ButtonWithLink } from "./button-with-link";
@@ -36,3 +37,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;

package/src/constants/colors.js

@@ -4,7 +4,7 @@ Need to add a new color? Visit http://chir.ag/projects/name-that-color to genera
 Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
 to the one generated by name-that-color.
 */
-
+const BLACK = "#000000";
 const TRANSPARENT = "transparent";
 // WHITE
 const WHITE = "#FFFFFF";
@@ -110,6 +110,7 @@ const ALERT_COLORS = {
 };
 
 export {
+  BLACK,
   TRANSPARENT,
   WHITE,
   SOLITUDE_WHITE,