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

lmc-eu · Oct 3, 2024 · 95cbb8a · 95cbb8a
1 parent 6abf5f6
commit 95cbb8a
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 27 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/default.html.twig b/apps/web-twig-demo/templates/default.html.twig
@@ -6,14 +6,16 @@
 
   {% include 'partials/tabs.html.twig' %}
 
-  <ul class="Grid Grid--cols-2 Grid--tablet--cols-3">
+  <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
 
     {% for component in components %}
       <li class="d-grid">
-        <a href="components/{{ component | lower }}/" class="docs-Card text-truncate">{{ component }}</a>
+        <a href="components/{{ component | lower }}/" class="docs-Card text-truncate">
+          {{ component }}
+        </a>
       </li>
     {% endfor %}
 
-  </ul>
+  </Grid>
 
 {% endblock %}
diff --git a/apps/web-twig-demo/templates/helpers.html.twig b/apps/web-twig-demo/templates/helpers.html.twig
@@ -6,14 +6,16 @@
 
   {% include 'partials/tabs.html.twig' %}
 
-  <ul class="Grid Grid--cols-2 Grid--tablet--cols-3">
+  <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
 
     {% for helper in helpers %}
-      <li>
-        <a href="helpers/{{ helper }}/" class="docs-Card">{{ helper | replace({'-': ' '}) | title }}</a>
+      <li class="d-grid">
+        <a href="helpers/{{ helper }}/" class="docs-Card text-truncate">
+          {{ helper | replace({'-': ' '}) | title }}
+        </a>
       </li>
     {% endfor %}
 
-  </ul>
+  </Grid>
 
 {% endblock %}
diff --git a/apps/web-twig-demo/templates/layout/base.html.twig b/apps/web-twig-demo/templates/layout/base.html.twig
@@ -4,7 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
-    <title>{% block title %}{% endblock%} — Web Twig — Spirit Design System</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
@@ -24,12 +24,17 @@
     {% include 'partials/cover.html.twig' with { isUnstable, parentPageName, parentPageUrl, title } only %}
   {% endblock %}
 
+  {# Pre-render page content due to TwigX limitations. #}
+  {%- set renderedContent -%}
+    {% block content %}{% endblock %}
+  {%- endset -%}
+
   <main class="py-1000">
-    <div class="Container">
+    <Container>
 
-      {% block content %}{% endblock %}
+      {{ renderedContent }}
 
-    </div>
+    </Container>
   </main>
 
   {% include 'partials/footer.html.twig' only %}

diff --git a/apps/web-twig-demo/templates/partials/cover.html.twig b/apps/web-twig-demo/templates/partials/cover.html.twig
@@ -1,5 +1,5 @@
 <div class="spirit-theme-light-on-brand bg-primary mb-tablet-1200 py-1200 py-tablet-1700">
-  <div class="Container">
+  <Container>
 
     <h1
       class="Flex Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter Flex--row typography-heading-xlarge-bold"
@@ -8,7 +8,7 @@
       {{ title }}
 
       {% if isUnstable %}
-        <span class="Tag Tag--large Tag--warning">Unstable</span>
+        <Tag color="warning" size="large">Unstable</Tag>
       {% endif %}
     </h1>
 
@@ -35,5 +35,5 @@
       </ol>
     </Breadcrumbs>
 
-  </div>
+  </Container>
 </div>
diff --git a/apps/web-twig-demo/templates/partials/footer.html.twig b/apps/web-twig-demo/templates/partials/footer.html.twig
@@ -1,7 +1,7 @@
 <footer class="bg-secondary mt-1200 mt-tablet-1700 pt-1400 pb-1200 text-center">
-  <div class="Container">
+  <Container>
 
     © Alma Career Oy and its subsidiaries
 
-  </div>
+  </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,8 +1,8 @@
 <Header UNSAFE_className="spirit-theme-light-on-brand">
 
-  <a href="http://localhost:3456" aria-label="Spirit Development Preview">
+  <Link href="http://localhost:3456" aria-label="Spirit Development Preview">
     {% include 'assets/spiritLogoInverted.html.twig' %}
-  </a>
+  </Link>
 
   <HeaderMobileActions dialogId="off-canvas-navigation" />
 

diff --git a/apps/web-twig-demo/templates/partials/tabs.html.twig b/apps/web-twig-demo/templates/partials/tabs.html.twig
@@ -5,9 +5,14 @@
 {% set isHelpersSelected = routeName == 'helpers_index' %}
 {% set isValidationsSelected = routeName == 'validations_index' %}
 
-<div class="breakout-container">
-  <ScrollView direction="horizontal" overflowDecorators="shadows" data-spirit-toggle="scrollView" UNSAFE_className="mb-800 mb-tablet-1100">
-    <TabList UNSAFE_className="mb-800 mx-auto">
+<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>

diff --git a/apps/web-twig-demo/templates/validations.html.twig b/apps/web-twig-demo/templates/validations.html.twig
@@ -6,7 +6,7 @@
 
   {% include 'partials/tabs.html.twig' %}
 
-  <Grid UNSAFE_className="mb-1600">
+  <Grid marginBottom="space-1600">
     <GridItem columnStart="{{ { mobile: 2, tablet: 4, desktop: 5 } }}" columnEnd="{{ { mobile: 12, tablet: 10, desktop: 9 } }}">
       <h2 class="docs-Heading">Real-World examples</h2>
 

diff --git a/packages/web-twig/src/Resources/icons/Icons.stories.twig b/packages/web-twig/src/Resources/icons/Icons.stories.twig
@@ -6,12 +6,16 @@
 
     {% include 'partials/tabs.html.twig' %}
 
-    <Grid elementType="ul" cols="{{ { mobile: 2, tablet: 4, desktop: 6 } }}" UNSAFE_className="text-center my-1000">
+    <Grid
+        elementType="ul"
+        cols="{{ { mobile: 2, tablet: 4, desktop: 6 } }}"
+        marginY="space-1000"
+        UNSAFE_className="text-center"
+    >
 
         {% for icon in icons %}
             <li class="mb-600">
                 <Icon name={{ icon }} />
-
                 <Text marginTop="space-500" emphasis="bold">{{ icon }}</Text>
             </li>
         {% endfor %}