@thecb/components 8.2.0-beta.6 → 8.2.0-beta.8

package/package.json

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

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

@@ -12,7 +12,6 @@ const StyledBadgeContainer = styled(Box)`
   align-self: flex-start;
   gap: 4px;
   border-radius: 4px;
-  background-color: ${({ themeValues }) => themeValues.background};
 `;
 
 const StyledBadge = styled(Text)`
@@ -22,7 +21,6 @@ const StyledBadge = styled(Text)`
   font-weight: 400;
   line-height: 150%; /* 15px */
   letter-spacing: 0.2px;
-  color: ${({ themeValues }) => themeValues.color};
 
   @media screen and (min-width: 1049px) {
     font-size: 12px;
@@ -32,9 +30,9 @@ const StyledBadge = styled(Text)`
 `;
 
 const Badge = ({ label, Icon, themeValues, iconOnLeft = true }) => (
-  <StyledBadgeContainer themeValues={themeValues}>
+  <StyledBadgeContainer background={themeValues.background}>
     {iconOnLeft && Icon && <Icon fill={themeValues.color} />}
-    <StyledBadge themeValues={themeValues}>{label}</StyledBadge>
+    <StyledBadge color={themeValues.color}>{label}</StyledBadge>
     {!iconOnLeft && Icon && <Icon fill={themeValues.color} />}
   </StyledBadgeContainer>
 );

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

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

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

@@ -3,6 +3,7 @@ import React from "react";
 import page from "../../../../.storybook/page";
 import {
   AccountsIcon,
+  AutoPayIcon,
   AccountsAddIcon,
   ForgotPasswordIcon,
   GoToEmailIcon,
@@ -20,6 +21,7 @@ import {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
+  PaymentIcon,
   AutopayOnIcon,
   SearchIcon,
   AchReturnIcon,
@@ -64,6 +66,7 @@ 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/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,