chore(storybook): cwc remove stackblitz iframes from storybook (carbo…

…n-design-system#11495)

carbon-design-system/carbon#15634

Removes Stackblitz iframes from Carbon web components Storybook to remove unapproved cookies.

**New**

- {{new thing}}

**Changed**

- {{changed thing}}

**Removed**

- Stackblitz iframes from cwc Storybook

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/carbon-web-components/docs/form.mdx

@@ -29,8 +29,6 @@ button.addEventListener('click', () => {
 });
 ```
 
-<iframe
-  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/form/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
-  style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
-  title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+## Framework-specific approaches of form participation
+
+- [Redux form](https://web-components.carbondesignsystem.com/react/?path=/story/introduction-form-paticipation--page)

packages/carbon-web-components/docs/styling.mdx

@@ -15,20 +15,6 @@ to change the styles of our components, there are a few options.
 
 ## Using CSS Custom Properties
 
-Changes to CSS Custom Properties of the Carbon theme are reflected in the color
-scheme of `@carbon/web-components` components:
-
-<iframe
-  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
-  style={{
-    width: '100%',
-    height: '700px',
-    border: 'solid rgba(0,0,0,0.1) 1px',
-    boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0',
-  }}
-  title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
-
 For example, if you add CSS like below:
 
 ```css
@@ -100,6 +86,7 @@ class MyDropdown extends CDSDropdown {
   `;
 }
 ```
+<<<<<<< HEAD:packages/carbon-web-components/docs/styling.mdx
 
 <iframe
   src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/styling/custom-style?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
@@ -111,3 +98,5 @@ class MyDropdown extends CDSDropdown {
   }}
   title="carbon-web-components-getting-started"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+=======
+>>>>>>> e5d9f3dc20 (chore(storybook): cwc remove stackblitz iframes from storybook (#11495)):packages/carbon-web-components/docs/styling-story.mdx

packages/carbon-web-components/docs/welcome.mdx

@@ -47,13 +47,6 @@ yarn add @carbon/web-components
 
 Our example at [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic) shows the most basic usage:
 
-<iframe
-  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
-  style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
-  title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-></iframe>
-
 The first thing you need is **setting up a module bundler** to resolve ECMAScript `import`s. The above example uses [Webpack](https://webpack.js.org), but you can use other bundlers like [Rollup](https://rollupjs.org/) too.
 
 Once you set up a module bundler, you can start importing our component modules, for example: