Add titleTag prop (h2/h3) in PackageBox

smnandre · Sep 25, 2023 · 05d1d56 · 05d1d56
1 parent 6c8fd59
commit 05d1d56
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 6 deletions.
diff --git a/ux.symfony.com/assets/styles/app/_typography.scss b/ux.symfony.com/assets/styles/app/_typography.scss
@@ -24,8 +24,8 @@ h2.ubuntu {
 h3, a.component-title {
   font-family: var(--font-family-title);
   font-weight: 700;
-  font-size: 28px !important;
-  line-height: 32px !important;
+  font-size: 28px;
+  line-height: 32px;
   letter-spacing: -1px;
   color: #0A0A0A;
   text-decoration: none;

diff --git a/ux.symfony.com/assets/styles/components/_PackageBox.scss b/ux.symfony.com/assets/styles/components/_PackageBox.scss
@@ -112,6 +112,14 @@
   flex-direction: row;
   align-items: center;
   gap: .75rem;
+
+  font-family: var(--font-family-title);
+  font-weight: 700;
+  font-size: 28px !important;
+  line-height: 32px !important;
+  letter-spacing: -1px;
+  color: #0A0A0A;
+  text-decoration: none;
 }
 
 .PackageBox_link {

diff --git a/ux.symfony.com/src/Twig/PackageBox.php b/ux.symfony.com/src/Twig/PackageBox.php
@@ -9,4 +9,6 @@
 class PackageBox
 {
     public UxPackage $package;
+
+    public string $titleTag = 'h3';
 }
diff --git a/ux.symfony.com/templates/components/PackageBox.html.twig b/ux.symfony.com/templates/components/PackageBox.html.twig
@@ -6,12 +6,12 @@
     </div>
 
     <div class="PackageBox_content">
-        <h3 class="PackageBox_title">
+        <{{ titleTag }} class="PackageBox_title">
             <a href="{{ path(package.route) }}" class="PackageBox_link">{{ package.humanName }}</a>
             <span class="PackageBox_arrow">
                 <twig:Icon name="arrow-right" />
             </span>
-        </h3>
+        </{{ titleTag }}>
         <div class="PackageBox_description">
             {{ package.description|markdown_to_html }}
         </div>

diff --git a/ux.symfony.com/templates/main/homepage.html.twig b/ux.symfony.com/templates/main/homepage.html.twig
@@ -102,7 +102,11 @@
         </a>
     </div>
     <div class="row mt-3 mt-md-5">
-        {{ block('list', 'main/packages.html.twig') }}
+        <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
+            {% for package in packages %}
+                <twig:PackageBox :package="package" titleTag="h3" />
+            {% endfor %}
+        </div>
     </div>
 </div>
 {% endblock %}
diff --git a/ux.symfony.com/templates/main/packages.html.twig b/ux.symfony.com/templates/main/packages.html.twig
@@ -14,7 +14,7 @@
     {% block list %}
         <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
             {% for package in packages %}
-                <twig:PackageBox :package="package"/>
+                <twig:PackageBox :package="package" titleTag="h2" />
             {% endfor %}
         </div>
     {% endblock %}