From 0e379614dca82169412bb362ea9698643de797c6 Mon Sep 17 00:00:00 2001
From: Carolina Menezes <carolina.menezes@vtex.com.br>
Date: Wed, 1 Oct 2025 09:40:36 -0300
Subject: [PATCH] feat: CopyLinkButton - components migration

---
 src/components/code-block/index.tsx           |  4 +--
 .../{copy-button => copy-code}/index.tsx      |  4 +--
 .../{copy-button => copy-code}/styles.ts      |  0
 .../CopyLinkButton.stories.tsx                | 33 +++++++++++++++++++
 src/components/copy-link-button/index.tsx     | 26 +++++++++++++++
 src/components/copy-link-button/styles.ts     | 25 ++++++++++++++
 src/components/icons/copy-icon.tsx            | 28 ++++++++++++++++
 7 files changed, 116 insertions(+), 4 deletions(-)
 rename src/components/{copy-button => copy-code}/index.tsx (90%)
 rename src/components/{copy-button => copy-code}/styles.ts (100%)
 create mode 100644 src/components/copy-link-button/CopyLinkButton.stories.tsx
 create mode 100644 src/components/copy-link-button/index.tsx
 create mode 100644 src/components/copy-link-button/styles.ts
 create mode 100644 src/components/icons/copy-icon.tsx

diff --git a/src/components/code-block/index.tsx b/src/components/code-block/index.tsx
index 00a22fd..7a00b41 100644
--- a/src/components/code-block/index.tsx
+++ b/src/components/code-block/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import CopyButton from 'components/copy-button'
+import CopyCode from 'components/copy-code'
 import { Box, Text } from '@vtex/brand-ui'
 import { childrenToString } from 'utils/string-utils'
 import styles from './styles'
@@ -14,7 +14,7 @@ const CodeBlock = ({ ...props }: Component) => {
   return (
     <Box sx={styles.CodeBlock}>
       <pre>
-        <CopyButton code={childrenToString(props.children)} />
+        <CopyCode code={childrenToString(props.children)} />
         <Text sx={styles.CodeContent} {...props} />
       </pre>
     </Box>
diff --git a/src/components/copy-button/index.tsx b/src/components/copy-code/index.tsx
similarity index 90%
rename from src/components/copy-button/index.tsx
rename to src/components/copy-code/index.tsx
index 569a4c9..ee7e7f0 100644
--- a/src/components/copy-button/index.tsx
+++ b/src/components/copy-code/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useRef, useEffect } from 'react'
+import { useCallback, useState, useRef, useEffect } from 'react'
 import copy from 'copy-text-to-clipboard'
 import { Box, Button, Icon } from '@vtex/brand-ui'
 import type { SxStyleProp } from '@vtex/brand-ui'
@@ -10,7 +10,7 @@ interface CopyButtonProps {
   sx?: SxStyleProp
 }
 
-export default function CopyButton({ code, sx }: CopyButtonProps): JSX.Element {
+export default function CopyCode({ code, sx }: CopyButtonProps): JSX.Element {
   const [isCopied, setIsCopied] = useState(false)
   const copyTimeout = useRef<number | undefined>(undefined)
   const handleCopyCode = useCallback(() => {
diff --git a/src/components/copy-button/styles.ts b/src/components/copy-code/styles.ts
similarity index 100%
rename from src/components/copy-button/styles.ts
rename to src/components/copy-code/styles.ts
diff --git a/src/components/copy-link-button/CopyLinkButton.stories.tsx b/src/components/copy-link-button/CopyLinkButton.stories.tsx
new file mode 100644
index 0000000..812e74c
--- /dev/null
+++ b/src/components/copy-link-button/CopyLinkButton.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import CopyLinkButton from '.'
+import LibraryContextProvider from 'utils/context/libraryContext'
+import { ThemeProvider } from '@vtex/brand-ui'
+import { exampleContextProps } from 'utils/storybook-constants'
+
+const meta = {
+  title: 'Example/CopyLinkButton',
+  component: CopyLinkButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onAccept: () => alert('Accept cookies'),
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <LibraryContextProvider {...exampleContextProps}>
+          <Story />
+        </LibraryContextProvider>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof CopyLinkButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SimpleCookieBar: Story = {
+  args: {},
+}
diff --git a/src/components/copy-link-button/index.tsx b/src/components/copy-link-button/index.tsx
new file mode 100644
index 0000000..20fba6b
--- /dev/null
+++ b/src/components/copy-link-button/index.tsx
@@ -0,0 +1,26 @@
+import { Button } from '@vtex/brand-ui'
+import Tooltip from 'components/tooltip'
+import CopyIcon from '../icons/copy-icon'
+import { useState } from 'react'
+import styles from './styles'
+
+export default function CopyLinkButton() {
+  const [tooltipText, setTooltipText] = useState('Copy')
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(window.location.href)
+    setTooltipText('Copy')
+
+    setTimeout(() => {
+      setTooltipText('Copied!')
+    }, 2000)
+  }
+
+  return (
+    <Tooltip label={tooltipText} placement="bottom">
+      <Button onClick={handleCopy} sx={styles.copyLinkButton}>
+        <CopyIcon sx={styles.copyIcon} size={16} />
+      </Button>
+    </Tooltip>
+  )
+}
diff --git a/src/components/copy-link-button/styles.ts b/src/components/copy-link-button/styles.ts
new file mode 100644
index 0000000..3cf25aa
--- /dev/null
+++ b/src/components/copy-link-button/styles.ts
@@ -0,0 +1,25 @@
+import type { SxStyleProp } from '@vtex/brand-ui'
+
+const copyIcon: SxStyleProp = {
+  marginRight: '4px',
+}
+
+const copyLinkButton: SxStyleProp = {
+  textTransform: 'none',
+  color: '#3F3F3F',
+  fontWeight: '100',
+  fontSize: '12px',
+  lineHeight: '18px',
+  height: 'none',
+  padding: '8px 5px 8px 8px',
+  border: '1px solid #A1AAB7',
+  backgroundColor: 'white',
+  ':hover': {
+    backgroundColor: '#EFEFEF',
+  },
+}
+
+export default {
+  copyIcon,
+  copyLinkButton,
+}
diff --git a/src/components/icons/copy-icon.tsx b/src/components/icons/copy-icon.tsx
new file mode 100644
index 0000000..c3b9562
--- /dev/null
+++ b/src/components/icons/copy-icon.tsx
@@ -0,0 +1,28 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const CopyIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.5 5.625H6.875C6.18464 5.625 5.625 6.18464 5.625 6.875V12.5C5.625 13.1904 6.18464 13.75 6.875 13.75H12.5C13.1904 13.75 13.75 13.1904 13.75 12.5V6.875C13.75 6.18464 13.1904 5.625 12.5 5.625Z"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.125 9.375H2.5C2.16848 9.375 1.85054 9.2433 1.61612 9.00888C1.3817 8.77446 1.25 8.45652 1.25 8.125V2.5C1.25 2.16848 1.3817 1.85054 1.61612 1.61612C1.85054 1.3817 2.16848 1.25 2.5 1.25H8.125C8.45652 1.25 8.77446 1.3817 9.00888 1.61612C9.2433 1.85054 9.375 2.16848 9.375 2.5V3.125"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Icon>
+)
+
+export default CopyIcon