From 82693e1cee525207ea750353a81abd878af9a08b Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Fri, 21 Apr 2023 14:39:45 +0300
Subject: [PATCH] docs: [BD-46] new component examples and editable live code
 blocks (#2194)

---
 www/src/components/CodeBlock.tsx   | 49 ++++++++++++++++++++++--------
 www/src/components/_CodeBlock.scss | 46 ++++++++++++++++------------
 2 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/www/src/components/CodeBlock.tsx b/www/src/components/CodeBlock.tsx
index 8182d46211..b5505f1e4f 100644
--- a/www/src/components/CodeBlock.tsx
+++ b/www/src/components/CodeBlock.tsx
@@ -20,33 +20,45 @@ import {
 import { FormattedMessage, useIntl } from 'react-intl';
 import * as ParagonReact from '~paragon-react';
 import * as ParagonIcons from '~paragon-icons';
+import { ContentCopy } from '~paragon-icons';
 import MiyazakiCard from './exampleComponents/MiyazakiCard';
 import HipsterIpsum from './exampleComponents/HipsterIpsum';
 import ExamplePropsForm from './exampleComponents/ExamplePropsForm';
 
-const { Button, Collapsible } = ParagonReact;
+const {
+  Collapsible, Toast, IconButton, Icon,
+} = ParagonReact;
 
 export type CollapsibleLiveEditorTypes = {
-  children: React.ReactNode,
+  children: React.ReactNode;
+  clickToCopy: () => void;
 };
 
-function CollapsibleLiveEditor({ children }: CollapsibleLiveEditorTypes) {
+function CollapsibleLiveEditor({ children, clickToCopy }: CollapsibleLiveEditorTypes) {
   const [collapseIsOpen, setCollapseIsOpen] = useState(false);
   return (
     <div className="pgn-doc__collapsible-live-editor">
-      <Collapsible.Advanced
+      <Collapsible
         unmountOnExit={false}
+        styling="card-lg"
         open={collapseIsOpen}
         onToggle={(isOpen: boolean) => setCollapseIsOpen(isOpen)}
+        withIcon
+        title={<strong>{collapseIsOpen ? 'Hide' : 'Show'} editable code example</strong>}
       >
-        <Collapsible.Trigger tag={Button} variant="link">
-          <Collapsible.Visible whenClosed>Show code example</Collapsible.Visible>
-          <Collapsible.Visible whenOpen>Hide code example</Collapsible.Visible>
-        </Collapsible.Trigger>
-        <Collapsible.Body className="mt-2">
+        <p className="small text-gray mb-2">Any Paragon component or export may be added to the code example.</p>
+        <div className="pgn-doc__collapsible-code-wrapper">
           {children}
-        </Collapsible.Body>
-      </Collapsible.Advanced>
+          <IconButton
+            className="pgn-doc__collapsible-live-editor-copy-btn"
+            src={ContentCopy}
+            iconAs={Icon}
+            alt="Copy code example"
+            onClick={clickToCopy}
+            invertColors
+          />
+        </div>
+      </Collapsible>
     </div>
   );
 }
@@ -68,6 +80,12 @@ function CodeBlock({
 }: ICodeBlock) {
   const intl = useIntl();
   const language: any = className ? className.replace(/language-/, '') : 'jsx';
+  const [showToast, setShowToast] = useState(false);
+
+  const isCodeExampleCopied = () => {
+    navigator.clipboard.writeText(children);
+    setShowToast(true);
+  };
 
   if (live) {
     return (
@@ -98,11 +116,18 @@ function CodeBlock({
           theme={theme}
         >
           <LivePreview className="pgn-doc__code-block-preview" />
-          <CollapsibleLiveEditor>
+          <CollapsibleLiveEditor clickToCopy={isCodeExampleCopied}>
             <LiveEditor className="pgn-doc__code-block-editor" />
           </CollapsibleLiveEditor>
           <LiveError className="pgn-doc__code-block-error" />
         </LiveProvider>
+        <Toast
+          onClose={() => setShowToast(false)}
+          show={showToast}
+          delay={2000}
+        >
+          Code example copied to clipboard!
+        </Toast>
       </div>
     );
   }
diff --git a/www/src/components/_CodeBlock.scss b/www/src/components/_CodeBlock.scss
index 2108465b92..c8c23f945a 100644
--- a/www/src/components/_CodeBlock.scss
+++ b/www/src/components/_CodeBlock.scss
@@ -1,26 +1,34 @@
 .pgn-doc__code-block {
-  margin: 1rem 0 2rem;
-
-  // border: solid 2px $light-300;
+  margin: $spacer 0 2rem;
+  background-color: $light-200;
+  border: solid 2px $light-300;
   border-radius: $border-radius;
-}
 
-.pgn-doc__code-block-preview {
-  padding-bottom: 1rem;
-}
+  .pgn-doc__code-block-preview {
+    padding: $spacer;
+  }
 
-.pgn-doc__code-block-editor,
-.prism-code {
-  font-size: $font-size-base;
-  font-family: monospace;
+  .pgn-doc__code-block-editor,
+  .prism-code {
+    font-size: $font-size-base;
+    font-family: monospace;
+    border-radius: $input-border-radius;
+  }
 
-  // box-shadow: 1px 0 0 0 #282632, -1px 0 0 0 #282632;
-  border-radius: $input-border-radius;
-}
+  .pgn-doc__code-block-error {
+    background-color: $warning-200;
+    padding: $spacer;
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+
+  .pgn-doc__collapsible-code-wrapper {
+    position: relative;
 
-.pgn-doc__code-block-error {
-  background: $warning-200;
-  padding: 1rem;
-  font-size: $font-size-sm;
-  margin: 0;
+    .pgn-doc__collapsible-live-editor-copy-btn {
+      position: absolute;
+      top: map-get($spacers, 2);
+      right: map-get($spacers, 2);
+    }
+  }
 }