From f49784a948ada55460b8d9b758a38bfe980304d6 Mon Sep 17 00:00:00 2001
From: JoltCode <joe@joecc.dev>
Date: Mon, 13 Nov 2023 23:26:14 +0000
Subject: [PATCH] feat(stories): add controls and type exports for card

---
 src/card/Card.stories.tsx | 42 +++++++++++++++++++++++++++++++--------
 src/card/Card.tsx         |  6 +++---
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/card/Card.stories.tsx b/src/card/Card.stories.tsx
index 5e912a9..3ff09a7 100644
--- a/src/card/Card.stories.tsx
+++ b/src/card/Card.stories.tsx
@@ -1,14 +1,40 @@
-import { Card } from "./Card.js";
+import {Card, CardProps} from "./Card.js";
+import {Story} from "@ladle/react";
 
-export const CardStory = () => (
+export const CardStory: Story<CardProps & {
+  title: string,
+  body: string,
+  footer: string,
+}> = (props) => (
   <Card>
-    <Card.CardTitle>Card Title</Card.CardTitle>
+    <Card.CardTitle>{props.title}</Card.CardTitle>
     <Card.CardBody>
-      lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-      voluptatum. lorem ipsum dolor sit amet consectetur adipisicing elit.
-      Quisquam, voluptatum. lorem ipsum dolor sit amet consectetur adipisicing
-      elit. Quisquam, voluptatum.
+      {props.body}
     </Card.CardBody>
-    <Card.CardFooter>Card Footer</Card.CardFooter>
+    <Card.CardFooter>{props.footer}</Card.CardFooter>
   </Card>
 );
+
+CardStory.argTypes = {
+  title: {
+    control: {
+      type: "text",
+    },
+    defaultValue: "Card Title",
+  },
+  body: {
+    control: {
+      type: "text",
+    },
+    defaultValue: "lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n" +
+      "voluptatum. lorem ipsum dolor sit amet consectetur adipisicing elit.\n" +
+      "Quisquam, voluptatum. lorem ipsum dolor sit amet consectetur adipisicing\n" +
+      "elit. Quisquam, voluptatum.",
+  },
+footer: {
+    control: {
+      type: "text",
+    },
+    defaultValue: "Card Footer",
+  },
+}
\ No newline at end of file
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
index 0bbfd77..b593ed0 100644
--- a/src/card/Card.tsx
+++ b/src/card/Card.tsx
@@ -15,7 +15,7 @@ export const Card = (props: CardProps) => {
   );
 };
 
-interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
 const CardTitle = (props: CardTitleProps) => {
   const { className, ...rest } = props;
 
@@ -28,7 +28,7 @@ const CardTitle = (props: CardTitleProps) => {
 
 Card.CardTitle = CardTitle;
 
-interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
 const CardBody = (props: CardBodyProps) => {
   const { className, ...rest } = props;
 
@@ -41,7 +41,7 @@ const CardBody = (props: CardBodyProps) => {
 
 Card.CardBody = CardBody;
 
-interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 const CardFooter = (props: CardFooterProps) => {
   const { className, ...rest } = props;