@thecb/components 8.2.0-beta.1 → 8.2.0-beta.2

package/package.json

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

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

@@ -2,6 +2,7 @@ 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)`
@@ -10,7 +11,7 @@ const StyledBadgeContainer = styled(Box)`
   align-items: center;
   gap: 4px;
   border-radius: 4px;
-  background-color: ${({ variant }) => fallbackValues.background[variant]};
+  background-color: ${({ themeValues }) => themeValues.background};
 `;
 
 const StyledBadge = styled(Text)`
@@ -20,7 +21,7 @@ const StyledBadge = styled(Text)`
   font-weight: 400;
   line-height: 150%; /* 15px */
   letter-spacing: 0.2px;
-  color: ${({ variant }) => fallbackValues.color[variant]};
+  color: ${({ themeValues }) => themeValues.color};
 
   @media screen and (min-width: 1049px) {
     font-size: 12px;
@@ -29,11 +30,11 @@ const StyledBadge = styled(Text)`
   }
 `;
 
-const Badge = ({ label, Icon, variant }) => (
-  <StyledBadgeContainer variant={variant}>
-    {Icon && <Icon fill={fallbackValues.color[variant]} />}
-    <StyledBadge variant={variant}>{label}</StyledBadge>
+const Badge = ({ label, Icon, themeValues }) => (
+  <StyledBadgeContainer themeValues={themeValues}>
+    {Icon && <Icon fill={themeValues.color} />}
+    <StyledBadge themeValues={themeValues}>{label}</StyledBadge>
   </StyledBadgeContainer>
 );
 
-export default Badge;
+export default themeComponent(Badge, "Badge", fallbackValues, "success");

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

@@ -2,7 +2,7 @@ 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";
+import AutoPayIcon from "../icons/AutoPayIcon";
 
 const variantsLabel = "variants";
 const variants = {
@@ -11,6 +11,7 @@ const variants = {
   primary: "primary",
   success: "success"
 };
+
 const defaultValue = "success";
 const groupId = "props";
 const labelLabel = "label";
@@ -20,7 +21,7 @@ export const badge = () => (
   <Badge
     variant={select(variantsLabel, variants, defaultValue, groupId)}
     label={text(labelLabel, "Autopay Available", groupId)}
-    Icon={text(iconLabel, AutopayIcon, groupId)}
+    Icon={text(iconLabel, AutoPayIcon, groupId)}
   />
 );
 

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

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