Skip to content

Commit 4cace14

Browse files
committed
chore(storybook): cwc remove stackblitz iframes from storybook (#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) -->
1 parent ff26bb2 commit 4cace14

File tree

3 files changed

+6
-26
lines changed

3 files changed

+6
-26
lines changed

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ button.addEventListener('click', () => {
2929
});
3030
```
3131

32-
<iframe
33-
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"
34-
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' }}
35-
title="carbon-web-components-getting-started"
36-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
32+
## Framework-specific approaches of form participation
33+
34+
- [Redux form](https://web-components.carbondesignsystem.com/react/?path=/story/introduction-form-paticipation--page)

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

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,6 @@ to change the styles of our components, there are a few options.
1515

1616
## Using CSS Custom Properties
1717

18-
Changes to CSS Custom Properties of the Carbon theme are reflected in the color
19-
scheme of `@carbon/web-components` components:
20-
21-
<iframe
22-
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"
23-
style={{
24-
width: '100%',
25-
height: '700px',
26-
border: 'solid rgba(0,0,0,0.1) 1px',
27-
boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0',
28-
}}
29-
title="carbon-web-components-getting-started"
30-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
31-
3218
For example, if you add CSS like below:
3319

3420
```css
@@ -100,6 +86,7 @@ class MyDropdown extends CDSDropdown {
10086
`;
10187
}
10288
```
89+
<<<<<<< HEAD:packages/carbon-web-components/docs/styling.mdx
10390

10491
<iframe
10592
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 {
11198
}}
11299
title="carbon-web-components-getting-started"
113100
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
101+
=======
102+
>>>>>>> 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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,6 @@ yarn add @carbon/web-components
4747

4848
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:
4949

50-
<iframe
51-
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"
52-
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' }}
53-
title="carbon-web-components-getting-started"
54-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
55-
></iframe>
56-
5750
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.
5851

5952
Once you set up a module bundler, you can start importing our component modules, for example:

0 commit comments

Comments
 (0)