chore: redesign copy code block icon example-page

AxisCommunications · Apr 13, 2024 · 259f28e · 259f28e
1 parent f335e69
commit 259f28e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -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>