diff --git a/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue b/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue
index e2de5ef757..ba6d337d49 100644
--- a/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue
+++ b/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue
@@ -4,14 +4,13 @@
:styles="styles"
>
-
-‚
diff --git a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
index 61b9b7c4fc..1ae99acf90 100644
--- 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';
-
+
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)"
>
@@ -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 {
>
-```
+```
\ No newline at end of file
diff --git a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue b/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue
index 99353851b7..321754de6f 100644
--- 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"
>
@@ -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
index 2b36cfcb87..00a778eae9 100644
--- 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
index e6cb20023c..2d33388e56 100644
--- 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
index db35d26a9d..1f08f59b10 100644
--- 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
index 4ae56bf53e..e57c3163b7 100644
--- 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
index 087eaeda1c..145c8e04f9 100644
--- 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/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
index ee7c61bec7..a6e51fd31f 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
+++ b/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 }) => ({
@@ -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
index 9b63c21bb4..7de29d3a45 100644
--- 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,16 @@ 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 },
floatingStrategy: { type: String },
ariaDetailsId: { type: String },
+ readOnly: { type: Boolean },
+ transparent: { type: Boolean },
+ ariaLabelSelected: { type: String },
+ hcmLabelDisabled: { 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
index 39fee2f627..d7f6736029 100644
--- 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.
-
+
```
diff --git a/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx b/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx
index aa21675fc8..94efb9b418 100644
--- 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
index 66e97452eb..261ee72c33 100644
--- 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/icon/Icon.stories.mdx b/packages/storybook-vue/stories/components/icon/Icon.stories.mdx
index 6a091a0081..321d5ae219 100644
--- a/packages/storybook-vue/stories/components/icon/Icon.stories.mdx
+++ b/packages/storybook-vue/stories/components/icon/Icon.stories.mdx
@@ -46,10 +46,7 @@ export const PATH =
control: {
type: 'text',
},
- },
- styles: {
- control: { disable: true },
- },
+ }
}}
/>
diff --git a/packages/storybook-vue/stories/components/logo/ScaleLogo.vue b/packages/storybook-vue/stories/components/logo/ScaleLogo.vue
index 04b07c9188..8f9f20331e 100644
--- 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 },
},
};
diff --git a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
index 277ab75439..d465372e96 100644
--- 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) => ({
({
Service
`,
methods: {
diff --git a/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue b/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue
index de9c02089e..e5769aded3 100644
--- a/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue
+++ b/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue
@@ -1,5 +1,10 @@
-
+
@@ -10,6 +15,8 @@ export default {
props: {
label: { type: String },
type: { type: 'icon' | 'text', default: 'icon' },
+ maxCharacters: { type: Number},
+ clickHandler: { type: Function }
},
};
diff --git a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
index 26e5d4b641..2b70d3f63b 100644
--- a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
+++ b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
@@ -15,7 +15,11 @@ import ScaleProgressBar from './ScaleProgressBar.vue';
sort: 'alpha'
}
}}
- argTypes={{}}
+ argTypes={{
+ customColor :{
+ description: ' DEPRECATED - (optional) Progress bar customColor'
+ }
+ }}
/>
export const Template = (args, { argTypes }) => ({
@@ -34,6 +38,10 @@ export const Template = (args, { argTypes }) => ({
:percentageStart="percentageStart"
:percentage="percentage"
:styles="styles"
+ :busy="busy"
+ :icon="icon"
+ :progress-bar-id="progressBarId"
+ :mute="mute"
>
`,
diff --git a/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue b/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue
index c733cc91c9..32c6ff61cd 100644
--- a/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue
+++ b/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue
@@ -9,6 +9,10 @@
:percentage="percentage"
:percentageStart="percentageStart"
:styles="styles"
+ :busy="busy"
+ :icon="icon"
+ :progress-bar-id="progressBarId"
+ :mute="mute"
>
@@ -24,7 +28,11 @@ export default {
styles: String,
showStatus: Boolean,
percentage: Number,
- percentageStart: {type: Number, default: 0}
+ percentageStart: {type: Number, default: 0},
+ busy: Boolean,
+ icon: String,
+ progressBarId: String,
+ mute: Boolean,
},
};
diff --git a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
index 3cc4a0ac29..d1592d87c4 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
+++ b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
@@ -13,7 +13,11 @@ import { action } from '@storybook/addon-actions';
title="Components/Radio Button Group"
component={ScaleRadioButtonGroup}
subcomponents={{ 'Radio Button': ScaleRadioButton }}
- argTypes={{}}
+ argTypes={{
+ status: {
+ description: 'DEPRECATED - invalid should replace status'
+ }
+ }}
/>
export const Template = (args, context) => ({
@@ -39,6 +43,7 @@ export const Template = (args, context) => ({
:label="label"
:invalid="invalid"
:helper-text="helperText"
+ :status="status"
@scale-change="emitChange"
>
({
:invalid="itemProps[index]?.invalid"
:helper-text="itemProps[index]?.helperText"
:disabled="itemProps[index]?.disabled"
+ :status="status"
>
`,
@@ -327,7 +333,7 @@ scale-radio-button {
0: {
disabled: true,
},
- },
+ }
}}
>
{Template.bind({})}
diff --git a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
index 9404f7ed18..2ca5af1ae8 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
+++ b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
@@ -12,6 +12,7 @@ export default {
inputId: { type: String },
styles: { type: String },
ariaDetailsId: { type: String },
+ status: { type: String , default: 'COMMENT: DEPRECATED - invalid should replace status'}
},
methods: {
fireEvents() {
diff --git a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue
index 5b798e9680..e6a2f3d83c 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue
+++ b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue
@@ -5,6 +5,7 @@ export default {
helperText: { type: String },
label: { type: String },
invalid: { type: Boolean },
+ status: { type: String },
},
render() {
return this.$slots.default;
diff --git a/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx b/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx
index a877b5aff5..aec2d77bc8 100644
--- a/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx
+++ b/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx
@@ -10,7 +10,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
type: { summary: 'string' },
defaultValue: { summary: 'large' },
},
- description: `(optional) Deprecated; size should be used instead of starSize`,
+ description: `(optional) DEPRECATED; size should be used instead of starSize`,
control: { type: 'select', options: ['large', 'small'] },
},
size: {
@@ -20,7 +20,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
summary: 'large',
},
},
- description: `(optional) size of the stars. Overwritten by deprecated starSize`,
+ description: `(optional) size of the stars. Overwritten by DEPRECATED starSize`,
control: { type: 'select', options: ['large', 'small'] },
},
minRating: {
@@ -30,7 +30,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
summary: 0,
},
},
- description: `(optional) Deprecated; minimum rating value. Will be dropped on next release`,
+ description: `(optional) DEPRECATED; minimum rating value. Will be dropped on next release`,
control: { type: 'number' },
},
maxRating: {
@@ -40,7 +40,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
summary: 5,
},
},
- description: `(optional) Deprecated; max should be used instead of maxRating`,
+ description: `(optional) DEPRECATED; max should be used instead of maxRating`,
control: { type: 'number' },
},
max: {
@@ -50,7 +50,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
summary: 5,
},
},
- description: `(optional) The upper limit of the rating. Overwritten by deprecated maxRating`,
+ description: `(optional) The upper limit of the rating. Overwritten by DEPRECATED maxRating`,
control: { type: 'number' },
},
rating: {
diff --git a/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue b/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue
index a0e3c4aa54..9bec51ac10 100644
--- a/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue
+++ b/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue
@@ -8,6 +8,9 @@
:helper-text="helperText"
:full-width="fullWidth"
:styles="styles"
+ :selected-index="selectedIndex"
+ :aria-label-translation="ariaLabelTranslation"
+ :longest-button-width="longestButtonWidth"
@scaleChange="scaleChange"
>
@@ -26,6 +29,9 @@ export default {
helperText: { type: String },
fullWidth: { type: Boolean, default: false },
styles: { type: String },
+ selectedIndex: { type: Number },
+ ariaLabelTranslation: { type: `segment button with $slottedSegments` },
+ longestButtonWidth: { type: String },
},
methods: {
scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
index 6e52838578..bab8609050 100644
--- a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
+++ b/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"
+ }
}}
/>
@@ -28,6 +31,9 @@ export const Template = (args, { argTypes }) => ({
:helper-text="helperText"
:full-width="fullWidth"
:label="label"
+ :selected-index="selectedIndex"
+ :aria-label-translation="ariaLabelTranslation"
+ :longest-button-width="longestButtonWidth"
>
Apple
One+
diff --git a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
index 56b197d87a..44ee9e3703 100644
--- a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
+++ b/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"},
}}
/>
@@ -32,11 +32,12 @@ export const Template = (args, { argTypes }) => ({
template: `
Overview
diff --git a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
index bb1cd6f039..75567c7944 100644
--- a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
+++ b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
@@ -1,12 +1,25 @@
+
+
+ :arial-label-sidebar-nav="ariaLabelSiderbarNav"
+ :collapsible="collapsible"
+ :collapsible-label="collapsibleLabel"
+ :collapsible-media-query="collapsibleMediaQuery"
+ :styles="styles"
+ :collapsed="collapsed"
+ >
+
+
+
diff --git a/packages/storybook-vue/stories/components/slider/ScaleSlider.vue b/packages/storybook-vue/stories/components/slider/ScaleSlider.vue
index 27052bc48f..e8259ba293 100644
--- a/packages/storybook-vue/stories/components/slider/ScaleSlider.vue
+++ b/packages/storybook-vue/stories/components/slider/ScaleSlider.vue
@@ -20,6 +20,10 @@ export default {
helperText: String,
platform: { type: 'ios' | 'android' },
styles: { type: String },
+ customColor: { type: String },
+ trackSmall: { type: Boolean },
+ thumbLarge: { type: Boolean },
+ innerAriaValueText: { type: '$from to $to'}
},
render() {
return this.$slots.default;
diff --git a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
index fc3a3dbc2e..7d319a0fe1 100644
--- a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
+++ b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
@@ -14,9 +14,74 @@ 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
',
+ },
+ trackSmall :{
+ description: ' **[DEPRECATED]** (optional) smaller track
',
+ },
+ thumbLarge :{
+ description: ' **[DEPRECATED]** (optional) larger thumb
',
+ },
+ 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',
},
}}
/>
@@ -45,6 +110,10 @@ export const Template = (args, { argTypes }) => ({
:slider-id="sliderId"
:helper-text="helperText"
:platform="platform"
+ :custom-color="customColor"
+ :track-small="trackSmall"
+ :thumb-large="thumbLarge"
+ :inner-aria-value-text="innerAriaValueText"
@scale-change="handleScaleChange"
@scale-input="handleScaleInput"
>
diff --git a/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue b/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
index 1a0661a71f..29fe6e412e 100644
--- a/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
+++ b/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
@@ -6,6 +6,7 @@
:input-id="inputId"
:checked="checked"
:size="size"
+ :styles="styles"
@scaleChange="scaleChange"
style="--color-on: blue"
>
@@ -23,6 +24,7 @@ export default {
label: String,
size: String,
name: String,
+ styles: String,
},
methods: {
scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/switch/switch.stories.mdx b/packages/storybook-vue/stories/components/switch/switch.stories.mdx
index 1e5bebfefa..44998e3317 100644
--- a/packages/storybook-vue/stories/components/switch/switch.stories.mdx
+++ b/packages/storybook-vue/stories/components/switch/switch.stories.mdx
@@ -21,6 +21,7 @@ export const Template = (args, { argTypes }) => ({
:label="label"
:size="size"
:name="name"
+ :styles="styles"
@scaleChange="scaleChange"
>
diff --git a/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue b/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
index 5313d2d49c..967a8efbe4 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
+++ b/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
@@ -53,11 +53,10 @@
diff --git a/packages/storybook-vue/stories/components/table/ScaleTable.vue b/packages/storybook-vue/stories/components/table/ScaleTable.vue
index 1a162d79f4..2d5b20bd34 100644
--- a/packages/storybook-vue/stories/components/table/ScaleTable.vue
+++ b/packages/storybook-vue/stories/components/table/ScaleTable.vue
@@ -1,5 +1,5 @@
-
+
@@ -9,7 +9,8 @@ export default {
props: {
showSort: Boolean,
size: String,
- striped: Boolean
+ striped: Boolean,
+ styles: String,
},
};
diff --git a/packages/storybook-vue/stories/components/table/Table.stories.mdx b/packages/storybook-vue/stories/components/table/Table.stories.mdx
index dc72ef02e6..eec1b48af7 100644
--- a/packages/storybook-vue/stories/components/table/Table.stories.mdx
+++ b/packages/storybook-vue/stories/components/table/Table.stories.mdx
@@ -17,7 +17,7 @@ export const ICON =
table: {
type: 'select',
},
- description: `(optional) DEPRECATED - size should replace small`,
+ description: `(optional) DEPRECATED - css overwrite should replace size`,
control: { type: null },
},
}}
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
index 53d025a5d5..aee967716c 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
@@ -432,7 +432,7 @@ Set the profile menu's `logged-in` property to `true` or `false` to switch betwe
accessibilityLabel: "open user menu: Alexander",
closeMenuAccessibilityLabel: "close menu",
loginSettingsLabel: "Login Settings",
- logoutLabel: "Log out",
+ logoutLabel: "Log out",
userInfo: JSON.stringify({
name: 'Alexander Dreyer',
email: 'alexander.dreyer@t-online.de',
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue
index cfc737b6bc..a27724cca9 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue
@@ -32,7 +32,7 @@ export default {
metaNavAriaLabel: String,
metaNavExternalAriaLabel: String,
langSwitcherAriaLabel: String,
- mainNavAriaLabel: String,
+ mainNavAriaLabel: String,
},
};
diff --git a/packages/storybook-vue/stories/components/telekom-footer/Footer.vue b/packages/storybook-vue/stories/components/telekom-footer/Footer.vue
index 216b1289a7..1b3b8b2d19 100644
--- a/packages/storybook-vue/stories/components/telekom-footer/Footer.vue
+++ b/packages/storybook-vue/stories/components/telekom-footer/Footer.vue
@@ -41,7 +41,7 @@
diff --git a/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue b/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
index ac9931bec1..c50f283527 100644
--- a/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
+++ b/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
@@ -18,6 +18,7 @@
:input-id="inputId"
:transparent="transparent"
:input-autofocus="inputAutofocus"
+ :status="status" :variant="variant"
@scaleInput="scaleInput"
@scaleChange="scaleChange"
@scaleFocus="scaleFocus"
@@ -53,6 +54,8 @@ export default {
inputAutofocus: { type: Boolean },
styles: { type: String },
ariaDetailsId: { type: String },
+ status: { type: String },
+ variant: { type: 'informational' | 'warning' | 'danger' | 'success', default: 'informational'},
},
methods: {
scaleInput($event) {
diff --git a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
index a815809d15..c2eb9b062a 100644
--- a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
+++ b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
@@ -38,6 +38,8 @@ export const Template = (args, { argTypes }) => ({
:input-id="inputId"
:transparent="transparent"
:input-autofocus="inputAutofocus"
+ :status="status"
+ :variant="variant"
@scaleChange="scaleChange"
@scaleFocus="scaleFocus"
@scaleBlur="scaleBlur"
diff --git a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
index 740f57ff13..f5c5526cd7 100644
--- a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
+++ b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
@@ -24,6 +24,10 @@
:input-autocomplete="inputAutocomplete"
:experimental-controlled="experimentalControlled"
:hide-label-visually="hideLabelVisually"
+ :status="status"
+ :transparent="transparent"
+ :step="step"
+ :list="list"
@scaleInput="scaleInput"
@scaleChange="scaleChange"
@scaleFocus="scaleFocus"
@@ -64,6 +68,10 @@ export default {
experimentalControlled: { type: Boolean },
hideLabelVisually: { type: Boolean, default: false },
styles: { type: String },
+ status: { type: String },
+ transparent: { type: Boolean },
+ step: { type: String, default: '1' },
+ list: { type: String },
},
methods: {
scaleInput($event) {
diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
index 1a2f740c47..a462f2c378 100644
--- a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
+++ b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
@@ -67,6 +67,9 @@ export const ICON =
description: `(optional) Id of the element with additional information, will be used as aria-details. In case helperText is not provided, will be used as aria-describedBy`,
control: { type: null },
},
+ status: {
+ description: 'DEPRECATED - invalid should replace status '
+ }
}}
/>
diff --git a/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue b/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue
index 38182953db..a4e58ba387 100644
--- a/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue
+++ b/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue
@@ -8,6 +8,8 @@
:opened="opened"
:trigger="trigger"
:flip="flip"
+ :arrow-offset="arrowOffset"
+ :arrow-padding="arrowPadding"
>
Hover me
@@ -25,6 +27,8 @@ export default {
opened: { type: Boolean },
trigger: { type: String },
flip: { type: Boolean },
+ arrowOffset: { type: Number },
+ arrowPadding: { type: Number },
styles: String,
},
methods: {