From 259f28ed48c8bc66c91913b1d6a1c5202742801f Mon Sep 17 00:00:00 2001
From: jimmy <jimmy.svensson@axis.com>
Date: Sat, 13 Apr 2024 09:10:48 +0200
Subject: [PATCH] chore: redesign copy code block icon example-page

---
 .../story/story-code-block-accordion.tsx      | 21 +++++++++++--------
 .../src/components/story/story-code-copy.tsx  |  5 +++--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/examples/src/components/story/story-code-block-accordion.tsx b/examples/src/components/story/story-code-block-accordion.tsx
index 9d3241f9..a8136f02 100644
--- a/examples/src/components/story/story-code-block-accordion.tsx
+++ b/examples/src/components/story/story-code-block-accordion.tsx
@@ -13,14 +13,15 @@ import { CopyButton } from "./story-code-copy";
 
 const useStyles = makeStyles({
   root: {
+    position: "relative",
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.borderRadius(tokens.borderRadiusLarge),
   },
-  title: {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
+  copyBootstrap: {
+    position: "absolute",
+    zIndex: 5,
+    top: "5px",
+    right: "5px",
   },
 });
 
@@ -40,11 +41,13 @@ export const StoryCodeBlockAccordion = (
       defaultOpenItems={defaultOpen ? "1" : null}
     >
       <AccordionItem value="1">
+        <CopyButton
+          appearance="transparent"
+          className={styles.copyBootstrap}
+          codeString={codeString}
+        />
         <AccordionHeader>
-          <div className={styles.title}>
-            {title}
-            <CopyButton codeString={codeString} />
-          </div>
+          {title}
         </AccordionHeader>
         <AccordionPanel>
           <StoryCodeBlock codeString={codeString} canCopy={false} />
diff --git a/examples/src/components/story/story-code-copy.tsx b/examples/src/components/story/story-code-copy.tsx
index 11478be7..4f8b4911 100644
--- a/examples/src/components/story/story-code-copy.tsx
+++ b/examples/src/components/story/story-code-copy.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  ButtonProps,
   makeStyles,
   mergeClasses,
   tokens,
@@ -34,7 +35,7 @@ export function useCopyStyles({ className }: TUseCopyStyles) {
 type TCopy = {
   codeString: string;
   className?: string;
-};
+} & Pick<ButtonProps, "shape" | "appearance">;
 
 export function CopyButton({ className, codeString, ...rest }: TCopy) {
   const { rootStyle } = useCopyStyles({ className });
@@ -52,10 +53,10 @@ export function CopyButton({ className, codeString, ...rest }: TCopy) {
     <Tooltip withArrow content={"copy codeblock"} relationship={"label"}>
       <Button
         className={rootStyle}
-        {...rest}
         shape="circular"
         onClick={copyCode}
         icon={<RectangleLandscapeHintCopyFilled />}
+        {...rest}
       >
       </Button>
     </Tooltip>