From ad44607b609e37f7dfb8a79022dbde085e1734c2 Mon Sep 17 00:00:00 2001
From: Edouard Wautier <4435185+Duncid@users.noreply.github.com>
Date: Mon, 16 Dec 2024 18:37:43 +0100
Subject: [PATCH] Updating

---
 sparkle/src/components/Citation.tsx      | 44 +++++++++++++++++-------
 sparkle/src/stories/Card.stories.tsx     |  3 +-
 sparkle/src/stories/Citation.stories.tsx | 36 ++++++++++++-------
 3 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/sparkle/src/components/Citation.tsx b/sparkle/src/components/Citation.tsx
index 1694c352bb0f..ae77221ac394 100644
--- a/sparkle/src/components/Citation.tsx
+++ b/sparkle/src/components/Citation.tsx
@@ -1,7 +1,9 @@
 import React, { ReactNode } from "react";
 
 import {
-  Button, Card, CardProps,
+  Button,
+  Card,
+  CardProps,
   Spinner,
   Tooltip,
 } from "@sparkle/components/";
@@ -16,7 +18,14 @@ type CitationProps = CardProps & {
 
 const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
   (
-    { children, variant = "primary", isLoading, className, tooltip, ...props },
+    {
+      children,
+      variant = "secondary",
+      isLoading,
+      className,
+      tooltip,
+      ...props
+    },
     ref
   ) => {
     const cardButton = (
@@ -25,7 +34,7 @@ const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
         variant={variant}
         size="sm"
         className={cn(
-          "s-relative s-flex s-aspect-[2/1] s-min-w-[140px] s-flex-none s-flex-col s-justify-end",
+          "s-relative s-flex s-aspect-[2/1] s-min-w-[140px] s-flex-none s-flex-col s-justify-end s-overflow-hidden",
           className
         )}
         {...props}
@@ -71,7 +80,7 @@ const CitationGrid = React.forwardRef<
 >(({ children, className, ...props }, ref) => {
   return (
     <div ref={ref} className={cn("s-@container", className)} {...props}>
-      <div className="s-grid s-grid-cols-1 s-gap-2 @sm:s-grid-cols-2 @2xl:s-grid-cols-4 @3xl:s-grid-cols-5 @xl:s-grid-cols-3">
+      <div className="s-grid s-grid-cols-1 s-gap-2 @xxs:s-grid-cols-2 @xs:s-grid-cols-3 @sm:s-grid-cols-4 @md:s-grid-cols-5 @lg:s-grid-cols-6">
         {children}
       </div>
     </div>
@@ -91,12 +100,8 @@ const CitationClose = React.forwardRef<HTMLButtonElement, CitationCloseProps>(
       <Button
         ref={ref}
         variant="ghost"
-        size="xs"
-        className={cn(
-          "s-z-10",
-          "s-absolute s-right-2 s-top-2 s-z-10",
-          className
-        )}
+        size="mini"
+        className={className}
         icon={XMarkIcon}
         onClick={(e) => {
           e.stopPropagation();
@@ -122,6 +127,9 @@ const CitationImage = React.forwardRef<HTMLDivElement, CitationImageProps>(
         className={cn(
           "s-absolute s-inset-0",
           "s-bg-cover s-bg-center",
+          "s-rounded-xl",
+          "s-overflow-hidden",
+          "[mask-image:radial-gradient(white,black)]",
           className
         )}
         style={{
@@ -129,7 +137,17 @@ const CitationImage = React.forwardRef<HTMLDivElement, CitationImageProps>(
         }}
         {...props}
       >
-        <div className="s-z-0 s-h-full s-w-full s-bg-primary-100/80 s-transition s-duration-200 group-hover:s-bg-primary-200/70 group-active:s-bg-primary-100/60" />
+        <div
+          className={cn(
+            "s-absolute s-inset-0",
+            "s-z-0 s-h-full s-w-full",
+            "s-bg-primary-100/80",
+            "s-backdrop-blur-sm",
+            "s-transition s-duration-200",
+            "group-hover:s-bg-primary-200/70 group-hover:s-backdrop-blur-none",
+            "group-active:s-bg-primary-100/60"
+          )}
+        />
       </div>
     );
   }
@@ -165,7 +183,7 @@ const CitationLoading = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "s-absolute s-inset-0 s-z-20 s-flex s-h-full s-w-full s-items-center s-justify-center s-bg-primary-100/80",
+        "s-absolute s-inset-0 s-z-20 s-flex s-h-full s-w-full s-items-center s-justify-center s-rounded-xl s-bg-primary-100/80 s-backdrop-blur-sm",
         className
       )}
       {...props}
@@ -235,4 +253,4 @@ export {
   CitationImage,
   CitationIndex,
   CitationTitle,
-};
\ No newline at end of file
+};
diff --git a/sparkle/src/stories/Card.stories.tsx b/sparkle/src/stories/Card.stories.tsx
index 4459eb61bbda..c378664c7dab 100644
--- a/sparkle/src/stories/Card.stories.tsx
+++ b/sparkle/src/stories/Card.stories.tsx
@@ -16,6 +16,7 @@ import {
   PlanetIcon,
   ScanIcon,
   TableIcon,
+  XMarkIcon,
 } from "@sparkle/icons";
 
 const meta = {
@@ -129,7 +130,7 @@ export const ActionCardDemo: React.FC = () => (
         onClick={() => {
           alert(`You clicked on ${card.title}`);
         }}
-        action={<CardActionButton size="mini" icon={CommandLineIcon} />}
+        action={<CardActionButton size="mini" icon={XMarkIcon} />}
       >
         <div className="s-flex s-w-full s-flex-col s-gap-1 s-text-sm">
           <div className="s-flex s-w-full s-gap-1 s-font-medium s-text-foreground">
diff --git a/sparkle/src/stories/Citation.stories.tsx b/sparkle/src/stories/Citation.stories.tsx
index ded9d1a593c2..436eef63e176 100644
--- a/sparkle/src/stories/Citation.stories.tsx
+++ b/sparkle/src/stories/Citation.stories.tsx
@@ -32,7 +32,7 @@ export default meta;
 export const CitationsExample = () => (
   <div className="s-flex s-flex-col s-gap-8">
     Example of attachement
-    <div className="s-flex s-gap-2">
+    <CitationGrid>
       <Citation onClick={() => alert("Card clicked")} className="s-w-48">
         <CitationIcons>
           <Icon visual={SlackLogo} size="sm" />
@@ -69,43 +69,55 @@ export const CitationsExample = () => (
         </CitationIcons>
         <CitationTitle>screenshot.png</CitationTitle>
       </Citation>
-    </div>
+    </CitationGrid>
     Example of dissmissable attachements
-    <div className="s-flex s-gap-8">
-      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+    <CitationGrid>
+      <Citation
+        onClick={() => alert("Card clicked")}
+        className="s-w-48"
+        action={<CitationClose onClick={() => alert("Close clicked")} />}
+      >
         <CitationIcons>
           <Icon visual={SlackLogo} size="sm" />
         </CitationIcons>
         <CitationTitle>Slack thread</CitationTitle>
-        <CitationClose onClick={() => alert("Close clicked")} />
         <CitationDescription>
           @ed at 16:32 This is the latest ve
         </CitationDescription>
       </Citation>
-      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+      <Citation
+        onClick={() => alert("Card clicked")}
+        className="s-w-48"
+        action={<CitationClose onClick={() => alert("Close clicked")} />}
+      >
         <CitationIcons>
           <Icon visual={TableIcon} size="sm" />
         </CitationIcons>
-        <CitationClose onClick={() => alert("Close clicked")} />
         <CitationTitle>extract_financa.csv</CitationTitle>
       </Citation>
-      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+      <Citation
+        onClick={() => alert("Card clicked")}
+        className="s-w-48"
+        action={<CitationClose onClick={() => alert("Close clicked")} />}
+      >
         <CitationIcons>
           <Icon visual={GlobeAltIcon} size="sm" />
         </CitationIcons>
-        <CitationClose onClick={() => alert("Close clicked")} />
         <CitationTitle>Linkedin, Edouard Wautier</CitationTitle>
       </Citation>
 
-      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+      <Citation
+        onClick={() => alert("Card clicked")}
+        className="s-w-48"
+        action={<CitationClose onClick={() => alert("Close clicked")} />}
+      >
         <CitationImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
         <CitationIcons>
           <Icon visual={ImageIcon} size="sm" />
         </CitationIcons>
-        <CitationClose onClick={() => alert("Close clicked")} />
         <CitationTitle>screenshot.png</CitationTitle>
       </Citation>
-    </div>
+    </CitationGrid>
     Example of citations in markdown
     <div>
       <Popover