fix: remove codesandbox iframes (#4296)

carbon-design-system · Sep 26, 2024 · 0042ad0 · 0042ad0
1 parent 652640d
commit 0042ad0
Show file tree

Hide file tree

Showing 5 changed files with 1 addition and 164 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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} >