update(docs): imported docs to display in storybook

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. 

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) => (