reinstate clipboard functionality. Fixes toptal#336

components/key-code-cards/basic-cards/ClipboardCopy/index.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+
+export const ClipboardCopy = ({
+  children
+}: {
+  children: string | undefined | number | null
+}): JSX.Element => {
+  const [copied, setCopied] = useState(false)
+
+  function copyToClipboard() {
+    if (typeof children === 'undefined' || children === null) {
+      return
+    }
+    navigator.clipboard.writeText(children.toString())
+
+    setCopied(true)
+    setTimeout(() => {
+      setCopied(false)
+    }, 200)
+  }
+
+  return (
+    <div
+      style={{
+        cursor: 'pointer',
+        scale: copied ? `1.15` : `1`,
+        transition: 'scale 0.2s ease-in-out'
+      }}
+      onClick={copyToClipboard}
+    >
+      {children}
+    </div>
+  )
+}

components/key-code-cards/basic-cards/DescriptionCard/index.tsx

@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEventDescriptionCard } from './test-ids'
 
@@ -16,7 +17,9 @@ const DescriptionCard = ({ description }: DescriptionCard): JSX.Element => {
       description={cardDescriptions.description}
       testId={TestIdEventDescriptionCard.EventDescriptionCardContainer}
     >
-      {description ?? siteCopy.content.noDescription}
+      <ClipboardCopy>
+        {description ?? siteCopy.content.noDescription}
+      </ClipboardCopy>
     </BasicCardContainer>
   )
 }

components/key-code-cards/basic-cards/EventCodeCard/index.tsx

@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEventCodeCard } from './test-ids'
 
@@ -17,7 +18,7 @@ const EventCodeCard = ({ code }: EventCodeCard): JSX.Element => {
       description={cardDescriptions.eventCode}
       testId={TestIdEventCodeCard.EventCodeCardContainer}
     >
-      {code}
+      <ClipboardCopy>{code}</ClipboardCopy>
     </BasicCardContainer>
   )
 }

components/key-code-cards/basic-cards/EventKeyCard/index.tsx

@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEventKeyCard } from './test-ids'
 
@@ -16,7 +17,7 @@ const EventKeyCard = ({ eventKey }: EventKeyCard): JSX.Element => {
       description={cardDescriptions.eventKey}
       testId={TestIdEventKeyCard.EventKeyCardContainer}
     >
-      {eventKey}
+      <ClipboardCopy>{eventKey}</ClipboardCopy>
       {eventKey === siteCopy.content.whiteSpace && (
         <small>{siteCopy.content.blankSpace}</small>
       )}

components/key-code-cards/basic-cards/EventLocationCard/index.tsx

@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEvenLocationCard } from './test-ids'
 
@@ -23,7 +24,7 @@ const EventLocationCard = ({ keyLocation }: EventLocationCard): JSX.Element => {
       title={siteCopy.cards.eventLocation}
       description={cardDescriptions.eventLocation}
     >
-      {location}
+      <ClipboardCopy>{location}</ClipboardCopy>
     </BasicCardContainer>
   )
 }

components/key-code-cards/basic-cards/EventWhichCard/index.tsx

@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEvenWhichCard } from './test-ids'
 
@@ -16,7 +17,7 @@ const EventWhichCard = ({ which }: EventWhichCardProps): JSX.Element => {
       description={cardDescriptions.eventWhich}
       testId={TestIdEvenWhichCard.EventWhichCardContainer}
     >
-      {which}
+      <ClipboardCopy>{which}</ClipboardCopy>
     </BasicCardContainer>
   )
 }