[DSTSUP-75]: Fixing icons in our docs to be copied correctly (#3908)

marigold-ui · May 13, 2024 · 20fb4f4 · 20fb4f4
1 parent 60b032a
commit 20fb4f4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/.changeset/hip-coats-retire.md b/.changeset/hip-coats-retire.md
@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+Fixing icons into docs to be copied in the right way
diff --git a/docs/ui/IconList.tsx b/docs/ui/IconList.tsx
@@ -52,21 +52,16 @@ const IconListItem = ({ icon }: IconListItemProps) => {
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
       >
-        <div className="grid h-24 place-items-center">
+        <div className="relative grid h-24 place-items-center">
           <div
             className={cn(
-              isCopied || isHovered ? 'block' : 'hidden',
-              'select-none whitespace-nowrap font-medium tracking-wider'
+              isCopied || isHovered ? 'opacity-1' : 'opacity-0',
+              'bg-bg-surface absolute flex size-full select-none items-center justify-center whitespace-nowrap font-medium tracking-wider'
             )}
           >
             {isCopied ? 'COPIED!' : 'COPY SVG'}
           </div>
-          <Component
-            width={48}
-            height={48}
-            ref={svgRef as any}
-            className={cn(isHovered || isCopied ? 'hidden' : 'block')}
-          />
+          <Component width={48} height={48} ref={svgRef as any} />
         </div>
       </Card>
       <Text size="small" align="center">