Docs/usage texts updates (#2083)

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 <a href="https://github.com/telekom/scale" target="_blank"> Scale Sourcecode auf GitHub.</a>
 
 ## Ich benötige eine Komponente, die noch nicht in Scale verfügbar ist. Was kann ich tun?
 

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 <a href="https://github.com/telekom/scale" target="_blank">Scale Sourcecode on GitHub</a>
 
 ## What if I need a new component?
 

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.
 

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.
 

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)
 

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)
 

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
 

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
 

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).
 

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).
 

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** <br/>
 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** <br/>
 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** <br/>
 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** <br/>
 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)
 

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** <br/>
 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** <br/>
 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** <br/>
 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** <br/>
 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)