Add badge to horizontal card (#514)

* Add badge to horizontal card

* Fix deployment

* Add tests

Author: vineethasok

src/components/CardHorizontal/CardHorizontal.stories.ts

@@ -13,5 +13,7 @@ export const Playground = {
     description: "A description very interesting that presumably relates to the card.",
     disabled: false,
     isSelected: false,
+    badgeText: null,
+    badgeIcon: null,
   },
 };

src/components/CardHorizontal/CardHorizontal.test.tsx

@@ -13,9 +13,11 @@ describe("CardHorizontal Component", () => {
         title,
         icon: "warning",
         description: "",
+        badgeText: "",
       });
 
       expect(screen.getByText(title)).toBeDefined();
+      expect(screen.queryByTestId("horizontal-card-badge")).toBeNull();
     });
 
     it("should render the description when provided", () => {
@@ -28,5 +30,29 @@ describe("CardHorizontal Component", () => {
 
       expect(screen.getByText(description)).toBeDefined();
     });
+
+    it("should render the badge when provided", () => {
+      const description = "This is the card description";
+      renderCard({
+        icon: "warning",
+        title: "title",
+        description,
+        badgeText: "Badge",
+      });
+
+      expect(screen.getByText("title")).toBeDefined();
+      expect(screen.getByTestId("horizontal-card-badge")).toBeDefined();
+    });
+    it("should not render the badge when badgeText is provided and not title", () => {
+      const description = "This is the card description";
+      renderCard({
+        icon: "warning",
+        title: "",
+        description,
+        badgeText: "Badge",
+      });
+
+      expect(screen.queryByTestId("horizontal-card-badge")).toBeNull();
+    });
   });
 });

src/components/CardHorizontal/CardHorizontal.tsx

@@ -1,6 +1,13 @@
 import { HTMLAttributes, ReactNode } from "react";
 import { styled } from "styled-components";
-import { Icon, IconName } from "@/components";
+import {
+  Badge,
+  BadgeState,
+  Container,
+  HorizontalDirection,
+  Icon,
+  IconName,
+} from "@/components";
 
 type CardColor = "default" | "muted";
 
@@ -13,13 +20,13 @@ export interface CardHorizontalProps
   isSelected?: boolean;
   children?: ReactNode;
   color?: CardColor;
+  badgeText?: string;
+  badgeState?: BadgeState;
+  badgeIcon?: IconName;
+  badgeIconDir?: HorizontalDirection;
 }
 
 const Header = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  width: 100%;
   max-width: 100%;
   gap: inherit;
 `;
@@ -136,6 +143,10 @@ export const CardHorizontal = ({
   isSelected,
   children,
   color = "default",
+  badgeText,
+  badgeState,
+  badgeIcon,
+  badgeIconDir,
   ...props
 }: CardHorizontalProps) => {
   return (
@@ -153,7 +164,41 @@ export const CardHorizontal = ({
         />
       )}
       <ContentWrapper>
-        {title && <Header>{title}</Header>}
+        {title && (
+          <Header
+            as={Container}
+            isResponsive={false}
+            gap="xs"
+            justifyContent="space-between"
+            fillWidth
+          >
+            <Container
+              orientation="horizontal"
+              gap="xs"
+              isResponsive={false}
+              fillWidth={false}
+              grow="1"
+            >
+              {title}
+            </Container>
+            {badgeText && (
+              <Container
+                isResponsive={false}
+                justifyContent="end"
+                fillWidth={false}
+                data-testid="horizontal-card-badge"
+              >
+                <Badge
+                  text={badgeText}
+                  size="md"
+                  state={badgeState}
+                  icon={badgeIcon}
+                  iconDir={badgeIconDir}
+                />
+              </Container>
+            )}
+          </Header>
+        )}
 
         {description && <Description>{description}</Description>}
         {children && <Description>{children}</Description>}