[TWE-661] Add sticky call to action and new link type for all call to actions

package.json

@@ -70,6 +70,7 @@
   "dependencies": {
     "js-cookie": "^3.0.5",
     "lite-youtube-embed": "^0.3.2",
+    "micromodal": "^0.6.1",
     "swiper": "^11.2.1"
   }
 }

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,6 +248,7 @@ class CallToActionBlock(blocks.StructBlock):
             ("external_link", blocks.URLBlock()),
             ("email", blocks.EmailBlock()),
             ("document_link", DocumentChooserBlock()),
+            ("modal_iframe", blocks.URLBlock()),
         ],
         required=True,
         max_num=1,
@@ -268,6 +269,26 @@ class Meta:
         template = "patterns/molecules/streamfield/blocks/contact_call_to_action.html"
 
 
+class StickyCTABlock(blocks.StructBlock):
+    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):
     """
     This block displays text that will be cycled through.
@@ -1233,6 +1254,11 @@ class StoryBlock(blocks.StreamBlock):
         template="patterns/molecules/streamfield/blocks/contact_call_to_action.html",
         group="Calls to action",
     )
+    sticky_call_to_action = StickyCTABlock(
+        label="Sticky Call to Action",
+        template="patterns/molecules/streamfield/blocks/sticky_call_to_action.html",
+        group="Calls to action",
+    )
     pullquote = PullQuoteBlock(
         template="patterns/molecules/streamfield/blocks/pullquote_block.html",
         group="Basics",

tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button--close.html

@@ -0,0 +1 @@
+{% extends "atoms/icon_buttons/icon_button.html" %}

tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button.html

@@ -0,0 +1,14 @@
+<button class="icon-button{% if modifier %} icon-button--{{ modifier }}{% endif %}{% if inverse %} icon-button--inverse{% endif %}{% if hidden %} hidden{% endif %}" {% if modifier and name %}data-{{ name }}-{{ modifier }}{% endif %}{% if data %} {{ data }}{% endif %}{% if aria %} {{ aria }}{% endif %}>
+    <span class="u-sr-only">
+        {% if modifier %}{{ modifier }}{% endif %}
+    </span>
+    {% if modifier == 'next' %}
+        <span class="rotate">{% include "patterns/atoms/icons/icon.html" with name="chevron" %}</span>
+    {% elif modifier == 'previous' %}
+        <span class="rotate rotate--left">{% include "patterns/atoms/icons/icon.html" with name="chevron" %}</span>
+    {% elif modifier == 'down' %}
+        <span>{% include "patterns/atoms/icons/icon.html" with name="chevron" %}</span>
+    {% elif modifier %}
+        <span>{% include "patterns/atoms/icons/icon.html" with name=modifier %}</span>
+    {% endif %}
+</button>

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

@@ -11,12 +11,40 @@ <h2 class="heading heading--two-b call-to-action__heading">{{ value.text }}</h2>
             {% endif %}
         </div>
         {% if value.button_text and value.button_link %}
-            <a href="{{ value.get_button_link }}" class="call-to-action__button button">
-                {{ value.button_text }}
-                {% if value.get_button_link_block.block_type == "document_link" %}
-                    ({{ value.get_button_file_size|filesizeformat }})
-                {% endif %}
-            </a>
+            {% 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 }}
+                    {% if value.get_button_link_block.block_type == "document_link" %}
+                        ({{ value.get_button_file_size|filesizeformat }})
+                    {% endif %}
+                </a>
+            {% endif %}
         {% endif %}
     </div>
 </div>
+
+{% if value.get_button_link_block.block_type == "modal_iframe" %}
+    <!-- Modal content -->
+    <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">
+                <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
+                <div class="modal__close">
+                    {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
+                </div>
+            </header>
+            <main class="modal__content" id="filters-content">
+                <iframe
+                    src="{{ cta.value.get_button_link }}"
+                    width="100%"
+                    height="650px"
+                    frameborder="0"
+                    title="Modal Webform">
+                </iframe>
+            </main>
+        </div>
+    </div>
+{% endif %}

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

@@ -30,12 +30,40 @@ <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 %}
-            <a href="{{ cta.value.get_button_link }}" class="contact-cta__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>
+            {% 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 }}
+                    {% if cta.value.get_button_link_block.block_type == "document_link" %}
+                        ({{ cta.value.get_button_file_size|filesizeformat }})
+                    {% endif %}
+                </a>
+            {% endif %}
+        {% endif %}
+        </div>
+        {% if cta.value.get_button_link_block.block_type == "modal_iframe" %}
+        <!-- Modal content -->
+            <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">
+                        <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
+                        <div class="modal__close">
+                            {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
+                        </div>
+                    </header>
+                    <main class="modal__content" id="filters-content">
+                        <iframe
+                            src="{{ cta.value.get_button_link }}"
+                            width="100%"
+                            height="650px"
+                            frameborder="0"
+                            title="Modal Webform">
+                        </iframe>
+                    </main>
+                </div>
+            </div>
         {% endif %}
     {% endwith %}
 </div>

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

@@ -0,0 +1,50 @@
+{% load wagtailcore_tags %}
+{# call_to_action is a required field (streamblock) in the block definition #}
+
+<!-- Sticky block -->
+<div class="call-to-action__sticky">
+    <div class="call-to-action__inner">
+        {% if value.get_button_link_block.block_type == "modal_iframe" %}
+            <button class="call-to-action__stickybutton button" data-micromodal-trigger="iframe-embed-modal">
+                <span class="call-to-action__stickyheading">{{ value.sticky_text }}</span>
+                {% if value.sticky_subtext %}
+                    <br><span class="call-to-action__stickysubtext">{{ value.sticky_subtext }}</span>
+                {% endif %}
+            </button>
+        {% else %}
+            <a href="{{ value.get_button_link }}" class="call-to-action__button button">
+                <span class="call-to-action__stickyheading">{{ value.sticky_text }}</span>
+                {% if value.get_button_link_block.block_type == "document_link" %}
+                    ({{ value.get_button_file_size|filesizeformat }})
+                {% endif %}
+                {% if value.sticky_subtext %}
+                    <br><span class="call-to-action__stickysubtext">{{ value.sticky_subtext }}</span>
+                {% endif %}
+            </a>
+        {% endif %}
+    </div>
+</div>
+
+{% if value.get_button_link_block.block_type == "modal_iframe" %}
+    <!-- Modal content -->
+    <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">
+                <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
+                <div class="modal__close">
+                    {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
+                </div>
+            </header>
+            <main class="modal__content" id="filters-content">
+                <iframe
+                    src="{{ value.get_button_link }}"
+                    width="100%"
+                    height="650px"
+                    frameborder="0"
+                    title="Modal Webform">
+                </iframe>
+            </main>
+        </div>
+    </div>
+{% endif %}

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

@@ -0,0 +1,7 @@
+context:
+  value:
+    sticky_text: Get in touch
+    sticky_subtext: learn about our journey
+    button_link:
+      - modal_iframe:
+        url: 'https://example.com'

tbx/static_src/javascript/components/modal.js

@@ -0,0 +1,86 @@
+import MicroModal from 'micromodal'; // es6 module
+
+// Assumes a strcuture as follows
+// <div class="modal" id="filters" 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">
+//             <h2 class="modal__heading heading heading--two" id="modal-title">Title<h2>
+//             <div class="modal__close">
+//                 {% include "atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
+//             </div>
+//         </header>
+//         <main class="modal__content" id="filters-content">
+//             Content
+//         </main>
+//         <footer class="modal__footer">
+//             <button class="modal__btn" data-micromodal-close>Close</button>
+//             </footer>
+//     </div>
+// </div>
+
+class Modal {
+    static selector() {
+        return '[data-micromodal-trigger]';
+    }
+
+    constructor() {
+        if (typeof MicroModal !== 'undefined') {
+            MicroModal.init({
+                openTrigger: 'data-micromodal-trigger',
+                disableScroll: true,
+            });
+        }
+
+        Modal.bindEvents();
+    }
+
+    static bindEvents() {
+        // Listen for clicks on the document instead of using micromodel default, which doesn't work with htmx
+        document.body.addEventListener('click', Modal.handleEvent);
+        document.body.addEventListener('touchstart', Modal.handleEvent);
+        document.body.addEventListener('keydown', Modal.handleKeyDown);
+    }
+
+    static handleEvent(event) {
+        const trigger = event.target.closest('[data-micromodal-trigger]');
+        if (trigger) {
+            event.preventDefault();
+            event.stopPropagation(); // Stop the event from bubbling up
+
+            // Get the modal ID and open the correct modal
+            const modalId = trigger.getAttribute('data-micromodal-trigger');
+            if (modalId && typeof MicroModal !== 'undefined') {
+                MicroModal.show(modalId);
+            }
+        }
+
+        // Close modal when clicking on close buttons
+        const closeButton = event.target.closest(
+            '[data-micromodal-close], [data-listing-submit]',
+        );
+        if (closeButton) {
+            const modal = closeButton.closest('.modal');
+            if (modal) {
+                MicroModal.close(modal.id); // Close the modal
+                document.body.style.overflow = ''; // Remove overflow hidden from body
+            }
+        }
+    }
+
+    // Prevent Enter from closing modal unless on button
+    static handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            const modal = event.target.closest('.modal');
+            if (modal) {
+                // Allow Enter on buttons and prevent it on everything else
+                if (event.target.tagName !== 'BUTTON') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }
+        }
+    }
+}
+
+export default Modal;

tbx/static_src/javascript/main.js

@@ -8,6 +8,7 @@ import CookieWarning from './components/cookie-message';
 import YouTubeConsentManager from './components/youtube-embed';
 import Tabs from './components/tabs';
 import TableHint from './components/table-hint';
+import Modal from './components/modal';
 import ModeSwitcher from './components/mode-switcher';
 
 // IE11 polyfills
@@ -38,6 +39,7 @@ document.addEventListener('DOMContentLoaded', () => {
     initComponent(YouTubeConsentManager);
     initComponent(Tabs);
     initComponent(TableHint);
+    initComponent(Modal);
     initComponent(ModeSwitcher);
     new DesktopCloseMenus();
 });

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

@@ -45,4 +45,31 @@
             @include focus-style($outline-color: var(--color--background));
         }
     }
+
+    &__sticky {
+        @include z-index(sticky);
+        position: fixed;
+        bottom: $spacer-medium;
+        right: 0;
+        background-color: var(--color--theme-primary);
+        padding: $spacer-mini;
+    }
+
+    &__stickybutton {
+        @include font-size('size-five');
+        color: var(--color--white);
+        border: 1px solid var(--color--white);
+        margin-top: 0;
+
+        &:focus {
+            @include focus-style($outline-color: var(--color--background));
+        }
+    }
+
+    &__stickyheading {
+        font-weight: $weight--semibold;
+    }
+    &__stickysubtext {
+        font-weight: $weight--extralight;
+    }
 }