Merge pull request #100 from inkonchain/feat/card-size

feat: remove card's rounded in favor of size rounding scaling

Author: fran-ink

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/components/Card/Card.stories.tsx

@@ -264,3 +264,59 @@ export const LargeCardInfo: Story = {
     ),
   },
 };
+
+export const FullCard: Story = {
+  args: {
+    size: "noPadding",
+    image: (
+      <CardContent.Image>
+        <img
+          src="https://picsum.photos/1024/576"
+          alt="Card Image"
+          width={1024}
+          height={580}
+        />
+      </CardContent.Image>
+    ),
+  },
+};
+
+export const FullCardWithImageOnTheRight: Story = {
+  args: {
+    size: "noPadding",
+    imageLocation: "right",
+    image: (
+      <CardContent.Image>
+        <img
+          src="https://picsum.photos/1024/576"
+          alt="Card Image"
+          width={1024}
+          height={580}
+        />
+      </CardContent.Image>
+    ),
+  },
+};
+
+export const CardWithSmallImage: Story = {
+  args: {
+    size: "small",
+    children: (
+      <TitleAndDescription
+        title="Card with small image"
+        description="This is a card with a small image."
+        size="small"
+      />
+    ),
+    image: (
+      <CardContent.Image variant="square">
+        <img
+          src="https://picsum.photos/1024/576"
+          alt="Card Image"
+          width={128}
+          height={128}
+        />
+      </CardContent.Image>
+    ),
+  },
+};

src/components/Card/Card.tsx

@@ -14,11 +14,12 @@ export interface CardProps extends VariantProps<typeof cardVariants> {
 const cardVariants = cva(
   `
 ink:grid ink:grid-cols-1
-ink:p-2 ink:pb-3 ink:sm:p-3 ink:gap-3
+ink:gap-3
 ink:relative 
 ink:bg-background-container 
 ink:font-default
 ink:box-border
+ink:overflow-hidden
 `,
   {
     variants: {
@@ -36,10 +37,10 @@ ink:box-border
         true: "ink:cursor-pointer",
         false: "",
       },
-      rounded: {
-        lg: "ink:rounded-lg",
-        xl: "ink:rounded-xl",
-        xxl: "ink:rounded-xxl",
+      size: {
+        noPadding: "ink:rounded-lg",
+        small: "ink:p-2 ink:pb-3 ink:sm:p-3 ink:rounded-lg",
+        default: "ink:p-2 ink:pb-3 ink:sm:p-3 ink:rounded-xl",
       },
     },
     compoundVariants: [
@@ -48,9 +49,14 @@ ink:box-border
         clickable: true,
         className: "ink:hover:bg-button-secondary-hover",
       },
+      {
+        size: "small",
+        imageLocation: "left",
+        className: "ink:grid-cols-[128px_1fr] ink:sm:grid-cols-[128px_1fr]",
+      },
     ],
     defaultVariants: {
-      rounded: "xl",
+      size: "default",
     },
   }
 );
@@ -63,18 +69,17 @@ export const Card: React.FC<CardProps> = ({
   asChild,
   variant,
   clickable,
-  rounded,
+  size,
 }) => {
   const Component = asChild ? Slot : "div";
-  const roundedValue = rounded || (image ? "xxl" : "lg");
   return (
     <Component
       className={classNames(
         cardVariants({
           variant,
           imageLocation: image ? imageLocation : undefined,
           clickable,
-          rounded: roundedValue,
+          size: size || (image ? "default" : "small"),
           className,
         }),
         className
@@ -89,10 +94,10 @@ export const Card: React.FC<CardProps> = ({
             variant === "light-purple"
               ? "var(--ink-background-light)"
               : "var(--ink-text-muted)",
-          "--ink-card-rounded": variantClassNames(roundedValue, {
-            lg: "var(--ink-base-radius-sm)",
-            xl: "var(--ink-base-radius-lg)",
-            xxl: "var(--ink-base-radius-xl)",
+          "--ink-card-rounded": variantClassNames(size || "default", {
+            noPadding: "",
+            small: "var(--ink-base-radius-sm)",
+            default: "var(--ink-base-radius-lg)",
           }),
         } as React.CSSProperties
       }
@@ -103,10 +108,17 @@ export const Card: React.FC<CardProps> = ({
             {image}
             <div
               className={classNames(
-                "ink:flex ink:flex-col ink:gap-2 ink:sm:gap-6 ink:text-text-default ink:box-border",
+                "ink:flex ink:flex-col ink:gap-2 ink:sm:gap-6 ink:justify-center",
+                "ink:text-text-default ink:box-border",
                 !!image && "ink:p-2 ink:sm:p-3",
                 imageLocation === "right" && "ink:sm:-order-1",
-                imageLocation !== "top" && !!image && "ink:sm:py-[100px]"
+                imageLocation !== "top" &&
+                  !!image &&
+                  variantClassNames(size || "default", {
+                    default: "ink:sm:py-[100px]",
+                    noPadding: "ink:sm:py-[100px]",
+                    small: "",
+                  })
               )}
             >
               {child}

src/components/Card/Content/Image.tsx

@@ -3,13 +3,15 @@ import { classNames } from "../../../util/classes";
 import { Slot } from "../../Slot";
 
 export interface ImageProps extends React.PropsWithChildren {
+  variant?: "default" | "square";
   className?: string;
   mainLabels?: React.ReactNode;
   secondaryLabels?: React.ReactNode;
 }
 
 export const Image: React.FC<ImageProps> = ({
   className,
+  variant,
   mainLabels,
   secondaryLabels,
   children,
@@ -40,7 +42,12 @@ export const Image: React.FC<ImageProps> = ({
           )}
         </div>
       )}
-      <Slot className="ink:object-cover ink:object-center ink:w-full ink:h-full">
+      <Slot
+        className={classNames(
+          "ink:object-cover ink:object-center ink:w-full ink:h-full",
+          variant === "square" && "ink:aspect-square"
+        )}
+      >
         {children}
       </Slot>
     </div>