Docs(web-twig): Redesign the demo app #DS-1479

Include header and footer on all demo pages for easier navigation.
lmc-eu · Oct 17, 2024 · 18f7fe0 · 18f7fe0
1 parent 2a2e309
commit 18f7fe0
Show file tree

Hide file tree

Showing 57 changed files with 415 additions and 165 deletions.
diff --git a/apps/demo/partials/web/helpers.hbs b/apps/demo/partials/web/helpers.hbs
@@ -4,8 +4,8 @@
 
   {{#> cardList}}
     {{#each @helpers as |helper|}}
-      <li>
-        <a href="{{helper.name}}/" class="docs-Card">{{helper.title}}</a>
+      <li class="d-grid">
+        <a href="{{helper.name}}/" class="docs-Card text-truncate">{{helper.title}}</a>
       </li>
     {{/each}}
   {{/cardList}}

diff --git a/apps/demo/partials/web/tabs.hbs b/apps/demo/partials/web/tabs.hbs
@@ -1,4 +1,4 @@
-<div class="breakout-container">
+<div class="breakout-container d-grid">
 
   <div class="ScrollView ScrollView--horizontal mb-800 mb-tablet-1100" data-spirit-toggle="scrollView" data-spirit-direction="vertical">
     <div class="ScrollView__viewport" data-spirit-element="viewport">

diff --git a/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig b/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig
@@ -0,0 +1,6 @@
+<img
+  src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+  width="65"
+  height="24"
+  alt="Spirit"
+/>
diff --git a/apps/web-twig-demo/templates/default.html.twig b/apps/web-twig-demo/templates/default.html.twig
@@ -1,20 +1,21 @@
 {% extends 'layout/default.html.twig' %}
 
-{% block content %}
+{% block title %}Components{% endblock%}
 
-  <section class="UNSTABLE_Section">
+{% block content %}
 
-    <h2 class="typography-heading-medium-bold text-secondary mb-900 mb-tablet-1100">Components</h2>
-    <ul class="Grid Grid--cols-2 Grid--tablet--cols-3 list-unstyled">
+  {% include 'partials/tabs.html.twig' %}
 
-      {% for component in components %}
-        <li>
-          <a href="components/{{ component | lower }}/" class="docs-TileLink">{{ component }}</a>
-        </li>
-      {% endfor %}
+  <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
 
-    </ul>
+    {% for component in components %}
+      <li class="d-grid">
+        <a href="components/{{ component | lower }}/" class="docs-Card text-truncate">
+          {{ component }}
+        </a>
+      </li>
+    {% endfor %}
 
-  </section>
+  </Grid>
 
 {% endblock %}
diff --git a/apps/web-twig-demo/templates/helpers.html.twig b/apps/web-twig-demo/templates/helpers.html.twig
@@ -1,20 +1,21 @@
 {% extends 'layout/default.html.twig' %}
 
-{% block content %}
+{% block title %}Helpers{% endblock%}
 
-  <section class="UNSTABLE_Section">
+{% block content %}
 
-    <h2 class="typography-heading-medium-bold text-secondary mb-900 mb-tablet-1100">Helpers</h2>
-    <ul class="Grid Grid--cols-2 Grid--tablet--cols-3 list-unstyled">
+  {% include 'partials/tabs.html.twig' %}
 
-      {% for helper in helpers %}
-        <li>
-          <a href="helpers/{{ helper }}/" class="docs-TileLink">{{ helper | replace({'-': ' '}) | title }}</a>
-        </li>
-      {% endfor %}
+  <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
 
-    </ul>
+    {% for helper in helpers %}
+      <li class="d-grid">
+        <a href="helpers/{{ helper }}/" class="docs-Card text-truncate">
+          {{ helper | replace({'-': ' '}) | title }}
+        </a>
+      </li>
+    {% endfor %}
 
-  </section>
+  </Grid>
 
 {% endblock %}
diff --git a/apps/web-twig-demo/templates/layout/base.html.twig b/apps/web-twig-demo/templates/layout/base.html.twig
@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <title>Spirit Web Twig — Development Preview</title>
+
+    <title>
+      {%- if block('title') is defined %}{% block title %}{% endblock %} —{% endif %} Web Twig — Spirit Design System
+    </title>
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

diff --git a/apps/web-twig-demo/templates/layout/default.html.twig b/apps/web-twig-demo/templates/layout/default.html.twig
@@ -1,17 +1,42 @@
 {% extends 'layout/base.html.twig' %}
 
-
 {% block body %}
 
-  {% block header %}{% include 'partials/header.html.twig' %}{% endblock %}
+  {% set title -%}
+    {% block title %}{% endblock %}
+  {%- endset %}
+
+  {% set parentPageName -%}
+    {% block parentPageName %}{% endblock %}
+  {%- endset %}
+
+  {% set parentPageUrl = '.' %}
+  {% if parentPageName == 'Components' %}
+    {% set parentPageUrl = '/' %}
+  {% endif %}
+
+  {% set isUnstable -%}
+    {% block isUnstable %}{% endblock %}
+  {%- endset %}
 
-  <main class="bg-primary py-1100 py-tablet-1600">
-    <div class="Container">
+  {% block header %}
+    {% include 'partials/header.html.twig' %}
+    {% include 'partials/cover.html.twig' with { isUnstable, parentPageName, parentPageUrl, title } only %}
+  {% endblock %}
 
-      {% include 'partials/tabs.html.twig' %}
+  {# Pre-render page content due to TwigX limitations. #}
+  {%- set renderedContent -%}
+    {% block content %}{% endblock %}
+  {%- endset -%}
 
-      {% block content %}{% endblock %}
+  <main class="py-1000">
+    <Container>
 
-    </div>
+      {{ renderedContent }}
+
+    </Container>
   </main>
+
+  {% include 'partials/footer.html.twig' only %}
+
 {% endblock %}
diff --git a/apps/web-twig-demo/templates/layout/plain.html.twig b/apps/web-twig-demo/templates/layout/plain.html.twig
diff --git a/apps/web-twig-demo/templates/partials/cover.html.twig b/apps/web-twig-demo/templates/partials/cover.html.twig
@@ -0,0 +1,39 @@
+<div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700">
+  <Container>
+
+    <h1
+      class="Flex Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter Flex--row typography-heading-xlarge-bold"
+      style="--flex-spacing: var(--spirit-space-1000)"
+    >
+      {{ title }}
+
+      {% if isUnstable %}
+        <Tag color="warning" size="large">Unstable</Tag>
+      {% endif %}
+    </h1>
+
+    <Breadcrumbs>
+      <ol>
+        <li class="d-flex">
+          <Link href="http://localhost:3456" color="primary" isUnderlined>Spirit</Link>
+          <Icon name="chevron-right" />
+        </li>
+        <li class="d-flex">
+          <Link href="/" color="primary" isUnderlined>Web Twig</Link>
+          <Icon name="chevron-right" />
+        </li>
+        {% if parentPageName %}
+          <li class="d-flex">
+            <Link href="{{ parentPageUrl }}" color="primary" isUnderlined>{{ parentPageName }}</Link>
+            <Icon name="chevron-right" />
+          </li>
+        {% endif %}
+        <li class="d-flex">
+          {# Use <a> instead of <Link> so `href` can be empty (= current URL): #}
+          <a href="" class="link-secondary" aria-current="page">{{ title }}</a>
+        </li>
+      </ol>
+    </Breadcrumbs>
+
+  </Container>
+</div>
diff --git a/apps/web-twig-demo/templates/partials/footer.html.twig b/apps/web-twig-demo/templates/partials/footer.html.twig
@@ -0,0 +1,7 @@
+<footer class="bg-secondary mt-1200 mt-tablet-1700 pt-1400 pb-1200 text-center">
+  <Container>
+
+    © Alma Career Oy and its subsidiaries
+
+  </Container>
+</footer>
diff --git a/apps/web-twig-demo/templates/partials/header.html.twig b/apps/web-twig-demo/templates/partials/header.html.twig
@@ -1,17 +1,48 @@
-<header class='spirit-theme-light-on-brand bg-primary text-secondary py-1200 py-tablet-1400'>
-  <div class="Container">
+<Header UNSAFE_className="spirit-theme-light-on-brand">
 
-    <h1 class='typography-heading-xlarge-bold'>Spirit Design System</h1>
-    <h2 class='typography-heading-medium-bold text-secondary mb-1000'>Web Twig — Development Preview</h2>
+  <Link href="http://localhost:3456" aria-label="Spirit Development Preview">
+    {% include 'assets/spiritLogoInverted.html.twig' %}
+  </Link>
 
-    <div class="d-grid d-tablet-block">
-      <a href="https://github.com/lmc-eu/spirit-design-system" class="Button Button--tertiary Button--large mb-400 mb-tablet-0 mr-tablet-400">
-        GitHub Project
-      </a>
-      <a href="https://spirit.supernova-docs.io/spirit/" class="Button Button--tertiary Button--large">
-        Spirit Docs →
-      </a>
-    </div>
+  <HeaderMobileActions dialogId="off-canvas-navigation" />
 
-  </div>
-</header>
+  <HeaderDesktopActions aria-label="Main navigation">
+    <HeaderNav>
+      <HeaderNavItem>
+        <HeaderLink href="http://localhost:3456/packages/web/">Web</HeaderLink>
+      </HeaderNavItem>
+      <HeaderNavItem>
+        <HeaderLink href="http://localhost:3456/packages/web-react/">Web React</HeaderLink>
+      </HeaderNavItem>
+      <HeaderNavItem>
+        <HeaderLink href="/" isCurrent>Web Twig</HeaderLink>
+      </HeaderNavItem>
+      <HeaderNavItem>
+        <HeaderLink href="http://localhost:3456/packages/form-validations/">Form Validations</HeaderLink>
+      </HeaderNavItem>
+    </HeaderNav>
+  </HeaderDesktopActions>
+
+</Header>
+
+<HeaderDialog id="off-canvas-navigation" aria-label="Menu">
+  <HeaderDialogCloseButton dialogId="off-canvas-navigation" />
+
+  <HeaderDialogActions aria-label="Main navigation">
+    <HeaderDialogNav>
+      <HeaderDialogNavItem>
+        <HeaderDialogLink href="http://localhost:3456/packages/web/">Web</HeaderDialogLink>
+      </HeaderDialogNavItem>
+      <HeaderDialogNavItem>
+        <HeaderDialogLink href="http://localhost:3456/packages/web-react/">Web React</HeaderDialogLink>
+      </HeaderDialogNavItem>
+      <HeaderDialogNavItem>
+        <HeaderDialogLink href="#" isCurrent>Web Twig</HeaderDialogLink>
+      </HeaderDialogNavItem>
+      <HeaderDialogNavItem>
+        <HeaderDialogLink href="http://localhost:3456/packages/form-validations/">Form Validations</HeaderDialogLink>
+      </HeaderDialogNavItem>
+    </HeaderDialogNav>
+  </HeaderDialogActions>
+
+</HeaderDialog>
diff --git a/apps/web-twig-demo/templates/partials/tabs.html.twig b/apps/web-twig-demo/templates/partials/tabs.html.twig
@@ -1,16 +1,30 @@
 {% set routeName = app.request.get('_route') %}
 
-<ul class="Tabs mb-1400" role="tablist">
-  <li class="Tabs__item">
-    <a href="/" class="Tabs__link{% if routeName == 'index' %} is-selected" aria-selected="true{% endif %}">Components</a>
-  </li>
-  <li class="Tabs__item">
-    <a href="icons/" class="Tabs__link{% if routeName == 'icons_index' %} is-selected" aria-selected="true{% endif %}">Icons</a>
-  </li>
-  <li class="Tabs__item">
-    <a href="helpers/" class="Tabs__link{% if routeName == 'helpers_index' %} is-selected" aria-selected="true{% endif %}">Helpers</a>
-  </li>
-  <li class="Tabs__item">
-    <a href="validations/" class="Tabs__link{% if routeName == 'validations_index' %} is-selected" aria-selected="true{% endif %}">Validations</a>
-  </li>
-</ul>
+{% set isComponentsSelected = routeName == 'index' %}
+{% set isIconsSelected = routeName == 'icons_index' %}
+{% set isHelpersSelected = routeName == 'helpers_index' %}
+{% set isValidationsSelected = routeName == 'validations_index' %}
+
+<div class="breakout-container d-grid">
+  <ScrollView
+    direction="horizontal"
+    overflowDecorators="shadows"
+    data-spirit-toggle="scrollView"
+    marginBottom="{{ { mobile: 'space-800', tablet: 'space-1100' } }}"
+  >
+    <TabList marginX="auto" marginBottom="space-800">
+      <TabItem>
+        <TabLink href="/" isSelected={{ isComponentsSelected }}>Components</TabLink>
+      </TabItem>
+      <TabItem>
+        <TabLink href="/icons" isSelected={{ isIconsSelected }}>Icons</TabLink>
+      </TabItem>
+      <TabItem>
+        <TabLink href="/helpers" isSelected={{ isHelpersSelected }}>Helpers</TabLink>
+      </TabItem>
+      <TabItem>
+        <TabLink href="/validations" isSelected={{ isValidationsSelected }}>Validations</TabLink>
+      </TabItem>
+    </TabList>
+  </ScrollView>
+</div>