WT-1000: Pattern lib refactor (#1346)

* Add cards list block as a possibility for free form pages

* Refactor button component to not render <a> when there's no link

* Fix dialog css when used inside of a .fl-buttons tag

* Add new css utilities for conditionally displaying content

* Add set as default button block with dummy data

* Add js logic to manage setting firefox as default browser

* Add set as default snippet

* Add cms tag and apply it to the set as default block's template

* Add tests

* Refactor set as default snippet and block

* Remove unnecessary template tag

* Update migration

* Add default browser conditions to conditional display

* Fix platform conditions on default browser snippet

* Add missing default browser conditions to block

* modal revisions, fixing a bad migration

* fixing tests

* fixing tests again

* Add isUITourEnabled helper and apply it to the isDefaultBrowser check

* Fix set default messages that shouldn't show on Firefox

* Add missing empty option to default browser conditional choices

* Fix set as default CSS selector

* Add Set as Default snippet to DB export

* Only add set as default button when UI Tour is allowed

* Add merge migration

* Only start check timer when set as default button is clicked

* Make multiple instances of set as default buttons possible

* Use div instead of p for notification headings, since they use rich text

* Align notification text to the start on set-as-default modal

* Fix tests

* Separate set as default and ui tour helpers into their own files

* Refactor set as default into a component class

* Update migrations

* Create data migration to add Editors permissions for Set as Default Snippet

* Remove useless css condition

* remove notification, use `is-not-default` conditional around button

* remove success message from modal

* Update test_set_as_default_snippet.py

* Add "copy link to clipboard" button to the download section of the snippet

* button alignment

* Use download firefox button include on set as default snippet

* Add static bundles entries for the page-specific css files

* Remove pages samples from the pattern library

* Add page-specific css bundles to the templates

* Wrap page-specific css with @layer page

* Remove page-specific css imports from the main flare26 css file

* Fix media queries on page-specific css

* Make flare import anywhere loader recursive

* Move component CSS files to their own folder

* Reorganize pattern library files

Still need to find out which components in the flare-26 folder aren't
related to flare 26, so some of them might be removed in a future
commit.

* Separate flare 25 from 26 in the pattern library's sidebar

* Point base path for the visual regression tests to the flare 26 folder

* Fix visual regression tests

* Remove redundant pattern library samples for flare26

* Set flare26 as the default case in the pattern library base template

* Add visual regression tests for dialog and tag components

* Add visual regression tests for illustration card variants

* Add visual regression tests for heading variants

* Treat flare26 as the default case in pattern library yamls

* Add visual regression tests for missing components

* Remove redundant body text pattern lib sample

* Remove redundant card pattern lib samples

* Add missing snapshots

* Fix sticker card border and card body color on dark mode

* Make base pattern library samples not force light/dark modes

* Refactor visual regression tests to test dark mode

* Fix spacing on icon-list component

* Remove 2026 mentions on flare26 pattern library samples and tests

* Add container width prop to pattern library cards list samples

* Update snapshots

* Update Card Gallery pattern library copy

* Redirect /mobile/get-app to /mobile (#1350)

* Enable stub attribution mode on freeform pages (#1352)

Change FreeFormPage2026 to base its promote_panels on UTMParamsMixin.promote_panels instead of AbstractSpringfieldCMSPage.promote_panels. This ensures the UTM parameter promote panels are included for this page type while still appending the enable_marketing_attribution FieldPanel.

* Add analytics attributes to all rich text links (#1332)

* Add analytics attributes to all rich text links

* Fix migration

* Fix richtext template tag tests

* Make sure Rich Text Block uses |richtext by default

* Fix rich text block position attr when context variable isn't set

* Check URL on external link handler before building the resulting HTML

* Rename migration

* Add document link to base rich text features

* Fix attribute name on comment

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Add comment about apps ordering

* Add unit tests for UID link methods

* Add analytics attributes to Wagtail Document links

* Add license

* Rename migration

* Fix |richtext test for FxA link

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Update snapshots

* Remove basic step cards pattern lib sample

* Fix icon text list's icon bg and color

* Remove outline from two column outline cards when an image is stuck

---------

Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com>
Co-authored-by: Kasey Kelly <kasey@servee.com>
Co-authored-by: Matthew Semeniuk <9813994+bluewave41@users.noreply.github.com>
Co-authored-by: Dan Brown <dbrown@mozilla.com>
Co-authored-by: Mariana Bedran Lesche <mariana@lincolnloop.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 6 people

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

@@ -229,6 +229,7 @@ Sticker Card
     /* backdrop-filter: blur(7.5px); */
     background: var(--fl-theme-surface-card-gradient);
     block-size: auto;
+    border: 1px solid var(--sticker-card-border-color);
     border-radius: var(--token-border-radius-md);
     box-shadow: var(--fl-theme-shadow-card);
     color: var(--token-color-black-4);
@@ -243,12 +244,6 @@ Sticker Card
     transition: transform var(--token-transition-base);
 }
 
-@media (prefers-color-scheme: light) {
-    .fl-split-page-lower .fl-sticker-card {
-        border: 1px solid var(--card-border-color);
-    }
-}
-
 /* Same opacity-shadow technique as .fl-card::after — avoids per-frame repaints
    that transitioning box-shadow directly would cause. */
 .fl-sticker-card::after {

media/css/cms/components/flare26-icon-list.css

@@ -5,8 +5,6 @@
 */
 
 .fl-icon-text-list {
-    --fl-theme-color-icon-wrap: var(--token-color-soft-purple);
-    --fl-theme-color-icon: var(--fl-theme-color-text);
     columns: 24ch 2;
     gap: var(--token-spacing-xl);
     list-style: none;
@@ -20,14 +18,10 @@
     display: flex;
     gap: var(--token-layout-3xs);
     margin-block-end: 0;
+    padding-block: var(--token-spacing-sm);
 }
 
 .fl-icon-text-list .fl-icon-wrap {
-    background: transparent;
-    color: var(--two-column-accent-color);
-}
-
-.fl-split-page-upper .fl-icon-text-list,
-.fl-force-dark-theme .fl-icon-text-list {
-    --fl-theme-color-icon-wrap: var(--token-color-medium-purple);
+    background: var(--icon-text-list-icon-bg);
+    color: var(--fl-theme-color-text);
 }

media/css/cms/components/flare26-two-column-cards.css

@@ -31,6 +31,10 @@
     position: relative;
 }
 
+.fl-two-column-card .fl-icon-text-list li {
+    padding-block: 0;
+}
+
 .fl-two-column-card .media img {
     inline-size: 100%;
     margin-block-end: 0;
@@ -40,6 +44,11 @@
     margin: 0;
 }
 
+.fl-two-column-card .fl-icon-text-list .fl-icon-wrap {
+    background: transparent;
+    color: var(--fl-theme-color-text);
+}
+
 .fl-two-column-cards-light-dark
     .fl-two-column-card-wrapper:first-child
     .fl-two-column-card {
@@ -97,6 +106,10 @@
     z-index: 1;
 }
 
+.fl-two-column-card[class*='image-is-stuck'] {
+    border-width: 0;
+}
+
 .image-is-stuck-bottom-right .media,
 .image-is-stuck-bottom-left .media,
 .image-is-stuck-top-left .media,

media/css/cms/flare26-template.css

@@ -31,6 +31,10 @@ body.fl-modal-open {
     padding-block: 0 var(--fl-theme-main-border-radius);
 }
 
+.fl-body {
+    color: var(--fl-theme-color-text);
+}
+
 .fl-split-page-upper,
 .fl-split-page-lower {
     margin: 0;

media/css/cms/flare26-theme.css

@@ -108,6 +108,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
     /* Card themes */
     --card-bg-color: var(--token-color-white);
     --card-border-color: var(--token-color-soft-purple);
+    --sticker-card-border-color: var(--token-color-soft-purple);
     --theme-purple-card-bg-color: var(--token-color-soft-purple);
     --theme-purple-card-bullet-color: var(--token-color-purple);
     --theme-dark-purple-card-bg-color: var(--token-color-purple);
@@ -229,6 +230,9 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
         ),
         radial-gradient(165.25% 100% at 50% 0%, #d7c4f6 0%, #fdf4f3 86.06%);
 
+    /* Icon text list */
+    --icon-text-list-icon-bg: var(--token-color-soft-purple);
+
     /* Numbered list */
     --theme-numbered-list-background: var(--token-color-soft-purple-40);
     --theme-numbered-list-border-color: var(--token-color-soft-purple-4);
@@ -263,6 +267,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
     --fl-menu-category-link-hover-bg-color: var(--token-color-link-purple);
 
     /* Cards */
+    --sticker-card-border-color: transparent;
     --fl-step-card-bg: var(--token-color-medium-purple);
     --fl-step-card-index-bg: var(--token-color-dark-purple);
     --fl-theme-illustration-icon-bg: var(--token-color-medium-purple);
@@ -393,6 +398,9 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
             rgb(34, 4, 66) 80%
         );
 
+    /* Icon text list */
+    --icon-text-list-icon-bg: var(--token-color-medium-purple);
+
     /* Numbered list */
     --theme-numbered-list-background: transparent;
     --theme-numbered-list-border-color: var(--token-color-light-purple);
@@ -428,6 +436,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
     --fl-menu-category-link-hover-bg-color: var(--token-color-soft-purple);
 
     /* Cards */
+    --sticker-card-border-color: var(--token-color-soft-purple);
     --fl-step-card-bg: var(--token-color-cream);
     --fl-step-card-index-bg: var(--token-color-white);
     --fl-theme-illustration-icon-bg: var(--token-color-soft-purple);
@@ -519,6 +528,9 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
     --smart-window-play-icon-fill-color-hover: var(--token-color-black-4);
     --smart-window-play-icon-fill-color-active: #42414d;
 
+    /* Icon text list */
+    --icon-text-list-icon-bg: var(--token-color-soft-purple);
+
     /* Numbered list */
     --theme-numbered-list-background: var(--token-color-soft-purple-40);
     --theme-numbered-list-border-color: var(--token-color-soft-purple-4);
@@ -553,6 +565,7 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
         --fl-menu-separator-color: var(--token-color-light-purple);
 
         /* Cards */
+        --sticker-card-border-color: transparent;
         --fl-step-card-bg: var(--token-color-medium-purple);
         --fl-step-card-index-bg: var(--token-color-dark-purple);
         --fl-theme-illustration-icon-bg: var(--token-color-medium-purple);
@@ -691,6 +704,9 @@ Contextual CSS custom properties that change based on context (e.g. layout direc
                 rgb(34, 4, 66) 80%
             );
 
+        /* Icon text list */
+        --icon-text-list-icon-bg: var(--token-color-medium-purple);
+
         /* Numbered list */
         --theme-numbered-list-background: transparent;
         --theme-numbered-list-border-color: var(--token-color-light-purple);

media/css/cms/flare26-utilities.css

@@ -14,6 +14,10 @@ This is imported into both the legacy and modern stylesheets so the
 style rules should have any fallbacks needed for IE8+ and Safari 12.1+
 ===================================================================== */
 
+.fl-theme-background {
+    background-color: var(--fl-theme-background);
+}
+
 .max-width-wide-banner {
     margin: 0 auto;
     max-inline-size: var(--token-width-desktop-wide-banner);

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

@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% extends "cms/base-flare26.html" if "2026" in pattern_name else "cms/base-flare.html" %}
+{% extends "cms/base-flare.html" if "2025" in pattern_name else "cms/base-flare26.html" %}
 
 {# Avoid referencing `page` which isn't provided by the pattern library #}
 {% block page_title %}{{ pattern_name }} | Pattern preview{% endblock %}

springfield/cms/templates/components/dialog.html

@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<dialog id="{{ id }}" class="fl-dialog">
+<dialog id="{{ id }}" class="fl-dialog"{% if testid %} data-testid="{{ testid }}"{% endif %}>
 
   <button class="fl-dialog-close-button" aria-label="Close">
     <include:icon icon_name="close" />

springfield/cms/templates/components/tag.html

@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<span class="fl-tag fl-tag-{{ color }} fl-tag-{{ corners }}">
+<span class="fl-tag{% if color %} fl-tag-{{ color }}{% endif %}{% if corners %} fl-tag-{{ corners }}{% endif %}">
   {% if before_icon %}
     <include:icon
       icon_name="{{ before_icon }}"