feat: adding usage text (#1537)

* feat: adding usage text
Co-authored-by: marvinLaubenstein <[email protected]>

packages/storybook-vue/.storybook/usage-addon/usage.js

@@ -17,6 +17,8 @@ import accordion_en from 'raw-loader!../../stories/components/accordion/accordio
 import accordion_de from 'raw-loader!../../stories/components/accordion/accordion_de.md';
 import brandHeader_en from 'raw-loader!../../stories/components/brand-header-navigation/brand-header.md';
 import brandHeader_de from 'raw-loader!../../stories/components/brand-header-navigation/brand-header_de.md';
+import betaBrandHeader_en from 'raw-loader!../../stories/components/beta-brand-header-navigation/beta-brand-header.md';
+import betaBrandHeader_de from 'raw-loader!../../stories/components/beta-brand-header-navigation/beta-brand-header_de.md';
 import breadcrumb_en from 'raw-loader!../../stories/components/breadcrumb/breadcrumb.md';
 import breadcrumb_de from 'raw-loader!../../stories/components/breadcrumb/breadcrumb_de.md';
 import button_en from 'raw-loader!../../stories/components/button/button.md';
@@ -123,6 +125,8 @@ const Usage = (props) => {
     accordion_de,
     'brand-header-navigation_en': brandHeader_en,
     'brand-header-navigation_de': brandHeader_de,
+    'telekom-brand-header-navigation_en': betaBrandHeader_en,
+    'telekom-brand-header-navigation_de': betaBrandHeader_de,
     breadcrumb_en,
     breadcrumb_de,
     button_en,

packages/storybook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx

@@ -302,7 +302,7 @@ const mobileMenu = `<scale-telekom-nav-flyout
 </scale-telekom-nav-flyout>`;
 
 <Meta
-  title="Beta Components/Brand Header & Navigation"
+  title="Beta Components/ Telekom Brand Header & Navigation"
   component={TelekomHeader}
   argTypes={{
     appNameLink: {

packages/storybook-vue/stories/components/beta-brand-header-navigation/beta-brand-header.md

@@ -0,0 +1,124 @@
+<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
+    <h1>Brand Header & Navigation</h1>
+    <img src="assets/beta.png" alt="Beta Component" />
+</div>
+
+The brand header identifies our brand and the purpose of a website in seconds. It makes Telekom websites instantly recognizable and ensures a consistent experience for all our products and services.
+
+## General
+
+The brand header is the core component for carrying our customers into the world of Deutsche Telekom. The logo on a Magenta background clearly identifies our brand. When scrolling down the page on desktops, the brand bar reduces in size, leaving room for navigation and content.
+
+## Basic types
+
+<br/>
+
+### Standard
+
+The standard brand header contains all available elements and Telekom links. Scrolling hides the meta navigation and language selector.
+
+![Image Name](assets/3_components/beta-brand-header/1_EN_brandheader_brandbar_standard.png)
+
+### Slim
+
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px;">
+    <div style="padding-top:1px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 4px;">
+        **This component will be available soon.**
+    </div>
+</div>
+
+The slim brand header contains neither the meta navigation nor the language selector. Scrolling only reduces the height of the component.
+
+![Image Name](assets/3_components/beta-brand-header/2_EN_brandheader_brandbar_slim.png)
+
+### Subtle
+
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px;">
+    <div style="padding-top:1px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 4px;">
+        **This component will be available soon.**
+    </div>
+</div>
+
+The subtle brand header has no main navigation or features and is pinned to the top of the screen. It doesn’t use a shadow to stand out from the page content or change when scrolling.
+
+![Image Name](assets/3_components/beta-brand-header/3_brandheader_brandbar_subtle.png)
+
+## Elements
+
+![Image Name](assets/3_components/beta-brand-header/4_brandheader_brandbar_elements.png)
+
+### Brand area with logo (1) (required)
+
+The logo and Magenta background are required for any Telekom webpage and can’t be changed. By default, the logo is linked to the Telekom homepage or the entry point into the current process.
+
+### Portal name (2) (optional)
+
+Name of the product or service.
+
+### External meta navigation (3) (optional)
+
+Place other global links to Telekom destinations outside the current website here and enable switching between private and business customers.
+
+### Internal meta navigation (4) (optional)
+
+Internal links (e.g., settings and contact).
+
+### Language selector (5) (optional)
+
+Use country abbreviations as links if there are only a few languages. If the content is available in more than three languages, use a dropdown (not yet available in this component).
+
+### Primary navigation (6)
+
+The primary navigation contains all items from the first navigation level.
+
+**Functions (7)**
+
+Global functions such as search, shopping cart, or login are listed here. The login is always on the right side. If possible, add a label to the icons.
+
+## Size
+
+Different sizes are defined for the various break points.
+
+## Navigation
+
+**Mega-Menü**
+
+The mega menu is suitable for a flat information architecture. It offers a good overview within a category, but the depth is limited to three levels.
+
+![Image Name](assets/3_components/beta-brand-header/5_brandheader_nav4_megamenu.png)
+
+**Dropdown navigation**
+
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px;">
+    <div style="padding-top:1px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 4px;">
+        **This component will be available soon.**
+    </div>
+</div>
+
+The dropdown navigation can accommodate several levels of navigation and different depths within a navigation tree. As a general rule, the less levels the better.
+
+**Mobile navigation**
+
+Small viewports only have one type of navigation.
+
+![Image Name](assets/3_components/beta-brand-header/6_brandheader_nav_mobile.png)
+
+## 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
+
+[Breadcrumb, ](?path=/usage/components-breadcrumb--standard)
+[Sidebar Navigation, ](?path=/usage/components-sidebar-navigation--standard)
+[Tab Navigation, ](?path=/usage/components-tab-navigation--text-icon)
+[Accordion](?path=/usage/components-accordion--standard)

packages/storybook-vue/stories/components/beta-brand-header-navigation/beta-brand-header_de.md

@@ -0,0 +1,125 @@
+<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
+    <h1>Brand Header & Navigation</h1>
+     <img src="assets/beta.png" alt="Beta Component" />
+</div>
+
+Der Brand Header vermittelt Absender und Angebot einer Webseite auf einen Blick. Er macht Telekom Webseiten für Nutzer\*innen wiedererkennbar und bietet ein einheitliches Erlebnis für alle unsere Produkte und Services.
+
+## Allgemein
+
+Der Brand Header ist die zentrale Komponente für den Einstieg in die Markenwelt der Deutschen Telekom. Das Logo auf magentafarbenem Grund kennzeichnet unsere Marke eindeutig. Beim Scrollen der Seite auf Desktop-Geräten verkleinert sich der Header und gibt Raum für den Content der Seite.
+
+## Basistypen
+
+<br/>
+
+### Standard
+
+Der Brand Header Standard enthält alle verfügbaren Elemente und Telekom Links.
+Im gescrollten Zustand sind die Meta-Navigation und das Sprachwechsel-Element ausgeblendet.
+
+![Image Name](assets/3_components/beta-brand-header/1_DE_brandheader_brandbar_standard.png)
+
+### Brand Header Slim
+
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px;">
+    <div style="padding-top:1px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 4px;">
+        **Diese Komponente ist bald verfügbar**
+    </div>
+</div>
+
+Der Brand Header Slim enthält weder Meta-Navigation noch Sprachwechsel. Beim Scrollen reduziert sich lediglich die Höhe der Komponente.
+
+![Image Name](assets/3_components/beta-brand-header/2_DE_brandheader_brandbar_slim.png)
+
+### Brand Header Subtle
+
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px;">
+    <div style="padding-top:1px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 4px;">
+        **Diese Komponente ist bald verfügbar**
+    </div>
+</div>
+
+Der Brand Header Subtle hat keine Hauptnavigation oder Funktionen und ist am oberen Bildschirmrand fixiert. Er hebt sich nicht durch einen Schatten vom Inhalt der Seite ab oder verändert sich beim Scrollen.
+
+![Image Name](assets/3_components/beta-brand-header/3_brandheader_brandbar_subtle.png)
+
+## Elemente
+
+![Image Name](assets/3_components/beta-brand-header/4_brandheader_brandbar_elements.png)
+
+### Brand Area mit Logo (1) (verpflichtend)
+
+Das Logo und der magentafarbene Hintergrund sind für jede Seite der Telekom verbindlich und können nicht verändert werden. Das Logo ist standardmäßig mit der Telekom Homepage verlinkt oder dem Einstiegspunkt in den aktuellen Prozess.
+
+### Portalname (2) (optional)
+
+Name des Produkts oder Services.
+
+### Meta-Navigation (3) (optional)
+
+Platziere hier globale Links zu Telekom Inhalten außerhalb der Webseite und ermögliche den Wechsel zwischen Privat- und Geschäftskund\*innen.
+
+### Meta-Navigation (4) (optional)
+
+Interne Links (zum Beispiel Einstellungen und Kontakt).
+
+### Sprachwechsel-Element (5) (optional)
+
+Verwende Länderkürzel als Links bei wenigen Sprachen. Ist der Inhalt in mehr als drei Sprachen, nutze ein Dropdown – in dieser Komponente noch nicht verfügbar.
+
+### Hauptnavigation (6)
+
+Die Hauptnavigation enthält alle Navigationspunkte der ersten Ebene.
+
+#### Funktionen (7)
+
+Hier sind globale Funktionen wie Suche, Warenkorb oder Login aufgeführt. Der Login befindet sich dabei immer rechts. Ergänze die Icons wenn möglich mit einem Label.
+
+## Größen
+
+Für die verschiedenen Breakpoints sind unterschiedliche Größen definiert.
+
+## Navigation
+
+**Mega-Menü**
+
+Das Mega-Menü nutzt du am besten für eine flache Informationsarchitektur. Es bietet eine gute Übersicht innerhalb einer Kategorie. Die Ebenentiefe ist allerdings auf drei Ebenen begrenzt.
+
+![Image Name](assets/3_components/beta-brand-header/5_brandheader_nav4_megamenu.png)
+
+**Dropdown-Navigation**
+
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px;">
+    <div style="padding-top:1px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 4px;">
+        **Diese Komponente ist bald verfügbar**
+    </div>
+</div>
+
+Die Dropdown-Navigation eignet sich für Webseiten mit umfangreicher Seitenarchitektur. Sie kann mehrere Hierarchieebenen innerhalb des Navigationsbaums darstellen. Generell gilt: je weniger Ebenen, desto besser.
+
+**Mobile Navigation**
+
+Auf kleinen Viewports gibt es nur eine Art der Navigation.
+
+![Image Name](assets/3_components/beta-brand-header/6_brandheader_nav_mobile.png)
+
+## 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
+
+[Breadcrumb, ](?path=/usage/components-breadcrumb--standard)
+[Sidebar-Navigation, ](?path=/usage/components-sidebar-navigation--standard)
+[Tab-Navigation, ](?path=/usage/components-tab-navigation--text-icon)
+[Accordion](?path=/usage/components-accordion--standard)

packages/storybook-vue/stories/components/brand-header-navigation/brand-header.md

@@ -3,6 +3,15 @@
     <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px; margin-top: 16px; margin-bottom: 32px;">
+    <div style="padding-top: 8px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 3px;">
+        The Brand Header is available in a new [beta version](?path=/docs/beta-components-telekom-brand-header-navigation--standard) . Once quality control is complete and WCAG accessibility certification is in place, the new component will become the official Telekom brand header.
+    </div>
+</div>
+
 The brand header identifies our brand and the purpose of a website in seconds. It makes Telekom websites instantly recognizable and ensures a consistent experience for all our products and services.
 
 ## General

packages/storybook-vue/stories/components/brand-header-navigation/brand-header_de.md

@@ -3,6 +3,15 @@
     <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
+<div style="display: flex; width: 100%; border-radius: 3px; background-color: rgb(241, 241, 239); padding: 16px 16px 14px 20px; margin-top: 16px; margin-bottom: 32px;">
+    <div style="padding-top: 8px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="24px"><path fill-rule="evenodd" d="M12 1c6.1 0 11 4.9 11 11s-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1zm0 1.5c-5.25 0-9.5 4.25-9.5 9.5s4.25 9.5 9.5 9.5 9.5-4.25 9.5-9.5-4.25-9.5-9.5-9.5zm1 8V17h-2v-6.5h2zm-1-4A1.25 1.25 0 1112 9a1.25 1.25 0 010-2.5z"></path></svg>
+    </div>
+    <div style="margin-top: 3px;">
+        Der Brand Header ist in einer neuen [Beta Version](?path=/docs/beta-components-telekom-brand-header-navigation--standard) verfügbar. Sobald die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt, wird die neue Komponente der offizielle Brand Header der Telekom.
+    </div>
+</div>
+
 Der Brand-Header vermittelt Absender und Angebot einer Webseite auf einen Blick. Er macht Telekom Webseiten für Nutzer\*innen wiedererkennbar und bietet ein einheitliches Erlebnis für alle unsere Produkte und Services.
 
 ## Allgemein

packages/storybook-vue/stories/update_history/Design_de.md

@@ -2,6 +2,12 @@
 
 Diese Seite dokumentiert Updates der visuellen Erscheinung von Scale
 
+## Neuer Brand Header
+
+31.01.2023
+
+Veröffentlichung des neuen Brand Headers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt. Bis dahin freuen wir uns über <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">euer Feedback</a> zur neuen Komponente.
+
 ## Neue Beta-Komponenten
 
 25.01.2023

packages/storybook-vue/stories/update_history/Design_en.md

@@ -2,6 +2,12 @@
 
 This page documents updates to the visual appearance of Scale.
 
+## New Brand Header
+
+31.01.2023
+
+Release of the new brand header as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place. Until then, we'd love to hear <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">your feedback</a> on the new component.
+
 ## New Beta Components
 
 25.01.2023

packages/storybook-vue/stories/update_history/Development_de.md

@@ -2,6 +2,12 @@
 
 Diese Seite dokumentiert Aktualisierungen in `@telekom/scale-components` und verwandten Paketen.
 
+## Neuer Brand Header
+
+31.01.2023
+
+Veröffentlichung des neuen Brand Headers als Beta-Version. Dieser ersetzt die aktuelle Komponente, wenn die Qualitätskontrolle abgeschlossen ist und die WCAG-Zertifizierung für Barrierefreiheit vorliegt. Bis dahin freuen wir uns über <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">euer Feedback</a> zur neuen Komponente.
+
 ## Neue Beta-Komponenten
 
 25.01.2023

packages/storybook-vue/stories/update_history/Development_en.md

@@ -2,6 +2,12 @@
 
 This page documents updates in `@telekom/scale-components` and related packages.
 
+## New Brand Header
+
+31.01.2023
+
+Release of the new brand header as a beta version. This will replace the current component once quality control is complete and WCAG accessibility certification is in place. Until then, we'd love to hear <a href="https://deploy-preview-1537--marvelous-moxie-a6e2fe.netlify.app/?path=/docs/contact-your-feedback--page" target="_blank" rel="noopener noreferrer">your feedback</a> on the new component.
+
 ## New Beta Components
 
 25.01.2023