BREAKING CHANGE(web-twig): Remove HeaderDesktopActions color prop…

… in favor of `isAtEnd` #DS-1059 See the Header: HeaderDesktopActions isAtEnd prop section in the web-twig package Migration Guide to version 3.
lmc-eu · Jun 10, 2024 · 1c57fc1 · 1c57fc1
1 parent 55e1b19
commit 1c57fc1
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 26 deletions.
diff --git a/docs/migrations/web-twig/MIGRATION-v3.md b/docs/migrations/web-twig/MIGRATION-v3.md
@@ -19,6 +19,7 @@ Introducing version 3 of the _spirit-web-twig_ package
   - [Grid: Breakpoint Props](#grid-breakpoint-props)
   - [Grid: GridSpan Component](#grid-gridspan-component)
   - [Header: Abstracts Class and Style](#header-abstracts-class-and-style)
+  - [Header: HeaderDesktopActions `isAtEnd` prop](#header-headerdesktopactions-isatend-prop)
   - [Modal: ModalDialog `isScrollable` Prop](#modal-modaldialog-isscrollable-prop)
   - [Modal: ModalDialog Custom Height](#modal-modaldialog-custom-height)
   - [Modal: ModalDialog Uniform Appearance](#modal-modaldialog-uniform-appearance)
@@ -185,6 +186,21 @@ Use `UNSAFE_style` and `UNSAFE_className` instead.
 
 Replace `style` with `UNSAFE_style` and `class` with `UNSAFE_className`.
 
+### Header: HeaderDesktopActions `isAtEnd` prop
+
+The `HeaderDesktopActions` component slots were simplified and the second slot alignment is now
+available by using the `isAtEnd` prop.
+
+The `HeaderDesktopActions` prop `color` was removed.
+
+#### Migration Guide
+
+Use the `HeaderDesktopActions` with `isAtEnd` prop instead of the `color="secondary"` prop.
+Remove the `color` prop from the `HeaderDesktopActions` component.
+
+- `<HeaderDesktopActions color="secondary" … />` → `<HeaderDesktopActions isAtEnd … />`
+- `<HeaderDesktopActions color="primary" … />` → `<HeaderDesktopActions … />`
+
 ### Modal: ModalDialog `isScrollable` Prop
 
 The `isScrollable` prop is now set to `false` by default and the ModalDialog is non-scrollable by default.

diff --git a/packages/web-twig/src/Resources/components/Header/HeaderDesktopActions.twig b/packages/web-twig/src/Resources/components/Header/HeaderDesktopActions.twig
@@ -1,14 +1,14 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _color = props.color | default('primary') -%}
+{%- set _isAtEnd = props.isAtEnd | default(false) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'HeaderDesktopActions' -%}
-{%- set _rootColorClassName = _spiritClassPrefix ~ 'HeaderDesktopActions--' ~ _color -%}
+{%- set _rootAtEndClassName = _isAtEnd ? _spiritClassPrefix ~ 'HeaderDesktopActions--end' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _rootColorClassName, _styleProps.className ] -%}
+{%- set _classNames = [ _rootClassName, _rootAtEndClassName, _styleProps.className ] -%}
 
 <nav {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     {% block content %}{% endblock %}

diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md
@@ -169,27 +169,26 @@ and [escape hatches][readme-escape-hatches].
 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).
+If you need to align actions to the end of the Header, use the `isAtEnd` prop.
 
 👉 It is critical to **make sure all your actions fit the Header on the
 desktop breakpoint**. Spirit intentionally does not provide any overflow
 control here.
 
 ```twig
 <HeaderDesktopActions aria-label="Main navigation">
-  <!-- Desktop-only primary actions -->
+  <!-- Desktop-only actions -->
 </HeaderDesktopActions>
-<HeaderDesktopActions color="secondary">
-  <!-- Desktop-only secondary actions -->
+<HeaderDesktopActions isAtEnd>
+  <!-- Desktop-only actions aligned to the end -->
 </HeaderDesktopActions>
 ```
 
 #### API
 
-| Name    | Type                       | Default   | Required | Description                 |
-| ------- | -------------------------- | --------- | -------- | --------------------------- |
-| `color` | [`primary` \| `secondary`] | `primary` | ✕        | Color and alignment variant |
+| Name      | Type   | Default | Required | Description                                 |
+| --------- | ------ | ------- | -------- | ------------------------------------------- |
+| `isAtEnd` | `bool` | `false` | ✕        | If true, the actions are aligned to the end |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
@@ -242,7 +241,7 @@ You can avoid using the [HeaderNav](#navigation) for standalone links. That way,
 the same container:
 
 ```twig
-<HeaderDesktopActions color="secondary">
+<HeaderDesktopActions isAtEnd>
   <HeaderButton>Marian</HeaderButton>
   <Button color="primary">Sign in</Button>
 </HeaderDesktopActions>
@@ -434,7 +433,7 @@ composition:
       <!-- … -->
     </HeaderNav>
   </HeaderDesktopActions>
-  <HeaderDesktopActions color="secondary">
+  <HeaderDesktopActions isAtEnd>
     <!-- Desktop-only secondary actions -->
   </HeaderDesktopActions>
 </Header>
@@ -488,7 +487,7 @@ And the complete Header Dialog:
       </HeaderNavItem>
     </HeaderNav>
   </HeaderDesktopActions>
-  <HeaderDesktopActions color="secondary">
+  <HeaderDesktopActions isAtEnd>
     <ButtonLink color="primary" href="/">Sign in</ButtonLink>
     <ButtonLink color="inverted" href="/">Enterprise</ButtonLink>
   </HeaderDesktopActions>

diff --git a/...web-twig/src/Resources/components/Header/__tests__/__fixtures__/headerDesktopActions.twig b/...web-twig/src/Resources/components/Header/__tests__/__fixtures__/headerDesktopActions.twig
@@ -1,8 +1,8 @@
 <HeaderDesktopActions>
-   primary actions slot
+   desktop actions
 </HeaderDesktopActions>
 
 <!-- Render with all props -->
-<HeaderDesktopActions color="secondary">
-    secondary actions slot
+<HeaderDesktopActions isAtEnd>
+    desktop actions aligned to the end
 </HeaderDesktopActions>
diff --git a/...ges/web-twig/src/Resources/components/Header/__tests__/__fixtures__/headerWithDialog.twig b/...ges/web-twig/src/Resources/components/Header/__tests__/__fixtures__/headerWithDialog.twig
@@ -22,7 +22,7 @@
             </HeaderNavItem>
         </HeaderNav>
     </HeaderDesktopActions>
-    <HeaderDesktopActions color="secondary">
+    <HeaderDesktopActions isAtEnd>
         <ButtonLink color="primary" href="/">Sign in</ButtonLink>
         <ButtonLink color="inverted" href="/">Enterprise</ButtonLink>
     </HeaderDesktopActions>

diff --git a/...c/Resources/components/Header/__tests__/__snapshots__/headerDesktopActions.twig.snap.html b/...c/Resources/components/Header/__tests__/__snapshots__/headerDesktopActions.twig.snap.html
@@ -5,13 +5,13 @@
     </title>
   </head>
   <body>
-    <nav class="HeaderDesktopActions HeaderDesktopActions--primary">
-      primary actions slot
+    <nav class="HeaderDesktopActions">
+      desktop actions
     </nav>
     <!-- Render with all props -->
 
-    <nav class="HeaderDesktopActions HeaderDesktopActions--secondary">
-      secondary actions slot
+    <nav class="HeaderDesktopActions HeaderDesktopActions--end">
+      desktop actions aligned to the end
     </nav>
   </body>
 </html>
diff --git a/...g/src/Resources/components/Header/__tests__/__snapshots__/headerWithDialog.twig.snap.html b/...g/src/Resources/components/Header/__tests__/__snapshots__/headerWithDialog.twig.snap.html
@@ -13,7 +13,7 @@
         </path></svg> <span class="accessibility-hidden">Menu</span></button>
       </div>
 
-      <nav aria-label="Main navigation" class="HeaderDesktopActions HeaderDesktopActions--primary">
+      <nav aria-label="Main navigation" class="HeaderDesktopActions">
         <ul class="HeaderNav">
           <li class="HeaderNavItem">
             <a class="HeaderLink HeaderLink--current" href="/" aria-current="page">Job offers</a>
@@ -37,7 +37,7 @@
         </ul>
       </nav>
 
-      <nav class="HeaderDesktopActions HeaderDesktopActions--secondary">
+      <nav class="HeaderDesktopActions HeaderDesktopActions--end">
         <a class="Button Button--primary Button--medium" href="/">Sign in</a> <a class="Button Button--inverted Button--medium" href="/">Enterprise</a>
       </nav>
     </header>

diff --git a/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActions.twig b/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActions.twig
@@ -23,7 +23,7 @@
         </HeaderNav>
     </HeaderDesktopActions>
 
-    <HeaderDesktopActions color="secondary">
+    <HeaderDesktopActions isAtEnd>
         <ButtonLink color="primary" href="/">Sign in</ButtonLink>
         <ButtonLink color="inverted" href="/">Enterprise</ButtonLink>
     </HeaderDesktopActions>

diff --git a/.../web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig b/.../web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig
@@ -24,7 +24,7 @@
         </HeaderNav>
     </HeaderDesktopActions>
 
-    <HeaderDesktopActions color="secondary">
+    <HeaderDesktopActions isAtEnd>
         <HeaderButton
             data-spirit-toggle="offcanvas"
             data-spirit-target="#header_dialog_example_2_user_menu"