Add option to have a click event for the primary button (#150)

* Add Option to have a click event for the primary button

* Add wrapper props to types

* Add panel to components

src/components/CardPrimary/CardPrimary.test.tsx

@@ -31,5 +31,43 @@ describe("CardPrimary Component", () => {
 
       expect(screen.getByText(description)).toBeDefined();
     });
+    it("should render button when the infoUrl is provided", () => {
+      const description = "This is the card description";
+      const { queryByRole } = renderCard({
+        icon: "warning",
+        title: "",
+        description,
+        infoUrl: "test",
+        infoText: "test",
+      });
+
+      expect(queryByRole("button")).not.toBeNull();
+    });
+    it("should not render button when the infoUrl is provided and length is 0", () => {
+      const description = "This is the card description";
+      const { queryByRole } = renderCard({
+        icon: "warning",
+        title: "",
+        description,
+        infoUrl: "",
+        infoText: "",
+      });
+
+      expect(queryByRole("button")).toBeNull();
+    });
+
+    it("should render button when onButtonClick is provided", () => {
+      const description = "This is the card description";
+      const { queryByRole } = renderCard({
+        icon: "warning",
+        title: "",
+        description,
+        onButtonClick: () => null,
+        infoText: "test1",
+      });
+
+      screen.debug();
+      expect(queryByRole("button")).not.toBeNull();
+    });
   });
 });

src/components/CardPrimary/CardPrimary.tsx

@@ -2,9 +2,9 @@ import styled from "styled-components";
 import { Button, Icon, Spacer, IconName } from "@/components";
 import { Title } from "@/components/Typography/Title/Title";
 import { Text } from "@/components/Typography/Text/Text";
-import { ReactNode } from "react";
+import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from "react";
 
-export interface CardPrimaryProps {
+export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement> {
   title: string;
   icon: IconName;
   hasShadow?: boolean;
@@ -13,6 +13,7 @@ export interface CardPrimaryProps {
   infoUrl?: string;
   infoText?: string;
   size?: "sm" | "md";
+  onButtonClick?: MouseEventHandler<HTMLElement>;
 }
 
 const Wrapper = styled.div<{
@@ -109,19 +110,25 @@ export const CardPrimary = ({
   infoText,
   size,
   disabled = false,
+  onButtonClick,
+  ...props
 }: CardPrimaryProps) => {
-  const handleClick = () => {
-    if (infoUrl) {
+  const handleClick = (e: MouseEvent<HTMLElement>) => {
+    if (typeof onButtonClick === "function") {
+      onButtonClick(e);
+    }
+    if (infoUrl && infoUrl.length > 0) {
       window.open(infoUrl, "_blank");
     }
   };
 
-  const Component = !infoUrl || infoUrl.length === 0 ? "div" : Button;
+  const Component = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
   return (
     <Wrapper
       $hasShadow={hasShadow}
       $size={size}
       $disabled={disabled}
+      {...props}
     >
       <Header
         $size={size}

src/components/Panel/Panel.tsx

@@ -1,37 +1,43 @@
+import { HTMLAttributes } from "react";
 import styled from "styled-components";
 
-export type panelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-export type panelColor = "default" | "muted" | "transparent";
+export type PanelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type PanelColor = "default" | "muted" | "transparent";
 
-export interface panelProps {
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
   hasBorder?: boolean;
   hasShadow?: boolean;
-  color?: panelColor;
-  padding?: panelPadding;
+  color?: PanelColor;
+  padding?: PanelPadding;
   children?: React.ReactNode;
 }
 
-export const Panel = ({ hasBorder, hasShadow, color, padding, children }: panelProps) => (
+export const Panel = ({ hasBorder, hasShadow, color, padding, children }: PanelProps) => (
   <FlexContainer>
     <Wrapper
-      hasBorder={hasBorder}
-      hasShadow={hasShadow}
-      color={color}
-      padding={padding}
+      $hasBorder={hasBorder}
+      $hasShadow={hasShadow}
+      $color={color}
+      $padding={padding}
     >
       {children}
     </Wrapper>
   </FlexContainer>
 );
 
-const Wrapper = styled.div<panelProps>`
-  background-color: ${({ color = "default", theme }) =>
-    theme.click.panel.color.background[color]};
+const Wrapper = styled.div<{
+  $hasBorder?: boolean;
+  $hasShadow?: boolean;
+  $color?: PanelColor;
+  $padding?: PanelPadding;
+}>`
+  background-color: ${({ $color = "default", theme }) =>
+    theme.click.panel.color.background[$color]};
   border-radius: ${({ theme }) => theme.click.panel.radii.all};
-  padding: ${({ padding = "md", theme }) => theme.click.panel.space.y[padding]};
-  border: ${({ hasBorder, theme }) =>
-    hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"};
-  box-shadow: ${({ hasShadow, theme }) => (hasShadow ? theme.shadow[1] : "none")};
+  padding: ${({ $padding = "md", theme }) => theme.click.panel.space.y[$padding]};
+  border: ${({ $hasBorder, theme }) =>
+    $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"};
+  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : "none")};
   display: flex;
 `;
 

src/components/index.ts

@@ -25,6 +25,7 @@ export { Logo } from "./Logos/Logo";
 export { NumberField } from "./Input/NumberField";
 export { PasswordField } from "./Input/PasswordField";
 export { Popover } from "./Popover/Popover";
+export { Panel } from "./Panel/Panel";
 export { RadioGroup } from "./RadioGroup/RadioGroup";
 export { SearchField } from "./Input/SearchField";
 export { Select } from "./Select/SingleSelect";

src/components/types.ts

@@ -30,6 +30,7 @@ export type { Menu, SplitButtonProps } from "./SplitButton/SplitButton";
 export type { ToastProps } from "./Toast/Toast";
 export type { SelectOptionListItem } from "./Select/common/types";
 export type { MultiSelectProps } from "./Select/MultiSelect";
+export type { PanelProps } from "./Panel/Panel";
 
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";