docs: updates storybook documentation (#2382)

* feat(storybook-vue): added multiple props to component documentation in storybook

* feat(storybook-vue): added types to logged out and logged in in telekom brand header component

* docs(storybook-vue): refactors props for multiple component documentation in storybook

* "docs(storybook-vue): refactors props for multiple component documentation in storybook

* docs(storybook-vue): refactors props for multiple component documentation in storybook

* docs(storybook-vue): refactors props for multiple component documentation in storybook

---------

Co-authored-by: Gammel <max.gammel@telekom.de>

Author: MaxGammel

packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue

@@ -4,14 +4,13 @@
     :styles="styles"
   >
     <slot></slot>
-    <slot name="separator"></slot>
   </scale-breadcrumb>
 </template>
 
 <script>
 export default {
   props: {
-    separator: String,
+    separator: { type: String},
     styles: { type: String }
   },
 }

packages/storybook-vue/stories/components/button/ScaleButton.vue

@@ -10,6 +10,7 @@
     :value="value"
     :variant="variant"
     :icon-only="iconOnly"
+    :icon-position="iconPosition"
     :inner-tabindex="innerTabindex"
     :inner-aria-label="innerAriaLabel"
     :styles="styles"
@@ -36,6 +37,7 @@ export default {
     variant: String,
     size: String,
     iconOnly: Boolean,
+    iconPosition: String,
     innerTabindex: Number,
     innerAriaLabel: String,
     styles: String,

packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx

@@ -13,6 +13,26 @@ import ScaleCheckboxGroup from './ScaleCheckboxGroup.vue';
   argTypes={{}}
 />
 
+export const Template = (args, { argTypes }) => ({
+  components: { ScaleCheckboxGroup },
+  props: ScaleCheckboxGroup.props,
+  template: `
+    <scale-checkbox-group
+      :name="name"
+      :label="label"
+      :helper-text="helperText"
+      :aria-label-checkbox-group="ariaLabelCheckboxGroup"
+      :invalid="invalid"
+      :select-text="selectText"
+      :unselect-text="unselectText"
+      :value="value"
+      :input-id="inputId"
+      :styles="styles"
+      :status="status"
+    ></scale-checkbox-group>
+  `,
+});
+
 <div
   style={{
     display: 'inline-flex',
@@ -28,7 +48,9 @@ import ScaleCheckboxGroup from './ScaleCheckboxGroup.vue';
 ## Standard
 
 <Canvas withSource="none">
-  <Story name="Standard" args={{}}>
+  <Story 
+    name="Standard" 
+    args={{}}>
     {() => ({
       template: `
         <scale-checkbox-group label="Group Label" name="group" value="">

packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue

@@ -1,8 +1,18 @@
 <template>
-  <div>
-    <!-- this has the slots show up in ArgsTable -->
+  <scale-checkbox-group>
+    :name="name"
+    :label="label"
+    :helper-text="helperText"
+    :aria-label-checkbox-group="ariaLabelCheckboxGroup"
+    :invalid="invalid"
+    :select-text="selectText"
+    :unselect-text="unselectText"
+    :value="value"
+    :input-id="inputId"
+    :styles="styles"
+    :status="status"
     <slot></slot>
-  </div>
+  </scale-checkbox-group>
 </template>
 
 <script>
@@ -11,14 +21,14 @@ export default {
     name: { type: String },
     label: { type: String, default: '' },
     helperText: { type: String },
-    ariaLabelCheckboxGroup: { type: String },
+    ariaLabelCheckboxGroup: { type: String, default: 'COMMENT: ariaLabelCheckboxGroup should replace ariaLabel' },
     invalid: { type: Boolean },
     selectText: { type: String, default: 'Select all' },
     unselectText: { type: String, default: 'Unselect all' },
     value: { type: String, default: '' },
     inputId: { type: String },
     styles: { type: String },
+    status: { type: String, default: 'COMMENT: DEPRECATED - invalid should replace status'}
   },
 };
 </script>
-‚

packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx

@@ -8,7 +8,15 @@ import {
 import ScaleCheckbox from './ScaleCheckbox.vue';
 import { action } from '@storybook/addon-actions';
 
-<Meta title="Components/Checkbox" component={ScaleCheckbox} argTypes={{}} />
+<Meta 
+  title="Components/Checkbox" 
+  component={ScaleCheckbox} 
+  argTypes={{
+    status: {
+      description: 'DEPRECATED - invalid should replace status'
+    }
+  }} 
+/>
 
 export const Template = (args, { argTypes }) => ({
   props: {
@@ -27,6 +35,9 @@ export const Template = (args, { argTypes }) => ({
       :value="value"
       :input-id="inputId"
       :required="required"
+      :hide-label="hideLabel"
+      :status="status"
+      :styles="styles"
       @scaleChange="action('scaleChange')($event)"
       @scale-change="action('scale-change')($event)"
     ></scale-checkbox>
@@ -68,9 +79,8 @@ export const Template = (args, { argTypes }) => ({
 ```css
 scale-checkbox {
   --spacing-x: var(--telekom-spacing-composition-space-04);
-  --transition: all var(--telekom-motion-duration-transition) var(
-      --telekom-motion-easing-standard
-    );
+  --transition: all var(--telekom-motion-duration-transition)
+    var(--telekom-motion-easing-standard);
   --color-text: var(--telekom-color-text-and-icon-standard);
   --color-error: var(--telekom-color-functional-danger-standard);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
@@ -255,4 +265,4 @@ scale-checkbox {
     ></scale-icon-alert-imprint-dataprivacy>
   </span>
 </scale-checkbox>
-```
+```

packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue

@@ -11,6 +11,9 @@
     :input-id="inputId"
     :required="required"
     :aria-label-checkbox="ariaLabelCheckbox"
+    :hide-label="hideLabel"
+    :status="status"
+    :styles="styles"
     @scaleChange="scaleChange"
   >
   </scale-checkbox>
@@ -33,6 +36,9 @@ export default {
     required: { type: Boolean },
     ariaLabelCheckbox: { type: String },
     ariaDetailsId: { type: String },
+    hideLabel: { type: Boolean},
+    status: { type: String },
+    styles: { type: String },
   },
   methods: {
     scaleChange($event) {

packages/storybook-vue/stories/components/chip/Chip.stories.mdx

@@ -27,6 +27,9 @@ import { action } from '@storybook/addon-actions';
     disabled: {
       description: `only valid for persistent type`,
     },
+    ariaCheckedState :{
+      description: ' DEPRECATED - (optional) chip aria-checked - should be derived from selected state attribute'
+    }
   }}
 />
 

packages/storybook-vue/stories/components/chip/ScaleChip.vue

@@ -7,6 +7,8 @@
     :aria-role-title="ariaRoleTitle"
     :disabled="disabled"
     :styles="styles"
+    :label="label"
+    :dismiss-text="dismissText"
     @scaleChange="scaleChange"
     @scaleClose="scaleClose"
   >
@@ -26,6 +28,8 @@ export default {
     styles: { type: 'switch' | 'radio' | 'option' | 'menuitemreadio' | 'menuitemcheckbox' | 'checkbox', default: 'switch'},
     ariaRoleTitle: { type: String },
     ariaCheckedState: { type: Boolean },
+    label: { type: String }, 
+    dismissText: { type: String },
   },
   methods: {
     scaleChange($event) {

packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx

@@ -27,6 +27,14 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
       description: `(optional) Freeze header row from scrolling`,
       control: { type: null },
     },
+    visible: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+      description: `(optional) Set to false to hide table, used for nested tables to re-render upon toggle`,
+      control: { type: null },
+    },
     heading: {
       table: {
         type: { summary: 'string' },

packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx

@@ -19,6 +19,12 @@ import { action } from '@storybook/addon-actions';
       description: `(optional) DEPRECATED - css overwrite should replace size`,
       control: { type: null },
     },
+    popupTitle: {
+      description: 'DEPRECATED - in v3 in favor of localization.calendarHeading'
+    },
+    status: {
+      description: 'DEPRECATED - invalid should replace status'
+    },
   }}
 />
 
@@ -45,6 +51,9 @@ export const Template = (args, { argTypes }) => ({
             :helper-text="helperText"
             :invalid="invalid"
             :placeholder="placeholder"
+            :inner-role="innerRole"
+            :status="status"
+            :variant="variant"
             @scaleChange="scaleChange"
             @scale-change="scale-change"
             @scaleFocus="scaleFocus"