Add an email text option to the contact snippet (#285)

* Add an email text option to the contact snippet

Author: helenb

docs/custom-features/contact.md

@@ -8,11 +8,12 @@ The `tbx.people.Contact` model represents contact information, including details
 
 1. `title`: A descriptive title for the contact block, typically used as a heading.
 2. `text`: Additional text to accompany the contact information, providing further context.
-3. `cta`: Call-to-action block, allowing customization of a button link and text.
-4. `name`: The name of the contact person or entity.
-5. `role`: The role or position of the contact person.
-6. `image`: An image associated with the contact.
-7. `default_contact`: Flag to designate this contact as the default for the site.
+3. `email_text`: An email field which will display an email address and link below the button cta.
+4. `cta`: Call-to-action block, allowing customization of a button link and text.
+5. `name`: The name of the contact person or entity.
+6. `role`: The role or position of the contact person.
+7. `image`: An image associated with the contact.
+8. `default_contact`: Flag to designate this contact as the default for the site.
 
 The `Contact` model also includes functionality to:
 

tbx/people/migrations/0010_add_email_text_field_to_contact.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.11 on 2024-07-19 09:03
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("people", "0009_add_earth_colour_theme"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="contact",
+            name="email_text",
+            field=models.EmailField(blank=True, max_length=254),
+        ),
+    ]

tbx/people/models.py

@@ -44,6 +44,9 @@ class Contact(index.Indexed, models.Model):
     text = models.TextField(
         blank=True,
     )
+    email_text = models.EmailField(
+        blank=True,
+    )
     cta = StreamField(
         [("call_to_action", ContactCTABlock(label="CTA"))],
         blank=True,
@@ -106,6 +109,7 @@ def button_text(self):
     panels = [
         FieldPanel("title"),
         FieldPanel("text"),
+        FieldPanel("email_text"),
         FieldPanel("cta", heading="Call to action"),
         MultiFieldPanel(
             [

tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html

@@ -1,7 +1,7 @@
 <div class="grid__footer-contact footer-cta">
     {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=contact_heading heading_level=2 classes="motif-heading--two motif-heading--static footer-cta__heading" %}
 
-    <p class="footer-cta__text">{{ contact_text }} </p>
+    <p class="footer-cta__text">{{ contact_text }}</p>
 
     <div class="footer-cta__grid">
         {% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--smallest" %}
@@ -13,6 +13,11 @@
 
         <div class="footer-cta__button-wrapper">
             <a href="{{ contact_link }}" class="button footer-cta__button">{{ contact_action }}</a>
+
+            {% if contact_email %}
+                <p class="footer-cta__email-wrapper"><a class="footer-cta__email" href="mailto:{{ contact_email }}">{{ contact_email }}</a></p>
+            {% endif %}
         </div>
+
     </div>
 </div>

tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.yaml

@@ -4,6 +4,7 @@ context:
   contact_name: Will Heinemann
   contact_role: New Business Director
   contact_link: '#'
+  contact_email: [email protected]
   contact_action: Get in touch
 
 tags:

tbx/project_styleguide/templates/patterns/organisms/footer/footer.html

@@ -6,7 +6,7 @@
         <span class="grid__footer-line footer__line"></span>
         {% with contact=page.footer_contact %}
             {% if contact %}
-                {% include "patterns/molecules/footer-cta/footer-cta.html" with contact_heading=contact.title contact_text=contact.text contact_link=contact.link contact_name=contact.name contact_role=contact.role contact_image=contact.image contact_action=contact.button_text %}
+                {% include "patterns/molecules/footer-cta/footer-cta.html" with contact_heading=contact.title contact_text=contact.text contact_link=contact.link contact_name=contact.name contact_role=contact.role contact_image=contact.image contact_action=contact.button_text contact_email=contact.email_text %}
             {% endif %}
         {% endwith %}
 

tbx/project_styleguide/templates/patterns/organisms/footer/footer.yaml

@@ -6,6 +6,7 @@ context:
       name: Will Heinemann
       role: New Business Director
       link: '#'
+      email_text: '[email protected]'
       button_text: Get in touch
   settings:
     navigation:

tbx/static_src/sass/components/_footer-cta.scss

@@ -67,4 +67,17 @@
     &__button {
         padding: 12px 20px;
     }
+
+    &__email-wrapper {
+        margin-top: $spacer-small;
+        margin-bottom: $spacer-small;
+
+        @include media-query(large) {
+            margin-bottom: 0;
+        }
+    }
+
+    &__email {
+        @include link-styles();
+    }
 }