Review Codepen for Federal Footer

[laflannery]

Description

Implementation of the Federal footer has been completed on Codepen. This is ready to be reviewed and edited as needed. I would recommend that a FE engineer review what has been created. Some notes:

• I am now using DS classes where the current footer wasn't.
  • Layout, fonts, color, etc.
  • However, there seems to be an inconsistency on when to use classes and when to use CSS and maybe it's just because I am not an engineer.
  • Cleaning up these classes vs. CSS to be what VA.gov should be using would probably be a good idea.
• For now, you can ignore the internal/external link behavior. This is still up in the air and is up for discussion at a meeting on 1/8 so that might be changing later.
• Codepen file structure:
  • Contact Page: This is an example screen that will probably be in the full prototype
  • The Contact page imports all other files:
    • Footer file. If you want to change anything in the footer you would do it in this file. Also I've noticed that when I change something in the Footer I then also have to re-save the Contact page to get the change to be reflected (probably cache)
    • Other imported files that you probably won't need to change but just to be aware of:
      • Design System
      • CSS & JS: The JS and CSS of the imported files needed to be added separately
        • This JS, even though it's in the Footer file also makes the header work. I might rework this and make is more normal but at the time of writing this ticket that is the state of things.

Reminder
You need to be logged into the Sitewide CodePen account in order to edit the files. This is under Jill's login.

I fixed it!
One minor issue - on small screens, the accordions no longer expand and collapse as they should. Would an FE engineer be able to take a look and see why the JS isn't working properly when imported into another Pen?

Acceptance Criteria

• Front end engineer has reviewed and updated the footer as needed so that it is in a state that makes it as easy as possible to implement on VA.gov
• UX Lead review is requested (Amanda)
• Requires accessibility review

Team

Please check the team(s) that will do this work.

• CMS Team
• Public Websites
• Facilities
• Accelerated Publishing

[FranECross]

@randimays Just drawing your attention to this ticket for when you and Laura collaborate on CodePen for Federal Header/Footer. Thanks!

[FranECross]

@FranECross and @laflannery will work on the AC in this ticket on Thursday 12/14.

[randimays]

I reviewed the Codepen(s) this morning. Everything looks very simple/straightforward and should be easy to implement in vets-website post-research. I didn't make any adjustments. Great job, @laflannery!

[aklausmeier]

I plan to do a UX Design review post-research insights. It's possible we will need to make minor revisions.

[chriskim2311]

Second Randi! Great job @laflannery no issues from me!

[jilladams]

@aklausmeier Checking in here looking ahead to Tuesday end of sprint - not sure if what Cindy has provided so far unblocks the UX review notes here, or if we expect this will likely need to rollover a bit to capture the updates we likely need to make?

[laflannery]

@jilladams FWIW - the AC I noted as just to request Amanda's review - because I wasn't sure when this would get scheduled, reviewed by FE, etc. So technically we have fulfilled all the AC to close this. I can open a new ticket to "Update footer based on Phase 1 research insights"? - would that work for you and @aklausmeier?

[aklausmeier]

@laflannery Yes, a new ticket for revisions works for me. I won't have changes ready to share for a few days... consulting with Mikki and Danielle on content and IA tomorrow.

cc @jilladams

[laflannery]

New ticket created for next steps: #16592