Merge pull request #62 from vtexdocs/feat/copy-link-button

feat: CopyLinkButton - components migration

Author: carolinamenezes

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>

src/components/copy-button/index.tsx renamed to 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(() => {

src/components/copy-button/styles.ts renamed to src/components/copy-code/styles.ts

@@ -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: {},
+}

src/components/copy-link-button/CopyLinkButton.stories.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>
+  )
+}

src/components/copy-link-button/index.tsx

@@ -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,
+}

src/components/copy-link-button/styles.ts

@@ -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