Use CallToActionAtomBlockElement in Hosted Content

[deedeeh]

What does this change?

This PR is to use the CallToActionAtomBlockElement in Hosted Content and consume the data which should be the last piece of the puzzle to migrate the CTA atom to DCAR which is only used by the Hosted Content.

Related PRs guardian/frontend#28653 and #15483

The changes include:

• Rendering the CTA data
• Followed the new designs for the CTA so lots of CSS
• Updated the story with the correct properties name
• Added the new CallToActionAtomBlockElement data to the hostedArticle.ts and hostedVideo.ts manual fixtures so it could be rendered in storybook.
• Added unit tests

The next step in the CTA work is to use the accentColour for the CTA button in light mode and a neutral colour in dark mode but it's better to do it in a separate PR.

Why?

This is part of the Hosted Content migration to DCAR.

Screenshots

I added screenshots with label but we can also have CTA without label, which is the heading.

Before	After

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1213449812278028

[github-actions]

Deploy build 25490 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 25490 of dotcom:rendering-all to CODE
• Deploy parts of build 25490 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 992 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 992 of dotcom:ab-testing to CODE
• Deploy parts of build 992 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[gu-prout]

Seen on PROD (merged by @deedeeh 7 minutes and 37 seconds ago) Please check your changes!