feat(docs): display docs

.storybook/main.ts

@@ -35,5 +35,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../docs'],
 }
 export default config

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.24
+
+- Imported markdown files(docs) for datepicker, linear progress and dropdown menu to display in storybook
+
 ## 3.0.23
 
 - Improve visibility of scroll to top button

docs/storybook/button.md

@@ -1,4 +1,4 @@
-### Buttons
+### Design
 
 <img width='100%' alt="image"  src="../static/button-variations.png">
 

docs/storybook/datepicker.md

@@ -1,4 +1,4 @@
-### Date Picker
+### Design
 
 <img width="560" alt="image" src="../static/datepicker.png">
 

docs/storybook/selectlist/dropdown.md

@@ -1,10 +1,10 @@
-### Drop Down
+### Design
 
 <img width="740" alt="image" src="../../static/dropdown.png">
 
 <br>
 
-#### ...
+#### Description
 
 A drop down list is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.
 

docs/storybook/spinner.md

@@ -1,4 +1,3 @@
-
 ### Spinner
 
 For page elements with a database connection or backend content requests with potential loading delays (latency), a loading spinner should be used. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.23",
+  "version": "3.0.24",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
@@ -62,6 +62,7 @@
     "@storybook/addon-links": "^8.0.2",
     "@storybook/addon-onboarding": "^8.0.2",
     "@storybook/blocks": "^8.0.2",
+    "@storybook/builder-vite": "^8.1.10",
     "@storybook/react": "^8.0.2",
     "@storybook/react-vite": "^8.0.2",
     "@storybook/test": "^8.0.2",

src/components/basic/Button/BackButton.stories.tsx

@@ -21,6 +21,7 @@
 import { ComponentStory } from '@storybook/react'
 
 import { BackButton as Component } from './BackButton'
+import button from '../../../../docs/storybook/button.md?raw'
 
 export default {
   title: 'Buttons',
@@ -31,6 +32,11 @@ export default {
       action: 'onClick',
     },
   },
+  parameters: {
+    docs: {
+      description: { component: button },
+    },
+  },
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (

src/components/basic/Datepicker/Datepicker.stories.tsx

@@ -22,12 +22,18 @@ import { ComponentStory } from '@storybook/react'
 import { Box } from '@mui/material'
 
 import { Datepicker as Component } from '.'
+import datepicker from '../../../../docs/storybook/datepicker.md?raw'
 
 export default {
   title: 'Datepicker',
   component: Component,
   tags: ['autodocs'],
   argTypes: {},
+  parameters: {
+    docs: {
+      description: { component: datepicker },
+    },
+  },
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (

src/components/basic/DropdownMenu/DropdownMenu.stories.tsx

@@ -24,6 +24,7 @@ import MenuItem from '@mui/material/MenuItem'
 import { ComponentStory } from '@storybook/react'
 
 import { DropdownMenu as Component } from '.'
+import dropdown from '../../../../docs/storybook/selectlist/dropdown.md?raw'
 
 export default {
   title: 'Dropdown Menu',
@@ -32,6 +33,11 @@ export default {
   args: {
     buttonText: 'Admin',
   },
+  parameters: {
+    docs: {
+      description: { component: dropdown },
+    },
+  },
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (

src/components/basic/Progress/LinearProgress/LinearProgressWithValueLabel.stories.tsx

@@ -20,12 +20,18 @@
 import { ComponentStory } from '@storybook/react'
 
 import { LinearProgressWithValueLabel as Component } from './LinearProgressWithValueLabel'
+import spinner from '../../../../../docs/storybook/spinner.md?raw'
 
 export default {
   title: 'LinearProgressWithValueLabel',
   component: Component,
   tags: ['autodocs'],
   argTypes: {},
+  parameters: {
+    docs: {
+      description: { component: spinner },
+    },
+  },
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (