Fec-cms: Implement new contact page design

[AmyKort]

What we're after: We've reorganized and streamlined our contact page language and design to help users better find the FEC services they are looking for. Our next step is to implement the new design. Great background at: https://github.com/fecgov/fec-cms/issues/1895

Designs:

Completion criteria:

• [x] Create wagtail template, or discover applicable, mobile-friendly template to function similarly to the hard-coded version (column 1 (left), then column 2(right)) (also talk to Jonella about line spacing)
• [x] Front-end and content pair to build contact page in Wagtail
• [x] Publish new wagtail contact page live
• [x] Delete hard-coded contact page
• [x] Modify link to contact page to say www.fec.gov/contact and remove -us
• [x] Add a wagtail redirect for for /contact-us/ to go to /contact/

[JonellaCulmer]

Once upon a time, we planned on removing the -us from the www.fec.gov/contact-us link in an effort to move away from first-person POV. Emileigh started a PR some time ago that is now out of date, but I think we can incorporate the intent of the PR in this implementation issue as well.

Old PR: https://github.com/fecgov/fec-cms/pull/784

[dorothyyeager]

Took a look at the templates in the pattern library to see if there was one that functioned similarly to the current page. The closest seemed to be the "custom page" which does permit two columns, but would require us to swap what's in the design. It looks like the best option will be to build a new Wagtail template.

[johnnyporkchops]

@JonellaCulmer , do you have the text for the above mockup by any chance?
And is this a new header image?

[JonellaCulmer]

@johnnyporkchops I can compile the text in a google doc for you.
The image in the mock-up is what is currently implemented.

[JonellaCulmer]

@johnnyporkchops Here's the page content: https://docs.google.com/document/d/1dv-n3Wbqr3pnvu23vEdFN_xIfertUG6iWZS5aFwm0fQ/edit#

cc: @dorothyyeager

[dorothyyeager]

@johnnyporkchops Happy to review the PR for content if needed.

[JonellaCulmer]

@johnnyporkchops
@dorothyyeager and I took a look at the template and we have a few tweaks:
First, we'd like to make the item icon optional. This would help for the address section. We don't want to use the same icon twice in a row for both addresses and right now we'd be required to use them both. If they are made optional we can avoid this.

Second, can you rename "Sections" to "Help with sections". It wasn't immediately clear which section we were adding information too and whether we needed to include a header. If you modify that, it would help. Particularly in the future when someone else may need to go in and make edits.

Could you also edit "Help With" to "Help with"?

Linking didn't work in the item info section for internal or external links, but it did for email. These need to be functional, particularly for the Contact your analyst section

Finally, if we could limit the "Help with" section to just one section. I think that will help limit and future modification of the template.

Let me know if you have any thoughts or questions.

[JonellaCulmer]

This work has been merged into the next release, so closing this issue.

[dorothyyeager]

@JonellaCulmer and I built out the draft page in prod this AM and have sent to PMs to review, with a cc to @johnnyporkchops so he knows we're about to publish it.

[dorothyyeager]

All contact page-related tasks are complete and the old contact address is now redirecting to https://www.fec.gov/contact/ so we can close this issue.