@thecb/components 8.2.2 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.2.2",
+  "version": "8.3.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,40 @@
+import React from "react";
+import styled from "styled-components";
+import Box from "../layouts/Box";
+import Text from "../../atoms/text/";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Badge.theme";
+
+const StyledBadgeContainer = styled(Box)`
+  display: inline-flex;
+  padding: 2px 8px;
+  align-items: center;
+  align-self: flex-start;
+  gap: 4px;
+  border-radius: 4px;
+`;
+
+const StyledBadge = styled(Text)`
+  font-family: "Public Sans", sans-serif;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 15px */
+  letter-spacing: 0.2px;
+
+  @media screen and (min-width: 1049px) {
+    font-size: 12px;
+    line-height: 150%; /* 18px */
+    letter-spacing: 0.24px;
+  }
+`;
+
+const Badge = ({ label, Icon, themeValues, iconOnLeft = true }) => (
+  <StyledBadgeContainer background={themeValues.background}>
+    {iconOnLeft && Icon && <Icon fill={themeValues.color} />}
+    <StyledBadge color={themeValues.color}>{label}</StyledBadge>
+    {!iconOnLeft && Icon && <Icon fill={themeValues.color} />}
+  </StyledBadgeContainer>
+);
+
+export default themeComponent(Badge, "Badge", fallbackValues, "success");

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

@@ -0,0 +1,32 @@
+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 variantsLabel = "variants";
+const variants = {
+  info: "info",
+  warn: "warn",
+  primary: "primary",
+  success: "success"
+};
+
+const defaultValue = "success";
+const groupId = "props";
+const labelLabel = "label";
+const iconLabel = "Icon";
+
+export const badge = () => (
+  <Badge
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    label={text(labelLabel, "Autopay Available", groupId)}
+    Icon={text(iconLabel, AutopayIcon, groupId)}
+  />
+);
+
+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_VIVID,
+  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_VIVID}`,
+  success: `${SEA_GREEN}`
+};
+
+export const fallbackValues = {
+  background,
+  color
+};

package/src/components/atoms/badge/index.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+import Expand from "../../../util/expand";
+
+export interface BadgeProps {
+  label: string;
+  Icon?: JSX.Element;
+  iconOnLeft?: boolean;
+}
+
+export const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;

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,32 @@
+import React from "react";
+
+// Fill color based on default "success" variant color
+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

@@ -38,7 +38,8 @@ import {
   RejectedVelocityIcon,
   SuccessfulIcon,
   VoidedIcon,
-  StatusUnknownIcon
+  StatusUnknownIcon,
+  AutopayIcon
 } from "./index";
 
 const story = page({
@@ -84,3 +85,4 @@ export const rejectedVelocityIcon = () => <RejectedVelocityIcon />;
 export const successfulIcon = () => <SuccessfulIcon />;
 export const voidedIcon = () => <VoidedIcon />;
 export const statusUnknownIcon = () => <StatusUnknownIcon />;
+export const autopayIcon = () => <AutopayIcon />;

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

@@ -1,4 +1,5 @@
 import AccountsIcon from "./AccountsIcon";
+import AutopayIcon from "./AutopayIcon";
 import AccountsAddIcon from "./AccountsAddIcon";
 import ForgotPasswordIcon from "./ForgotPasswordIcon";
 import GoToEmailIcon from "./GoToEmailIcon";
@@ -86,6 +87,7 @@ import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 export {
   AccountsIcon,
   AccountsAddIcon,
+  AutopayIcon,
   ForgotPasswordIcon,
   GoToEmailIcon,
   VerifiedEmailIcon,

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

@@ -51,9 +51,11 @@ 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 ROYAL_BLUE_VIVID = "#3B5BDB";
 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,
@@ -185,6 +188,7 @@ export {
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
   ROYAL_BLUE,
+  ROYAL_BLUE_VIVID,
   ASTRAL_BLUE,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,