FE: Build flat HTML for TeamSites header/footer

[randimays]

Description

The TeamSites header & footer will not be redesigned with the Federal header and footer for VA.gov; functionality and appearance of the TeamSites header & footer should remain as they are in prod today (1/29/2024). This is because TeamSites cannot support web components, and this is our intended direction for the Federal header & footer on VA.gov.

Engineering specifics

We will build a "flat" HTML/CSS/JS implementation of the header & footer for the TeamSites injections. The intention is to completely decouple the TeamSites header & footer from the VA.gov header & footer, which both currently share a set of React components and functionality. This way, we can change functionality and design for the Federal header & footer without affecting TeamSites.

User story

AS A Veteran, their family member, caregiver, or survivor
I WANT to be able to easily understand and navigate the VA.gov header with and without tools that aid accessibility
SO THAT I'm not frustrated, can find what I need in the least amount of time, and am able to understand that this is a government website

Quality / testing notes

• Unit and e2e tests must be adjusted to fit the flat HTML structure for all TeamSites header & footer components
• Determine if we can test the header & footer on mobile devices using ngrok (and if so, test there)

Task list

rough cut for / from engineering:

Last update: 2/20 10:30am CST

🟢 complete
🟡 in progress
🔴 not started

General

🟡 get fonts to work
🟢 add unit tests for header
🟢 add unit tests for megamenu
🟢 add unit tests for footer
🟢 add HTML in proxy-rewrite covering every header & footer element/functionality (see tables below)
🟢 add documentation in the code
🟢 (engineering) accessibility audit of header/footer
🟢 manual testing

Header

Element	Functionality	Responsive markup/styles
official US gov banner	click behavior 🟢	desktop 🟢 / mobile 🟢
crisis line banner	click behavior 🟢	desktop 🟢 / mobile 🟢
VA logo & seal	click behavior 🟢	desktop 🟢 / mobile 🟢
menu button	click behavior 🟢	mobile 🟢
search button	click behavior 🟢	desktop 🟢 / mobile 🟢
contact us button	click behavior 🟢	desktop 🟢 / mobile 🟢
sign in button	desktop 🟢 / mobile 🟢

Mega Menu

Element	Functionality	Responsive markup/styles
level 1 links (i.e. About VA)	click behavior 🟢	desktop 🟢 / mobile 🟢
hub links	click behavior 🟢	desktop 🟢 / mobile 🟢
hub child links	click behavior 🟢	desktop 🟢 / mobile 🟢
about VA child links	click behavior 🟢	desktop 🟢 / mobile 🟢

Footer

Element	Responsive markup/styles
column links	desktop 🟢 / mobile 🟢
language section	desktop 🟢 / mobile 🟢
VA logo	desktop 🟢 / mobile 🟢
bottom links	desktop 🟢 / mobile 🟢

Acceptance criteria

Definition of "done" for this ticket: successful production deploy of the separated TeamSites (injected) header & footer

• Injected Header is not updated with new designs
• Injected Header is not regressed
• Injected Header documentation is updated to reflect how files work / state of code after the split
• Data is we still pulled from Drupal for the TeamSites header/footer
  Accessibility review has been requested We won't be requesting an accessibility review until the authentication piece is added in from DST

[FranECross]

@randimays @chriskim2311 I tucked this ticket in 'Stretch/Next Sprint' and will mark it high priority. Thanks again! cc @jilladams

[FranECross]

@randimays Apologies, but I'd forgotten to add that the USA logo should be behind a flipper/feature flag so that we can launch with one or the other and revert. (thanks to Laura for the reminder!) cc @jilladams

[randimays]

@FranECross @laflannery I'm not sure what the above comment means. Are we going to have an updated version of the USA Government logo after we launch?

[FranECross]

Amanda to provide a design for the AB versions (for both header & footer). @FranECross to follow up with her on Tuesday.

[FranECross]

@FranECross @laflannery I'm not sure what the above comment means. Are we going to have an updated version of the USA Government logo after we launch?

@randimays Dave & Amanda have mentioned because of the negative feedback on the new USA + logo design, that there is a possibility it might change, or stay the way it is. We want the flipper just in case we do end up launching, and then get direction to revert and be provided with another new design. cc @laflannery

[randimays]

End of sprint update: This was pulled in as stretch and is still in progress. I'm awaiting specific details on how we're coordinating with the Design System Team on building this, also.

[jilladams]

From planning:

• The concern around injected header update is how to effectively test on all the teamsites that use it in prod.
• Thus: keeping scope as is, to freeze the injected header. Randi had thoughts on how to go about that
  • would be great to document once it's ironed out / we know it works. Added that as an AC.
• Updated points to 13 to reflect full scope, with above bullets in mind, though we've already partially burned that down and ~8 points remain in Sprint 102

[aklausmeier]

@randimays I updated ticket to include:

• links to design mockups for header and footer flippers (hides USA logo until we have green light to show the new logo publicy)
• added link to full CodePen prototype so you have in addition to header "pen"
• @laflannery has included accessibility in the CodePen code but consult as needed
• updated design file links to the Figma design mockups (links were to an older version)

You can use the Figma inspect code feature for spacing, font styling, etc. If that doesn't work, I'm happy to hop on a call to run through whatever you may need clarification on.

[laflannery]

@randimays we just added an SVG to the header prototype, it's a better file as it doesn't appear pixelated when zoomed in. I wanted to note this as this would be what we would like to use on the implementation rather than the previous png file

[jilladams]

@randimays starting to think about sprint reporting, and I'm wondering if we should break this ticket down into bite-y-er sizes, given how the injected header is going so far. If you agree, happy to chat on Monday with you/ Fran about how we want to queue this up for next sprint.

[randimays]

@jilladams Agree. Separating the injected header/footer alone is an 8-13 pointer, easily

[randimays]

Created a new ticket (#17072) to capture the work for the new Federal Header design. This ticket is now tracking the work specifically for handling the TeamSites header & footer, which will not change design or functionality.

[jilladams]

Noting from scrum:

• this PR will be blocked on the Design System team work around auth menu.
• A11y review may be smarter to wait til the auth menu work is done, so @laflannery doesn't have to do it twice.
• We'll close this when Randi is done and @FranECross to make a new ticket to track a11y review AC, and merging after DS unblocks.

[randimays]

Update: nearly finished here. Have some manual testing to resume on Monday. Hoping to get some help from the Design System Team regarding the fonts not working (Slack thread here).

[FranECross]

I'm so excited for you! Woot! Thanks for the update. 🎉

[randimays]

Update: manual testing is complete. The only things I'm still struggling with are the fonts. Chris and I have put quite a bit of time into troubleshooting, so we've reached out to the DST for assistance (Slack thread here). Hopefully we can get this resolved today or tomorrow.

[jilladams]

From scrum:

• Randi to make a draft PR
• We will close this ticket as complete
• We'll make a ticket to track merging that Draft PR, as blocked by the Design System work. This will ensure we have a way to track the work remaining in the backlog, in case of contract transition.
• We've asked @jamigibbs to help look at the font issue. No DS ticket currently, but it would be nice to have one for tracking purposes. We can request if this is hard for them to solve as well.

[randimays]

#17291 has been created to track the authentication piece of this work (owned by DST) and getting the fonts to load correctly in the local TeamSites instance. Closing this ticket as the rest of Public Websites' work is complete for these purposes.