chore(docs): update example and demo copy buttons (#2078)

aws-amplify · Jun 13, 2022 · b1d983c · b1d983c
1 parent 28bf92d
commit b1d983c
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 37 deletions.
diff --git a/docs/src/components/Copy.tsx → docs/src/components/CopyButton.tsx b/docs/src/components/Copy.tsx → docs/src/components/CopyButton.tsx
@@ -1,9 +1,19 @@
 import * as React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-import { Button } from '@aws-amplify/ui-react';
+import { Button, ButtonProps } from '@aws-amplify/ui-react';
 
-export const Copy = ({ text, size, variation, className }) => {
+interface CopyButtonProps
+  extends Pick<ButtonProps, 'className' | 'size' | 'variation'> {
+  copyText: string;
+}
+
+export const CopyButton = ({
+  className,
+  copyText,
+  size,
+  variation,
+}: CopyButtonProps) => {
   const [copied, setCopied] = React.useState(false);
 
   const copy = () => {
@@ -14,12 +24,12 @@ export const Copy = ({ text, size, variation, className }) => {
   };
 
   return (
-    <CopyToClipboard text={text} onCopy={copy}>
+    <CopyToClipboard text={copyText} onCopy={copy}>
       <Button
+        className={className}
+        isLoading={copied}
         size={size}
         variation={variation}
-        isLoading={copied}
-        className={className}
       >
         {copied ? 'Copied!' : 'Copy'}
       </Button>

diff --git a/docs/src/components/Demo.tsx b/docs/src/components/Demo.tsx
@@ -9,6 +9,7 @@ import {
   Button,
   useTheme,
 } from '@aws-amplify/ui-react';
+import { CopyButton } from './CopyButton';
 
 interface DemoProps {
   children: React.ReactNode;
@@ -64,15 +65,11 @@ export const Demo = ({
           position="relative"
           backgroundColor={tokens.colors.background.secondary}
         >
-          <CopyToClipboard text={code} onCopy={copy}>
-            <Button
-              size="small"
-              className="example-copy-button"
-              disabled={copied}
-            >
-              {copied ? 'Copied!' : 'Copy'}
-            </Button>
-          </CopyToClipboard>
+          <CopyButton
+            className="example-copy-button"
+            copyText={code}
+            size="small"
+          />
           <Highlight Prism={defaultProps.Prism} code={code} language="jsx">
             {({ className, style, tokens, getLineProps, getTokenProps }) => (
               <pre

diff --git a/docs/src/components/Example.tsx b/docs/src/components/Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-import { Card, Button, Flex, useTheme } from '@aws-amplify/ui-react';
+import { Card, Flex, useTheme } from '@aws-amplify/ui-react';
+import { CopyButton } from './CopyButton';
 
 interface ExampleProps {
   children: React.ReactNode;
@@ -22,29 +22,20 @@ export function Example({ children, className = '' }: ExampleProps) {
 }
 
 export function ExampleCode({ children }) {
-  const [copied, setCopied] = React.useState(false);
   const [text, setText] = React.useState('');
   const ref = React.useRef(null);
 
   React.useLayoutEffect(() => {
     setText(ref.current.innerText);
-    return () => {};
   }, [children]);
 
-  const copy = () => {
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
-  };
-
   return (
     <div className="example-code">
-      <CopyToClipboard text={text} onCopy={copy}>
-        <Button size="small" isLoading={copied} className="example-copy-button">
-          {copied ? 'Copied!' : 'Copy'}
-        </Button>
-      </CopyToClipboard>
+      <CopyButton
+        className="example-copy-button"
+        copyText={text}
+        size="small"
+      />
       <div ref={ref}>{children}</div>
     </div>
   );

diff --git a/docs/src/pages/[platform]/index.page.tsx b/docs/src/pages/[platform]/index.page.tsx
@@ -13,15 +13,14 @@ import {
   Image,
   Link,
   Text,
-  TextField,
   ToggleButton,
   ToggleButtonGroup,
   View,
   useTheme,
   useBreakpointValue,
 } from '@aws-amplify/ui-react';
 
-import { Copy } from '@/components/Copy';
+import { CopyButton } from '@/components/CopyButton';
 import { Footer } from '@/components/Layout/Footer';
 import { HomeLogo } from '../HomeLogo';
 import { HomePrimitivePreview } from '../HomePrimitivePreview';
@@ -103,11 +102,10 @@ const HomePage = ({ colorMode }) => {
                   <p className="install-code__content">
                     {frameworkInstallScript}
                   </p>
-                  <Copy
+                  <CopyButton
                     className="install-code__button"
-                    size=""
+                    copyText={frameworkInstallScript}
                     variation="link"
-                    text={frameworkInstallScript}
                   />
                 </code>
               </Flex>

diff --git a/docs/src/styles/docs/example.scss b/docs/src/styles/docs/example.scss
@@ -26,9 +26,10 @@
 }
 
 .example-copy-button {
+  background: var(--amplify-colors-background-secondary);
   position: absolute;
+  right: var(--amplify-space-medium);
   top: var(--amplify-space-small);
-  right: var(--amplify-space-small);
 }
 
 .docs-component-demo {
@@ -37,11 +38,13 @@
 
   pre {
     white-space: pre-wrap;
+    margin: 0;
   }
 
   & .example-copy-button {
+    background: var(--amplify-colors-background-secondary);
     bottom: var(--amplify-space-small);
     top: auto;
-    right: var(--amplify-space-small);
+    right: var(--amplify-space-medium);
   }
 }