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 @@ @@ -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 @@ + + 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: {