diff --git a/packages/storybook-vue/public/assets/3_components/accordion/Elements.png b/packages/storybook-vue/public/assets/3_components/accordion/Elements.png new file mode 100644 index 0000000000..1cb27dd772 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/accordion/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/accordion/accordion.png b/packages/storybook-vue/public/assets/3_components/accordion/accordion.png deleted file mode 100644 index 16e0de56fc..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/accordion/accordion.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb-general.png b/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb-general.png deleted file mode 100644 index e71787c315..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb-general.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb.png b/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb.png new file mode 100644 index 0000000000..a7c34c36a7 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb.png differ diff --git a/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png b/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png index 22d3c500fb..42835c14fa 100644 Binary files a/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png and b/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/button/ButtonGroup_Modal.png b/packages/storybook-vue/public/assets/3_components/button/ButtonGroup_Modal.png deleted file mode 100644 index a5d44504c5..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/button/ButtonGroup_Modal.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/button/Button_BasicTypes.png b/packages/storybook-vue/public/assets/3_components/button/Button_BasicTypes.png deleted file mode 100644 index 87b98a78cb..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/button/Button_BasicTypes.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/button/Button_Disabled.png b/packages/storybook-vue/public/assets/3_components/button/Button_Disabled.png deleted file mode 100644 index bfa12b037a..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/button/Button_Disabled.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/button/Button_Sizes.png b/packages/storybook-vue/public/assets/3_components/button/Button_Sizes.png deleted file mode 100644 index 6d8e7c079c..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/button/Button_Sizes.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/button/button-best-practice.png b/packages/storybook-vue/public/assets/3_components/button/button-best-practice.png new file mode 100644 index 0000000000..e78470c369 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-best-practice.png differ diff --git a/packages/storybook-vue/public/assets/3_components/button/button-best-practice2.png b/packages/storybook-vue/public/assets/3_components/button/button-best-practice2.png new file mode 100644 index 0000000000..a9f8a9091f Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-best-practice2.png differ diff --git a/packages/storybook-vue/public/assets/3_components/button/button-disabled.png b/packages/storybook-vue/public/assets/3_components/button/button-disabled.png new file mode 100644 index 0000000000..4518a1e8e8 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-disabled.png differ diff --git a/packages/storybook-vue/public/assets/3_components/button/button-ghost.png b/packages/storybook-vue/public/assets/3_components/button/button-ghost.png new file mode 100644 index 0000000000..46b73fe8ce Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-ghost.png differ diff --git a/packages/storybook-vue/public/assets/3_components/button/button-secondary-white.png b/packages/storybook-vue/public/assets/3_components/button/button-secondary-white.png new file mode 100644 index 0000000000..13de320fba Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-secondary-white.png differ diff --git a/packages/storybook-vue/public/assets/3_components/button/button-sizes.png b/packages/storybook-vue/public/assets/3_components/button/button-sizes.png new file mode 100644 index 0000000000..22b9f79ae5 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-sizes.png differ diff --git a/packages/storybook-vue/public/assets/3_components/button/button.png b/packages/storybook-vue/public/assets/3_components/button/button.png new file mode 100644 index 0000000000..1677f666ca Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button.png differ diff --git a/packages/storybook-vue/public/assets/3_components/card/cards_general.png b/packages/storybook-vue/public/assets/3_components/card/cards_general.png index 6ce7d629a4..fb1f913c24 100644 Binary files a/packages/storybook-vue/public/assets/3_components/card/cards_general.png and b/packages/storybook-vue/public/assets/3_components/card/cards_general.png differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group.png deleted file mode 100644 index f6b51a9ec2..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png deleted file mode 100644 index c67101848e..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png deleted file mode 100644 index 490e14e1d1..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Elements.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Elements.png deleted file mode 100644 index e6bfac525f..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Elements.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png deleted file mode 100644 index e266107ee9..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png deleted file mode 100644 index 1616bcb8d3..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Elements.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Elements.png new file mode 100644 index 0000000000..fadd84cca2 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-de.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-de.png new file mode 100644 index 0000000000..c72cbd3df5 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-en.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-en.png new file mode 100644 index 0000000000..316a562635 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png new file mode 100644 index 0000000000..909c37f36b Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png new file mode 100644 index 0000000000..de8af67757 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group.png new file mode 100644 index 0000000000..381d3b2f10 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-DE.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-DE.png deleted file mode 100644 index 15efdc9f77..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-EN.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-EN.png deleted file mode 100644 index f509c41742..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-EN.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-DE.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-DE.png deleted file mode 100644 index e3858cfb54..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-EN.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-EN.png deleted file mode 100644 index 41ea118279..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-EN.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example1.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example1.png deleted file mode 100644 index 29104c5efc..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example1.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png deleted file mode 100644 index b022b77bc6..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Default.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Default.png deleted file mode 100644 index 60db725f2c..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Default.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Selected.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Selected.png deleted file mode 100644 index e274e0ed16..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Selected.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Types.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Types.png deleted file mode 100644 index 2b36801c58..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Types.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Outline.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Outline.png deleted file mode 100644 index f3fd02c42f..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Outline.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Standard.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Standard.png deleted file mode 100644 index 6d91b6452c..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Standard.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-elements.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-elements.png deleted file mode 100644 index df8fbffbf1..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-elements.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Elements.png b/packages/storybook-vue/public/assets/3_components/chip/Elements.png new file mode 100644 index 0000000000..999371f4a4 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/Standard_Chip.png b/packages/storybook-vue/public/assets/3_components/chip/Standard_Chip.png deleted file mode 100644 index d00bc3ac47..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/Standard_Chip.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-de.png b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-de.png new file mode 100644 index 0000000000..5028a5785a Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-en.png b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-en.png new file mode 100644 index 0000000000..d9fcd6a60e Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic-chatbot.png b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic-chatbot.png new file mode 100644 index 0000000000..ba15d6017a Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic-chatbot.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic.png b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic.png new file mode 100644 index 0000000000..5a7ef3669c Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-default.png b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-default.png new file mode 100644 index 0000000000..7d21a4af80 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-default.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-selected.png b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-selected.png new file mode 100644 index 0000000000..31b1e67c3d Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-selected.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-standard.png b/packages/storybook-vue/public/assets/3_components/chip/chip-standard.png new file mode 100644 index 0000000000..4ac616d484 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-standard.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-types.png b/packages/storybook-vue/public/assets/3_components/chip/chip-types.png new file mode 100644 index 0000000000..172d5d5e4f Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-types.png differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-de.png b/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-de.png deleted file mode 100644 index 24af640cf6..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-de.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-en.png b/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-en.png deleted file mode 100644 index 4424fa7222..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-en.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/Elements.png b/packages/storybook-vue/public/assets/3_components/data-table/Elements.png new file mode 100644 index 0000000000..def6e448d2 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/data-table-elements.png b/packages/storybook-vue/public/assets/3_components/data-table/data-table-elements.png deleted file mode 100644 index 66819cc91c..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/data-table/data-table-elements.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/data-table-mobile.png b/packages/storybook-vue/public/assets/3_components/data-table/data-table-mobile.png deleted file mode 100644 index 6f209cf32c..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/data-table/data-table-mobile.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-de.png b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-de.png new file mode 100644 index 0000000000..c585e861d0 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-en.png b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-en.png new file mode 100644 index 0000000000..2ece46ee07 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-mobile.png b/packages/storybook-vue/public/assets/3_components/data-table/table-mobile.png new file mode 100644 index 0000000000..7c5dde7289 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-mobile.png differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-single-de.png b/packages/storybook-vue/public/assets/3_components/data-table/table-single-de.png new file mode 100644 index 0000000000..e5edf61084 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-single-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-single-en.png b/packages/storybook-vue/public/assets/3_components/data-table/table-single-en.png new file mode 100644 index 0000000000..2764fc31ac Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-single-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png deleted file mode 100644 index 9d97bc0a20..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png deleted file mode 100644 index 567385ce65..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Elements.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Elements.png new file mode 100644 index 0000000000..65840debf1 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/dropdown-select/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/dropdown-select.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/dropdown-select.png new file mode 100644 index 0000000000..6ba6350466 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/dropdown-select/dropdown-select.png differ diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/Elements.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/Elements.png new file mode 100644 index 0000000000..0d112eb8fb Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/flyout-menu/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu.png deleted file mode 100644 index 1565733ce8..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu_Elements.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu_Elements.png deleted file mode 100644 index da096ab8fd..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu_Elements.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/flyout-menu.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/flyout-menu.png new file mode 100644 index 0000000000..35fe87c812 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/flyout-menu/flyout-menu.png differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Elements.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Elements.png new file mode 100644 index 0000000000..9fbc63facd Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png deleted file mode 100644 index 549fe483d2..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png deleted file mode 100644 index 4c754969e5..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png and /dev/null differ diff --git "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-DE.png" "b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-DE.png" deleted file mode 100644 index 60ba492d46..0000000000 Binary files "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-DE.png" and /dev/null differ diff --git "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-EN.png" "b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-EN.png" deleted file mode 100644 index c22a0e6ad2..0000000000 Binary files "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-EN.png" and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png deleted file mode 100644 index 114df910a9..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png deleted file mode 100644 index 6f133e2e8e..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-spinner-elemente.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-spinner-elemente.png deleted file mode 100644 index 793b6f6811..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-spinner-elemente.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-de.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-de.png new file mode 100644 index 0000000000..488cb51cb4 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-en.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-en.png new file mode 100644 index 0000000000..fa6ed4806e Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-de.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-de.png new file mode 100644 index 0000000000..d4646502f6 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-en.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-en.png new file mode 100644 index 0000000000..5a657bd82c Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-de.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-de.png new file mode 100644 index 0000000000..2f71474eae Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-en.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-en.png new file mode 100644 index 0000000000..05ea7bf876 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/logo/Colors.png b/packages/storybook-vue/public/assets/3_components/logo/Colors.png new file mode 100644 index 0000000000..646fcad899 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/logo/Colors.png differ diff --git a/packages/storybook-vue/public/assets/3_components/logo/Farben-DE.png b/packages/storybook-vue/public/assets/3_components/logo/Farben-DE.png deleted file mode 100644 index 0a75f5f62d..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/logo/Farben-DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/logo/Farben-EN.png b/packages/storybook-vue/public/assets/3_components/logo/Farben-EN.png deleted file mode 100644 index 9df0d0572d..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/logo/Farben-EN.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png b/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png index 8b3c20dac2..339d11a4a1 100644 Binary files a/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png and b/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png b/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png index 53c85cdd05..348e5a467d 100644 Binary files a/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png and b/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/desktop_12columns.png b/packages/storybook-vue/public/assets/3_components/modal/desktop_12columns.png deleted file mode 100644 index 7788d0eb2a..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/modal/desktop_12columns.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/desktop_6columns.png b/packages/storybook-vue/public/assets/3_components/modal/desktop_6columns.png deleted file mode 100644 index a64ca08fbd..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/modal/desktop_6columns.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/desktop_8columns.png b/packages/storybook-vue/public/assets/3_components/modal/desktop_8columns.png deleted file mode 100644 index fd7db3ca9a..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/modal/desktop_8columns.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/modal-large.png b/packages/storybook-vue/public/assets/3_components/modal/modal-large.png new file mode 100644 index 0000000000..4d817aba01 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/modal/modal-large.png differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/modal-medium.png b/packages/storybook-vue/public/assets/3_components/modal/modal-medium.png new file mode 100644 index 0000000000..f9f1360a8e Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/modal/modal-medium.png differ diff --git a/packages/storybook-vue/public/assets/3_components/modal/modal-small.png b/packages/storybook-vue/public/assets/3_components/modal/modal-small.png new file mode 100644 index 0000000000..ae134d0ada Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/modal/modal-small.png differ diff --git a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-de.png b/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-de.png deleted file mode 100644 index 372a423521..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-de.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-en.png b/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-en.png deleted file mode 100644 index 13b2f1ccd7..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-en.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/pagination/Elements.png b/packages/storybook-vue/public/assets/3_components/pagination/Elements.png index a1d4ee11b0..4598dd6d60 100644 Binary files a/packages/storybook-vue/public/assets/3_components/pagination/Elements.png and b/packages/storybook-vue/public/assets/3_components/pagination/Elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-de.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-de.png new file mode 100644 index 0000000000..f08a3fda0b Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-en.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-en.png new file mode 100644 index 0000000000..b8114221d8 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-de.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-de.png new file mode 100644 index 0000000000..eeff1b8229 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-de.png differ diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-en.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-en.png new file mode 100644 index 0000000000..32a86e4619 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-en.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png index 825bcc0cb1..0007e66643 100644 Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png index 9d9cdcd77a..48ced70e45 100644 Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_disabled.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_disabled.png new file mode 100644 index 0000000000..898070a4fd Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_disabled.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png index 8bea09b235..8e520c9564 100644 Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-error.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-error.png new file mode 100644 index 0000000000..b70f63da6e Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-error.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-processing.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-processing.png new file mode 100644 index 0000000000..304192d237 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-processing.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-success.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-success.png new file mode 100644 index 0000000000..9782055ee5 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-success.png differ diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states.png deleted file mode 100644 index 76f13a8916..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider-elements-DE.png deleted file mode 100644 index 5aba2cdb39..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-DE.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider-elements-EN.png deleted file mode 100644 index 5aba2cdb39..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-EN.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-elements.png b/packages/storybook-vue/public/assets/3_components/slider/slider-elements.png new file mode 100644 index 0000000000..57436efc29 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/slider/slider-elements.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-platforms.png b/packages/storybook-vue/public/assets/3_components/slider/slider-platforms.png new file mode 100644 index 0000000000..9455dc0b5e Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/slider/slider-platforms.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png index a59788ae9e..f8257f3b3e 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png index e17a5bd696..7c4fc28938 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png index f0ac2c9fa1..017825f20a 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png index db9374b35a..bfa12f41d5 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png index 80240d8167..447fc7cf72 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png index 9fd1e76cbe..b5455c4073 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png index 597e2fceeb..1a4b6f7686 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png index 998ec266c0..35ea60aca9 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png index 034e5b090d..8581d0fcdd 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png index e928901846..d7d8d2fb9f 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png index a739ce31ad..765891bcde 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png index dbeca3584e..765891bcde 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png index 5e2f9b4957..426e3e824d 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png index 0fce24f038..4adb9a3d8b 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png index bfe3593154..5c50e8b59f 100644 Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png differ diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch.png b/packages/storybook-vue/public/assets/3_components/switch/switch.png index 739d8cce9e..46b1dc24d0 100644 Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch.png and b/packages/storybook-vue/public/assets/3_components/switch/switch.png differ diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_android.png b/packages/storybook-vue/public/assets/3_components/switch/switch_android.png index b72eec79e0..95eebdf83e 100644 Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch_android.png and b/packages/storybook-vue/public/assets/3_components/switch/switch_android.png differ diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_disabled.png b/packages/storybook-vue/public/assets/3_components/switch/switch_disabled.png new file mode 100644 index 0000000000..bae7f1157a Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/switch/switch_disabled.png differ diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_label.png b/packages/storybook-vue/public/assets/3_components/switch/switch_label.png index d6a79d4e60..1b2fb78adf 100644 Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch_label.png and b/packages/storybook-vue/public/assets/3_components/switch/switch_label.png differ diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_large.png b/packages/storybook-vue/public/assets/3_components/switch/switch_large.png index 8774f964dd..7ccebebe9a 100644 Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch_large.png and b/packages/storybook-vue/public/assets/3_components/switch/switch_large.png differ diff --git a/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png b/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png index d0b9392838..72e7265d9f 100644 Binary files a/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png and b/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png differ diff --git a/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png b/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png index 595f1a5270..e9d12ab6b3 100644 Binary files a/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png and b/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/definition_list.png b/packages/storybook-vue/public/assets/3_components/text-list/definition_list.png deleted file mode 100644 index 7203d5f67d..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/text-list/definition_list.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/image-20200807134929248.png b/packages/storybook-vue/public/assets/3_components/text-list/image-20200807134929248.png deleted file mode 100644 index 919b7225a2..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/text-list/image-20200807134929248.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132054388.png b/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132054388.png deleted file mode 100644 index 159225facb..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132054388.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132442835.png b/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132442835.png deleted file mode 100644 index 9f0ac977d9..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132442835.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/ordered_list.png b/packages/storybook-vue/public/assets/3_components/text-list/ordered_list.png deleted file mode 100644 index 0e43bce36c..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/text-list/ordered_list.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-ordered.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-ordered.png new file mode 100644 index 0000000000..5a63d7c09f Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-ordered.png differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-unordered.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-unordered.png new file mode 100644 index 0000000000..43822fd578 Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-unordered.png differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list-general.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list-general.png new file mode 100644 index 0000000000..c1a8d97faf Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/text-list/text-list-general.png differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list_general.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list_general.png deleted file mode 100644 index 40648c7f6c..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/text-list/text-list_general.png and /dev/null differ diff --git a/packages/storybook-vue/public/assets/3_components/text-list/unordered_list.png b/packages/storybook-vue/public/assets/3_components/text-list/unordered_list.png deleted file mode 100644 index 6841f456ec..0000000000 Binary files a/packages/storybook-vue/public/assets/3_components/text-list/unordered_list.png and /dev/null differ diff --git a/packages/storybook-vue/stories/FAQ_de.md b/packages/storybook-vue/stories/FAQ_de.md index fc60921cf9..94a01be903 100644 --- a/packages/storybook-vue/stories/FAQ_de.md +++ b/packages/storybook-vue/stories/FAQ_de.md @@ -42,7 +42,7 @@ Wie du mitmachen kannst, [erfährst du hier](./?path=/story/contact-contributing **Ja.** Unser open-source Designsystem ist derzeit eine Open Beta. Deshalb freuen wir uns über dein Feedback! Und auch darüber, wenn du mit deiner Erfahrung und mit deinen Fähigkeiten und Ideen für neue Komponenten und Funktionen mithilfst, Scale weiter zu verbessern. -Du findest den [Scale Sourcecode auf GitHub.](https://github.com/telekom/scale/) +Du findest den Scale Sourcecode auf GitHub. ## Ich benötige eine Komponente, die noch nicht in Scale verfügbar ist. Was kann ich tun? diff --git a/packages/storybook-vue/stories/FAQ_en.md b/packages/storybook-vue/stories/FAQ_en.md index baa665d436..1397fef80f 100644 --- a/packages/storybook-vue/stories/FAQ_en.md +++ b/packages/storybook-vue/stories/FAQ_en.md @@ -46,7 +46,7 @@ Scale is currently an open beta. It is growing and evolving every day. And the c Our open-source design system is currently an open beta. We are excited to receive your feedback! And we are delighted if you help us improve Scale with your ideas, experience and skills for developing new components and features. -You can find the [Scale Sourcecode on GitHub](https://github.com/telekom/scale/). +You can find the Scale Sourcecode on GitHub ## What if I need a new component? diff --git a/packages/storybook-vue/stories/components/accordion/accordion.md b/packages/storybook-vue/stories/components/accordion/accordion.md index ae7b13392c..6dc4f39840 100644 --- a/packages/storybook-vue/stories/components/accordion/accordion.md +++ b/packages/storybook-vue/stories/components/accordion/accordion.md @@ -27,19 +27,19 @@ Bear in mind that accordions require a great deal of interaction. Don't use an a ## Elements -![Image Name](assets/3_components/accordion/accordion.png) +![Image Name](assets/3_components/accordion/Elements.png) #### Icon (1) The arrow icon indicates whether the panel is open or closed. -#### Title (2) +#### Label (2) Choose a topic title which is as clear and descriptive as possible. Try to keep it short so users can grasp the content quickly. The title and icon are the control for opening the panel. -#### Body text (3) +#### Text Expanded Area (3) You can add a simple body text or also insert headlines, split text into paragraphs, and add images or illustrations. Keep it as simple and clear as possible. diff --git a/packages/storybook-vue/stories/components/accordion/accordion_de.md b/packages/storybook-vue/stories/components/accordion/accordion_de.md index a9d12dd8e5..23cbd7367e 100644 --- a/packages/storybook-vue/stories/components/accordion/accordion_de.md +++ b/packages/storybook-vue/stories/components/accordion/accordion_de.md @@ -25,17 +25,17 @@ Ein Accordion besteht aus einer Liste von Headlines. Per Klick/Tap öffnen bezie ## Elemente -![Image Name](assets/3_components/accordion/accordion.png) +![Image Name](assets/3_components/accordion/Elements.png) #### Icon (1) Das Pfeilsymbol zeigt an, ob ein Inhalt geöffnet oder geschlossen ist. -#### Titel (2) +#### Label (2) Wähle einen kurzen und aussagekräftigen Titel, den die Nutzer\*innen schnell erfassen können. Der Titel und das Icon sind die Steuerelemente zum Öffnen des Inhalts. -#### Text (3) +#### Ausgeklappter Text Inhalt (3) Du kannst sowohl einen einfachen Fließtext als auch Überschriften einfügen, Texte in Absätze einteilen und Bilder oder Illustrationen hinzufügen. Der Text sollte so einfach und verständlich wie möglich sein. diff --git a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md index 76f9ee194c..067241f550 100644 --- a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md +++ b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md @@ -9,7 +9,7 @@ A breadcrumb is a secondary navigation element that provides additional orientat A breadcrumb reflects the information hierarchy of your product or service. The first entry is typically the site's homepage; the last entry is the current page. -![Image Name](assets/3_components/breadcrumb/breadcrumb-general.png) +![Image Name](assets/3_components/breadcrumb/breadcrumb.png) ### When to use @@ -21,7 +21,7 @@ If your product or service has a flat architecture with only one or two levels o ## Elements -![Image Name](assets/3_components/breadcrumb/elements.png) +![Image Name](assets/3_components/breadcrumb/Elements.png) #### Page links (1) diff --git a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md index 1be6072ef2..b5e1644fac 100644 --- a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md +++ b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md @@ -9,7 +9,7 @@ Die Breadcrumb ist ein sekundäres Navigationselement, das zusätzliche Orientie Die Breadcrumb spiegelt die Informationshierarchie des Produkts oder Services wider. Der erste Punkt ist in der Regel die Startseite der Webseite, der letzte Punkt die aktuelle Seite. -![Image Name](assets/3_components/breadcrumb/breadcrumb-general.png) +![Image Name](assets/3_components/breadcrumb/breadcrumb.png) ### Verwende die Breadcrumb @@ -23,7 +23,7 @@ Die Breadcrumb spiegelt die Informationshierarchie des Produkts oder Services wi ## Elemente -![Image Name](assets/3_components/breadcrumb/elements.png) +![Image Name](assets/3_components/breadcrumb/Elements.png) #### Links (1) diff --git a/packages/storybook-vue/stories/components/button/button.md b/packages/storybook-vue/stories/components/button/button.md index ee3b01c5b6..48bfc37602 100644 --- a/packages/storybook-vue/stories/components/button/button.md +++ b/packages/storybook-vue/stories/components/button/button.md @@ -9,7 +9,7 @@ Buttons offer the most important interaction options on the user interface. The We provide two button types to support a clear visual hierarchy. Using icons creates an additional point of emphasis. Select the button type and variant based on the context. -![Image Name](assets/3_components/button/Button_BasicTypes.png) +![Image Name](assets/3_components/button/button.png) ### When to use @@ -35,6 +35,14 @@ The secondary button has less emphasis than the main call to action. Use it for ![Image Name](assets/3_components/button/Button_Secondary.png) +### Secondary White + +![Image Name](assets/3_components/button/button-secondary-white.png) + +### Ghost Button + +![Image Name](assets/3_components/button/button-ghost.png) + ## Variants ### Text only @@ -59,13 +67,13 @@ In certain cases, you can also use an icon without text, for example when space We typically use the large button to ensure a good visual balance between the content and button. In special cases, you might not have enough space, so we also offer a smaller variant. -![Image Name](assets/3_components/button/Button_Sizes.png) +![Image Name](assets/3_components/button/button-sizes.png) ## Disabled state When disabled, the interactive function of the button is removed. Use this state if an interaction is not allowed due to permissions or dependencies. -![Image Name](assets/3_components/button/Button_Disabled.png) +![Image Name](assets/3_components/button/button-disabled.png) > The disabled state is exempt from the WCAG contrast minimum for text colors. You can find more information in the [WCAG guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum). @@ -90,13 +98,13 @@ To learn more about the usage and construction of our interface icons, read our If buttons are directly related to each other, align them as a group. Use only one primary button for each button group. In processes and modal dialogs, buttons are aligned to the right to indicate progress. The button farthest to the right is the primary button; the secondary button is placed on the left. In forms, we align buttons to the left side of the form content. The primary button is placed on the left and the secondary button on the right. -![Image Name](assets/3_components/button/ButtonGroup_Modal.png) +![Image Name](assets/3_components/button/button-best-practice.png) ### Icon & text label Icons make it easier to grasp information when positioned in the right place. Following the direction of reading, we place icons to the left of the text label. However, there is one exception: a Next button with an arrow. In this case, we place the icon on the right side to help people process the information intuitively. -![Image Name](assets/3_components/button/Button_Icon_position.png) +![Image Name](assets/3_components/button/button-best-practice2.png) ## Related components diff --git a/packages/storybook-vue/stories/components/button/button_de.md b/packages/storybook-vue/stories/components/button/button_de.md index 83cd3298b2..b07494a938 100644 --- a/packages/storybook-vue/stories/components/button/button_de.md +++ b/packages/storybook-vue/stories/components/button/button_de.md @@ -9,7 +9,7 @@ Der Button ist das wichtigste Interaktionselement eines User Interfaces. Per Kli Es gibt zwei Basistypen und drei Varianten, um eine klare visuelle Hierarchie herzustellen. Mit der Verwendung eines passenden Icons kannst du die Funktion eines Buttons zusätzlich verdeutlichen. Wähle Button-Typ und -Variante passend für den jeweiligen Kontext aus. -![Image Name](assets/3_components/button/Button_BasicTypes.png) +![Image Name](assets/3_components/button/button.png) ### Verwende einen Button, wenn @@ -38,6 +38,14 @@ Der Sekundär-Button ist weniger auffällig. Nutze ihn für alle weiteren Aktion ![Image Name](assets/3_components/button/Button_Secondary.png) +### Sekundär-Button Weiß + +![Image Name](assets/3_components/button/button-secondary-white.png) + +### Ghost Button + +![Image Name](assets/3_components/button/button-ghost.png) + ## Varianten ### Button mit Text @@ -62,13 +70,13 @@ In manchen Fällen kannst du auch ein Icon ohne Text verwenden. Das ist zum Beis Nutze den großen Button, um eine gute visuelle Balance zwischen Inhalt und Button zu erreichen. Wenn nur wenig Platz zur Verfügung steht, kannst du die kleinere Variante verwenden. -![Image Name](assets/3_components/button/Button_Sizes.png) +![Image Name](assets/3_components/button/button-sizes.png) ## Deaktivierter Zustand Im deaktivierten Zustand ist die interaktive Funktion des Buttons ausgeschaltet. Verwende diesen Zustand, wenn eine Interaktion aufgrund von Berechtigungen oder Abhängigkeiten nicht erfolgen kann. -![Image Name](assets/3_components/button/Button_Disabled.png) +![Image Name](assets/3_components/button/button-disabled.png) > Der deaktivierte Zustand (Disabled State) ist vom Kontrastminimum der WCAG für Textfarben ausgenommen. Weitere Informationen hierzu findest du in den [Richtlinien der WCAG](https://www.w3.org/TR/WCAG21/#contrast-minimum). @@ -94,13 +102,13 @@ Stehen Buttons in direkter Beziehung zueinander, dann ordne sie als Gruppe an. W In Prozessen und modalen Dialogen sind Buttons rechtsbündig angeordnet, um den Fortschritt anzuzeigen. Platziere den Primär-Button rechts und den Sekundär-Button links. Bei Formularen sind Buttons linksbündig am Inhalt ausgerichtet. Hier setzt du den Primär-Button links und den Sekundär-Button rechts. -![Image Name](assets/3_components/button/ButtonGroup_Modal.png) +![Image Name](assets/3_components/button/button-best-practice.png) ### Anordnung von Icon und Label Icons erleichtern das Erfassen von Informationen, wenn sie an der richtigen Stelle positioniert sind. Der Leserichtung folgend setzen wir Icons demnach links neben dem Label ein. Es gibt eine Ausnahme: Der Weiter-Button mit einem Pfeil. In diesem Fall positionierst du das Icon rechts, um das intuitive Erfassen der Information zu erleichtern. -![Image Name](assets/3_components/button/Button_Icon_position.png) +![Image Name](assets/3_components/button/button-best-practice2.png) ## Verwandte Komponenten diff --git a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md index 954176a0f7..51e96d27e5 100644 --- a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md +++ b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md @@ -9,7 +9,7 @@ A checkbox group combines checkboxes with related selection options to form a gr Clicking on the parent checkbox activates or deactivates a checkbox group. By grouping the content of checkboxes and describing the group, you can present contextual relationships to users more quickly. Interfaces with many options appear smoother and tidier overall. -![Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group.png) +![Checkbox Group](assets/3_components/checkbox-group/checkbox-group.png) ### When to use @@ -26,7 +26,7 @@ Don't use a checkbox group when: ## Elements -![Elements of Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group_Elements.png) +![Elements of Checkbox Group](assets/3_components/checkbox-group/Elements.png) #### Parent checkbox (indeterminate state) (1) @@ -56,18 +56,18 @@ If a mandatory option isn't activated (e.g., when it's required to carry out the If an error message affects the entire group, place it below the group label. -## Deactivated state +## Disabled state -A checkbox group or an individual checkbox is deactivated if: +A checkbox group or an individual checkbox is disabled if: - users have to take another action before using the checkbox or - the option must be listed but users can't currently select it. -The deactivated state of the entire group occurs automatically when all individual checkboxes are deactivated. +The disabled state of the entire group occurs automatically when all individual checkboxes are disabled. -![A deactivated checkbox group](assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png) +![A disabled checkbox group](assets/3_components/checkbox-group/checkbox-group-disabled-en.png) -![A deactivated checkbox](assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png) +![A disabled checkbox](assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png) > The disabled state is exempt from the WCAG contrast minimum for text colors. You can find more information in the [WCAG guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum). diff --git a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md index 1683b18248..0c1947bf04 100644 --- a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md +++ b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md @@ -9,7 +9,7 @@ Eine Checkbox Group fasst Checkboxen mit verwandten Auswahloptionen zu einer Gru Checkbox-Gruppen lassen sich mit einem Klick auf die übergeordnete Checkbox aktivieren oder deaktivieren. Durch die inhaltliche Gruppierung von Checkboxen und die Beschreibung der Gruppe erfassen Nutzer\*innen inhaltliche Zusammenhänge schneller. Interfaces mit vielen Auswahloptionen wirken insgesamt ruhiger und aufgeräumter. -![Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group.png) +![Checkbox Group](assets/3_components/checkbox-group/checkbox-group.png) ### Verwende eine Checkbox Group, wenn @@ -22,7 +22,7 @@ Checkbox-Gruppen lassen sich mit einem Klick auf die übergeordnete Checkbox akt ## Elemente -![Elements of Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group_Elements.png) +![Elements of Checkbox Group](assets/3_components/checkbox-group/Elements.png) #### Übergeordnete Checkbox (unbestimmter Zustand) (1) @@ -61,9 +61,9 @@ Eine Checkbox-Gruppe oder eine einzelne Checkbox ist deaktiviert, wenn Dabei ergibt sich der deaktivierte Zustand der gesamten Gruppe automatisch, wenn alle einzelnen Checkboxen deaktiviert sind. -![Eine deaktivierte Checkbox-Gruppe](assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png) +![Eine deaktivierte Checkbox-Gruppe](assets/3_components/checkbox-group/checkbox-group-disabled-de.png) -![Eine deaktivierte Checkbox](assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png) +![Eine deaktivierte Checkbox](assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png) > Der deaktivierte Zustand (Disabled State) ist vom Kontrastminimum der WCAG für Textfarben ausgenommen. Weitere Informationen hierzu findest du in den [Richtlinien der WCAG](https://www.w3.org/TR/WCAG21/#contrast-minimum). diff --git a/packages/storybook-vue/stories/components/chip/chip.md b/packages/storybook-vue/stories/components/chip/chip.md index fe45da91ee..1d041e6cfd 100644 --- a/packages/storybook-vue/stories/components/chip/chip.md +++ b/packages/storybook-vue/stories/components/chip/chip.md @@ -26,18 +26,18 @@ Don’t use chips when: ## Basic types -![Image Name](assets/3_components/chip/Chips-Types.png) +![Image Name](assets/3_components/chip/chip-types.png) ### Persistent chips Persistent chips are an integral part of the UI and can be selected and deselected. -![Image Name](assets/3_components/chip/Chips-Persistent-Default.png) +![Image Name](assets/3_components/chip/chip-persistent-default.png) **Example 1 – Default**
A group of filter options as an integral part of the UI. -![Image Name](assets/3_components/chip/Chips-Persistent-Selected.png) +![Image Name](assets/3_components/chip/chip-persistent-selected.png) **Example 1 – Filter selected**
Users can recognize selected filters with the checkmark icon. @@ -46,31 +46,31 @@ Users can recognize selected filters with the checkmark icon. Dynamic chips fade in or out after a user action. -![Image Name](assets/3_components/chip/Chips-Dynamic-Example1.png) +![Image Name](assets/3_components/chip/chip-dynamic.png) **Example 1**
The chip appears after users set a filter. Clicking/tapping on the close icon hides it again and resets the filter. -![Image Name](assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png) +![Image Name](assets/3_components/chip/chip-dynamic-chatbot.png) **Example 2**
A set of possible responses in a chat. After clicking/tapping on the chip, it fades out again. ## Variants -![Image Name](assets/3_components/chip/Standard_Chip.png) +![Image Name](assets/3_components/chip/chip-standard.png) Chips can be displayed in two variants: standard and outline. ### Disabled state -![Image Name](assets/3_components/chip/chips-disabled-en.png) +![Image Name](assets/3_components/chip/chip-disabled-en.png) In the disabled state, the chip's interactive function is switched off. Use this state when an interaction can’t occur due to permissions or dependencies. ### Element -![Image Name](assets/3_components/chip/Chips-elements.png) +![Image Name](assets/3_components/chip/Elements.png) #### Label (1) diff --git a/packages/storybook-vue/stories/components/chip/chip_de.md b/packages/storybook-vue/stories/components/chip/chip_de.md index 882f01c388..54189fea4f 100644 --- a/packages/storybook-vue/stories/components/chip/chip_de.md +++ b/packages/storybook-vue/stories/components/chip/chip_de.md @@ -22,18 +22,18 @@ Chips bestehen aus relevanten Schlüsselwörtern in einem Container. Sie erschei ## Basistypen -![Image Name](assets/3_components/chip/Chips-Types.png) +![Image Name](assets/3_components/chip/chip-types.png) ### Persistente Chips Persistente Chips sind fester Bestandteil des UIs und lassen sich aus- und abwählen. -![Image Name](assets/3_components/chip/Chips-Persistent-Default.png) +![Image Name](assets/3_components/chip/chip-persistent-default.png) **Beispiel 1 – Default**
Eine Gruppe von Filtermöglichkeiten als fester Bestandteil des UI -![Image Name](assets/3_components/chip/Chips-Persistent-Selected.png) +![Image Name](assets/3_components/chip/chip-persistent-selected.png) **Beispiel 2 - Filter ausgewählt**
Ausgewählte Filter erkennen Nutzer\*innen am Checkmark Icon. @@ -42,31 +42,31 @@ Ausgewählte Filter erkennen Nutzer\*innen am Checkmark Icon. Dynamische Chips blenden sich nach einer Aktion der Nutzer\*innen ein oder aus. -![Image Name](assets/3_components/chip/Chips-Dynamic-Example1.png) +![Image Name](assets/3_components/chip/chip-dynamic.png) **Beispiel 1**
Der Chip blendet sich ein, nachdem Nutzer\*innen einen Filter gesetzt haben. Per Klick/Tap auf das Schließen-Icon blendet er sich wieder aus und der Filter ist zurückgesetzt. -![Image Name](assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png) +![Image Name](assets/3_components/chip/chip-dynamic-chatbot.png) **Beispiel 2**
Eine Gruppe von Antwortmöglichkeiten in einem Chat. Nach Klick/Tap auf den Chip blendet er sich wieder aus. ## Varianten -![Image Name](assets/3_components/chip/Standard_Chip.png) +![Image Name](assets/3_components/chip/chip-standard.png) Chips lassen sich in zwei Varianten darstellen: Standard und Outline. ### Deaktivierter Zustand -![Image Name](assets/3_components/chip/chips-disabled-de.png) +![Image Name](assets/3_components/chip/chip-disabled-de.png) Im deaktivierten Zustand ist die interaktive Funktion des Chips ausgeschaltet. Verwende diesen Zustand, wenn eine Interaktion aufgrund von Berechtigungen oder Abhängigkeiten nicht möglich ist. ### Elemente -![Image Name](assets/3_components/chip/Chips-elements.png) +![Image Name](assets/3_components/chip/Elements.png) #### Label (1) diff --git a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md index 08f112efe0..fb39f78814 100644 --- a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md +++ b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md @@ -9,7 +9,7 @@ With a dropdown, users select a single option from a collapsible list of availab The dropdown temporarily displays a selection list. Thus, the dropdown helps save space when there are multiple options to choose from. -![Image Name](assets/3_components/dropdown-select/Dropdown_select.png) +![Image Name](assets/3_components/dropdown-select/dropdown-select.png) ### When to use @@ -30,7 +30,7 @@ Don’t use dropdowns, when users: ## Elements -![Image Name](assets/3_components/dropdown-select/Dropdown_select_elements.png) +![Image Name](assets/3_components/dropdown-select/Elements.png) ### Label (1) diff --git a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md index 14abbbb7b3..a5f78002f1 100644 --- a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md +++ b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md @@ -9,7 +9,7 @@ Mit einem Dropdown wählen Nutzer\*innen eine Option aus einer Liste aus. Die Auswahlliste des Dropdowns wird temporär angezeigt. Das macht ein Dropdown zu einer platzsparenden Lösung, wenn viele Optionen zur Auswahl stehen. -![Image Name](assets/3_components/dropdown-select/Dropdown_select.png) +![Image Name](assets/3_components/dropdown-select/dropdown-select.png) ### Verwende ein Dropdown, wenn @@ -26,7 +26,7 @@ Die Auswahlliste des Dropdowns wird temporär angezeigt. Das macht ein Dropdown ## Elemente -![Image Name](assets/3_components/dropdown-select/Dropdown_select_elements.png) +![Image Name](assets/3_components/dropdown-select/Elements.png) ### Label (1) diff --git a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md index 045665dbb9..b117360f18 100644 --- a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md +++ b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md @@ -9,7 +9,7 @@ Flyout menus can appear temporarily. This gives users access to a range of funct Clicking/tapping a button opens the flyout menu. It can contain different elements. -![Flyout Menu](assets/3_components/flyout-menu/Flyout_Menu.png) +![Flyout Menu](assets/3_components/flyout-menu/flyout-menu.png) ### When to use @@ -26,7 +26,7 @@ Don't use a flyout menu for: ## Elements -![Elements of Flyout Menu](assets/3_components/flyout-menu/Flyout_Menu_Elements.png) +![Elements of Flyout Menu](assets/3_components/flyout-menu/Elements.png) #### Trigger (1) diff --git a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md index 6f54d35a8b..26eeb0d0b2 100644 --- a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md +++ b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md @@ -9,7 +9,7 @@ Flyout Menus lassen sich temporär einblenden. Nutzer\*innen können so auf eine Das Flyout Menu öffnet sich per Klick/Tap auf einen Button. Es kann unterschiedliche Elemente enthalten. -![Flyout Menu](assets/3_components/flyout-menu/Flyout_Menu.png) +![Flyout Menu](assets/3_components/flyout-menu/flyout-menu.png) ### Nutze das Flyout Menu, um @@ -22,7 +22,7 @@ Das Flyout Menu öffnet sich per Klick/Tap auf einen Button. Es kann unterschied ## Elemente -![Elements des Flyout Menus](assets/3_components/flyout-menu/Flyout_Menu_Elements.png) +![Elements des Flyout Menus](assets/3_components/flyout-menu/Elements.png) #### Trigger (1) diff --git a/packages/storybook-vue/stories/components/list/list.md b/packages/storybook-vue/stories/components/list/list.md index b1b102bffe..6e58f3faae 100644 --- a/packages/storybook-vue/stories/components/list/list.md +++ b/packages/storybook-vue/stories/components/list/list.md @@ -9,7 +9,7 @@ A list arranges related pieces of information in a vertical group. This makes it You can choose between an ordered, unordered, or definition list. -![Image Name](assets/3_components/text-list/text-list_general.png) +![Image Name](assets/3_components/text-list/text-list-general.png) ### When to use @@ -30,21 +30,13 @@ Emotionally charged content is not suitable to present as a list. You can convey a specific hierarchy by using an ordered list. The list items follow a series. Indent items to display subordinate information. -![Image Name](assets/3_components/text-list/ordered_list.png) +![Image Name](assets/3_components/text-list/text-list-detail-ordered.png) ### Unordered list The items of an unordered list have equal status. The list will not convey a specific order. Nevertheless, you should organize the items in a logical way that users can easily understand (e.g., alphabetically or chronologically). Even if there is no specific order, you can display different levels of hierarchy by indenting. -![Image Name](assets/3_components/text-list/unordered_list.png) - -### Definition list - -> Available soon - -A definition list consists of terms and their definition. - -![Image Name](assets/3_components/text-list/definition_list.png) +![Image Name](assets/3_components/text-list/text-list-detail-unordered.png) ## Related components diff --git a/packages/storybook-vue/stories/components/list/list_de.md b/packages/storybook-vue/stories/components/list/list_de.md index 4adf95631e..39273f176a 100644 --- a/packages/storybook-vue/stories/components/list/list_de.md +++ b/packages/storybook-vue/stories/components/list/list_de.md @@ -9,7 +9,7 @@ Eine Liste gliedert zusammengehörige Inhalte in einer vertikalen Struktur. Sie Es gibt drei Arten von Listen: sortierte Listen, Aufzählungslisten und Definitionslisten. -![Image Name](assets/3_components/text-list/text-list_general.png) +![Image Name](assets/3_components/text-list/text-list-general.png) ### Nutze eine Liste, um @@ -28,21 +28,13 @@ Es gibt drei Arten von Listen: sortierte Listen, Aufzählungslisten und Definiti Die Liste mit Nummerierung eignet sich vor allem für Schritt-für-Schritt-Anleitungen und aufeinanderfolgende Inhalte. Du kannst Unterpunkte einfügen, die eingerückt unter den Hauptpunkten dargestellt werden. -![Image Name](assets/3_components/text-list/ordered_list.png) +![Image Name](assets/3_components/text-list/text-list-detail-ordered.png) ### Aufzählungsliste Die Elemente dieser Liste sind gleichrangig. Die Liste gibt also keine Reihenfolge vor. Dennoch solltest du die Einträge in einer logischen, für Nutzer\*innen leicht verständlichen Weise organisieren (zum Beispiel alphabetisch oder chronologisch). Auch wenn es keine bestimmte Reihenfolge gibt, kannst du durch Einrücken Hierarchieebenen darstellen. -![Image Name](assets/3_components/text-list/unordered_list.png) - -### Definitionsliste - -> Diese Funktion ist bald verfügbar. - -Diese Liste beinhaltet Begriffe und darunter die jeweilige Definition. - -![Image Name](assets/3_components/text-list/definition_list.png) +![Image Name](assets/3_components/text-list/text-list-detail-unordered.png) ## Verwandte Komponenten diff --git a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md index 52bc39f8bf..645040557b 100644 --- a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md +++ b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md @@ -24,11 +24,11 @@ Don't use a loading spinner if: Scale contains a spinner with a horizontal alignment and a vertical alignment. -![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png) +![Image Name](assets/3_components/loading-spinner/loading-spinner-variants-en.png) ## Elements -![Image Name](assets/3_components/loading-spinner/Loading-spinner-elemente.png) +![Image Name](assets/3_components/loading-spinner/Elements.png) #### Loading symbol (1) @@ -42,13 +42,13 @@ The description gives users a quick status of the background process. Use the white spinner on dark backgrounds. -![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png) +![Image Name](assets/3_components/loading-spinner/loading-spinner-colors-en.png) ## Sizes If there isn't much space (e.g., if you use the spinner within a component), choose the small size. -![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Groeßen-EN.png) +![Image Name](assets/3_components/loading-spinner/loading-spinner-sizes-en.png) ## Related components diff --git a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md index 21ae430c10..1d6cda9adc 100644 --- a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md +++ b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md @@ -22,11 +22,11 @@ Ein Loading Spinner ist ein kreisförmiges Symbol, das sich in Dauerschleife dre Scale enthält einen horizontal und einen vertikal ausgerichteten Spinner. -![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png) +![Image Name](assets/3_components/loading-spinner/loading-spinner-variants-de.png) ## Elemente -![Image Name](assets/3_components/loading-spinner/Loading-spinner-elemente.png) +![Image Name](assets/3_components/loading-spinner/Elements.png) #### Loading-Symbol (1) @@ -40,13 +40,13 @@ Die Beschreibung gibt Nutzer\*innen ein kurzes Feedback über den Hintergrundpro Auf dunklen Hintergründen setze den weißen Spinner ein. -![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png) +![Image Name](assets/3_components/loading-spinner/loading-spinner-colors-de.png) ## Größen Bei wenig Raum, bspw. wenn du den Spinner innerhalb einer Komponente einsetzt, wähle die kleine Größe. -![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Groeßen-DE.png) +![Image Name](assets/3_components/loading-spinner/loading-spinner-sizes-de.png) ## Verwandte Komponenten diff --git a/packages/storybook-vue/stories/components/logo/logo.md b/packages/storybook-vue/stories/components/logo/logo.md index 83d74b39d8..ed9ef6d8fc 100644 --- a/packages/storybook-vue/stories/components/logo/logo.md +++ b/packages/storybook-vue/stories/components/logo/logo.md @@ -12,7 +12,7 @@ Only use the logo for the brand header and footer. ## Colors -![Image Name](assets/3_components/logo/Farben-EN.png) +![Image Name](assets/3_components/logo/Colors.png) ## Related components diff --git a/packages/storybook-vue/stories/components/logo/logo_de.md b/packages/storybook-vue/stories/components/logo/logo_de.md index 124ef42ecd..25e9a33314 100644 --- a/packages/storybook-vue/stories/components/logo/logo_de.md +++ b/packages/storybook-vue/stories/components/logo/logo_de.md @@ -12,7 +12,7 @@ Verwende das Logo ausschließlich für den Brand-Header und Footer. ## Farben -![Image Name](assets/3_components/logo/Farben-DE.png) +![Image Name](assets/3_components/logo/Colors.png) ## Verwandte Komponenten diff --git a/packages/storybook-vue/stories/components/modal/modal.md b/packages/storybook-vue/stories/components/modal/modal.md index 8ea984eef6..469ce84e13 100644 --- a/packages/storybook-vue/stories/components/modal/modal.md +++ b/packages/storybook-vue/stories/components/modal/modal.md @@ -58,9 +58,9 @@ To frame the scrollable area, an overlay highlights the action bar. A divider ap For desktops, modals come in sizes S, L, or XL and span 6, 8, or 12 columns, respectively. Select the modal size that best fits the amount of content for your use case. -![Image Name](assets/3_components/modal/desktop_12columns.png) -![Image Name](assets/3_components/modal/desktop_8columns.png) -![Image Name](assets/3_components/modal/desktop_6columns.png) +![Image Name](assets/3_components/modal/modal-large.png) +![Image Name](assets/3_components/modal/modal-medium.png) +![Image Name](assets/3_components/modal/modal-small.png) ### Mobile diff --git a/packages/storybook-vue/stories/components/modal/modal_de.md b/packages/storybook-vue/stories/components/modal/modal_de.md index c55eae90cc..6cd559ed79 100644 --- a/packages/storybook-vue/stories/components/modal/modal_de.md +++ b/packages/storybook-vue/stories/components/modal/modal_de.md @@ -54,9 +54,9 @@ Ein Overlay grenzt den Aktionsbereich vom scrollbaren Bereich ab. Unter dem Tite Für Desktop-Anwendungen stehen modale Dialoge in den Größen S, L oder XL zur Verfügung. Sie umfassen jeweils 6, 8 oder 12 Spalten. Wähle die Größe, die am besten zur Menge des Inhalts und den jeweiligen Anwendungsfall passt. -![Image Name](assets/3_components/modal/desktop_12columns.png) -![Image Name](assets/3_components/modal/desktop_8columns.png) -![Image Name](assets/3_components/modal/desktop_6columns.png) +![Image Name](assets/3_components/modal/modal-large.png) +![Image Name](assets/3_components/modal/modal-medium.png) +![Image Name](assets/3_components/modal/modal-small.png) ### Mobil diff --git a/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx b/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx index 259598b831..53e5a7e369 100644 --- a/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx +++ b/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx @@ -150,8 +150,6 @@ export const TemplateEmbedded = (args, { argTypes }) => ({ Accessible AA -### Properties - ## Standard diff --git a/packages/storybook-vue/stories/components/pagination/pagination.md b/packages/storybook-vue/stories/components/pagination/pagination.md index 58e7836686..1c4d7e1ced 100644 --- a/packages/storybook-vue/stories/components/pagination/pagination.md +++ b/packages/storybook-vue/stories/components/pagination/pagination.md @@ -23,7 +23,9 @@ The default number displayed will vary depending on the context. ## Variants -![Image Name](assets/3_components/pagination/Basic-types-en.png) +![Image Name](assets/3_components/pagination/pagination-en.png) + +![Image Name](assets/3_components/pagination/pagination-mobile-en.png) ## Elements diff --git a/packages/storybook-vue/stories/components/pagination/pagination_de.md b/packages/storybook-vue/stories/components/pagination/pagination_de.md index 5836aeb9d1..81d420af77 100644 --- a/packages/storybook-vue/stories/components/pagination/pagination_de.md +++ b/packages/storybook-vue/stories/components/pagination/pagination_de.md @@ -21,7 +21,9 @@ Die Paginierung ist ein interaktives Element, mit dem Nutzer\*innen durch mehrer ## Varianten -![Image Name](assets/3_components/pagination/Basic-types-de.png) +![Image Name](assets/3_components/pagination/pagination-de.png) + +![Image Name](assets/3_components/pagination/pagination-mobile-de.png) ## Elemente diff --git a/packages/storybook-vue/stories/components/progress-bar/progress-bar.md b/packages/storybook-vue/stories/components/progress-bar/progress-bar.md index e1e40cf9fd..f65db4c634 100644 --- a/packages/storybook-vue/stories/components/progress-bar/progress-bar.md +++ b/packages/storybook-vue/stories/components/progress-bar/progress-bar.md @@ -49,8 +49,16 @@ Show a description whenever you can. It gives more information about the ongoing Telekom progress bars use Magenta as an accent color. If you need to use a different color for a particular reason, you can either use colors from the Telekom color palette or create a custom one. When customizing, use a color-code scheme that is clear to the user and meets all accessibility requirements. -![Image Name](assets/3_components/progress-bar/pb-in-custom-color.png) + ### Progress states -![Image Name](assets/3_components/progress-bar/pb_states.png) +![Image Name](assets/3_components/progress-bar/pb_states-processing.png) + +![Image Name](assets/3_components/progress-bar/pb_states-success.png) + +![Image Name](assets/3_components/progress-bar/pb_states-error.png) + +## Disabled state + +![Image Name](assets/3_components/progress-bar/pb_disabled.png) diff --git a/packages/storybook-vue/stories/components/progress-bar/progress-bar_de.md b/packages/storybook-vue/stories/components/progress-bar/progress-bar_de.md index a7e1a6a8ef..618e0b5de5 100644 --- a/packages/storybook-vue/stories/components/progress-bar/progress-bar_de.md +++ b/packages/storybook-vue/stories/components/progress-bar/progress-bar_de.md @@ -49,8 +49,16 @@ Gib, wenn möglich, immer eine Beschreibung an, die den Nutzer\*innen weitere In Nutze bei Telekom Progress-Bars Magenta als Akzentfarbe. Wenn du aus einem bestimmten Grund eine andere Farbe verwenden möchtest, kannst du entweder die Farben aus der Telekom Farbpalette nutzen oder eine eigene Farbe auswählen. Bitte achte in diesem Fall darauf, dass das Farbschema für die Nutzer\*innen verständlich ist und alle Anforderungen der Barrierefreiheit erfüllt. -![Image Name](assets/3_components/progress-bar/pb-in-custom-color.png) + ### Fortschritt-Status -![Image Name](assets/3_components/progress-bar/pb_states.png) +![Image Name](assets/3_components/progress-bar/pb_states-processing.png) + +![Image Name](assets/3_components/progress-bar/pb_states-success.png) + +![Image Name](assets/3_components/progress-bar/pb_states-error.png) + +## Deaktivierter Zustand + +![Image Name](assets/3_components/progress-bar/pb_disabled.png) diff --git a/packages/storybook-vue/stories/components/rating-stars/rating-stars.md b/packages/storybook-vue/stories/components/rating-stars/rating-stars.md index 8eed45d8bf..f43986f6f0 100644 --- a/packages/storybook-vue/stories/components/rating-stars/rating-stars.md +++ b/packages/storybook-vue/stories/components/rating-stars/rating-stars.md @@ -26,7 +26,7 @@ Don't use rating stars if: - the amount of products/content is quite small and - you don't have a significant number of users. -## Types +## Basic Type Rating stars can be interactive or static. Only use one of the two types within a product or service. diff --git a/packages/storybook-vue/stories/components/rating-stars/rating-stars_de.md b/packages/storybook-vue/stories/components/rating-stars/rating-stars_de.md index 114ca3b150..6284602ce2 100644 --- a/packages/storybook-vue/stories/components/rating-stars/rating-stars_de.md +++ b/packages/storybook-vue/stories/components/rating-stars/rating-stars_de.md @@ -22,7 +22,7 @@ Rating Stars sind ein kundenorientiertes, sehr visuelles Bewertungssystem, mit d - die Menge der Produkte/Inhalte eher gering ist und - du nicht ausreichend viele Nutzer\*innen hast. -## Typen +## Basistypen Rating Stars können interaktiv oder statisch sein. Setze nur einen der beiden Typen innerhalb eines Produkts oder Services ein. diff --git a/packages/storybook-vue/stories/components/slider/slider.md b/packages/storybook-vue/stories/components/slider/slider.md index 26d06d7161..52c3b72d3c 100644 --- a/packages/storybook-vue/stories/components/slider/slider.md +++ b/packages/storybook-vue/stories/components/slider/slider.md @@ -87,7 +87,7 @@ When disabled, remove the knobs to show that the value can’t be changed. ## Elements -![slider-elements-EN.png](assets/3_components/slider/slider-elements-EN.png) +![slider-elements-EN.png](assets/3_components/slider/slider-elements.png) #### Label (1) @@ -109,6 +109,10 @@ Knob 2 indicates the end point of the range the user wants to select. Display error or informational messages here. +## Platforms + +![slider-platforms.png](assets/3_components/slider/slider-platforms.png) + ## Related components Text Field diff --git a/packages/storybook-vue/stories/components/slider/slider_de.md b/packages/storybook-vue/stories/components/slider/slider_de.md index 49fbc541d7..a46746e225 100644 --- a/packages/storybook-vue/stories/components/slider/slider_de.md +++ b/packages/storybook-vue/stories/components/slider/slider_de.md @@ -83,7 +83,7 @@ Wenn der Slider deaktiviert ist, werden die Regler entfernt, um anzuzeigen, dass ## Elemente -![slider-elements-DE.png](assets/3_components/slider/slider-elements-DE.png) +![slider-elements-DE.png](assets/3_components/slider/slider-elements.png) #### Label (1) @@ -105,6 +105,10 @@ Regler 2 zeigt den Endpunkt des Wertebereichs an. Hier werden Fehler und Hinweise angezeigt. +## Plattformen + +![slider-platforms.png](assets/3_components/slider/slider-platforms.png) + ## Verwandte Komponenten Text-Field diff --git a/packages/storybook-vue/stories/components/switch/switch.md b/packages/storybook-vue/stories/components/switch/switch.md index 13d8dfe60c..abad4f33a4 100644 --- a/packages/storybook-vue/stories/components/switch/switch.md +++ b/packages/storybook-vue/stories/components/switch/switch.md @@ -56,6 +56,10 @@ Clearly label the switch and keep it short. For some use cases, a single noun pr ![Image Name](assets/3_components/switch/switch_label.png) +## Disabled + +![Image Name](assets/3_components/switch/switch_disabled.png) + ## Related components [Checkbox, ](?path=/usage/components-checkbox--standard) diff --git a/packages/storybook-vue/stories/components/switch/switch_de.md b/packages/storybook-vue/stories/components/switch/switch_de.md index 6d8eb1f768..15e6713d94 100644 --- a/packages/storybook-vue/stories/components/switch/switch_de.md +++ b/packages/storybook-vue/stories/components/switch/switch_de.md @@ -54,6 +54,10 @@ Das Label des Switch sollte kurz und verständlich sein. Für einige Fälle eign ![Image Name](assets/3_components/switch/switch_label.png) +## Deaktivierter Zustand + +![Image Name](assets/3_components/switch/switch_disabled.png) + ## Verwandte Komponenten [Checkbox, ](?path=/usage/components-checkbox--standard) diff --git a/packages/storybook-vue/stories/components/table/table.md b/packages/storybook-vue/stories/components/table/table.md index e7e5025b85..f7f1e1d406 100644 --- a/packages/storybook-vue/stories/components/table/table.md +++ b/packages/storybook-vue/stories/components/table/table.md @@ -24,7 +24,7 @@ Don't use a table when: ## Elements -![Image Name](assets/3_components/data-table/data-table-elements.png) +![Image Name](assets/3_components/data-table/Elements.png) #### Column header (1) @@ -43,11 +43,19 @@ A mouse over highlights the rows to make them more readable. The dividing line separates the table rows from one another. +## Row backgrounds + +You can use alternating backgrounds to make the content more readable. + +![Image Name](assets/3_components/data-table/table-single-en.png) + +![Image Name](assets/3_components/data-table/table-alternating-en.png) + ## Mobile The table structure and display are the same for both mobile and desktops. To see the entire table, the user can swipe horizontally. -![Image Name](assets/3_components/data-table/data-table-mobile.png) +![Image Name](assets/3_components/data-table/table-mobile.png) ## Best practices diff --git a/packages/storybook-vue/stories/components/table/table_de.md b/packages/storybook-vue/stories/components/table/table_de.md index fcb21e4598..93d7a264f0 100644 --- a/packages/storybook-vue/stories/components/table/table_de.md +++ b/packages/storybook-vue/stories/components/table/table_de.md @@ -20,7 +20,7 @@ Eine Tabelle organisiert Daten in Zeilen und Spalten. Zusätzliche Funktionen wi ## Elemente -![Image Name](assets/3_components/data-table/data-table-elements.png) +![Image Name](assets/3_components/data-table/Elements.png) #### Spalten-Header (1) @@ -40,11 +40,17 @@ Für eine Unterstützung der Lesbarkeit können die Zeilen bei Mouseover hervorg Eine Trennlinie trennt die Tabellenzeilen voneinander. +## Zeilenhintergründe + +![Image Name](assets/3_components/data-table/table-single-de.png) + +![Image Name](assets/3_components/data-table/table-alternating-de.png) + ## Mobil Die Tabellenstruktur und -darstellung auf mobilen Geräten entspricht der Darstellung auf Desktop-Geräten. Um die gesamte Tabelle zu sehen, können Nutzer\*innen horizontal swipen. -![Image Name](assets/3_components/data-table/data-table-mobile.png) +![Image Name](assets/3_components/data-table/table-mobile.png) ## Best Practices diff --git a/packages/storybook-vue/stories/components/telekom-footer/telekom-footer.md b/packages/storybook-vue/stories/components/telekom-footer/telekom-footer.md index d1a1436d62..7872074f93 100644 --- a/packages/storybook-vue/stories/components/telekom-footer/telekom-footer.md +++ b/packages/storybook-vue/stories/components/telekom-footer/telekom-footer.md @@ -9,7 +9,7 @@ The footer finishes off all Telekom websites. Users can find important informati Scale offers different variations of the footer. Links to the legal notice and data protection information, as well as the acknowledgement of Deutsche Telekom as the content provider, are required for all variations. -## Basic Types +## Variant Depending on the scope and orientation of your product, decide on a variation of the Telekom footer: minimal, standard, or extended. diff --git a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_de.md b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_de.md index 490f0d2916..4ba48ece57 100644 --- a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_de.md +++ b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_de.md @@ -72,4 +72,4 @@ defineCustomElementScaleButton(); ## Quellcode auf GitHub -Hier findest du [Telekom Scale auf GitHub](https://github.com/telekom/scale/). +Hier findest du Telekom Scale auf GitHub diff --git a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md index e420e7ce3d..446585c521 100644 --- a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md +++ b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md @@ -74,4 +74,4 @@ defineCustomElementScaleButton(); ## Source Code on GitHub -Here you find [Telekom Scale on GitHub](https://github.com/telekom/scale/). +Here you find Telekom Scale on GitHub