fixup! Feat(web-twig): Allow custom content inside HeaderNavItem

lmc-eu · Nov 7, 2023 · 34c0e1b · 34c0e1b
1 parent ba0d335
commit 34c0e1b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md
@@ -168,9 +168,11 @@ These attributes will be passed to the topmost HTML element of the component.
 
 ### Desktop-Only Actions
 
-As the name suggests, desktop-only actions are intended to display only on
-desktop screens. There are two slots to use: primary actions (aligned to the
-left in LTR documents) and secondary actions (aligned to the right).
+As the name suggests, desktop-only actions are intended to display on desktop screens only. They generally work as flex
+containers that define vertical alignment and spacing.
+
+There are two slots you can use: primary actions (aligned to left in LTR documents), and secondary actions (aligned to
+right).
 
 👉 It is critical to **make sure all your actions fit the Header on the
 desktop breakpoint**. Spirit intentionally does not provide any overflow
@@ -187,9 +189,9 @@ control here.
 
 #### API
 
-| Name    | Type                       | Default   | Required | Description   |
-| ------- | -------------------------- | --------- | -------- | ------------- |
-| `color` | [`primary` \| `secondary`] | `primary` | ✕        | Color variant |
+| Name    | Type                       | Default   | Required | Description                 |
+| ------- | -------------------------- | --------- | -------- | --------------------------- |
+| `color` | [`primary` \| `secondary`] | `primary` | ✕        | Color and alignment variant |
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
 further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available,
@@ -237,14 +239,16 @@ Both links and buttons are supported:
 </HeaderNav>
 ```
 
-Finally, you can put any custom content inside HeaderNavItem:
+#### Other Content
+
+You can avoid using the [HeaderNav](#navigation) for standalone links. That way, you can combine links and buttons in
+the same container:
 
 ```twig
-<HeaderNav>
-  <HeaderNavItem>
-    <ButtonLink href="/login">Sign in</ButtonLink>
-  </HeaderNavItem>
-</HeaderNav>
+<HeaderDesktopActions color="secondary">
+  <HeaderButton>Marian</HeaderButton>
+  <Button color="primary">Sign in</Button>
+</HeaderDesktopActions>
 ```
 
 ##### HeaderNav API

diff --git a/.../web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig b/.../web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig
@@ -24,25 +24,19 @@
         </HeaderNav>
     </HeaderDesktopActions>
 
-    <HeaderDesktopActions color="secondary" aria-label="User area">
-        <HeaderNav>
-            <HeaderNavItem>
-                <HeaderButton
-                    data-spirit-toggle="offcanvas"
-                    data-spirit-target="#header_dialog_example_2_user_menu"
-                    aria-controls="header_dialog_example_2_user_menu"
-                    aria-expanded="false"
-                >
-                    Marian
-                </HeaderButton>
-            </HeaderNavItem>
-            <HeaderNavItem>
-                <Button color="inverted" isSquare UNSAFE_className="ml-700">
-                    <Icon name="search" />
-                    <VisuallyHidden>Search</VisuallyHidden>
-                </Button>
-            </HeaderNavItem>
-        </HeaderNav>
+    <HeaderDesktopActions color="secondary">
+        <HeaderButton
+            data-spirit-toggle="offcanvas"
+            data-spirit-target="#header_dialog_example_2_user_menu"
+            aria-controls="header_dialog_example_2_user_menu"
+            aria-expanded="false"
+        >
+            Marian
+        </HeaderButton>
+        <Button color="inverted" isSquare>
+            <Icon name="search" />
+            <VisuallyHidden>Search</VisuallyHidden>
+        </Button>
     </HeaderDesktopActions>
 
 </Header>