chore: Fix for ExampleCodeBlock (#2938)

Fixes: #2899  

Fixes the styles for the `ExampleCodeBlock` as they were not correct after the Webpack PR.

[category:Documentation]

Co-authored-by: manuel.carrera <manuel.carrera@workday.com>

modules/docs/lib/ExampleCodeBlock.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import {purebasic} from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Card} from '@workday/canvas-kit-react/card';
 import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import {checkCircleIcon, copyIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react';
 
 const cardStencil = createStencil({
   base: {
@@ -16,7 +18,6 @@ const cardStencil = createStencil({
     },
     '[data-part="code-block"]': {
       display: 'none',
-      marginTop: calc.divide(system.space.x1, 2),
       boxShadow: system.depth[1],
       borderRadius: system.shape.x1,
     },
@@ -25,6 +26,13 @@ const cardStencil = createStencil({
       right: calc.negate(px2rem(1)),
       bottom: calc.negate(px2rem(1)),
     },
+    '[data-part="copy-btn"]': {
+      position: 'absolute',
+      bottom: system.space.zero,
+      right: system.space.zero,
+      borderRadius: system.shape.zero,
+      borderTopLeftRadius: system.shape.x1,
+    },
   },
   modifiers: {
     opened: {
@@ -45,6 +53,34 @@ const cardStencil = createStencil({
 
 export const ExampleCodeBlock = ({code}: any) => {
   const [isCodeDisplayed, setCodeDisplayed] = React.useState(false);
+  const textInput = React.useRef(null);
+  const [copied, setCopied] = React.useState(false);
+  const timer = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const onCopy = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+
+    setCopied(true);
+    // @ts-ignore
+    navigator.clipboard.writeText(textInput.current.textContent);
+  };
+
+  // React.useEffect(() => {
+  //   if (copied) {
+  //     const copyCodeTimeout = setTimeout(() => {
+  //       setCopied(false);
+  //     }, 2000);
+
+  //     return () => {
+  //       clearTimeout(copyCodeTimeout);
+  //     };
+  //   }
+  // }, [copied]);
 
   return (
     <div {...cardStencil({opened: isCodeDisplayed})}>
@@ -62,20 +98,35 @@ export const ExampleCodeBlock = ({code}: any) => {
           )}
         </Card.Body>
       </Card>
-      <Card data-part="code-block">
-        <Card.Body>
+      <Card data-part="code-block" padding={0}>
+        <Card.Body cs={{position: 'relative'}}>
           {code && (
-            <SyntaxHighlighter
-              language="typescript"
-              style={purebasic}
-              customStyle={{
-                background: 'transparent',
-                fontSize: cssVar(system.fontSize.subtext.large),
-                lineHeight: cssVar(system.lineHeight.subtext.large),
-              }}
-              children={code.__RAW__}
-            />
+            <div ref={textInput}>
+              <SyntaxHighlighter
+                className="sb-unstyled"
+                language="jsx"
+                style={vscDarkPlus}
+                customStyle={{
+                  fontSize: cssVar(system.fontSize.subtext.large),
+                  lineHeight: cssVar(system.lineHeight.subtext.large),
+                  margin: '0',
+                  padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
+                }}
+                children={code.__RAW__}
+              />
+            </div>
           )}
+          <Tooltip title={copied ? 'Copied!' : 'Copy Source Code'}>
+            <TertiaryButton
+              aria-label="Copy Code"
+              size="large"
+              data-part="copy-btn"
+              variant="inverse"
+              iconPosition="end"
+              icon={copied ? checkCircleIcon : copyIcon}
+              onClick={onCopy}
+            />
+          </Tooltip>
         </Card.Body>
       </Card>
     </div>