diff --git a/libs/components/.storybook/main.js b/libs/components/.storybook/main.js index 1356b17f3e..de904d71f8 100644 --- a/libs/components/.storybook/main.js +++ b/libs/components/.storybook/main.js @@ -2,7 +2,10 @@ const rootMain = require('../../../.storybook/main.js'); const { mergeConfig } = require('vite'); // Use the following syntax to add addons! -((rootMain.stories = ['../**/*.stories.@(js|jsx|ts|tsx|mdx)']), +((rootMain.stories = [ + '../**/*.stories.@(js|jsx|ts|tsx)', + '../**/Overview.mdx', +]), (rootMain.core = { builder: '@storybook/builder-vite' })); module.exports = { ...rootMain, diff --git a/libs/components/src/button/Overview.mdx b/libs/components/src/button/_Overview.mdx similarity index 100% rename from libs/components/src/button/Overview.mdx rename to libs/components/src/button/_Overview.mdx diff --git a/libs/components/src/dialog/Overview.mdx b/libs/components/src/dialog/_Overview.mdx similarity index 99% rename from libs/components/src/dialog/Overview.mdx rename to libs/components/src/dialog/_Overview.mdx index 8e2f76e7ad..4a427561ad 100644 --- a/libs/components/src/dialog/Overview.mdx +++ b/libs/components/src/dialog/_Overview.mdx @@ -18,6 +18,7 @@ import * as DialogStories from './dialog.stories'; {/* is deprecated, please migrate it to see: https://storybook.js.org/migration-guides/7.0 */} {' '} + --- @@ -29,6 +30,7 @@ import * as DialogStories from './dialog.stories'; {/* is deprecated, please migrate it to see: https://storybook.js.org/migration-guides/7.0 */} {' '} + ### Destructive dialog @@ -36,4 +38,5 @@ import * as DialogStories from './dialog.stories'; {/* is deprecated, please migrate it to see: https://storybook.js.org/migration-guides/7.0 */} {' '} + diff --git a/libs/components/src/expansion-panel/Overview.mdx b/libs/components/src/expansion-panel/_Overview.mdx similarity index 100% rename from libs/components/src/expansion-panel/Overview.mdx rename to libs/components/src/expansion-panel/_Overview.mdx diff --git a/libs/components/src/list/Overview.mdx b/libs/components/src/list/_Overview.mdx similarity index 100% rename from libs/components/src/list/Overview.mdx rename to libs/components/src/list/_Overview.mdx diff --git a/libs/components/src/skeleton/Overview.mdx b/libs/components/src/skeleton/Overview.mdx new file mode 100644 index 0000000000..05c95303a7 --- /dev/null +++ b/libs/components/src/skeleton/Overview.mdx @@ -0,0 +1,49 @@ +import { Canvas, Meta, Source } from '@storybook/addon-docs/blocks'; +import { useDarkMode } from '@vueless/storybook-dark-mode'; +import * as SkeletonStories from './skeleton.stories'; + +export const DarkSource = (props) => { + const isDark = useDarkMode(); + return ; +}; + + + +# Skeleton + +These examples use [skeleton-elements](https://skeleton-elements.nolimits4web.com/) — a third-party +library for skeleton screen / ghost element effects. The stories below show how to integrate it. + +--- + +## Setup + +**1. Install** + + + +**2. Import styles** + + + +**3. Apply classes to your markup** + +Loading…

+
`} +/> + +Effect modifiers: `skeleton-effect-fade` · `skeleton-effect-wave` · `skeleton-effect-pulse` + +--- + +## STORIES + + + + + + + + diff --git a/libs/components/src/skeleton/skeleton.stories.js b/libs/components/src/skeleton/skeleton.stories.js index 4a5cfbbc95..76862b35cb 100644 --- a/libs/components/src/skeleton/skeleton.stories.js +++ b/libs/components/src/skeleton/skeleton.stories.js @@ -9,7 +9,6 @@ import 'skeleton-elements/css'; export default { title: 'Components/Skeleton', - tags: ['autodocs'], }; const skeletonClsName = 'skeleton-text'; diff --git a/libs/components/src/tab/Overview.mdx b/libs/components/src/tab/_Overview.mdx similarity index 100% rename from libs/components/src/tab/Overview.mdx rename to libs/components/src/tab/_Overview.mdx