Merge branch 'integration/2024-evolution' into feature/twe-2-division-signpost-block

Author: SharmaineLim

docs/custom-features/theme.md

@@ -6,11 +6,11 @@ The Theme feature enables the customization of page styles through the applicati
 
 The available color themes are defined using the `tbx.core.utils.models.ColourTheme` enumeration. Each theme option consists of a CSS class name and a human-readable label. The following themes are available:
 
-- `ColourTheme.NONE`: No specific theme applied. When the theme is set to "None", this means we don't add a `theme-****` class to the page, and the default theme (_Coral_, at the time of writing these docs) is applied.
+- `ColourTheme.NONE`: No specific theme applied. When the theme is set to "None", this means we don't add a `theme-****` class to the page, and the default theme (_Coral_, at the time of writing these docs) is applied (unless the page inherits a theme).
 - `ColourTheme.CORAL`: Applies a `theme-coral` class to the page.
+- `ColourTheme.NEBULINE`: Applies a `theme-nebuline` class to the page.
 - `ColourTheme.LAGOON`: Applies a `theme-lagoon` class to the page.
-- `ColourTheme.BANANA`: Applies a `theme-banana` class to the page.
-- `ColourTheme.EARTH`: Applies a `theme-earth` class to the page.
+- `ColourTheme.GREEN`: Applies a `theme-green` class to the page.
 
 ???+ tip
 

docs/front-end/themes_and_modes.md

@@ -8,7 +8,7 @@ The CSS to set the mode is an html class of either `.mode-dark` or `.mode-light`
 
 An editor has an option to select a theme on each page. Selecting a theme on a page will change it for that page, and all child pages, unless another selection is made further down the page tree.
 
-There are currently 4 themes in use: coral, lagoon, banana and earth. The CSS to set the theme is an html class of either `.theme-coral`, `.theme-lagoon`, `.theme-banana` or `.theme-earth`.
+There are currently 4 themes in use: coral, nebuline, lagoon and green. The CSS to set the theme is an html class of either `.theme-coral`, `.theme-nebuline`, `.theme-lagoon` or `.theme-green`.
 
 ???+ note
 

docs/front-end/utility-classes.md

@@ -4,6 +4,6 @@ Most CSS classes used in this build are designed to fit with a particular compon
 
 Some, such as the `listing` component are designed to be a base with variations across a number of variant components - this is made clear by the component naming: `listing--image.html`, `listing--simple.html` etc.
 
-However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `link`, `supporting`, `.body` and `icon--listing-arrow`.
+However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `text--[xyz]`, `link`, and `icon--listing-arrow`.
 
 The same tailwind utility classes that are avialable in `wagtail-kit` are available in this build. `tailwind.config.js` includes the custom spacing for the build, allowing us to use classes such as `mb-spacerMini` where it wouldn't be practical to create a new scss component just for a one-off spacing adjustment.

tbx/blog/migrations/0027_update_theme_colour_choices.py

@@ -0,0 +1,43 @@
+# Generated by Django 4.2.16 on 2024-12-09 08:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("blog", "0026_add_earth_colour_theme"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="blogindexpage",
+            name="theme",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("", "None"),
+                    ("theme-coral", "Coral"),
+                    ("theme-nebuline", "Nebuline"),
+                    ("theme-lagoon", "Lagoon"),
+                    ("theme-green", "Green"),
+                ],
+                max_length=25,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="blogpage",
+            name="theme",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("", "None"),
+                    ("theme-coral", "Coral"),
+                    ("theme-nebuline", "Nebuline"),
+                    ("theme-lagoon", "Lagoon"),
+                    ("theme-green", "Green"),
+                ],
+                max_length=25,
+            ),
+        ),
+    ]

tbx/blog/models.py

@@ -46,7 +46,7 @@ def blog_posts(self):
         prefetch_author_images = models.Prefetch(
             "authors__author__image",
             queryset=CustomImage.objects.prefetch_renditions(
-                "format-webp|fill-72x72",
+                "format-webp|fill-100x100",
                 "format-webp|fill-144x144",
                 "format-webp|fill-286x286",
             ),
@@ -185,7 +185,7 @@ def related_blog_posts(self):
         prefetch_author_images = models.Prefetch(
             "authors__author__image",
             queryset=CustomImage.objects.prefetch_renditions(
-                "format-webp|fill-72x72",
+                "format-webp|fill-100x100",
                 "format-webp|fill-144x144",
                 "format-webp|fill-286x286",
             ),

tbx/core/factories.py

@@ -23,6 +23,8 @@ class Meta:
 
 class HomePageFactory(wagtail_factories.PageFactory):
     title = "Home"
+    hero_heading_1 = "The digital partner"
+    hero_heading_2 = "for positive change"
 
     class Meta:
         model = HomePage

tbx/core/migrations/0038_update_theme_colour_choices.py

@@ -0,0 +1,43 @@
+# Generated by Django 4.2.16 on 2024-12-09 08:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("torchbox", "0037_merge_20240725_1000"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="homepage",
+            name="theme",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("", "None"),
+                    ("theme-coral", "Coral"),
+                    ("theme-nebuline", "Nebuline"),
+                    ("theme-lagoon", "Lagoon"),
+                    ("theme-green", "Green"),
+                ],
+                max_length=25,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="standardpage",
+            name="theme",
+            field=models.CharField(
+                blank=True,
+                choices=[
+                    ("", "None"),
+                    ("theme-coral", "Coral"),
+                    ("theme-nebuline", "Nebuline"),
+                    ("theme-lagoon", "Lagoon"),
+                    ("theme-green", "Green"),
+                ],
+                max_length=25,
+            ),
+        ),
+    ]

tbx/core/migrations/0039_remove_homepage_introduction_homepage_hero_heading_and_more.py

@@ -0,0 +1,35 @@
+# Generated by Django 4.2.16 on 2024-12-04 08:04
+
+from django.db import migrations, models
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("torchbox", "0038_update_theme_colour_choices"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="homepage",
+            name="introduction",
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="hero_heading_1",
+            field=models.CharField(default="", max_length=255),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="hero_heading_2",
+            field=models.CharField(default="", max_length=255),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="hero_introduction",
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+    ]

tbx/core/models.py

@@ -1,8 +1,13 @@
 from django.db import models
 from django.utils.functional import cached_property
+from django.utils.safestring import mark_safe
 
 from modelcluster.fields import ParentalKey
 from tbx.core.utils.fields import StreamField
+from tbx.core.utils.formatting import (
+    convert_bold_links_to_pink,
+    convert_italic_links_to_purple,
+)
 from tbx.core.utils.models import (
     ColourThemeMixin,
     NavigationFields,
@@ -130,7 +135,9 @@ class HomePagePartnerLogo(Orderable):
 # Home Page
 class HomePage(ColourThemeMixin, ContactMixin, SocialFields, NavigationFields, Page):
     template = "patterns/pages/home/home_page.html"
-    introduction = models.TextField(blank=True)
+    hero_heading_1 = models.CharField(max_length=255)
+    hero_heading_2 = models.CharField(max_length=255)
+    hero_introduction = RichTextField(blank=True, features=["bold", "italic", "link"])
     body = StreamField(HomePageStoryBlock())
 
     class Meta:
@@ -143,7 +150,35 @@ def partner_logos(self):
         return []
 
     content_panels = Page.content_panels + [
-        FieldPanel("introduction"),
+        MultiFieldPanel(
+            [
+                FieldPanel(
+                    "hero_heading_1",
+                    heading="Heading (Part 1)",
+                    help_text="This is the non-bold part of the heading.",
+                ),
+                FieldPanel(
+                    "hero_heading_2",
+                    heading="Heading (Part 2)",
+                    help_text="This is the bold part of the heading.",
+                ),
+                FieldPanel(
+                    "hero_introduction",
+                    heading="Introduction",
+                    help_text=mark_safe(
+                        "Use bold to mark links as"
+                        ' <span style="color:#EE5276">pink</span>,'
+                        " and use italics to mark links as"
+                        ' <span style="color:#6F60D0">purple</span>.'
+                    ),
+                ),
+            ],
+            heading="Hero",
+            help_text=(
+                "When combined, part 1 & part 2 of the heading can be treated as one"
+                " sentence or one paragraph, depending on the presence of punctuation."
+            ),
+        ),
         InlinePanel("logos", heading="Partner logos", label="logo", max_num=7),
         FieldPanel("body"),
     ]
@@ -163,6 +198,9 @@ def partner_logos(self):
     def get_context(self, request):
         context = super().get_context(request)
         context["is_home_page"] = True
+        context["hero_introduction"] = convert_bold_links_to_pink(
+            convert_italic_links_to_purple(self.hero_introduction)
+        )
         return context
 
 

tbx/core/tests/test_colour_theme.py

@@ -171,7 +171,7 @@ def test_theme_on_an_indexpage(self):
                 self.assertNotIn(theme, html_classes)
 
     def test_custom_theme_on_descendants(self):
-        self.workindex.theme = ColourTheme.BANANA
+        self.workindex.theme = ColourTheme.NEBULINE
         self.workindex.save()
         self.workindex.refresh_from_db()
 
@@ -181,32 +181,32 @@ def test_custom_theme_on_descendants(self):
         self.assertEqual(self.blogindex.theme, ColourTheme.NONE)
         self.assertEqual(self.blogindex.theme_class, ColourTheme.NONE)
 
-        self.assertEqual(self.workindex.theme, ColourTheme.BANANA)
-        self.assertEqual(self.workindex.theme_class, ColourTheme.BANANA)
+        self.assertEqual(self.workindex.theme, ColourTheme.NEBULINE)
+        self.assertEqual(self.workindex.theme_class, ColourTheme.NEBULINE)
 
         # child of workindex
         work = HistoricalWorkPageFactory(parent=self.workindex)
         self.assertEqual(work.theme, ColourTheme.NONE)
-        self.assertEqual(work.theme_class, ColourTheme.BANANA)
+        self.assertEqual(work.theme_class, ColourTheme.NEBULINE)
 
         # another child of workindex, this time we set the theme
         morework = HistoricalWorkPageFactory(
-            parent=self.workindex, theme=ColourTheme.EARTH
+            parent=self.workindex, theme=ColourTheme.GREEN
         )
 
-        self.assertEqual(morework.theme, ColourTheme.EARTH)
-        self.assertEqual(morework.theme_class, ColourTheme.EARTH)
+        self.assertEqual(morework.theme, ColourTheme.GREEN)
+        self.assertEqual(morework.theme_class, ColourTheme.GREEN)
         # sibling shouldn't be affected
         self.assertEqual(work.theme, ColourTheme.NONE)
-        self.assertEqual(work.theme_class, ColourTheme.BANANA)
+        self.assertEqual(work.theme_class, ColourTheme.NEBULINE)
         # parent shouldn't be affected
-        self.assertEqual(self.workindex.theme, ColourTheme.BANANA)
-        self.assertEqual(self.workindex.theme_class, ColourTheme.BANANA)
+        self.assertEqual(self.workindex.theme, ColourTheme.NEBULINE)
+        self.assertEqual(self.workindex.theme_class, ColourTheme.NEBULINE)
 
         # child of morework
         std_page = StandardPageFactory(parent=morework)
         # `theme_class` should be inherited from parent
-        self.assertEqual(std_page.theme_class, ColourTheme.EARTH)
+        self.assertEqual(std_page.theme_class, ColourTheme.GREEN)
         # but `theme` should remain unset
         self.assertEqual(std_page.theme, ColourTheme.NONE)
 
@@ -239,10 +239,10 @@ def test_custom_theme_on_descendants(self):
 
             # Check that we have the correct classes applied
             self.assertIn(f"template-{class_suffix}", html_classes)
-            self.assertIn(ColourTheme.BANANA, html_classes)
+            self.assertIn(ColourTheme.NEBULINE, html_classes)
             # The rest of the theme classes should not be applied
             for theme in list(
-                filter(lambda theme: theme != ColourTheme.BANANA, self.themes)
+                filter(lambda theme: theme != ColourTheme.NEBULINE, self.themes)
             ):
                 self.assertNotIn(theme, html_classes)
 
@@ -256,9 +256,9 @@ def test_custom_theme_on_descendants(self):
 
             # Check that we have the correct classes applied
             self.assertIn(f"template-{class_suffix}", html_classes)
-            self.assertIn(ColourTheme.EARTH, html_classes)
+            self.assertIn(ColourTheme.GREEN, html_classes)
             # The rest of the theme classes should not be applied
             for theme in list(
-                filter(lambda theme: theme != ColourTheme.EARTH, self.themes)
+                filter(lambda theme: theme != ColourTheme.GREEN, self.themes)
             ):
                 self.assertNotIn(theme, html_classes)