Add Footer to Website

[MitchellTCG]

Business Purpose

As the CIO of FEC, I would like a footer so the site meets Federal regulations.

Acceptance Criteria

The Footer has two parts:

The Upper footer:

# Height: 80px Background color: #E8E8E8

Column 1:

~Need help? Contact your RAD Analyst [Karla - Bold - 18pt - #212121]~ ~John Doe (888) 888-8888 [Karla - Italic - 18pt - #212121]~ Need help? Contact us [Karla - Bold - 18pt - #212121] (this above will be dynamically generated in a later ticket)

Column 2

Feedback [Karla - Bold - 18pt - #212121] (This will not be linked. The Feedback link will be in another ticket)

Column 3

Legal disclaimer [Karla - Bold - 18pt - #212121] (This will not be linked. The Legal Disclaimer link will be in another ticket)

The Lower footer:

# Height: 234px Background color: #164F85

Column 1

FEC Seal: [Logo below or download from https://www.fec.gov/static/img/seal--inverse.svg - please make 100px by 100px]

Text: Federal Election Commission [Gandhi Serif - Bold - 22pt - #FFFFFF] 1050 First Street, NE Washington, DC 20463 [Karla - Regular - 14pt]

Column 2

Hyperlink 1: Privacy and security policy [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fec.gov/about/privacy-and-security-policy/

Hyperlink 2: Plain language [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fec.gov/about/plain-language/

Hyperlink 3: No FEAR Act [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fec.gov/about/no-fear-act/

Hyperlink 4: Strategy, budget, and performance [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fec.gov/about/reports-about-fec/strategy-budget-and-performance/

Column 3

Hyperlink 1: Open government [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fec.gov/about/open/

Hyperlink 2: Protect Voices [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fbi.gov/investigate/counterintelligence/foreign-influence/protected-voices

Hyperlink 3: USA.gov [Karla - Regular - 16pt - #FFFFFF] URL: https://www.usa.gov/

Hyperlink 4: Inspector General [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fec.gov/office-inspector-general/

Hyperlink 5: FOIA [Karla - Regular - 16pt - #FFFFFF] URL: https://www.fec.gov/freedom-information-act/

Dev Notes

All links should open in a new tab.

QA Notes

null

DEV Notes

null

Design

null

[MitchellTCG]

@JonellaCulmer Please review this ticket

[Elaine-Krauss-TCG]

Footer implemented according to specs with no complaints from ANDI

[Elaine-Krauss-TCG]

All unit tests passing

[mjtravers]

There is a white padding around the footer left, bottom, and right side that does not appear in the wire frame. Here is a screen shot showing the extra padding when the footer blue should to to the left, right, and bottom edges Sending back to In Progress

[mjtravers]

Passes CR. Sending to QA

[MitchellTCG]

@Elaine-Krauss-TCG PLease update "Need help? Contact your RAD Analyst" with "Contact us" And get rid of the phone number per this wireframe

[Elaine-Krauss-TCG]

Footer updated accordingly

[mjtravers]

Passes CR, moving to QA

[MitchellTCG]

TESTING: App553

Following Links work and resolve to the correct links:

• [x] Privacy and security policy

• [x] Plain language

• [x] No FEAR Act

• [x] Strategy, budget, and performance

• [x] Open government

• [x] Protect Voices

• [x] USA.gov

• [x] Inspector General

• [x] FOIA

The following Text is correctly placed and phrased

• [x] Feedback
• [x] Legal Disclaimer
• [x] LOGO
• [x] Federal Election Commission (title)
• [x] 1050 First Street, NE Washington, DC 20463 (address)

[MitchellTCG]

App553 — FAILED

@Elaine-Krauss-TCG Please make the following updates (do not check the boxes, I will when i retest the issue)

• [ ] Please change "Contact us" to "Need help? Contact us" (this is my fault UX)
• [ ] Please change "Need help? Contact us", "Feedback", and "Legal Disclaimer" from Karla (regular) to Karla (bold). I believe karla-bold should work.
• [ ] Somewhere in the ng packet the fonts are being overwritten by a relative sizing (em or rem) causing the pt (points) to be bigger than expected. Please change all "pt" to "px" Update the following:
  • [ ] "Need help? Contact us", "Feedback", and "Legal Disclaimer" change from 18pt to 18px
  • [ ] "Federal Election Commission" change from 22pt to 22px
  • [ ] "1050 First Street, NE Washington, DC 20463" change from 14pt to 14px
  • [ ] Change ALL hyperlinks in columns 2 and 3 from 16pt to 16px
• [ ] Lastly change "Protect Voices" to "Protected Voices" (this is also UX fault. I missed the "ed". The wireframe was wrong. Sorry.)

[Elaine-Krauss-TCG]

• "Contact us" -> "Need help? Contact us"
• Upper footer text changed from being wrapped in \<strong> to using the karla-bold font
• All instances of "pt" font sizing in the footer changed to "px"
• "Protect" -> "Protected"

[mjtravers]

Passes CR, sending to QA

[MitchellTCG]

App553 — PASSED

@Elaine-Krauss-TCG Please make the following updates (do not check the boxes, I will when i retest the issue)

• [x] "Contact us" changed to "Need help? Contact us"
• [x] "Need help? Contact us", "Feedback", and "Legal Disclaimer" changed from Karla (regular) to Karla (bold). The following were updated:
  • [x] "Need help? Contact us", "Feedback", and "Legal Disclaimer" change from 18pt to 18px
  • [x] "Federal Election Commission" change from 22pt to 22px
  • [x] "1050 First Street, NE Washington, DC 20463" change from 14pt to 14px
  • [x] Change ALL hyperlinks in columns 2 and 3 from 16pt to 16px
• [x] "Protect Voices" changed to "Protected Voices"