fixup! Docs(web-twig): Demonstrate composition of Header with `Drop…

…down`
lmc-eu · Sep 26, 2023 · d4c3c47 · d4c3c47
1 parent c2e8601
commit d4c3c47
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActions.twig b/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActions.twig
@@ -1,7 +1,7 @@
 <Header color="inverted">
     {% include '@components/Header/stories/_partials/SpiritLogo.twig' %}
 
-    <HeaderMobileActions dialogId="header_dialog_example_1" />
+    <HeaderMobileActions dialogId="header_inverted_with_actions__dialog" />
 
     <HeaderDesktopActions aria-label="Main navigation">
         <HeaderNav>
@@ -29,8 +29,8 @@
     </HeaderDesktopActions>
 </Header>
 
-<HeaderDialog id="header_dialog_example_1">
-    <HeaderDialogCloseButton dialogId="header_dialog_example_1" />
+<HeaderDialog id="header_inverted_with_actions__dialog">
+    <HeaderDialogCloseButton dialogId="header_inverted_with_actions__dialog" />
 
     <HeaderDialogActions aria-label="Main navigation">
         <HeaderDialogNav>

diff --git a/.../web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig b/.../web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig
@@ -2,7 +2,7 @@
 
     {% include '@components/Header/stories/_partials/SpiritLogo.twig' %}
 
-    <HeaderMobileActions dialogId="header_dialog_example_2_main_navigation" />
+    <HeaderMobileActions dialogId="header_inverted_with_actions_and_dialog__dialog" />
 
     <HeaderDesktopActions aria-label="Main navigation">
         <HeaderNav>
@@ -41,8 +41,8 @@
 
 </Header>
 
-<HeaderDialog id="header_dialog_example_2_main_navigation" aria-label="Menu">
-    <HeaderDialogCloseButton dialogId="header_dialog_example_2_main_navigation" />
+<HeaderDialog id="header_inverted_with_actions_and_dialog__dialog" aria-label="Menu">
+    <HeaderDialogCloseButton dialogId="header_inverted_with_actions_and_dialog__dialog" />
 
     <HeaderDialogActions aria-label="Main navigation">
         <HeaderDialogNav>

diff --git a/...eb-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDropdown.twig b/...eb-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDropdown.twig
@@ -1,12 +1,14 @@
 <Header color="inverted">
     {% include '@components/Header/stories/_partials/SpiritLogo.twig' %}
 
-    <HeaderMobileActions dialogId="header_dialog_example_3_main_navigation">
+    <HeaderMobileActions dialogId="header_inverted_with_actions_and_dropdown__dialog">
         <DropdownWrapper>
             <Button
                 color="inverted"
                 data-spirit-toggle="dropdown"
                 data-spirit-target="#dropdownUserMobile"
+                aria-controls="dropdownUserMobile"
+                aria-expanded="false"
                 isSquare
             >
                 <Icon name="profile" />
@@ -47,13 +49,14 @@
     <HeaderDesktopActions color="secondary">
         <HeaderNav>
             <HeaderNavItem UNSAFE_style="position: relative;">
-                <HeaderLink
-                    href="#"
+                <HeaderButton
                     data-spirit-toggle="dropdown"
                     data-spirit-target="#dropdownUserDesktop"
+                    aria-controls="dropdownUserDesktop"
+                    aria-expanded="false"
                 >
                     Marian
-                </HeaderLink>
+                </HeaderButton>
                 <Dropdown id="dropdownUserDesktop" placement="bottom-right">
                     <Stack hasSpacing>
                         <a href="#">Dashboard</a>
@@ -68,8 +71,8 @@
     </HeaderDesktopActions>
 </Header>
 
-<HeaderDialog id="header_dialog_example_3_main_navigation">
-    <HeaderDialogCloseButton dialogId="header_dialog_example_3_main_navigation" />
+<HeaderDialog id="header_inverted_with_actions_and_dropdown__dialog">
+    <HeaderDialogCloseButton dialogId="header_inverted_with_actions_and_dropdown__dialog" />
     <HeaderDialogActions aria-label="Main navigation">
         <HeaderDialogNav>
             <HeaderDialogNavItem>