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 (
-
+
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(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) => (
+
+
+
+
+
+ ),
+ ],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+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 (
+
+
+
+ )
+}
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) => (
+
+
+
+
+)
+
+export default CopyIcon