Allow email signup dialog to be customized

[davidrleonard]

We have a need to allow for complex customizations in our email signup modal. As we bring focus-area specific mailing list groups online, each one will need custom signup options in various places throughout the site.

Here are the new choices for launching an email signup flow:

With a "button"

You can spawn an email signup modal with whatever data by creating an anchor link (or button, or any other clickable thing) with the correct data attributes.

Here's an example from the Economic Development page:

<a href="#" class="button button-l button-bold" data-email-signup-button="true" data-email-headline="I'm interested in Economic Development" data-email-description="Want to learn more about what Code for America is doing to promote inclusive economic growth? Join our email list help inform Code for America's work in this area." data-email-only-show-group="economic-development">Sign up</a>

The data attributes used here are:

• data-email-signup-button="" (boolean): This binds a click event to the button that triggers the modal to pop up when it's clicked. It also prevents the default action of opening whatever the anchor link's href="" value is. If you want it to work, set the value to "true".
• data-email-headline="" (string): A headline that will appear at the top of the email signup modal.
• data-email-description="" (string): A description that appears at the top of the email signup modal.
• data-email-only-show-group="" (string with strict requirements): Hides all group options on the email modal except the one referenced. Should be one of the following allowable values: safety-and-justice, economic-development, health-and-human-services, communications-and-engagement

Here's what our example button will look like rendered on the page:

Here's the email modal it will trigger:

With page frontmatter

The frontmatter on each page (the stuff at the top between the --- marks at the top of the page) now has a new helper option. This helper, called email_signup, allows each page to have its own email signup modal text.

Here are the options (note, they're white-space sensitive because it's YAML):

helpers:
  email_signup:
    headline: "I'm interested in Economic Development"
    description: "Want to learn more about what Code for America is doing to promote inclusive economic growth? Join our email list to help inform Code for America's work in this area."
    join_message: "Get updates on our Economic Development work. Join our email list."
    show_group: "economic-development"

The available fields are:

• headline (string): A headline that will appear at the top of the email signup modal.
• description (string): A description that will appear at the top of the email signup modal.
• join_message (string): A message that will appear beside the email signup box at the bottom of the page.
• show_group (string with strict requirements): Shows the email signup group referenced. Should be one of the following allowable values: safety-and-justice, economic-development, health-and-human-services, communications-and-engagement

Here's the form that will create:

Here's the email signup modal it will create:

[davidrleonard]

cc @gjacobs86