[Task]: Implement footer for static site

[sumiat]

Summary

Now that the Front-end repo has been set up, we can use the template to start adding content for the future beta.grants.gov site. We ultimately want the design to match the [Figma mockup]

We are breaking up the work into components. This ticket focuses only on the footer of the content.

• Add the approved footer content changes to the page
• Ensure all the links and form on the page works as expected
• Following the USWDS style guide

Links

• Figma mockup
• Static site content
• HHS Logo https://www.hhs.gov/web/policies-and-standards/web-policies/logo-seal-and-symbol-policies/index.html
• Twitter Link: https://twitter.com/grantsdotgov
• Youtube link: https://www.youtube.com/user/GrantsGovUS
• RSS link: https://www.grants.gov/web/grants/rss.html
• Facebook link: there is no facebook link, this icon can be removed
• Instagram link: There is no instagram link, this icon can be removed.
• Newsletter link: https://www.grants.gov/web/grants/connect/newsletter-archive.html
• Blog link: https://grantsgovprod.wordpress.com/
• Phone number: 1-877-696-6775
• Email: support@grants.gov

Acceptance criteria

• [ ] Footer is working and match the Figma design
• [ ] Appears as a story in Storybook
• [ ] Test coverage
• [ ] Static site content served from root of the application
• [ ] Updated content and design to match the Figma mockup
• [ ] mobile formatting as expected
• [ ] desktop formatting as expected
• [ ] Accessibility testing (should be inherited when using USWDS)
• [ ] Approvers: at least one design or product person

Dependencies

283

[sumiat]

Hi @daphnegold - I updated the links. HHS does not have a facebook or instagram so we can remove those icons. They do have a newsletter and blog links. I added those links, but need to find the icons for those. Will update those when I get it but if you work on this ticket before I get those, no need to implement those links. I can create a separate ticket to add blog and newsletter icons/links later.

[andycochran]

Looked thru the icon set to see what's most appropriate for those links.

For newsletter, we can use the mail icon:

And for the bloc we can use… hmm… maybe local_library (it's a person reading, and I don't think it's an established symbol that can only mean "library"):

[daphnegold]

The bigger issue here is the SocialLink component that does not allow for customization like that. It's locked to the presets. So we need to do our own custom thing here, a wrapper around SocialLink or something. See here: https://github.com/trussworks/react-uswds/blob/e1c60cbff90c484b1942675a459aaab2e581b0e1/src/components/Footer/SocialLinks/SocialLinks.tsx

Worth it, @andycochran or we put the links for newsletter and blog elsewhere? I am not sure if this is the super easiest lift. Let me play with it a little, maybe I can just pass in a link that isn't a SocialLink specifically.

[andycochran]

That's… disappointing. USWDS guidance explicitly says:

So I'd have thought the Footer component would be more robust and flexible. The Truss components are there for convenience, and if they're not convenient… 

We can ignore the Truss SocialLinks component — or ignore any of the Footer subcomponents if they're insufficient — and just use the markup from the USDWS Footer component directly. Let's just hardcode the footer if Truss components aren't working out-of-the-box.

Any thoughts, @SammySteiner?

[daphnegold]

I can hack it by making my own SocialLink which is just an <a> tag with an icon! We're good. My bad for making a thing out of not a thing when the solution was quite simple.

<a className="usa-social-link" key="test" title={"applesauce"}>
  <Icon.Tornado className="usa-social-link__icon" name={"applesauce"} />
</a>,

[andycochran]

Per Lucas, can we add a SocialLink with the GitHub logo that links to this repo?