-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(storybook): intro mdx files now load
- Loading branch information
1 parent
0b572ea
commit f12f744
Showing
11 changed files
with
252 additions
and
20 deletions.
There are no files selected for viewing
31 changes: 31 additions & 0 deletions
31
web-components/packages/carbon-web-components/.storybook/basic-example-cdn.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script | ||
| type="module" | ||
| src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/canary/dropdown.min.js"></script> | ||
| <style type="text/css"> | ||
| #app { | ||
| font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; | ||
| width: 300px; | ||
| margin: 2rem; | ||
| } | ||
|
|
||
| cds-dropdown:not(:defined), | ||
| cds-dropdown-item:not(:defined) { | ||
| visibility: hidden; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="app"> | ||
| <cds-dropdown trigger-content="Select an item"> | ||
| <cds-dropdown-item value="all">Option 1</cds-dropdown-item> | ||
| <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item> | ||
| <cds-dropdown-item value="staging">Option 3</cds-dropdown-item> | ||
| <cds-dropdown-item value="dea">Option 4</cds-dropdown-item> | ||
| <cds-dropdown-item value="router">Option 5</cds-dropdown-item> | ||
| </cds-dropdown> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
web-components/packages/carbon-web-components/.storybook/manager.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2020, 2022 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { addons } from '@storybook/addons'; | ||
| import yourTheme from './theme'; | ||
|
|
||
| addons.setConfig({ | ||
| theme: yourTheme, | ||
| }); | ||
|
|
||
| /** | ||
| * Conditionally generate CSS to hide a component based on its corresponding | ||
| * feature flag environment variable. | ||
| * | ||
| * @param {*} envVar | ||
| * Environment variable to check. | ||
| * @param {*} cssId | ||
| * CSS ID for selector. | ||
| * @returns | ||
| */ | ||
| const getCss = (envVar, cssId) => { | ||
| return envVar !== 'true' | ||
| ? `button[id^="${cssId}"] { display: none !important; }\n` | ||
| : ''; | ||
| }; | ||
|
|
||
| // Build string of CSS rules. | ||
| let css = ''; | ||
| if (!process.env.CDS_FLAGS_ALL) { | ||
| css += getCss( | ||
| process.env.CDS_EXPERIEMENTAL_COMPONENT_NAME, | ||
| 'components-experimental-component-name' | ||
| ); | ||
| } | ||
|
|
||
| // Inject any CSS rules into the page. | ||
| if (css.length) { | ||
| const head = document.head || document.getElementsByTagName('head')[0]; | ||
| const style = document.createElement('style'); | ||
| head.appendChild(style); | ||
| style.appendChild(document.createTextNode(css)); | ||
| } |
168 changes: 162 additions & 6 deletions
168
web-components/packages/carbon-web-components/.storybook/preview.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,181 @@ | ||
| import { setCustomElementsManifest } from '@storybook/web-components'; | ||
| import customElements from '../custom-elements.json'; | ||
| import container from './container'; | ||
| import { white, g10, g90, g100 } from '@carbon/themes'; | ||
| import { breakpoints } from '@carbon/layout'; | ||
| import theme from './theme'; | ||
|
|
||
|
|
||
| setCustomElementsManifest(customElements); | ||
|
|
||
| // export const Preview = { | ||
| // parameters: { | ||
| // controls: { expanded: true }, | ||
| // }, | ||
| // }; | ||
| export const globalTypes = { | ||
| locale: { | ||
| name: 'Locale', | ||
| description: 'Set the localization for the storybook', | ||
| defaultValue: 'en', | ||
| toolbar: { | ||
| icon: 'globe', | ||
| items: [ | ||
| { | ||
| right: '🇺🇸', | ||
| title: 'English', | ||
| value: 'en', | ||
| }, | ||
| { | ||
| right: '🇵🇸', | ||
| title: 'Arabic', | ||
| value: 'ar', | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| dir: { | ||
| name: 'Text direction', | ||
| description: 'Set the text direction for the story', | ||
| defaultValue: 'ltr', | ||
| toolbar: { | ||
| icon: 'transfer', | ||
| title: 'Text direction', | ||
| items: [ | ||
| { | ||
| right: '🔄', | ||
| title: 'auto', | ||
| value: 'auto', | ||
| }, | ||
| { | ||
| right: '➡️', | ||
| title: 'left-to-right (ltr)', | ||
| value: 'ltr', | ||
| }, | ||
| { | ||
| right: '⬅️', | ||
| title: 'right-to-left (rtl)', | ||
| value: 'rtl', | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| theme: { | ||
| name: 'Theme', | ||
| description: 'Set the global theme for displaying components', | ||
| defaultValue: 'white', | ||
| toolbar: { | ||
| icon: 'paintbrush', | ||
| title: 'Theme', | ||
| items: ['white', 'g10', 'g90', 'g100'], | ||
| }, | ||
| } | ||
| }; | ||
|
|
||
| export const parameters = { | ||
| backgrounds: { | ||
| // https://storybook.js.org/docs/react/essentials/backgrounds#grid | ||
| grid: { | ||
| cellSize: 8, | ||
| opacity: 0.5, | ||
| }, | ||
| values: [ | ||
| { | ||
| name: 'white', | ||
| value: white.background, | ||
| }, | ||
| { | ||
| name: 'g10', | ||
| value: g10.background, | ||
| }, | ||
| { | ||
| name: 'g90', | ||
| value: g90.background, | ||
| }, | ||
| { | ||
| name: 'g100', | ||
| value: g100.background, | ||
| }, | ||
| ], | ||
| }, | ||
| controls: { | ||
| expanded: true, | ||
| sort: 'alpha', | ||
|
|
||
| hideNoControlsWarning: true, | ||
| }, | ||
| docs: { | ||
| theme, | ||
| }, | ||
| viewport: { | ||
| viewports: { | ||
| sm: { | ||
| name: 'Small', | ||
| styles: { | ||
| width: breakpoints.sm.width, | ||
| height: '100%', | ||
| }, | ||
| }, | ||
| md: { | ||
| name: 'Medium', | ||
| styles: { | ||
| width: breakpoints.md.width, | ||
| height: '100%', | ||
| }, | ||
| }, | ||
| lg: { | ||
| name: 'Large', | ||
| styles: { | ||
| width: breakpoints.lg.width, | ||
| height: '100%', | ||
| }, | ||
| }, | ||
| xlg: { | ||
| name: 'X-Large', | ||
| styles: { | ||
| width: breakpoints.xlg.width, | ||
| height: '100%', | ||
| }, | ||
| }, | ||
| Max: { | ||
| name: 'Max', | ||
| styles: { | ||
| width: breakpoints.max.width, | ||
| height: '100%', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| options: { | ||
| storySort: { | ||
| order: [ | ||
| 'Introduction', | ||
| [ | ||
| 'Welcome', | ||
| 'Custom styles', | ||
| 'Carbon CDN style helpers', | ||
| 'Form Participation', | ||
| ], | ||
| 'Components', | ||
| 'Layout', | ||
| ], | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export const decorators = [ | ||
| function decoratorContainer(story, context) { | ||
| const result = story(); | ||
| const { hasMainTag } = result; | ||
| const { theme } = context.globals; | ||
| const { locale, dir, theme } = context.globals; | ||
|
|
||
|
|
||
| document.documentElement.setAttribute('storybook-carbon-theme', theme); | ||
|
|
||
| document.documentElement.lang = locale; | ||
| document.documentElement.dir = dir; | ||
|
|
||
| return container({ hasMainTag, children: result }); | ||
| }, | ||
| ]; | ||
|
|
||
| export const Preview = { | ||
| parameters, | ||
| globalTypes, | ||
| decorators | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 0 additions & 6 deletions
6
...mponents/packages/carbon-web-components/docs/carbon-cdn-style-helpers-story.mdx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters