TWE-1 - BE - New homepage hero fields (#313)

* Add new fields, remove introduction
* Make migrations
* Display the new fields in the homepage
* Update HomePageFactory
* Update homepage factory
* Fix pattern library YAML file
* Convert b & i tags into span tags
* Add unit tests for the link converter

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/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_formatting.py

@@ -0,0 +1,42 @@
+from django.test import TestCase
+
+from ..utils.formatting import (
+    convert_bold_links_to_pink,
+    convert_italic_links_to_purple,
+)
+
+
+class ConvertBoldLinksToPinkTestCase(TestCase):
+    def test_doesnt_convert_non_link(self):
+        html_text = "<b>Hello</b> world <b><i>foo</i></b> bar"
+        result = convert_bold_links_to_pink(html_text)
+        self.assertEqual(html_text, result)
+
+    def test_convert_link(self):
+        html_text = '<a href="#"><b>Hello</b> world <b><i>foo</i></b> bar</a>'
+        result = convert_bold_links_to_pink(html_text)
+        self.assertEqual(
+            result,
+            (
+                '<a href="#"><span class="text-coral">Hello</span> world '
+                '<span class="text-coral"><i>foo</i></span> bar</a>'
+            ),
+        )
+
+
+class ConvertItalicLinksToPurpleTestCase(TestCase):
+    def test_doesnt_convert_non_link(self):
+        html_text = "<i>Hello</i> world <b><i>foo</i></b> bar"
+        result = convert_italic_links_to_purple(html_text)
+        self.assertEqual(html_text, result)
+
+    def test_convert_link(self):
+        html_text = '<a href="#"><i>Hello</i> world <b><i>foo</i></b> bar</a>'
+        result = convert_italic_links_to_purple(html_text)
+        self.assertEqual(
+            result,
+            (
+                '<a href="#"><span class="text-nebuline">Hello</span> world '
+                '<b><span class="text-nebuline">foo</span></b> bar</a>'
+            ),
+        )

tbx/core/utils/formatting.py

@@ -0,0 +1,29 @@
+from bs4 import BeautifulSoup
+
+
+def convert_bold_links_to_pink(html_text):
+    """Convert <b> tags inside links into <span class="text-coral">."""
+    soup = BeautifulSoup(html_text, "html.parser")
+    # Limit the changes to anchor tags (<a>).
+    for anchor_tag in soup.find_all("a"):
+        # Find all bold tags (<b>) and convert them to span tags (<span>).
+        for bold_tag in anchor_tag.find_all("b"):
+            tag_content = "".join([str(c) for c in bold_tag.contents])
+            html_text = html_text.replace(
+                str(bold_tag), f'<span class="text-coral">{tag_content}</span>'
+            )
+    return html_text
+
+
+def convert_italic_links_to_purple(html_text):
+    """Convert <i> tags inside links into <span class="text-nebuline">."""
+    soup = BeautifulSoup(html_text, "html.parser")
+    # Limit the changes to anchor tags (<a>).
+    for anchor_tag in soup.find_all("a"):
+        # Find all italic tags (<i>) and convert them to span tags (<span>).
+        for italic_tag in anchor_tag.find_all("i"):
+            tag_content = "".join([str(c) for c in italic_tag.contents])
+            html_text = html_text.replace(
+                str(italic_tag), f'<span class="text-nebuline">{tag_content}</span>'
+            )
+    return html_text

tbx/navigation/tests/test_link_block.py

@@ -2,7 +2,7 @@
 from django.test import TestCase
 
 import wagtail_factories
-from tbx.core.models import HomePage
+from tbx.core.factories import HomePageFactory
 from tbx.images.models import CustomImage
 from tbx.navigation.blocks import (
     LinkBlock,
@@ -18,13 +18,6 @@ class Meta:
         model = CustomImage
 
 
-class HomePageFactory(wagtail_factories.PageFactory):
-    title = "Home"
-
-    class Meta:
-        model = HomePage
-
-
 class TestLinkBlock(TestCase):
     def setUp(self):
         root_page = wagtail_factories.PageFactory(parent=None)

tbx/project_styleguide/templates/patterns/molecules/home-page-hero/home-page-hero.html

@@ -1,5 +1,6 @@
+{% load wagtailcore_tags %}
 <div class="grid__title home-page-hero">
-    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=page.title classes="motif-heading--one-b home-page-hero__title" %}
+    <h1>{{ page.hero_heading_1 }} <b>{{ page.hero_heading_2 }}</b></h1>
 
     <div class="employee-owned-icon home-page-hero__icon">
         {% include "patterns/atoms/icons/icon.html" with name="employee-owned-text" classname="employee-owned-icon__text-icon" %}

tbx/project_styleguide/templates/patterns/molecules/home-page-hero/home-page-hero.yaml

@@ -1,4 +1,4 @@
 context:
   page:
-    title: We amplify the impact of organisations improve people's lives and our planet.
-    introduction: At Torchbox, we partner with organisations dedicated to bettering lives and the environment, using digital innovation to maximise their positive impact.
+    hero_heading_1: The digital partner
+    hero_heading_2: for positive change

tbx/project_styleguide/templates/patterns/pages/home/home_page.html

@@ -6,7 +6,7 @@
         {% include "patterns/molecules/home-page-hero/home-page-hero.html" %}
 
         <div class="grid__intro heading heading--six">
-            {{ page.introduction }}
+            {{ hero_introduction|richtext }}
         </div>
 
         <div class="grid__partners">

tbx/project_styleguide/templates/patterns/pages/home/home_page.yaml

@@ -1,6 +1,7 @@
 context:
   page:
     get_verbose_name: home-page
+    hero_introduction: '<p data-block-key="hs0yc">Innovative and strategic digital experiences, powerful tech platforms, and targeted digital marketing to catalyse impact for the world&apos;s leading <a href="/services/charity/"><b>charities</b></a> and <a href="/services/public-sector/"><i>public sector</i></a> organisations.</p>'
     partner_logos:
       - partner_logo:
       - partner_logo: