CTA links component

[sarahcrack]

Trello card

https://trello.com/c/4KTcG2Y0/7095-build-cta-links-component-for-use-in-routes-wizard-and-around-site

Context

User research found that candidates thought that there were a lot of links on the page but generally said that it was not overwhelming. The green CTA is very powerful – Candidates said that this is what they would select first because they are more “important” and “inviting”. We want to use a green CTA link around the site.

Changes proposed in this pull request

• Using CSS/Font Awesome icon, created an arrow to fit within a green circle 'button' that sits next to an anchor link.
• Created a new partial that can be used to render the link with arrow circle icon; link_text and href can be passed into the partial to display the desired information/link.

Guidance to review

• You can render the green CTA arrow link using the following code:
  <%= render 'content/shared/links_and_buttons/cta_circle_button_link', cta_link_text: "Steps to become a teacher", href: "/steps-to-become-a-teacher" %>

[github-actions]

Review app deployed to https://get-into-teaching-app-review-4448.test.teacherservices.cloud

[sonarqubecloud]

Quality Gate passed

Issues
12 New issues
10 Accepted issues

Measures
0 Security Hotspots
95.7% Coverage on New Code
0.3% Duplication on New Code

See analysis details on SonarQube Cloud

[spencerldixon]

Couple of minor tweaks here

It looks pretty good on the long sentence test, wraps nicely, but the icon will be in the middle of the sentence. I'm not sure if it would look better aligning to the top or if that throws things out when it's a single sentence.

It would also be nice to have the icon enter the hover state when you hover over the text. This works well when you hover the icon atm and both the icon and the text enter their hover states, but not the other way around.

Also there is a bit of white around the icon on focus state. I see you're setting a white background which probably isn't needed so removing this should fix it.