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 <[email protected]>
telekom · Jan 29, 2025 · 525e1c4 · 525e1c4
1 parent 0874436
commit 525e1c4
Show file tree

Hide file tree

Showing 48 changed files with 318 additions and 63 deletions.
diff --git a/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue b/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 }
   },
 }

diff --git a/packages/storybook-vue/stories/components/button/ScaleButton.vue b/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,

diff --git a/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx b/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="">

diff --git a/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue b/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>
-‚
diff --git a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx b/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>
-```
+```
diff --git a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue b/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) {

diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/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'
+    }
   }}
 />
 

diff --git a/packages/storybook-vue/stories/components/chip/ScaleChip.vue b/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) {

diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/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' },

diff --git a/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx b/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"

diff --git a/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue b/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue
@@ -19,6 +19,9 @@
     :popup-title="popupTitle"
     :placeholder="placeholder"
     :styles="styles"
+    :inner-role="innerRole"
+    :status="status"
+    :variant="variant"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"
     @scaleBlur="scaleBlur"
@@ -51,6 +54,9 @@ export default {
     placeholder: { type: String },
     size: { type: String },
     ariaDetailsId: { type: String },
+    innerRole: { type: String },
+    status: { type: String },
+    variant: { type: 'informational' | 'warning' | 'danger' | 'success' | 'informational'},
   },
   methods: {
     scaleChange($event) {

diff --git a/...ges/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx b/...ges/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."
+    },
+    floatingStrategy: {
+      description: "see https://floating-ui.com/docs/computePosition#strategy "
+    },
+  }}
 />
 
 export const Template = (args, { argTypes }) => ({
@@ -38,6 +54,10 @@ export const Template = (args, { argTypes }) => ({
         :combobox-id="comboboxId"
         :hide-label-visually="hideLabelVisually"
         :floating-strategy="floatingStrategy"
+        :read-only="readOnly"
+        :transparent="transparent"
+        :aria-label-selected="ariaLabelSelected"
+        :hcm-label-disabled="hcmLabelDisabled"
         @scaleChange="['scale-change']"
         @scaleFocus="['scale-focus']"
         @scaleBlur="['scale-blur']"

diff --git a/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue b/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
@@ -10,6 +10,10 @@
     :combobox-id="comboboxId"
     :hide-label-visually="hideLabelVisually"
     :floating-strategy="floatingStrategy"
+    :read-only="readOnly"
+    :transparent="transparent"
+    :aria-label-selected="ariaLabelSelected"
+    :hcm-label-disabled="hcmLabelDisabled"
     @scaleChange="['scale-change']"
     @scaleFocus="['scale-focus']"
     @scaleBlur="['scale-blur']"
@@ -30,12 +34,17 @@ export default {
     invalid: { type: Boolean },
     disabled: { type: Boolean },
     size: { type: String },
-    value: { type: String },
+    floatingStrategy: { type: 'absolute' | 'fixed' , default: 'absolute' },
     variant: { type: String },
     comboboxId: { type: String },
     hideLabelVisually: { type: Boolean, default: false },
     floatingStrategy: { type: String },
     ariaDetailsId: { type: String },
+    readOnly: { type: Boolean }, 
+    transparent: { type: Boolean }, 
+    ariaLabelSelected: { type: String },
+    hcmLabelDisabled: { type: String },
+    value: { type: String},
   },
   methods: {
     'scale-change'($event) {

diff --git a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx
@@ -274,9 +274,6 @@ The display error is on the browser side.
   <option value="1">item 1</option>
   <option value="2" selected>item 2</option>
   <option value="3">item 3</option>
-  <scale-icon-content-calendar
-    size="20"
-    slot="icon"
-  ></scale-icon-content-calendar>
+  <scale-icon-content-calendar size="20" slot="icon"></scale-icon-content-calendar>
 </scale-dropdown>
 ```
diff --git a/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx b/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx
@@ -28,6 +28,13 @@ import ScaleMenuFlyout from './ScaleMenuFlyout.vue';
       description:
         'Determines whether the dropdown should close when a menu item is selected',
     },
+    triggerHasPopup: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Determines whether the flyout trigger should get the aria-haspopup attribute ',
+    },
   }}
 />
 

diff --git a/packages/storybook-vue/stories/components/flyout-menu/ScaleMenuFlyout.vue b/packages/storybook-vue/stories/components/flyout-menu/ScaleMenuFlyout.vue
@@ -11,6 +11,7 @@
       closeOnSelect: { type: Boolean, default: true },
       direction: { type: String, default: 'bottom-right' },
       styles: { type: String },
+      triggerHasPopup: { type: Boolean, default: true}
     },
     methods: {
       emit() {

diff --git a/packages/storybook-vue/stories/components/logo/ScaleLogo.vue b/packages/storybook-vue/stories/components/logo/ScaleLogo.vue
@@ -9,6 +9,7 @@
     :logo-title="logoTitle"
     :logo-hide-title="logoHideTitle"
     :logo-aria-described-by="logoAriaDescribedBy"
+    :logo-aria-hidden="logoAriaHidden"
     :accessibility-title="accessibilityTitle"
     :focusable="focusable"
     :scroll-into-view-on-focus="scrollIntoViewOnFocus"
@@ -42,8 +43,10 @@ export default {
     href: { type: String },
     styles: { type: String },
     logoAriaDescribedBy: { type: String },
+    logoAriaHidden: { type: Boolean },
     logoTitle: { type: String },
     logoHideTitle: { type: Boolean },
+    accessibilityTitle: { type: String },
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
@@ -76,7 +76,6 @@ export const Template = (args, context) => ({
       <scale-modal
         :heading="heading"
         :size="size"
-        :variant="size"
         :opened="isOpen"
         :duration="duration"
         :close-button-label="closeButtonLabel"