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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.2.0-beta.0",
+  "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,20 +21,20 @@ 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: 1024px) {
+  @media screen and (min-width: 1049px) {
     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>
+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,22 +2,26 @@ 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 = {
   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("variants", variants, defaultValue, groupId)}
-    label={text("label", "Autopay Available", "props")}
-    Icon={text("Icon", AutopayIcon, "props")}
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    label={text(labelLabel, "Autopay Available", 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>>;