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

[damwaingames]

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.