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

damwaingames · 2025-08-01T09:51:01Z

https://torchbox.atlassian.net/browse/TWE-661

Description of Changes Made

A new type of block has been created that is available on any page. It is called a Sticky Call To Action. This creates a small div that floats at the bottom right of the viewport and provides a link based on the same link types as the other Call To Actions.

An additional link type has been created called a Modal iframe, it opens a new modal window with an iframe displaying the contents of the URL that the link is set to. This is intended for use with pipedrive forms but in theory anything that you wanted iframing could be used.

The modal is created using the micromodal package and is as simplistic as possible. It has been added to the two existing CTA templates as well as the new sticky CTA template.

How to Test

On a page you want to add a sticky call to action, you can add a new block, and grouped with the other call to actions you will find the sticky call to action. Add it to the page and enter the text, subtext and choose a link type for the button. The text will be displayed in a bolder weight, the sub text will be displayed in a lighter weight on the line underneath.

The modal iframe link type is now available on all call to action blocks. Once selected it looks like any other external link field, but the contents of the external link will be displayed in an iframe on a modal dialog when the link is clicked.

Screenshots

MR Checklist

Add a description of your pull request and instructions for the reviewer to verify your work.
If your pull request is for a specific ticket, link to it in the description.
Stay on point and keep it small so the merge request can be easily reviewed.
Tests and linting passes.

Unit tests

Not required

Documentation

Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)

Browser testing

I have tested in the following browsers and environments (edit the list as required)
- Latest version of Chrome on mac
- Latest version of Firefox on mac
- Latest version of Safari on mac
- Safari on last two versions of iOS
- Chrome on last two versions of Android

Data protection

Not relevant

Light and dark mode

I have tested the changes in both light and dark mode

Accessibility

Automated WCAG 2.1 tests pass
HTML validation passes
Manual WCAG 2.1 tests completed
I have tested in a screen reader
I have tested in high-contrast mode
Any animations removed for prefers-reduced-motion

Sustainability

Performance and transfer of data considered
If JavaScript is needed alternatives have been considered

Pattern library

The pattern library component for this template displays correctly, and does not break parent templates
The styleguide is updated if relevant

nickmoreton

I'm happy that the backend changes are good to go and it can be deployed to staging.

Because of the extensive frontend changes I would need to spend more time looking at those changes but that shouldn't hold up the staging testing, it seems to work as expected. If there are other frontend changes needed it's likely to be around how a frontend developer would implement this work.

Ideally a frontend developer should code review this too.

albinazs

Thank you, @damwaingames - this looks solid overall. There are a few bugs to address, and one product question: do we really need to support multiple modals with iframes on a single page? If yes, we should give it a proper accessibility/keyboard test pass after fixing the issues.

albinazs · 2025-08-11T16:35:36Z

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

+            </header>
+            <main class="modal__content" id="filters-content">
+                <iframe
+                    src="{{ cta.value.get_button_link }}"


Bug: should use value instead of cta.value, otherwise we have an empty iframe

albinazs · 2025-08-11T16:36:59Z

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

+
+{% if value.get_button_link_block.block_type == "modal_iframe" %}
+    <!-- Modal content -->
+    <div class="modal" id="iframe-embed-modal" aria-hidden="true">


Bug: should use unique IDs if we want to support multiple modals on the page. Otherwise, multiple modals with iframes won't work as expected.

albinazs · 2025-08-11T16:38:47Z

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

+        <div class="modal__overlay" 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>


Suggestion: should we make the modal title configurable instead of hard-coding it? Especially important if we want to support multiple modals on the page

albinazs · 2025-08-11T16:40:17Z

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

        {% endif %}
    </div>
 </div>
+
+{% if value.get_button_link_block.block_type == "modal_iframe" %}
+    <!-- Modal content -->


Suggestion: can we create a separate reusable modal component for maintainability? It's the same in all 3 cases.

albinazs · 2025-08-11T16:43:38Z

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">


Suggestion: This seems to be redundant as we already have an aria attribute on the button.
For the modal, we pass "Close modal" as an aria label, and we also pass "close" as a modifier, so the screen reader will announce both of these.
Also, names of the icons are usually not descriptive enough to act as proper labels for screen reader users.

albinazs · 2025-08-11T16:45:04Z

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

+            <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"' %}


Bug: It looks like we don't have an icon with the name "close", so nothing is being rendered here. We could either use an existing icon from the sprites file, or add a new one

albinazs · 2025-08-11T16:58:16Z

tbx/static_src/javascript/components/modal.js

+//         <main class="modal__content" id="filters-content">
+//             Content
+//         </main>
+//         <footer class="modal__footer">


Suggestion: remove the modal footer as we don't have it in our implementation.
We can probably refer to the markup from dev tools, as currently we have a few more discrepancies, like aria-hidden="true" on modal, Django inclusion tag, etc.

albinazs · 2025-08-11T16:59:49Z

tbx/static_src/sass/components/_modal.scss

+        left: 0;
+        right: 0;
+        bottom: 0;
+        // background-color: var(--color--background--overlay);


Suggestion: can we please remove all commented-out unused CSS?

albinazs · 2025-08-11T17:04:40Z

tbx/static_src/sass/components/_modal.scss

+
+    &[aria-hidden='false'] {
+        #{$root}__overlay {
+            animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);


Suggestion: we try to avoid keyframe animations unless absolutely necessary for performance reasons.
Can we use GPU-friendly transform/opacity with our $transition or $transition-quick variables?

albinazs · 2025-08-11T17:07:43Z

tbx/static_src/sass/config/_variables.scss

@@ -370,6 +371,13 @@ $grid: 30px;
 $grid-gutters: $grid;
 $grid-gutters-large: 80px;
 $grid-gutters-x-large: 120px;
+$grid-xs: calc($grid / 4); // 5px


Suggestion: We already have spacing variables, $spacer-[x].
Can we remove these new ones for maintainability? If a specific size we need to use frequently is missing, can we just add it to the list of the existing spacing vars?

AJ Griffiths added 13 commits July 25, 2025 09:41

Add pipedrive_link type to CTAs and support for the modal it uses.

f1de4fd

Lint changes

095519e

[WIP] Sticky CTA block, currently fixing styling

ce6eeec

[WIP] Still playing with styling

90f443e

add yaml for pattern library

0c2cfb3

[WIP] continuing

3db8c41

Refactor to generalise usage.

50b064f

lint fixes

04b5967

more lint fixes

95d3454

white space problems

0bd4016

Finish styling work

c3f3543

White space error (again)

7b47db3

lint fix

c25afd6

damwaingames requested a review from nickmoreton August 1, 2025 09:51

nickmoreton reviewed Aug 1, 2025

View reviewed changes

AJ Griffiths and others added 3 commits August 1, 2025 15:19

Hide modal when not in use

69d69de

Move sticky CTA to end of tab order in main

4b872db

Restore focus trap in iframe modals

4710e9c

albinazs requested changes Aug 11, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

damwaingames commented Aug 1, 2025 •

edited

Loading

Uh oh!

nickmoreton left a comment

Uh oh!

albinazs left a comment

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

albinazs Aug 11, 2025

Uh oh!

Uh oh!

		@@ -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">

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

damwaingames commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of Changes Made

How to Test

Screenshots

MR Checklist

Unit tests

Documentation

Browser testing

Data protection

Light and dark mode

Accessibility

Sustainability

Pattern library

Uh oh!

nickmoreton left a comment

Choose a reason for hiding this comment

Uh oh!

albinazs left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

damwaingames commented Aug 1, 2025 •

edited

Loading