Refactor to generalise usage.

Author: AJ Griffiths

tbx/core/blocks.py

@@ -221,7 +221,7 @@ def get_button_link(self):
             # Ensure page exists and is live.
             if block.value and block.value.live:
                 return block.value.url
-        elif block_type == "external_link":
+        elif block_type == "external_link" or block_type =="modal_iframe":
             return block.value
         elif block_type == "email":
             return f"mailto:{block.value}"
@@ -248,7 +248,7 @@ class CallToActionBlock(blocks.StructBlock):
             ("external_link", blocks.URLBlock()),
             ("email", blocks.EmailBlock()),
             ("document_link", DocumentChooserBlock()),
-            ("pipedrive_link", blocks.URLBlock()),
+            ("modal_iframe", blocks.URLBlock()),
         ],
         required=True,
         max_num=1,
@@ -270,14 +270,23 @@ class Meta:
 
 
 class StickyCTABlock(blocks.StructBlock):
-    call_to_action = blocks.StreamBlock(
-        [("call_to_action", CallToActionBlock())], max_num=1
-    )
     sticky_text = blocks.CharBlock(max_length=40)
     sticky_subtext = blocks.CharBlock(max_length=55)
+    button_link = blocks.StreamBlock(
+        [
+            ("internal_link", blocks.PageChooserBlock()),
+            ("external_link", blocks.URLBlock()),
+            ("email", blocks.EmailBlock()),
+            ("document_link", DocumentChooserBlock()),
+            ("modal_iframe", blocks.URLBlock()),
+        ],
+        required=True,
+        max_num=1,
+    )
 
     class Meta:
         template = "patterns/molecules/streamfield/blocks/sticky_call_to_action.html"
+        value_class = ButtonLinkStructValue
 
 
 class DynamicHeroBlock(blocks.StructBlock):

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html

@@ -11,8 +11,8 @@ <h2 class="heading heading--two-b call-to-action__heading">{{ value.text }}</h2>
             {% endif %}
         </div>
         {% if value.button_text and value.button_link %}
-            {% if value.get_button_link_block.block_type == "pipedrive_link" %}
-                <button class="call-to-action__button button" data-micromodal-trigger="pipedrive-embed-modal">Open Modal</button>
+            {% if value.get_button_link_block.block_type == "modal_iframe" %}
+                <button class="call-to-action__button button" data-micromodal-trigger="iframe-embed-modal">{{ value.button_text }}</button>
             {% else %}
                 <a href="{{ value.get_button_link }}" class="call-to-action__button button">
                     {{ value.button_text }}
@@ -26,7 +26,7 @@ <h2 class="heading heading--two-b call-to-action__heading">{{ value.text }}</h2>
 </div>
 
 <!-- Modal content -->
-<div class="modal" id="pipedrive-embed-modal" aria-hidden="true">
+<div class="modal" id="iframe-embed-modal" aria-hidden="true">
     <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
     <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
         <header class="modal__header">
@@ -37,11 +37,11 @@ <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry
         </header>
         <main class="modal__content" id="filters-content">
             <iframe
-                src="{{ cta.value.button_link.0 }}"
+                src="{{ cta.value.get_button_link }}"
                 width="100%"
                 height="650px"
                 frameborder="0"
-                title="Pipedrive Webform">
+                title="Modal Webform">
             </iframe>
         </main>
     </div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html

@@ -30,8 +30,8 @@ <h2 class="heading heading--two-b contact-cta__heading">{{ cta.value.text }}</h2
 
         {# CTA button #}
         {% if cta.value.button_text and cta.value.button_link %}
-            {% if cta.value.get_button_link_block.block_type == "pipedrive_link" %}
-                <button class="contact-cta__button button" data-micromodal-trigger="pipedrive-embed-modal">{{ cta.value.button_text }}</button>
+            {% if cta.value.get_button_link_block.block_type == "modal_iframe" %}
+                <button class="contact-cta__button button" data-micromodal-trigger="iframe-embed-modal">{{ cta.value.button_text }}</button>
             {% else %}
                 <a href="{{ cta.value.get_button_link }}" class="contact-cta__button button">
                     {{ cta.value.button_text }}
@@ -42,9 +42,9 @@ <h2 class="heading heading--two-b contact-cta__heading">{{ cta.value.text }}</h2
             {% endif %}
         {% endif %}
         </div>
-        {% if cta.value.get_button_link_block.block_type == "pipedrive_link" %}
+        {% if cta.value.get_button_link_block.block_type == "modal_iframe" %}
         <!-- Modal content -->
-            <div class="modal" id="pipedrive-embed-modal" aria-hidden="true">
+            <div class="modal" id="iframe-embed-modal" aria-hidden="true">
                 <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
                 <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
                     <header class="modal__header">
@@ -55,11 +55,11 @@ <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry
                     </header>
                     <main class="modal__content" id="filters-content">
                         <iframe
-                            src="{{ cta.value.button_link.0 }}"
+                            src="{{ cta.value.get_button_link }}"
                             width="100%"
                             height="650px"
                             frameborder="0"
-                            title="Pipedrive Webform">
+                            title="Modal Webform">
                         </iframe>
                     </main>
                 </div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.html

@@ -1,47 +1,22 @@
 {% load wagtailcore_tags %}
 {# call_to_action is a required field (streamblock) in the block definition #}
-{% with cta=value.call_to_action|first %}
-<div class="call-to-action grid__call-to-action" id="{{ value.id }}">
-    <div class="call-to-action__inner">
-        <div class="call-to-action__text">
-            <h2 class="heading heading--two-b call-to-action__heading">{{ cta.value.text }}</h2>
-            {% if cta.value.description %}
-                <div class="call-to-action__description">
-                    {{ cta.value.description|richtext }}
-                </div>
-            {% endif %}
-        </div>
-        {% if cta.value.button_text and cta.value.button_link %}
-            {% if cta.value.get_button_link_block.block_type == "pipedrive_link" %}
-                <button class="call-to-action__button button" data-micromodal-trigger="pipedrive-embed-modal">{{ cta.value.button_text }}</button>
-            {% else %}
-                <a href="{{ cta.value.get_button_link }}" class="call-to-action__button button">
-                    {{ cta.value.button_text }}
-                    {% if cta.value.get_button_link_block.block_type == "document_link" %}
-                        ({{ cta.value.get_button_file_size|filesizeformat }})
-                    {% endif %}
-                </a>
-            {% endif %}
-        {% endif %}
-    </div>
-</div>
 
 <!-- Sticky block -->
 <div class="call-to-action__sticky">
-    <div class="call-to-action__inner">
-        {% if cta.value.get_button_link_block.block_type == "pipedrive_link" %}
-            <button class="call-to-action__button button" data-micromodal-trigger="pipedrive-embed-modal">
+    <div class="call-to-action__stickyinner">
+        {% if value.get_button_link_block.block_type == "modal_iframe" %}
+            <button class="call-to-action__button button" data-micromodal-trigger="iframe-embed-modal">
                 {{ value.sticky_text }}
                 {% if value.sticky_subtext %}
                     <br>
                     {{ value.sticky_subtext }}
                 {% endif %}
             </button>
         {% else %}
-            <a href="{{ cta.value.get_button_link }}" class="call-to-action__button button">
+            <a href="{{ value.get_button_link }}" class="call-to-action__button button">
                 {{ value.sticky_text }}
-                {% if cta.value.get_button_link_block.block_type == "document_link" %}
-                    ({{ cta.value.get_button_file_size|filesizeformat }})
+                {% if value.get_button_link_block.block_type == "document_link" %}
+                    ({{ value.get_button_file_size|filesizeformat }})
                 {% endif %}
             {% if value.sticky_subtext %}
                 <br>
@@ -53,7 +28,7 @@ <h2 class="heading heading--two-b call-to-action__heading">{{ cta.value.text }}<
 </div>
 
 <!-- Modal content -->
-<div class="modal" id="pipedrive-embed-modal" aria-hidden="true">
+<div class="modal" id="iframe-embed-modal" aria-hidden="true">
     <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
     <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
         <header class="modal__header">
@@ -64,13 +39,12 @@ <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry
         </header>
         <main class="modal__content" id="filters-content">
             <iframe
-                src="{{ cta.value.button_link.0 }}"
+                src="{{ value.get_button_link }}"
                 width="100%"
                 height="650px"
                 frameborder="0"
-                title="Pipedrive Webform">
+                title="Modal Webform">
             </iframe>
         </main>
     </div>
 </div>
-{% endwith %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.yaml

@@ -1,12 +1,7 @@
 context:
-  value:
-    call_to_action:
-      - value:
-          text: Get in touch to learn about our journey to becoming employee-owned
-          # description: '<p>Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.</p>'
-          button_text: 'Contact Us'
-          button_link:
-            - pipedrive_link:
-              url: 'https://example.com'
+  value:   
     sticky_text: Get in touch
     sticky_subtext: learn about our journey
+    sticky_link:
+      - modal_iframe:
+        url: 'https://example.com'

tbx/static_src/sass/components/_call-to-action.scss

@@ -48,12 +48,17 @@
 
     &__sticky {
         @include z-index(sticky);
-        @include media-query(large) {
-            position: fixed;
-            top: 75%;
-            right: 0;
-        }
+        position: fixed;
+        bottom: $spacer-medium;
+        right: 0;
         background-color: var(--color--theme-primary);
-        padding: $spacer-small;
+        padding: $spacer-mini;
+    }
+
+    &__stickyinner {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: $spacer-mini;
     }
 }