Convert b & i tags into span tags

Author: SharmaineLim

tbx/core/models.py

@@ -4,6 +4,10 @@
 
 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,
@@ -162,8 +166,9 @@ def partner_logos(self):
                     "hero_introduction",
                     heading="Introduction",
                     help_text=mark_safe(
-                        'Use bold to mark text as <span style="color:#EE5276">pink</span>,'
-                        " and use italics to mark text as"
+                        "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>.'
                     ),
                 ),
@@ -193,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/utils/formatting.py

@@ -0,0 +1,25 @@
+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")
+    for anchor_tag in soup.find_all("a"):
+        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")
+    for anchor_tag in soup.find_all("a"):
+        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/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.hero_introduction|richtext }}
+            {{ hero_introduction|richtext }}
         </div>
 
         <div class="grid__partners">