Merge pull request #2717 from Teradata/chore/DSYS-685

build(storybook): add mdx documentation to skeleton

Author: omaardev

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,

libs/components/src/button/Overview.mdx libs/components/src/button/_Overview.mdxlibs/components/src/button/Overview.mdx renamed to libs/components/src/button/_Overview.mdx

@@ -18,6 +18,7 @@ import * as DialogStories from './dialog.stories';
 {/* <Story id="components-dialog--anatomy" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
 
 {' '}
+
 <Story id="components-dialog--anatomy" />
 
 ---
@@ -29,11 +30,13 @@ import * as DialogStories from './dialog.stories';
 {/* <Story id="components-dialog--logout" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
 
 {' '}
+
 <Story id="components-dialog--logout" />
 
 ### Destructive dialog
 
 {/* <Story id="components-dialog--udf" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
 
 {' '}
+
 <Story id="components-dialog--udf" />

libs/components/src/dialog/Overview.mdx libs/components/src/dialog/_Overview.mdxlibs/components/src/dialog/Overview.mdx renamed to libs/components/src/dialog/_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 <Source {...props} dark={isDark} />;
+};
+
+<Meta of={SkeletonStories} />
+
+# 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**
+
+<DarkSource language="bash" code="npm install skeleton-elements" />
+
+**2. Import styles**
+
+<DarkSource language="js" code="import 'skeleton-elements/css';" />
+
+**3. Apply classes to your markup**
+
+<DarkSource
+  language="html"
+  code={`<p class="skeleton-text skeleton-effect-fade">Loading…</p>
+<div class="skeleton-block skeleton-effect-wave" style="height: 200px;"></div>`}
+/>
+
+Effect modifiers: `skeleton-effect-fade` · `skeleton-effect-wave` · `skeleton-effect-pulse`
+
+---
+
+## STORIES
+
+<Canvas of={SkeletonStories.DataTable} />
+
+<Canvas of={SkeletonStories.Typography} />
+
+<Canvas of={SkeletonStories.Content} />
+
+<Canvas of={SkeletonStories.Checkbox} />

…ponents/src/expansion-panel/Overview.mdx …onents/src/expansion-panel/_Overview.mdxlibs/components/src/expansion-panel/Overview.mdx renamed to libs/components/src/expansion-panel/_Overview.mdx libs/components/src/expansion-panel/Overview.mdx renamed to libs/components/src/expansion-panel/_Overview.mdx

@@ -9,7 +9,6 @@ import 'skeleton-elements/css';
 
 export default {
   title: 'Components/Skeleton',
-  tags: ['autodocs'],
 };
 
 const skeletonClsName = 'skeleton-text';