Merge branch 'WT-961-related-article-detail-page-improvments' of github.com:mozmeao/springfield into WT-961-related-article-detail-page-improvments

Author: maribedran

media/css/cms/components/flare26-navigation.css

@@ -162,7 +162,12 @@
 }
 
 .fl-menu-title,
-.fl-menu-title h2,
+.fl-menu-title .fl-menu-heading {
+    line-height: unset;
+}
+
+.fl-menu-title,
+.fl-menu-title .fl-menu-heading,
 .fl-menu-subtitle {
     color: var(--fl-theme-color-text);
     font-family: var(--fl-theme-font-family-body);
@@ -436,7 +441,7 @@
     }
 
     .fl-menu-title,
-    .fl-menu-title h2,
+    .fl-menu-title .fl-menu-heading,
     .fl-menu-subtitle {
         font-size: var(--fl-theme-font-size-body-sm);
     }
@@ -470,15 +475,15 @@
         pointer-events: auto;
     }
 
-    .fl-menu-category h2::after {
+    .fl-menu-category .fl-menu-heading::after {
         display: inline-block;
     }
 
     .fl-menu-title {
         color: var(--fl-menu-title-color);
     }
 
-    .fl-menu-title h2 {
+    .fl-menu-title .fl-menu-heading {
         font-weight: var(--token-font-weight-regular);
         margin: 0;
         padding: 0 var(--token-spacing-sm);

media/js/base/mozilla-utils.js

@@ -65,6 +65,11 @@ if (typeof window.Mozilla === 'undefined') {
         var data = Utils.getDownloadPlatformVersion(window.site);
 
         for (var i = 0; i < downloadButton.length; ++i) {
+            if (
+                downloadButton[i].getAttribute('data-version-forced') === 'true'
+            ) {
+                continue;
+            }
             if (data && data.version) {
                 downloadButton[i].setAttribute(
                     'data-download-version',

springfield/cms/blocks.py

@@ -1066,30 +1066,34 @@ def MixedButtonsBlock(
     )
 
 
-class ButtonRowBlock(blocks.StructBlock):
-    spacing = blocks.ChoiceBlock(
-        choices=[
-            ("", "No spacing"),
-            ("small", "Small"),
-            ("large", "Large"),
-        ],
-        default="",
-        required=False,
-    )
-    buttons = MixedButtonsBlock(
-        button_types=get_button_types(allow_uitour=False),
-        min_num=1,
-        max_num=4,
-    )
-
-    class Meta:
-        label = "Button Row"
-        label_format = "Button Row"
-        template = "cms/blocks/button-row.html"
-        form_layout = blocks.BlockGroup(
-            children=["buttons"],
-            settings=["spacing"],
+def ButtonRowBlock(allow_uitour=False, **kwargs):
+    class _ButtonRowBlock(blocks.StructBlock):
+        spacing = blocks.ChoiceBlock(
+            choices=[
+                ("", "No spacing"),
+                ("small", "Small"),
+                ("large", "Large"),
+            ],
+            default="",
+            required=False,
         )
+        buttons = MixedButtonsBlock(
+            button_types=get_button_types(allow_uitour),
+            themes=BUTTON_THEMES_2026,
+            min_num=1,
+            max_num=3,
+        )
+
+        class Meta:
+            label = "Button Row"
+            label_format = "Button Row"
+            template = "cms/blocks/button-row.html"
+            form_layout = blocks.BlockGroup(
+                children=["buttons"],
+                settings=["spacing"],
+            )
+
+    return _ButtonRowBlock(**kwargs)
 
 
 class CTASettings(blocks.StructBlock):
@@ -2217,17 +2221,7 @@ class _TwoColumnCardBlock(blocks.StructBlock):
                 ("pricing_heading", PricingHeadingBlock()),
                 ("rich_text", blocks.RichTextBlock(features=EXPANDED_TEXT_FEATURES)),
                 ("icon_list", IconListBlock()),
-                (
-                    "button",
-                    MixedButtonsBlock(
-                        button_types=get_button_types(allow_uitour),
-                        themes=BUTTON_THEMES_2026,
-                        min_num=0,
-                        max_num=1,
-                        required=False,
-                        label="Button",
-                    ),
-                ),
+                ("button_row", ButtonRowBlock(allow_uitour=allow_uitour)),
                 ("media", MediaBlock(max_num=1, min_num=0, required=False)),
                 ("numbered_list", NumberedListBlock()),
                 ("timeline", TimelineBlock()),
@@ -2573,6 +2567,7 @@ class _SectionBlock(blocks.StructBlock):
                 ("kit_banner", KitBannerBlock(allow_uitour=allow_uitour)),
                 ("line_cards", LineCardsBlock(allow_uitour=allow_uitour)),
                 ("two_column_cards", TwoColumnCardsBlock(allow_uitour=allow_uitour)),
+                ("button_row", ButtonRowBlock(allow_uitour=allow_uitour)),
             ],
             required=False,
         )

springfield/cms/fixtures/two_column_cards_fixtures.py

@@ -178,9 +178,13 @@ def get_two_column_cards_variants() -> list[dict]:
                             block_id="tcc1-il1",
                         ),
                         {
-                            "type": "button",
-                            "value": [buttons["primary"]],
+                            "type": "button_row",
                             "id": "tcc1-btn1",
+                            "value": {
+                                "buttons": [
+                                    dict(buttons["primary"], id="tcc1-btn1-inner"),
+                                ],
+                            },
                         },
                     ],
                     card_id="tcc1-card1",
@@ -203,9 +207,13 @@ def get_two_column_cards_variants() -> list[dict]:
                             block_id="tcc1-il2",
                         ),
                         {
-                            "type": "button",
-                            "value": [buttons["primary"]],
+                            "type": "button_row",
                             "id": "tcc1-btn2",
+                            "value": {
+                                "buttons": [
+                                    dict(buttons["primary"], id="tcc1-btn2-inner"),
+                                ],
+                            },
                         },
                     ],
                     card_id="tcc1-card2",
@@ -290,9 +298,13 @@ def get_two_column_cards_variants() -> list[dict]:
                             block_id="tcc3-il1",
                         ),
                         {
-                            "type": "button",
-                            "value": [buttons["primary"]],
+                            "type": "button_row",
                             "id": "tcc3-btn1",
+                            "value": {
+                                "buttons": [
+                                    dict(buttons["primary"], id="tcc3-btn1-inner"),
+                                ],
+                            },
                         },
                     ],
                     card_id="tcc3-card1",
@@ -315,9 +327,13 @@ def get_two_column_cards_variants() -> list[dict]:
                             block_id="tcc3-il2",
                         ),
                         {
-                            "type": "button",
-                            "value": [buttons["primary"]],
+                            "type": "button_row",
                             "id": "tcc3-btn2",
+                            "value": {
+                                "buttons": [
+                                    dict(buttons["primary"], id="tcc3-btn2-inner"),
+                                ],
+                            },
                         },
                         _media("tcc3-m2"),
                     ],

springfield/cms/models/pages.py

@@ -879,7 +879,7 @@ def _get_freeform_page_blocks_2026(allow_uitour=True, allow_kit_intro=False):
         ("topic_list", TopicListBlock(allow_uitour=allow_uitour, group="Main")),
         ("two_column_cards", TwoColumnCardsBlock(allow_uitour=allow_uitour, group="Main")),
         ("line_cards", LineCardsBlock(allow_uitour=allow_uitour, template="cms/blocks/sections/line-cards-section.html", group="Main")),
-        ("button_row", ButtonRowBlock(group="Main")),
+        ("button_row", ButtonRowBlock(allow_uitour=allow_uitour, group="Main")),
         ("kit_banner", KitBannerBlock(allow_uitour=allow_uitour, group="Banners")),
         (
             "banner_snippet",

springfield/cms/templates/cms/article_detail_page.html

@@ -9,9 +9,11 @@
 
 {% block body_class %}fl-article-body {% if not switch("flare26_enabled") %}disable-dark-mode{% endif %}{% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page fl-article-page">
-  <main class="fl-main">
+  <div class="fl-main">
     <div class="fl-article-main">
       <header class="fl-article-header">
         <include:heading
@@ -79,7 +81,7 @@
         {% include_block block %}
       {% endfor %}
     {% endif %}
-  </main>
+  </div>
   {% if not switch("flare26_enabled") %}
     {% set value = get_download_firefox_cta_snippet() %}
     {% if value %}

springfield/cms/templates/cms/article_index_page.html

@@ -11,9 +11,11 @@
   <include:flare26-header theme="dark"/>
 {% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page">
-  <main class="fl-main has-gradient-bottom">
+  <div class="fl-main has-gradient-bottom">
     <div class="fl-split-page-upper has-gradient-bottom">
 
       <section class="fl-section">
@@ -354,7 +356,7 @@ <h3 class="fl-heading fl-heading-size-3">
         </div>
       </section>
     </div>
-  </main>
+  </div>
 </div>
 {% endblock %}
 

springfield/cms/templates/cms/article_theme_page.html

@@ -13,10 +13,12 @@
   <include:flare26-header theme="{{ header_theme }}" />
 {% endblock %}
 
+{% block main_class %}{% endblock %}
+
 {% block content %}
 <div class="fl-page fl-features-theme-page">
   {% if page.upper_content|length %}
-    <main class="fl-main">
+    <div class="fl-main">
       {% set ns = namespace(headings=0) %}
       {% set block_level = 1 %}
 
@@ -50,9 +52,9 @@
           {% include_block block %}
         {% endfor %}
       </div>
-    </main>
+    </div>
   {% else %}
-    <main class="fl-main has-gradient-bottom">
+    <div class="fl-main has-gradient-bottom">
       {% set ns = namespace(headings=0) %}
       {% for block in page.content %}
         {% set block_index = loop.index %}
@@ -66,7 +68,7 @@
 
         {% include_block block %}
       {% endfor %}
-    </main>
+    </div>
   {% endif %}
 </div>
 {% endblock %}

springfield/cms/templates/cms/base-flare26.html

@@ -109,12 +109,11 @@
     {% block sub_navigation %}
     {% endblock %}
 
+    <main class="{% block main_class %}fl26-content{% endblock %}"{% block main_attrs %}{% endblock %}>
     {% block content %}
-    <main class="fl26-content">
       <div class="fl26-content-inner">
         <h1>{{ page.title if page is defined and page.title is defined else 'Firefox' }}</h1>
       </div>
-    </main>
     {% endblock %}
 
     {% block pre_footer %}
@@ -152,6 +151,7 @@ <h1>{{ page.title if page is defined and page.title is defined else 'Firefox' }}
       {% endif %}
 
     {% endblock pre_footer %}
+    </main>
 
     {% block flare_footer %}
       <include:flare26-footer />

springfield/cms/templates/cms/base-pattern.html

@@ -22,4 +22,6 @@
   </div>
 {% endblock %}
 
+{% block pre_footer %}{% endblock %}
+
 {% block flare_footer %}{% endblock %}