update card story

tnamdevnote · Jun 12, 2024 · c96eaff · c96eaff
1 parent 25ea554
commit c96eaff
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 47 deletions.
diff --git a/components/molecules/card/card.stories.tsx b/components/molecules/card/card.stories.tsx
@@ -9,23 +9,14 @@ const meta: Meta<typeof Card> = {
   parameters: {
     layout: "centered",
   },
-  args: {
-    intent: "neutral",
-  },
-  argTypes: {
-    intent: {
-      options: ["primary", "secondary", "tertiary", "neutral"],
-      control: { type: "radio" },
-    },
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Card>;
 
 export const Default: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
         tellus leo, vesti bulum a ipsum sed, suscipit sodales ex. Vestibulum id
@@ -36,8 +27,8 @@ export const Default: Story = {
 };
 
 export const WithHeader: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardHeader headingLevel={2} title="Title" subheader="subheading" />
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
@@ -49,8 +40,8 @@ export const WithHeader: Story = {
 };
 
 export const WithAvatar: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardHeader
         avatar={
           <Avatar>
@@ -71,8 +62,8 @@ export const WithAvatar: Story = {
 };
 
 export const WithAction: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
         tellus leo, vesti bulum a ipsum sed, suscipit sodales ex. Vestibulum id

diff --git a/components/molecules/card/card.tsx b/components/molecules/card/card.tsx
@@ -1,38 +1,22 @@
 import { cn } from "@/lib/utils";
 import React, { forwardRef } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 
-const cardVariants = cva(
-  "flex min-w-56 flex-col gap-4 p-6 shadow-md rounded-2xl",
-  {
-    variants: {
-      intent: {
-        primary: "bg-primary-90 text-neutral-10",
-        secondary: "bg-secondary-90 text-neutral-90",
-        tertiary: "bg-tertiary-90 text-neutral-90",
-        neutral: "bg-white text-neutral-90",
-      },
-    },
-    defaultVariants: {
-      intent: "neutral",
-    },
+const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex min-w-56 flex-col gap-4 rounded-2xl bg-white p-6 text-neutral-90 shadow-md",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
   },
 );
-
-const Card = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>
->(({ className, intent, children, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(cardVariants({ intent }), className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
 Card.displayName = "Card";
 
 interface CardHeader extends React.HTMLAttributes<HTMLDivElement> {