CMS-driven Footer Megamenu: Create/Populate Footer Menu

[chri5tia]

Description

• Populate existing footer menu in CMS: footer
  https://va-gov-cms.ddev.site/admin/structure/menu/manage/footer
• Use links and structure as they already exist on va.gov. The code for the URLs and hierarchy is in content-build/src/platform/static-data/{} footer-links.json
  • Do not include Language Assistance section
  • Do not include Col 4 of top section (Contact Us plus VCL)

Mural with analysis of the differences between Desktop and Mobile

Language assistance links

This is powered by a React component, so will not be included in initial drupalizing. Ticketed for separate consideration later: #11492

Acceptance Criteria

• Initial categories: Section 1, Section 2: Language Assist, Section 3 (see screenshot and note)
• Section 1 Links
  • Note: Do not include Column 4 (Contact Us plus VCL) in this ticket
  • Hierarchy – Each column of links is under a parent link, and links are sub-menu under that
  • Parent link's link text is the header/title of the column (eg "Veteran programs and services" for Col 1), with no link/href
• Requires design review

Note: Label "Section" is not official/subject to change after design review

CMS Team

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

• Program
• Platform CMS Team
• Sitewide Crew
• ⭐️ Sitewide CMS
• ⭐️ Public Websites
• ⭐️ Facilities
• ⭐️ User support

[chri5tia]

@jilladams @wesrowe Something I didn't think about. Typically menu links are part of content, so these links should be added on prod and not in a code config. I want to confirm that the expectation here is that:

• the footer is available on prod
• the footer links are added on prod

[chri5tia]

Code changes that the new cypress test applies to:
https://github.com/department-of-veterans-affairs/va.gov-cms/pull/10574/files

[jilladams]

Confirming: menu links should go in on Prod. We need to first confirm (per scrum discussion) that the existing Footer menu isn't exposed in any front-end code. We don't want new links showing up on prod front-end where they're not expected.

[jilladams]

Updated body to add notes that Language selector links don't need to go into this menu.

[chri5tia]

Use this as a guide:
https://github.com/department-of-veterans-affairs/content-build/blob/main/src/platform/static-data/footer-links.json

[wesrowe]

Link to DSVA slack thread where we discuss some enhancements that may be necessary to the Drupal data model. Changes depend on the FE architecture design.

Things the FE probably needs to know, based on json file in comment above:

• column
• href
• title
• order - should be captured by drupal's weight
• target ("" or "_blank")
• rel (eg noopener, noreferrer)

Additional things the FE may need to know:

• additional classes – e.g., VCL is a <button> with added classes
• data-show - eg VCL also has this
• aria-label - eg TTY: 711
• label - the json file uses this for items that (I think) are the first item in Column 4 under a sub-header. So the label string is used as a sub-header above the link specced in that particular json object. E.g., "Call us" is the label for the 800-number link.

[wesrowe]

Notes:

• AR: Ryan & Christia to make sure the existing "footer" menu in drupal is not actually used anywhere in content-build (and thus we can change it in Prod-CMS without impacting anything live)
• AR: Wes adjust ACs to 3 col + rail
• AR: Wes talk to content designer (Pickett) about Col 4, aria-labels
  • Col headers: Parent-level links will not have links/hrefs
  • Order of 3 cols will be determined by order in drupal
• AR: Wes inform Pickett about 3-menu approach
• Document rationale in this ticket
  • Col 4 may need extra attributes in drupal, and contact content may be more reusable and therefore want more content-design attention up front
• Be cognizant of:
  • Injection
  • Mobile differences (drupal doesn't need to know, especially for Cols 1-3)

Injection complications:

• Injection currently relies on 2 pieces:
  • json file – a single file for both header and footer is created (very simply) during content build
  • react component – since the column 1-3 headers are hard-coded in the existing react component, moving to drupal will require some modification of the react component that gets injected
• Options
  • 1 – use drupal to reconstruct the exact same footer-json file during content build, thus preserving injection architecture
  • 2 – do something with drupal that may be better for modernized VAgov but may also have more impact on injection architecture (ie, changing number of files, file names, etc)

[jilladams]

@wesrowe @ryguyk @chri5tia we need to make sure #11482 keeps up with outcomes here so if someone like Bryan or Josh implement, they have everything they need in one place. I took a pass today, based on our last convo, but we should plan to go through it in refinement when this ticket is done just to confirm it lines up with where we land here.

[chri5tia]

Footer done, primarily. I need to comb over and double-check everything. The Footer Rail will be done today.
https://prod.cms.va.gov/admin/structure/menu/manage/footer

[laflannery]

@wesrowe @jilladams @chri5tia I think I may have found a bug with this footer:

On the Drupal CMS login page, in the footer, I am now seeing this:

Whereas before I used to have actual footer links (I know one of them was VA Design system because there is an old screenshot in this ticket)

I looked in the CMS UI and found the Footer menu here and noticed that there are links set as Old/Disabled, however those are the correct links that should be showing on the Login page. The new text that is showing is the top level column text. Could someone take a look at this?

[chri5tia]

@laflannery Thanks for catching this! Fixed.
Now we know what the footer menu is being used for and that it is, in fact, being used somewhere.

[chri5tia]

Team, I am thinking we should create a new footer for the CMS log in page, called footer_cms. And then userp the footer for the purpose we planned. (In lieu of creating a new footer with a more confusing machine name.)

[jilladams]

That seems reasonable to me, and please make sure the menu "Description" gets updated for these footer menus, to make sure it's clear what the menus are doing, and in which context they appear in the front end.

e.g.
Footer = VA.gov footer, columns 1-3
Footer Bottom Rail = VA.gov footer, bottom-most menu below VA logo
footer_cms = CMS footer menu, appears on CMS login page

[chri5tia]

Done.

https://prod.cms.va.gov/admin/structure/menu/manage/footer
https://prod.cms.va.gov/admin/structure/menu/manage/va-gov-footer
https://prod.cms.va.gov/admin/structure/menu/manage/footer-bottom-rail

[jilladams]

@chri5tia I fixed up some ordering in the menus where they didn't match what's live in the va.gov front-end today. Otherwise looks good with just a couple notes for cleanup:

• 1. https://prod.cms.va.gov/admin/structure/menu/item/11539/edit?destination=/admin/structure/menu/manage/va-gov-footer -- we need to confirm that entering the path this way will work correctly when passed through to the front-end. The relative path could be problematic when the header is injected into sites that don't have va.gov as domain. Probably best to just update to add the full domain, unless you had reasons not to?

• 2. https://prod.cms.va.gov/admin/structure/menu/manage/va-gov-footer includes column 4, which we excluded from scope in the ACs. Pls delete those.

• 3. https://prod.cms.va.gov/admin/structure/menu/manage/footer - need to delete the disabled links here as cleanup.

[chri5tia]

Thanks Jill! I meant to go back and address those.

Here are the links that are actually not part of the CMS and need the full URL entered:

1. https://www.va.gov/homeless/
2. https://www.va.gov/womenvet/
3. https://www.va.gov/centerforminorityveterans/
4. https://www.patientcare.va.gov/lgbt/
5. https://www.ptsd.va.gov/
6. https://www.mentalhealth.va.gov/
7. https://www.va.gov/adaptivesports/
8. https://www.nrd.gov/
9. https://www.va.gov/ogc/accreditation.asp
10. https://www.mobile.va.gov/appstore/
11. https://www.va.gov/statedva.htm
12. https://www.va.gov/landing2_business.htm
13. https://www.va.gov/landing2_business.htm
14. https://www.va.gov/jobs/
15. https://www.va.gov/opa/pressrel/
16. https://public.govdelivery.com/accounts/USVA/subscriber/new/
17. https://www.facebook.com/VeteransAffairs
18. https://www.instagram.com/deptvetaffairs/
19. https://www.twitter.com/DeptVetAffairs/
20. https://www.flickr.com/photos/VeteransAffairs/
21. https://www.youtube.com/user/DeptVetAffairs
22. https://www.va.gov/opa/socialmedia.asp

This is the list of links that we should enter the node ID for instead of the URL (usually):

• https://www.va.gov/outreach-and-events/events/ (node/735)
• https://www.va.gov/find-forms/ (node/2352)
• https://www.va.gov/outreach-and-events/outreach-materials/ (/node/737)
• https://prod.cms.va.gov/welcome-kit

These links are part of the CMS but have their own subdomains, so I think they may have to be entered in this way:

• https://www.accesstocare.va.gov/
• https://www.news.va.gov/

[chri5tia]

Reopening this ticket. Creating the new menu and populating it with links without pushing the config to prod first has caused issues. I removed the menu and will recreate once the PR merges.

Entities exist of type <em class="placeholder">Custom menu link</em> and   

Menu Footer VA.gov</em

.
These entities need to be deleted before importing.

[chri5tia]

This is done.
https://prod.cms.va.gov/admin/structure/menu/manage/va-gov-footer

[chri5tia]

@jilladams in lieu of a code push, let me know if this is good to close.

[jilladams]

Looks good, only question from me is re: relative / node links. Not sure if entry like this pointing to the node will work out to point to the correct URLs per environment (show Staging links on Staging, etc)? Can we tell via GraphQL what URL will get sent through to the front-end? I'm guessing it builds the URL at build time based on the env? These 4 are set up this way:

• https://prod.cms.va.gov/admin/structure/menu/item/11570/edit?destination=/admin/structure/menu/manage/va-gov-footer
• https://prod.cms.va.gov/admin/structure/menu/item/11573/edit?destination=/admin/structure/menu/manage/va-gov-footer
• https://prod.cms.va.gov/admin/structure/menu/item/11580/edit?destination=/admin/structure/menu/manage/va-gov-footer
• https://prod.cms.va.gov/admin/structure/menu/item/11581/edit?destination=/admin/structure/menu/manage/va-gov-footer

[jilladams]

Confirmed with Christia: these should build HREFs relative to the build env, and we can confirm with front-end when they implement via #11482 . Closing.