feat: adding brand-header usage text picture for dropdown nav

telekom · Mar 17, 2023 · 2f27eeb · 2f27eeb
1 parent 0183965
commit 2f27eeb
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 16 deletions.
diff --git a/...-vue/public/assets/3_components/beta-brand-header/brandheader_dropdown_menu.png b/...-vue/public/assets/3_components/beta-brand-header/brandheader_dropdown_menu.png
diff --git a/...rybook-vue/stories/components/beta-brand-header-navigation/beta-brand-header.md b/...rybook-vue/stories/components/beta-brand-header-navigation/beta-brand-header.md
@@ -95,14 +95,7 @@ The mega menu is suitable for a flat information architecture. It offers a good
 
 ### 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>
+![Image Name](assets/3_components/beta-brand-header/brandheader_dropdown_menu.png)
 
 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.
 

diff --git a/...ook-vue/stories/components/beta-brand-header-navigation/beta-brand-header_de.md b/...ook-vue/stories/components/beta-brand-header-navigation/beta-brand-header_de.md
@@ -96,14 +96,7 @@ Das Mega-Menü nutzt du am besten für eine flache Informationsarchitektur. Es b
 
 ### 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>
+![Image Name](assets/3_components/beta-brand-header/brandheader_dropdown_menu.png)
 
 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.