Docs/update usage texts (#2064)

* docs: update usage text

packages/storybook-vue/.storybook/preview.js

@@ -40,7 +40,6 @@ export const parameters = {
     storySort: {
       order: [
         'Scale Design System',
-        'About Scale',
         'FAQ',
         'New Release',
         ['Release Notes', 'Sketch Library Update'],

packages/storybook-vue/stories/Index_de.md

@@ -1,25 +1,29 @@
-## Design & Code sind eins
+<br/>
 
-Scale ist das digitale Designsystem der Telekom für Produkte und Services. Mit Scale erstellst du mit Leichtigkeit brandkonforme Interfaces. Mit 32+ produktionsfertigen Komponenten in Code und Design, einer zentral zugänglichen Bibliothek und umfassender Dokumentation enthält Scale alles, was du dafür benötigst. Scale ist derzeit eine Open Beta.
+### Scale ist das digitale Design System der Telekom
 
-[Scale entdecken](./?path=/story/about-scale--page)
+Scale ist Teil von Brand & Design. Alle Komponenten sind markenkonform und helfen, ein kohärentes Markenerlebnis zu schaffen.
 
-## Scale für Designer\*innen
+### Code und Design für konsistente Produkte
 
-Verwende die Scale Komponenten, um mit Sketch digitale Interfaces für eine herausragende User Experience zu gestalten.
+Das auf unserer Markenidentität basierende Designsystem hilft dir, konsistente Produkte zu entwickeln. So stärkst du die Marke Telekom.
 
-[Erste Schritte für Designer\*innen](./?path=/docs/setup-info-getting-started-for-designers--page)
+### Barrierefreiheit „out of the box“
 
-## Scale für Entwickler\*innen
+Die Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet.
 
-Setze die Scale Web-Komponenten in HTML und den gängigen Frameworks wie Angular, React und Vue ein.
+### Kompatibel mit den relevanten Frameworks und Design Tools
 
-[Erste Schritte für Entwickler\*innen](./?path=/docs/setup-info-getting-started-for-developers--page)
+Die UI Libraries gibt es im Figma- und Sketchformat. Die Code Komponenten kannst du als reine Web-Komponenten oder in den Frameworks Vue, React und Angular verwenden.
 
-## Du hast noch Fragen?
+### Für die beste User Experience
 
-In unseren [FAQ](./?path=/story/faq--page) findest du viele nützliche Antworten. Du kannst uns auch [hier Feedback geben.](./?path=/story/contact-your-feedback--page)
+Mit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, beim Prototyping, der Design-Übergabe, der Frontend-Entwicklung und im Freigabeprozess mit Brand & Design. So bleibt mehr Zeit für spezifische Funktionen und Lösungen.
 
-## Du möchtest mitmachen?
+### Flexibilität und Skalierbarkeit durch Design Tokens
 
-Erfahre hier, wie du [an Scale mitwirken](./?path=/story/contact-contributing-to-scale--page) kannst. Wir freuen uns über deine Ideen.
+Durch die Verwendung von Design Tokens ist Scale besonders anpassungsfähig. Änderungen und Erweiterungen lassen sich schnell umsetzen. Auch weitere Themes für bspw. Drittmarken sind schnell erstellt.
+
+### Für bessere Kollaboration
+
+Ein Designsytsem fördert die Zusammenarbeit zwischen Teams und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf die alle Beteiligten gemeinsam aufbauen können. Als Designer*in oder Entwickler*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\*innen in Scale zu teilen.

packages/storybook-vue/stories/Index_en.md

@@ -1,25 +1,29 @@
-## Design and code are one
+<br/>
 
-Scale is the Telekom Digital Design System for products and experiences. It helps you build your online products faster and create superior experiences with ease. With 32+ production-ready components in code and design, a centrally accessible library and comprehensive documentation, Scale gives you everything you need to make it happen. Scale is currently an open beta.
+### Scale is the Telekom Digital Design System
 
-[Learn more about Scale](./?path=/story/about-scale--page)
+Scale is a part of Brand & Design. All components are brand compliant and help create a coherent brand experience.
 
-## Scale for designers
+### Code and design for consistent products
 
-Designers use Scale components to build outstanding digital experiences in Sketch.
+Based on our brand identity, the Scale design system helps you develop consistent products. This is how you contribute to strengthening the Telekom brand.
 
-[Get started for Designers](./?path=/docs/setup-info-getting-started-for-designers--page)
+### Accessibility out of the box
 
-## Scale for developers
+Scale components meet the technical requirements for the accessibility level AA. They are just as suitable for customer-focused products as they are for internal use cases.
 
-Developers use Scale web components in HTML, Angular, React and Vue Interfaces.
+### Compatible with the relevant framework and design tools
 
-[Get started for Developers](./?path=/docs/setup-info-getting-started-for-developers--page)
+The UI libraries are available in Figma and Sketch. You can use the code components as pure web components or in the framework for Vue, React, and Angular.
 
-## Any questions?
+### For the best user experience
 
-Review our [FAQ](./?path=/story/faq--page) or [Leave feedback.](./?path=/story/contact-your-feedback--page)
+Scale saves you time throughout the entire design and development process: for the design of user interfaces, prototyping, design handover, front-end development, and in the approval process with Brand & Design. This leaves more time to create specific features and functionality.
 
-## Contribute to Scale
+### Flexibility and scalability through design tokens
 
-Read about [contributing to Scale.](./?path=/story/contact-contributing-to-scale--page)
+By including design tokens, Scale is particularly adaptable. Changes and additions can be implemented quickly. Other themes for third-party brands can also be created quickly.
+
+### For better collaboration
+
+A design system encourages collaboration between teams and stakeholders. It creates a common foundation on which everyone can build together. As a designer or developer, you can help improve Scale. Send us your new or improved components to share with your colleagues in Scale.

packages/storybook-vue/stories/components/callout/callout.md

@@ -4,7 +4,3 @@
 </div>
 
 A Callout Component provides a way for users to highlight important content visually.
-
-## Beta Component
-
-This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future.

packages/storybook-vue/stories/components/callout/callout_de.md

@@ -4,7 +4,3 @@
 </div>
 
 Eine Callout Component bietet die Möglichkeit, wichtigen Inhalt für den Nutzer visuell hervorzuheben.
-
-## Beta-Komponente
-
-Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen.

packages/storybook-vue/stories/components/chip/Chip.stories.mdx

@@ -9,7 +9,7 @@ import ScaleChip from './ScaleChip.vue';
 import { action } from '@storybook/addon-actions';
 
 <Meta
-  title="Beta Components/Chip"
+  title="Components/Chip"
   component={ScaleChip}
   argTypes={{
     variant: {
@@ -122,7 +122,7 @@ export const TemplateInteractive = (args, { argTypes }) => ({
   }}
 >
   <h1>Chip</h1>
-  <img src="assets/beta.png" alt="Beta Component" />
+  <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
 ## Standard

packages/storybook-vue/stories/components/chip/chip.md

@@ -1,6 +1,6 @@
 <div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
     <h1>Chip</h1>
-    <img src="assets/beta.png" alt="Beta Component" />
+    <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
 Chips are contextual components that allow users to filter content or trigger actions.
@@ -93,10 +93,6 @@ Add an icon if it makes it easier for users to understand the function of the ch
 - Chips arranged horizontally are often located above the content they refer to.
 - Word the label as precisely as possible.
 
-## Beta components
-
-This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future.
-
 ## Related components
 
 [Tag](?path=/usage/components-tag--standard),

packages/storybook-vue/stories/components/chip/chip_de.md

@@ -1,6 +1,6 @@
 <div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
     <h1>Chip</h1>
-    <img src="assets/beta.png" alt="Beta Component" />
+    <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
 Chips sind kontextabhängige Komponenten mit denen Nutzer\*innen Inhalte filtern oder Aktionen auslösen können.
@@ -89,10 +89,6 @@ Füge ein Icon hinzu, wenn Nutzer\*innen die Funktion des Chips dadurch leichter
 - Horizontal angeordnete Chips befinden sich häufig oberhalb vom Inhalt auf den sie sich beziehen.
 - Formuliere das Label so präzise wie möglich.
 
-## Beta-Komponente
-
-Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen.
-
 ## Verwandte Komponenten
 
 [Tag](?path=/usage/components-tag--standard),

packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx

@@ -3,7 +3,7 @@ import ScaleDropdownSelect from './ScaleDropdownSelect.vue';
 import { action } from '@storybook/addon-actions';
 
 <Meta
-  title="Beta Components/Dropdown Select"
+  title="Components/Dropdown Select"
   component={ScaleDropdownSelect}
   argTypes={{}}
 />
@@ -52,7 +52,7 @@ export const Template = (args, { argTypes }) => ({
   }}
 >
   <h1>Dropdown Select</h1>
-  <img src="assets/beta.png" alt="Beta Component" />
+  <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
 ## Standard

packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md

@@ -1,17 +1,64 @@
 <div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
     <h1>Dropdown Select</h1>
-    <img src="assets/beta.png" alt="Beta Component" />
+    <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
-The Dropdown Select is a new version of the [dropdown](?path=/docs/components-dropdown--standard) component. The dropdown menu is now an integrated part and is no longer generated by the browser as before. This makes the component less error-prone. In particular, errors that could occur when switching between light and dark modes are now avoided.
+With a dropdown, users select a single option from a collapsible list of available options.
 
-## Beta components
+## General
 
-This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future.
+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)
+
+### When to use
+
+Use a dropdown when users:
+
+- can select options within a form,
+- should only select one of the options, or
+- should filter or sort content.
+
+### When not to use
+
+Don’t use dropdowns, when users:
+
+- should only have a few options (radio buttons may be better and they do not hide the content from the user),
+- should have a lot of choices (an input field with auto-fill is more helpful and time saving for the user),
+- should have several selectable options (use checkboxes instead), or
+- should navigate (use a navigation component like the sidebar navigation).
+
+## Elements
+
+![Image Name](assets/3_components/dropdown-select/Dropdown_select_elements.png)
+
+### Label (1)
+
+The label clearly indicates what kind of options the dropdown provides.
+
+### Icon (2)
+
+The direction of the arrow indicates whether the dropdown menu is open or closed.
+
+### Information (3) (Optional)
+
+Additional information can help clarify the content or purpose of a dropdown.
+
+### Error (4)
+
+If users have to select an option, submitting a form without a selection will result in an error message. If the dropdown already has an informational text, the error text will temporarily take its place.
+
+### Label and Value (5)
+
+When a Value from the dropdown is selected, it takes the place of the Label and the Label collapses into a smaller size.
+
+### Dropdown menu (6)
+
+The dropdown menu contains the available options or groups of options.
 
 ## Related components
 
-[Dropdown, ](?path=/docs/components-dropdown--standard)
 [Checkbox, ](?path=/usage/components-checkbox--standard)
 [Switch, ](?path=/usage/components-switch--standard)
 [Radio Button](?path=/usage/components-radio-button--standard)
+[Date Picker](?path=/usage/components-date-picker--standard)