BREAKING CHANGE(web-twig): Switch Header component to v3 design tok…

…ens #DS-1453
lmc-eu · Oct 1, 2024 · 429c9e1 · 429c9e1
1 parent dde541b
commit 429c9e1
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 56 deletions.
diff --git a/packages/web-twig/src/Resources/components/Header/Header.stories.twig b/packages/web-twig/src/Resources/components/Header/Header.stories.twig
@@ -2,20 +2,20 @@
 
 {% block content %}
 
-    <DocsSection title="Minimal Inverted Header" stackAlignment="stretch">
-        {% include '@components/Header/stories/HeaderMinimalInverted.twig' %}
+    <DocsSection title="Minimal Header" stackAlignment="stretch">
+        {% include '@components/Header/stories/HeaderMinimal.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inverted Header with Actions" stackAlignment="stretch">
-        {% include '@components/Header/stories/HeaderInvertedWithActions.twig' %}
+    <DocsSection title="Header with Actions" stackAlignment="stretch">
+        {% include '@components/Header/stories/HeaderWithActions.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inverted Header with Actions and Header Dialog" stackAlignment="stretch">
-        {% include '@components/Header/stories/HeaderInvertedWithActionsAndDialog.twig' %}
+    <DocsSection title="Header with Actions and Header Dialog" stackAlignment="stretch">
+        {% include '@components/Header/stories/HeaderWithActionsAndDialog.twig' %}
     </DocsSection>
 
-    <DocsSection title="Simple Inverted Header" stackAlignment="stretch">
-        {% include '@components/Header/stories/HeaderSimpleInverted.twig' %}
+    <DocsSection title="Simple Header" stackAlignment="stretch">
+        {% include '@components/Header/stories/HeaderSimple.twig' %}
     </DocsSection>
 
     <DocsSection title="Simple Transparent Header" stackAlignment="stretch">

diff --git a/packages/web-twig/src/Resources/components/Header/HeaderMobileActions.twig b/packages/web-twig/src/Resources/components/Header/HeaderMobileActions.twig
@@ -15,7 +15,7 @@
     <Button
         aria-controls="{{ _dialogId }}"
         aria-expanded="false"
-        color="inverted"
+        color="secondary"
         data-spirit-target="{{ '#' ~ _dialogId }}"
         data-spirit-toggle="offcanvas"
         isSquare

diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md
@@ -69,12 +69,12 @@ unless you specify a color variant.
 
 ## Color Variants
 
-Currently, Header comes in two color variants: **transparent** (for dark
-backgrounds) and **inverted** (for light backgrounds). Use the `color` property
+Currently, Header comes in two color variants: **primary** and **transparent**
+(for non-solid backgrounds like gradients or images). Use the `color` property
 to apply the desired background color to Header.
 
 ```twig
-<Header color="inverted">
+<Header color="transparent">
     <a href="/">
         <img
           src="https://www.example.com/logo.png"
@@ -107,10 +107,10 @@ just branding.
 
 ## API
 
-| Name       | Type                          | Default       | Required | Description                         |
-| ---------- | ----------------------------- | ------------- | -------- | ----------------------------------- |
-| `color`    | [`transparent` \| `inverted`] | `transparent` | ✕        | Color variant                       |
-| `isSimple` | `bool`                        | `false`       | ✕        | Shorter, centered version of Header |
+| Name       | Type                          | Default   | Required | Description                         |
+| ---------- | ----------------------------- | --------- | -------- | ----------------------------------- |
+| `color`    | \[`primary` \| `transparent`] | `primary` | ✕        | Color variant                       |
+| `isSimple` | `bool`                        | `false`   | ✕        | Shorter, centered version of Header |
 
 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]
@@ -419,7 +419,7 @@ This is how all supported building blocks of the Header build up the complete
 composition:
 
 ```twig
-<Header color="inverted">
+<Header>
   <!-- Branding -->
   <HeaderMobileActions dialogId="my-menu">
     <!-- Optional mobile-only actions -->
@@ -463,7 +463,7 @@ And the complete Header Dialog:
   <summary>Show full example code of Header with responsive navigation</summary>
 
 ```twig
-<Header color="inverted">
+<Header>
   <a href="/" aria-label="Spirit homepage">
     <img src="…" width="65" height="24" alt="Spirit" />
   </a>
@@ -489,7 +489,7 @@ And the complete Header Dialog:
   </HeaderDesktopActions>
   <HeaderDesktopActions isAtEnd>
     <ButtonLink color="primary" href="/">Sign in</ButtonLink>
-    <ButtonLink color="inverted" href="/">Enterprise</ButtonLink>
+    <ButtonLink color="secondary" href="/">Enterprise</ButtonLink>
   </HeaderDesktopActions>
 </Header>
 
@@ -516,7 +516,7 @@ And the complete Header Dialog:
   </HeaderDialogActions>
   <HeaderDialogActions color="secondary">
     <ButtonLink color="primary" href="/">Sign in</ButtonLink>
-    <ButtonLink color="inverted" href="/">Enterprise</ButtonLink>
+    <ButtonLink color="secondary" href="/">Enterprise</ButtonLink>
   </HeaderDialogActions>
 </HeaderDialog>
 ```

diff --git a/packages/web-twig/src/Resources/components/Header/__tests__/__fixtures__/headerDefault.twig b/packages/web-twig/src/Resources/components/Header/__tests__/__fixtures__/headerDefault.twig
@@ -5,7 +5,7 @@
 </Header>
 
 <!-- Render with all props -->
-<Header color="inverted" isSimple>
+<Header color="transparent" isSimple>
     <a href="/" aria-label="Spirit homepage">
         {% include './partials/spiritLogo.twig' %}
     </a>

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
@@ -1,4 +1,4 @@
-<Header color="inverted">
+<Header>
     <a href="/" aria-label="Spirit homepage">
         {% include './partials/spiritLogo.twig' %}
     </a>
@@ -24,7 +24,7 @@
     </HeaderDesktopActions>
     <HeaderDesktopActions isAtEnd>
         <ButtonLink color="primary" href="/">Sign in</ButtonLink>
-        <ButtonLink color="inverted" href="/">Enterprise</ButtonLink>
+        <ButtonLink color="secondary" href="/">Enterprise</ButtonLink>
     </HeaderDesktopActions>
 </Header>
 
@@ -51,6 +51,6 @@
     </HeaderDialogActions>
     <HeaderDialogActions color="secondary">
         <ButtonLink color="primary" href="/">Sign in</ButtonLink>
-        <ButtonLink color="inverted" href="/">Enterprise</ButtonLink>
+        <ButtonLink color="secondary" href="/">Enterprise</ButtonLink>
     </HeaderDialogActions>
 </HeaderDialog>
diff --git a/...twig/src/Resources/components/Header/__tests__/__snapshots__/headerDefault.twig.snap.html b/...twig/src/Resources/components/Header/__tests__/__snapshots__/headerDefault.twig.snap.html
@@ -10,7 +10,7 @@
     </header>
     <!-- Render with all props -->
 
-    <header class="Header Header--inverted Header--simple">
+    <header class="Header Header--transparent Header--simple">
       <a href="/" aria-label="Spirit homepage"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K" width="65" height="24" alt="Spirit"></a>
     </header>
   </body>

diff --git a/...rc/Resources/components/Header/__tests__/__snapshots__/headerMobileActions.twig.snap.html b/...rc/Resources/components/Header/__tests__/__snapshots__/headerMobileActions.twig.snap.html
@@ -6,14 +6,14 @@
   </head>
   <body>
     <div class="HeaderMobileActions">
-      <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--inverted Button--medium Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a1fcc7134edb5d176925f0fd5ddd9d42" aria-hidden="true">
+      <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a1fcc7134edb5d176925f0fd5ddd9d42" aria-hidden="true">
       <path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="currentColor">
       </path></svg> <span class="accessibility-hidden">Menu</span></button>
     </div>
     <!-- Render with all props -->
 
     <div class="HeaderMobileActions">
-      <span>custom content</span> <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--inverted Button--medium Button--square" type="button"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
+      <span>custom content</span> <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--square" type="button"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
       <use href="#a1fcc7134edb5d176925f0fd5ddd9d42">
       </use></svg> <span class="accessibility-hidden">Open menu</span></button>
     </div>