LittlePay Modal

[machikoyasuda]

closes #1481

What this PR does

• Enrollment Index: Add LittlePay link modal
• Modal Trigger Link: Add CSS class that creates modal trigger link icon style. Use CSS class in Modal Trigger includes. Changes Trigger inclues to allow CSS classes as a string to be passed in. The Modal Trigger Link is composed of a button, but has the styles of a default text link
• Info Modal includes: Add an InfoModal template, which has a slightly different style from the Agency Selector modal

Documentation

Modal Trigger Link

• Takes: id, classes, text
• Use the CSS class "modal-trigger--link" for an inline link (but actually button on the inside) with the (?) around it. (The reason why it has to be a button is so that the modal opens when focused and a user clicks spacebar or the enter key).
• Note: This PR does not yet implement the new Update focus ring  #1387 style color to yellow. That has to happen all together for all links. The spacing, however, is ready to fit the link and icon together.

Modal Info

• Takes: size - modal-lg or modal-md (classes from Bootstrap)
• The 4 info modals have different styles than the Agency Selector modal. So I created an includes called "modal-info" (taking name suggestions!) that has the different styles for the header height, title font and padding.
• This includes also takes a size class, either modal-lg or modal-md

Modal

• Can be opened when the link is in focus and you spacebar or enter the link. Or by clicking link
• Close button is now the darker color
• Close button container should be of a total height of 36px
• Modal padding is 32px
• Note: External link icon not done yet. Will be done all together External link icon - Help page #1484 External Link Icon - Add external link icon to Footer link(s) #1471 when these are out

[angela-tran]

The CSS here looks good, and I'm glad to see the refactor from #1504 was helpful here!

My only comment is that I think modal-info.html and modal.html are similar enough to where they could be one file.

[angela-tran]

This code is pretty similar to modal.html. The only differences are size on line 4 and some spacing (p-2 on line 6, pt-0 mt-0 p-4 m-2 on line 9).

It might be worth it to find a way to make them one file. It doesn't necessarily have to be in this PR.

[machikoyasuda]

Definitely can be done in a future PR!