From c2e86017bff430a305b70e6c6d58cd1c87e973c9 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Thu, 7 Sep 2023 18:30:59 +0200
Subject: [PATCH] Docs(web-twig): Demonstrate composition of `Header` with
 `Dropdown`

---
 .../components/Header/Header.stories.twig     |  4 +
 .../HeaderInvertedWithActionsAndDropdown.twig | 92 +++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDropdown.twig

diff --git a/packages/web-twig/src/Resources/components/Header/Header.stories.twig b/packages/web-twig/src/Resources/components/Header/Header.stories.twig
index 5867c4f595..4278cca437 100644
--- a/packages/web-twig/src/Resources/components/Header/Header.stories.twig
+++ b/packages/web-twig/src/Resources/components/Header/Header.stories.twig
@@ -10,6 +10,10 @@
         {% include '@components/Header/stories/HeaderInvertedWithActions.twig' %}
     </DocsSection>
 
+    <DocsSection title="Inverted Header with Actions and Dropdown" stackAlignment="stretch">
+        {% include '@components/Header/stories/HeaderInvertedWithActionsAndDropdown.twig' %}
+    </DocsSection>
+
     <DocsSection title="Inverted Header with Actions and Header Dialog" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderInvertedWithActionsAndDialog.twig' %}
     </DocsSection>
diff --git a/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDropdown.twig b/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDropdown.twig
new file mode 100644
index 0000000000..162fd16c30
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDropdown.twig
@@ -0,0 +1,92 @@
+<Header color="inverted">
+    {% include '@components/Header/stories/_partials/SpiritLogo.twig' %}
+
+    <HeaderMobileActions dialogId="header_dialog_example_3_main_navigation">
+        <DropdownWrapper>
+            <Button
+                color="inverted"
+                data-spirit-toggle="dropdown"
+                data-spirit-target="#dropdownUserMobile"
+                isSquare
+            >
+                <Icon name="profile" />
+                <VisuallyHidden>My Profile</VisuallyHidden>
+            </Button>
+            <Dropdown id="dropdownUserMobile" placement="bottom-right">
+                <Stack hasSpacing>
+                    <a href="#">Dashboard</a>
+                    <a href="#">Profile</a>
+                    <a href="#">Favourites</a>
+                    <a href="#">Notifications</a>
+                    <a href="#">Sign out</a>
+                </Stack>
+            </Dropdown>
+        </DropdownWrapper>
+    </HeaderMobileActions>
+
+    <HeaderDesktopActions aria-label="Main navigation">
+        <HeaderNav>
+            <HeaderNavItem>
+                <HeaderLink href="#" isCurrent>Job offers</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+                <HeaderLink href="#">Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+                <HeaderLink href="#">Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+                <HeaderLink href="#">Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+                <HeaderLink href="#">Employers</HeaderLink>
+            </HeaderNavItem>
+        </HeaderNav>
+    </HeaderDesktopActions>
+
+    <HeaderDesktopActions color="secondary">
+        <HeaderNav>
+            <HeaderNavItem UNSAFE_style="position: relative;">
+                <HeaderLink
+                    href="#"
+                    data-spirit-toggle="dropdown"
+                    data-spirit-target="#dropdownUserDesktop"
+                >
+                    Marian
+                </HeaderLink>
+                <Dropdown id="dropdownUserDesktop" placement="bottom-right">
+                    <Stack hasSpacing>
+                        <a href="#">Dashboard</a>
+                        <a href="#">Profile</a>
+                        <a href="#">Favourites</a>
+                        <a href="#">Notifications</a>
+                        <a href="#">Sign out</a>
+                    </Stack>
+                </Dropdown>
+            </HeaderNavItem>
+        </HeaderNav>
+    </HeaderDesktopActions>
+</Header>
+
+<HeaderDialog id="header_dialog_example_3_main_navigation">
+    <HeaderDialogCloseButton dialogId="header_dialog_example_3_main_navigation" />
+    <HeaderDialogActions aria-label="Main navigation">
+        <HeaderDialogNav>
+            <HeaderDialogNavItem>
+                <HeaderDialogLink href="/" isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+                <HeaderDialogLink href="/">Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+                <HeaderDialogLink href="/">Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+                <HeaderDialogLink href="/">Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+                <HeaderDialogLink href="/">Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+        </HeaderDialogNav>
+    </HeaderDialogActions>
+</HeaderDialog>