From 0042ad07017f75734e465501f061e992cd297c2e Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Thu, 26 Sep 2024 14:31:03 -0500
Subject: [PATCH] fix: remove codesandbox iframes (#4296)

---
 src/pages/components/UI-shell-header/code.mdx | 77 -------------------
 .../components/UI-shell-header/usage.mdx      | 14 ----
 .../components/UI-shell-left-panel/code.mdx   | 32 --------
 .../components/UI-shell-right-panel/code.mdx  | 32 --------
 .../complex-charts/index.mdx                  | 10 +--
 5 files changed, 1 insertion(+), 164 deletions(-)

diff --git a/src/pages/components/UI-shell-header/code.mdx b/src/pages/components/UI-shell-header/code.mdx
index 61351e69410..71d9548e253 100644
--- a/src/pages/components/UI-shell-header/code.mdx
+++ b/src/pages/components/UI-shell-header/code.mdx
@@ -57,80 +57,3 @@ the Storybooks for each framework below.
   </ResourceCard>
 </Column>
 </Row>
-
-## Demo
-
-## Header base
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/v10-starter-sandbox-kf3h4?fontsize=14&hidenavigation=1&view=preview"
-      title="header-base"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
-
-## Header with nav
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/header-base-v07hj?fontsize=14&hidenavigation=1&view=preview"
-      title="header-with-nav"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
-
-## Header with actions
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/header-with-actions-vh014?fontsize=14&hidenavigation=1&view=preview"
-      title="header-with-actions"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
-
-## Header with actions and nav
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/header-with-actions-and-nav-m0lo2?fontsize=14&hidenavigation=1&view=preview"
-      title="header-with-actions-and-nav"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
-
-## Header with sidenav
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/header-with-sidenav-1u7su?fontsize=14&hidenavigation=1&view=preview"
-      title="header-with-sidenav"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx
index ff63345be2e..65f2f8d83fb 100644
--- a/src/pages/components/UI-shell-header/usage.mdx
+++ b/src/pages/components/UI-shell-header/usage.mdx
@@ -58,20 +58,6 @@ independently, but the components were designed to work together.
 | Header with actions    | Actions or utilities appear in the header as icon buttons to give users quick access to common utilities.                                     |
 | Header with sidenav    | The header can be paired with the [UI shell left panel](/components/UI-shell-left-panel/usage) to offer a deeper level of navigation in a UI. |
 
-## Live demo
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/header-with-actions-and-nav-m0lo2?fontsize=14&hidenavigation=1&view=preview"
-      title="header-with-actions-and-nav"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
 
 ## Formatting
 
diff --git a/src/pages/components/UI-shell-left-panel/code.mdx b/src/pages/components/UI-shell-left-panel/code.mdx
index f39434e06bb..7ea55dd6c69 100644
--- a/src/pages/components/UI-shell-left-panel/code.mdx
+++ b/src/pages/components/UI-shell-left-panel/code.mdx
@@ -57,35 +57,3 @@ see the Storybooks for each framework below.
   </ResourceCard>
 </Column>
 </Row>
-
-## Demo
-
-## Fixed side-nav
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/fixed-sidenav-tk9cs?fontsize=14&hidenavigation=1&view=preview"
-      title="fixed-sidenav"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
-
-## Fixed side-nav with icons
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/fixed-sidenav-with-icons-875it?fontsize=14&hidenavigation=1&view=preview"
-      title="fixed-sidenav-with-icons"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
diff --git a/src/pages/components/UI-shell-right-panel/code.mdx b/src/pages/components/UI-shell-right-panel/code.mdx
index 3804f9800ae..2e03176054f 100644
--- a/src/pages/components/UI-shell-right-panel/code.mdx
+++ b/src/pages/components/UI-shell-right-panel/code.mdx
@@ -37,35 +37,3 @@ documentation, see the Storybooks for each framework below.
   </ResourceCard>
 </Column>
 </Row>
-
-## Demo
-
-## Right panel
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/right-panel-clc2m?fontsize=1&hidenavigation=1&view=preview"
-      title="right-panel"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
-
-## Right panel with switcher
-
-<Row>
-  <Column>
-    <iframe
-      loading="lazy"
-      src="https://codesandbox.io/embed/right-panel-with-switcher-3zpq1?fontsize=14&hidenavigation=1&view=preview"
-      title="right-panel-with-switcher"
-      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  </Column>
-</Row>
diff --git a/src/pages/data-visualization/complex-charts/index.mdx b/src/pages/data-visualization/complex-charts/index.mdx
index 968a303ac81..62c7da93622 100755
--- a/src/pages/data-visualization/complex-charts/index.mdx
+++ b/src/pages/data-visualization/complex-charts/index.mdx
@@ -142,15 +142,7 @@ your own layouts.
 - [React](https://carbon-design-system.github.io/carbon-charts/react/?path=/story/diagrams--start-here)
 - [Angular](https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/diagrams--start-here)
 
-Here's an example using elkjs in react
-
-<iframe
-  src="https://codesandbox.io/embed/carbon-charts-react-elkjs-diagram-b9xyp?fontsize=14&hidenavigation=1&theme=dark"
-  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-  title="carbon-charts-react-elkjs-diagram"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-></iframe>
+Here's an [example using elkjs in react](https://codesandbox.io/embed/carbon-charts-react-elkjs-diagram-b9xyp?fontsize=14&hidenavigation=1&theme=dark).
 
 <Row>
 <Column  colLg={12} colMd={8} colSm={4} >