add a slot to customize email helper text (#179)

## Description

Allow overriding the helper text on the email field using a slot, if
needed. This allows partners using advanced functionality
(`show-email="true"` and event handlers to facilitate signing up users
to their own email list) to customize the email label so it explains
what's going on. This could be used in conjunction with customizing the
footer as well to further clarify which terms and privacy policy apply.

This is a prototype - seeking feedback to see if this makes sense to
others, pending legal input on the approach as well.

## Test Plan

I'm running `yarn cypress:open` and inspecting that the calculator looks
reasonable when the last of the new email tests runs. The preview build
for this PR should be unchanged from production.

This is a screenshot from the Cypress test:
![Screenshot 2024-07-19 at 5 35
03 PM](https://github.com/user-attachments/assets/741178b9-1ba4-4d36-bd85-0f3f9939b6d7)

cypress/e2e/state-calculator-email.cy.ts

@@ -0,0 +1,47 @@
+/// <reference types="cypress" />
+/// <reference types="cypress-axe" />
+
+describe('rewiring-america-state-calculator email field', () => {
+  beforeEach(function () {
+    cy.visit('http://localhost:1234');
+  });
+
+  it('does not show the email field by default', () => {
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .find('#email')
+      .should('not.exist');
+  });
+
+  it('shows the email field if requested', () => {
+    cy.get('rewiring-america-state-calculator').invoke(
+      'attr',
+      'show-email',
+      'true',
+    );
+
+    cy.get('rewiring-america-state-calculator')
+      .shadow()
+      .find('#email')
+      .should('exist');
+  });
+
+  it('allows overriding the email field helper if a slot is provided', () => {
+    cy.get('rewiring-america-state-calculator').invoke(
+      'attr',
+      'show-email',
+      'true',
+    );
+
+    cy.get('rewiring-america-state-calculator').then($el => {
+      $el.append(
+        '<span id="test-email-helper" slot="email-helper">Get updates from Rewiring America and our partners.</span>',
+      );
+    });
+
+    cy.get('rewiring-america-state-calculator')
+      .find('#test-email-helper')
+      .should('contain', 'Get updates from Rewiring America and our partners.')
+      .should('be.visible');
+  });
+});

src/state-calculator-form.tsx

@@ -109,18 +109,20 @@ const renderEmailField = (
       required={emailRequired}
     />
     <div className="mt-1 mx-3 text-color-text-secondary text-xsm leading-normal">
-      {msg(
-        'Get updates on incentives, rebates, and more from Rewiring America.',
-      )}{' '}
-      {msg('View our')}{' '}
-      <a
-        className="text-color-action-primary font-medium"
-        href="https://rewiringamerica.org/terms-of-use"
-        target="_blank"
-      >
-        {msg('terms')}
-      </a>
-      .
+      <slot name="email-helper">
+        {msg(
+          'Get updates on incentives, rebates, and more from Rewiring America.',
+        )}{' '}
+        {msg('View our')}{' '}
+        <a
+          className="text-color-action-primary font-medium"
+          href="https://rewiringamerica.org/terms-of-use"
+          target="_blank"
+        >
+          {msg('terms')}
+        </a>
+        .
+      </slot>
     </div>
   </div>
 );