docs(storybook-vue): refactors props for multiple component documenta…

…tion in storybook

packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx

@@ -7,7 +7,23 @@ import { action } from '@storybook/addon-actions';
   title="Components/Dropdown Select"
   component={ScaleDropdownSelect}
   subcomponents={{ 'Dropdown Select Item': ScaleDropdownSelectItem }}
-  argTypes={{}}
+  argTypes={{
+    hideLabelVisually: {
+      description: "(optional) to hide the label."
+    },
+    ariaLabelSelected: {
+      description: "(optional) Screen reader text appended to the selected element."
+    },
+    hcmLabelDisabled: {
+      description: "(optional) Text displayed in high contrast mode only to indicate disabled state."
+    },
+    ariaDetailsId: {
+      description: "(optional) id or space separated list of ids of elements that provide or link to additional related information."
+    },
+    value: {
+      description: "see https://floating-ui.com/docs/computePosition#strategy "
+    },
+  }}
 />
 
 export const Template = (args, { argTypes }) => ({

packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue

@@ -34,7 +34,7 @@ export default {
     invalid: { type: Boolean },
     disabled: { type: Boolean },
     size: { type: String },
-    value: { type: String },
+    value: { type: 'absolute' | 'fixed' , default: 'absolute' },
     variant: { type: String },
     comboboxId: { type: String },
     hideLabelVisually: { type: Boolean, default: false },

packages/storybook-vue/stories/components/icon/ScaleIcon.vue

@@ -39,6 +39,7 @@
       :focusable="focusable"
       :decorative="decorative"
       :accessibility-title="accessibilityTitle"
+      :styles="styles"
     />
   </div>
 </template>
@@ -54,6 +55,7 @@ export default {
     focusable: { type: Boolean, default: false },
     decorative: { type: Boolean, default: false },
     accessibilityTitle: { type: String },
+    styles: { type: String }
   }
 }
 </script>

packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx

@@ -8,6 +8,9 @@ import ScaleSegmentedButton from './ScaleSegmentedButton.vue';
     size: {
       control: { type: 'select', options: ['small', 'medium', 'large'] },
     },
+    ariaLabelTranslation: {
+      description: "(optional) aria-label attribute needed for icon-only buttons"
+    }
   }}
 />
 

packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx

@@ -11,9 +11,9 @@ import ScaleSidebarNavItem from './SidebarNavItem.vue';
     'scale-sidebar-nav-item': ScaleSidebarNavItem,
   }}
   argTypes={{
-    styles: {
-      control: { disable: true },
-    },
+    collapsible: { description: "Set to `true` to make the sidebar toggleable (useful for small screens)"},
+    collapsibleMediaQuery: { description: "Automatically set `collapsible` based on this media query"},
+    collapsibleLabel: { description: "Label for toggle button"},
   }}
 />
 

packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue

@@ -1,8 +1,20 @@
+<template>
+  <scale-sidebar-nav>
+    :arial-label-sidebar-nav="ariaLabelSiderbarNav"
+    :collapsible="collapsible"
+    :collapsible-label="collapsibleLabel"
+    :collapsible-media-query="collapsibleMediaQuery"
+    :styles="styles"
+    :collapsed="collapsed"
+    >
+  </scale-sidebar-nav>
+</template>
+
 <script>
 export default {
   name: 'scale-sidebar-nav',
   props: {
-    ariaLabelSiderbarNav: { type: String },
+    ariaLabelSiderbarNav: { type: String, default: "COMMENT: A brief description of the purpose of the navigation, omitting the term navigation, as the screen reader will read both the role and the contents of the label." },
     collapsible: { type: Boolean, default: false },
     collapsibleMediaQuery: { type: String },
     collapsibleLabel: { type: String, default: 'Menu' },

packages/storybook-vue/stories/components/slider/Slider.stories.mdx

@@ -14,19 +14,75 @@ import { action } from '@storybook/addon-actions';
   argTypes={{
     platform: {
       control: { type: 'text' },
+      description: '(optional) adapt styles for a specific platform. Ideally done via a global `data-platform` attribute (e.g. data-platform="ios" on `body`) but browser support is not yet sufficient.',
     },
     styles: {
       control: { disable: true },
+      description: '(optional) Injected CSS styles ',
     },
     customColor :{
-      description: ' DEPRECATED - (optional) slider custom color',
+      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) slider custom color<br/><br/>',
     },
     trackSmall :{
-      description: ' DEPRECATED - (optional) smaller track',
+      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) smaller track<br/><br/>',
     },
     thumbLarge :{
-      description: ' DEPRECATED - (optional) larger thumb ',
-    }
+      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) larger thumb<br/><br/> ',
+    },
+    decimals :{
+      description: ' (optional) number of decimal places  ',
+    },
+    innerAriaValueText :{
+      description: ' (optional) Aria label for range slider',
+    },
+    label :{
+      description: ' (optional) slider label',
+    },
+    max :{
+      description: ' (optional) the maximal value of the slider',
+    },
+    min :{
+      description: ' (optional) he minimal value of the slider',
+    },
+    name :{
+      description: ' (optional) the name of the slider',
+    },
+    range :{
+      description: ' (optional) multi-thumb',
+    },
+    showStepMarks :{
+      description: ' (optional) show a mark for each step',
+    },
+    showValue :{
+      description: ' (optional) slider display value',
+    },
+    sliderId :{
+      description: ' (optional) Slider id',
+    },
+    step :{
+      description: ' (optional) the step size to increase or decrease when dragging slider',
+    },
+    unit :{
+      description: ' (optional) slider value unit',
+    },
+    unitPosition :{
+      description: ' (optional) unit position',
+    },
+    helperText :{
+      description: ' (optional) helper text',
+    },
+    disabled :{
+      description: ' (optional) disabled',
+    },
+    value :{
+      description: ' (optional) the value of the slider',
+    },
+    valueTo :{
+      description: ' (optional) when `range` is true, the "from" value',
+    },
+    valueFrom :{
+      description: ' (optional) when `range` is true, the "to" value',
+    },
   }}
 />
 

packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx

@@ -12,7 +12,7 @@ import TabPanel from './TabPanel.vue';
 <Meta
   title="Components/Tab Navigation"
   component={ScaleTabNav}
-  subcomponents={{ 'Scale Tab Panel': TabPanel }}
+  subcomponents={{ 'Scale Tab Header': TabHeader, 'Scale Tab Panel': TabPanel }}
   argTypes={{
     styles: {
       table: {
@@ -36,6 +36,13 @@ import TabPanel from './TabPanel.vue';
 
 export const Template = (args, { argTypes }) => ({
   components: { ScaleTabNav },
+    preselected: {
+      table: {
+        disable: true,
+      },
+      description: '',
+      control: { type: null },
+    },
   props: ScaleTabNav.props,
   template: `
     <scale-tab-nav :disabled="disabled ? true : false" :preselected="preselected ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>