From 8256de8c99837f140148a9b8446de21c59f704b5 Mon Sep 17 00:00:00 2001
From: Uyen Doan <56598021+smmr-dn@users.noreply.github.com>
Date: Wed, 20 Nov 2024 13:56:30 -0600
Subject: [PATCH] Allowed hiding demo code in `LiveExample` (#2350)

---
 apps/website/src/components/LiveExample.astro | 24 +++++++++++++------
 .../src/content/docs/skiptocontentlink.mdx    |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/components/LiveExample.astro b/apps/website/src/components/LiveExample.astro
index 73fbd42069e..8b0baa28f11 100644
--- a/apps/website/src/components/LiveExample.astro
+++ b/apps/website/src/components/LiveExample.astro
@@ -8,17 +8,23 @@ import itwinuiStyles from '@itwin/itwinui-react/styles.css?url';
 const require = createRequire(import.meta.url);
 
 export type Props = {
-  /** name of the file to read code example from, should be located in ~/examples folder */
+  /** Name of the file to read code example from, should be located in ~/examples folder */
   src: string;
 
   /**
-   * whether the first code snippet will truncate and turn into an expandable disclosure.
+   * A flag to determine whether the first code snippet will truncate and turn into an expandable disclosure.
    * @default true
    */
   truncate?: boolean;
+
+  /**
+   * A flag to determine whether the demo code should be visible.
+   * @default false
+   */
+  hideCode?: boolean;
 };
 
-const { src, truncate = true } = Astro.props;
+const { src, truncate = true, hideCode = false } = Astro.props;
 
 const jsxPath = require.resolve(`examples/${src}`);
 const cssPath = jsxPath.replace(/\.jsx$/, '.css');
@@ -61,10 +67,14 @@ const cssCode = await (async () => {
   />
 </demo-box>
 
-<demo-code>
-  {truncate && <button aria-expanded='false'>Toggle full code</button>}
-  <Code code={jsxCode} lang='tsx' theme={'github-dark'} />
-</demo-code>
+{
+  !hideCode && (
+    <demo-code>
+      {truncate && <button aria-expanded='false'>Toggle full code</button>}
+      <Code code={jsxCode} lang='tsx' theme={'github-dark'} />
+    </demo-code>
+  )
+}
 
 <script>
   customElements.define(
diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx
index 46bc7f7b4db..d8766a2ed4d 100644
--- a/apps/website/src/content/docs/skiptocontentlink.mdx
+++ b/apps/website/src/content/docs/skiptocontentlink.mdx
@@ -6,7 +6,7 @@ thumbnail: #TODO
 
 <p>{frontmatter.description}</p>
 
-<LiveExample src='SkipToContentLink.main.jsx' truncate={true}>
+<LiveExample src='SkipToContentLink.main.jsx' hideCode={true}>
   <AllExamples.SkipToContentLinkMainExample client:load />
 </LiveExample>