@thecb/components 8.1.0 → 8.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.1.0",
+  "version": "8.2.0-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/badge/Badge.js

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import Box from "../layouts/Box";
+import Text from "../../atoms/text/";
+import { fallbackValues } from "./Badge.theme";
+
+const StyledBadgeContainer = styled(Box)`
+  display: flex;
+  padding: 2px 8px;
+  align-items: center;
+  gap: 4px;
+  border-radius: 4px;
+  background-color: ${({ variant }) => fallbackValues.background[variant]};
+`;
+
+const StyledBadge = styled(Text)`
+  font-family: "Public Sans";
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 15px */
+  letter-spacing: 0.2px;
+  color: ${({ variant }) => fallbackValues.color[variant]};
+
+  @media screen and (min-width: 1024px) {
+    font-size: 12px;
+    line-height: 150%; /* 18px */
+    letter-spacing: 0.24px;
+  }
+`;
+
+const Badge = ({ label, Icon, variant }) => (
+  <StyledBadgeContainer variant={variant}>
+    {Icon && <Icon fill={fallbackValues.color[variant]} />}
+    <StyledBadge variant={variant}>{label}</StyledBadge>
+  </StyledBadgeContainer>
+);
+
+export default Badge;

package/src/components/atoms/badge/Badge.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import Badge from "./Badge";
+import page from "../../../../.storybook/page";
+import AutopayIcon from "../icons/AutopayIcon";
+
+const variants = {
+  info: "info",
+  warn: "warn",
+  primary: "primary",
+  success: "success"
+};
+const defaultValue = "success";
+const groupId = "props";
+
+export const badge = () => (
+  <Badge
+    variant={select("variants", variants, defaultValue, groupId)}
+    label={text("label", "Autopay Available", "props")}
+    Icon={text("Icon", AutopayIcon, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Badge",
+  Component: Badge
+});
+export default story;

package/src/components/atoms/badge/Badge.theme.js

@@ -0,0 +1,29 @@
+import {
+  CORNFLOWER_BLUE,
+  HALF_COLONIAL_WHITE,
+  HINT_GREEN,
+  INFO_BLUE,
+  MATISSE_BLUE,
+  ROYAL_BLUE,
+  SEA_GREEN,
+  ZEST_ORANGE
+} from "../../../constants/colors";
+
+const background = {
+  info: `${INFO_BLUE}`,
+  warn: `${HALF_COLONIAL_WHITE}`,
+  primary: `${CORNFLOWER_BLUE}`,
+  success: `${HINT_GREEN}`
+};
+
+const color = {
+  info: `${MATISSE_BLUE}`,
+  warn: `${ZEST_ORANGE}`,
+  primary: `${ROYAL_BLUE}`,
+  success: `${SEA_GREEN}`
+};
+
+export const fallbackValues = {
+  background,
+  color
+};

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

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

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+const AutoPayIcon = ({ fill = "#317D4F" }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_5560_39870"
+      style={{ maskType: "luminance" }}
+      maskUnits="userSpaceOnUse"
+      x="3"
+      y="3"
+      width="10"
+      height="10"
+    >
+      <path
+        d="M4.81368 7.38351C4.87789 7.38351 4.92927 7.36745 4.9678 7.33535C5.00633 7.30324 5.03202 7.2615 5.04486 7.21012C5.22467 6.49089 5.60677 5.9033 6.19114 5.44736C6.77552 4.99142 7.44018 4.76344 8.1851 4.76344C8.59609 4.76344 8.99103 4.83729 9.36991 4.98499C9.74879 5.13269 10.0924 5.34782 10.4006 5.63038L9.59146 6.43951C9.50155 6.52942 9.45661 6.63859 9.45661 6.76702C9.45661 6.89546 9.50155 7.00463 9.59146 7.09453C9.68136 7.18443 9.79054 7.22939 9.91897 7.22939L12.5005 7.22939C12.629 7.22939 12.7381 7.18443 12.828 7.09453C12.9179 7.00463 12.9629 6.89546 12.9629 6.76702L12.9629 4.18548C12.9629 4.05705 12.9179 3.94788 12.828 3.85797C12.7381 3.76807 12.629 3.72312 12.5005 3.72312C12.3721 3.72312 12.2629 3.76807 12.173 3.85797L11.4795 4.55152C11.0428 4.12769 10.5419 3.80018 9.97677 3.569C9.41166 3.33781 8.81443 3.22222 8.1851 3.22222C7.41449 3.22222 6.69846 3.3924 6.03702 3.73275C5.37558 4.0731 4.82009 4.53868 4.37057 5.12948C3.92105 5.72028 3.62565 6.38172 3.48437 7.1138C3.47153 7.17801 3.48759 7.23902 3.53253 7.29682C3.57749 7.35461 3.63849 7.38351 3.71555 7.38351L4.81368 7.38351ZM8.1851 12.7778C8.95571 12.7778 9.67173 12.6076 10.3332 12.2672C10.9946 11.9269 11.5501 11.4613 11.9996 10.8705C12.4491 10.2797 12.7445 9.61827 12.8858 8.88619C12.8987 8.82197 12.8826 8.76097 12.8377 8.70317C12.7927 8.64537 12.7317 8.61648 12.6546 8.61648H11.5565C11.4923 8.61648 11.4409 8.63253 11.4024 8.66464C11.3639 8.69675 11.3382 8.73849 11.3253 8.78986C11.1455 9.5091 10.7634 10.0967 10.1791 10.5526C9.59467 11.0086 8.93002 11.2366 8.1851 11.2366C7.77411 11.2366 7.37916 11.1627 7.00028 11.015C6.6214 10.8673 6.27784 10.6522 5.96959 10.3696L6.77873 9.56048C6.86864 9.47057 6.91359 9.3614 6.91359 9.23297C6.91359 9.10453 6.86864 8.99536 6.77873 8.90546C6.68882 8.81555 6.57966 8.7706 6.45122 8.7706H3.86968C3.74124 8.7706 3.63207 8.81555 3.54217 8.90546C3.45227 8.99536 3.40731 9.10453 3.40731 9.23297L3.40731 11.8145C3.40731 11.9429 3.45226 12.0521 3.54217 12.142C3.63207 12.2319 3.74124 12.2769 3.86968 12.2769C3.99811 12.2769 4.10728 12.2319 4.19719 12.142L4.89074 11.4485C5.32742 11.8723 5.82831 12.1998 6.39343 12.431C6.95854 12.6622 7.55577 12.7778 8.1851 12.7778Z"
+        fill="white"
+      />
+    </mask>
+    <g mask="url(#mask0_5560_39870)">
+      <path d="M0 0H16V16H0V0Z" fill={fill} />
+    </g>
+  </svg>
+);
+
+export default AutoPayIcon;

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

@@ -20,7 +20,6 @@ import {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
-  PaymentIcon,
   AutopayOnIcon,
   SearchIcon,
   AchReturnIcon,
@@ -65,7 +64,6 @@ export const routingNumberImage = () => <RoutingNumberImage />;
 export const checkmarkIcon = () => <CheckmarkIcon />;
 export const bankIcon = () => <BankIcon />;
 export const genericCard = () => <GenericCard />;
-export const paymentIcon = () => <PaymentIcon />;
 export const autopayOnIcon = () => <AutopayOnIcon />;
 export const searchIcon = () => <SearchIcon />;
 export const achReturnIcon = () => <AchReturnIcon />;

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 Badge } from "./badge";
 export { default as BoxWithShadow } from "./box-with-shadow";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonWithAction } from "./button-with-action";

package/src/constants/colors.js

@@ -40,6 +40,7 @@ const COOL_GREY_05 = "#fbfcfd"; // CBS-050
 const CLOUDBURST_BLUE = "#26395c";
 const ZODIAC_BLUE = "#14284b";
 const CONGRESS_BLUE = "#005095";
+const ROYAL_BLUE = "#3B5BDB";
 const SCIENCE_BLUE = "#0074D9";
 const MARINER_BLUE = "#2E75D2";
 const CURIOUS_BLUE = "#27A9E1";
@@ -51,9 +52,10 @@ const FOAM_BLUE = "#EFF4FD";
 const CELLO_BLUE = "#214566";
 const BOSTON_BLUE = "#357fb8";
 const INFO_BLUE = "#E4F4FD";
+const CORNFLOWER_BLUE = "#EBEFFB";
 const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
-const ROYAL_BLUE = "#3181E3";
+
 const ASTRAL_BLUE = "#3176AA";
 const SAPPHIRE_BLUE = "#116285";
 const PEACOCK_BLUE = "#0E506D";
@@ -147,6 +149,7 @@ export {
   AQUA_HAZE_WHITE,
   BLEACH_WHITE,
   CATSKILL_WHITE,
+  CORNFLOWER_BLUE,
   HALF_COLONIAL_WHITE,
   ATHENS_GREY,
   ALTO_GREY,