VAMC Detail page: adopt V1 and V3 components where components are not used

[laflannery]

Description

VAMC Detail pages need the following updates to components:

Example pages:

• Make an Appointment
  • Boston Make an Appointment
  • Minneapolis Make an Appointment
• Contact Us
  • Boston Contact Us
  • Minneapolis Contact Us
• About Us
  • Boston About Us
  • Minneapolis About Us
• Work with Us
  • Boston Work with Us
  • Minneapolis Work with Us

Elements that are not using components that should be (Backlog)

1. Link
   • If we are able to update to use the links component we should. I know there are limitations with CMS content though.
   • Proper variants should be used when applicable (i.e. download)
     • Example page with a Video link
2. Telephone
   • If we are able to update to use the component we should. I know there are limitations with CMS content though.
   • Where applicable, the aria-describedby [variant](https://design.va.gov/components/telephone#aria-described-by) should be used
   • Exts in phone numbers within the component are parsed correctly
3. Featured content
   • It's currently not using a component but the should be the v3 Summary box component should be used
4. Additional Info
   • This is what this looks like when an editor adds this:
     
   • And this is the markup:
     
   • Drupal Fields:
     
   • Because the trigger text and the content are separate elements, maybe we can update this to be a component?
5. Back to top component
   • Update 5/3: After determining that this component does not actually have built in intelligence to only show based on page height:
     • This should still be added, a lot of the Detail pages are often quite long. The benefit of including this component outweighs (in my opinion) the times when it would show on short pages and it would be an extra tab stop or an extra visual element.
6. Process list
   • If we can use the the v3 component we should but this may not be possible because it's CMS content
   • Screenshots of what this looks like to determine if we can make this a component:
     • Visual display:
       
     • Markup: Also, note that in this it looks like the <h2> and <p> might be coming from separate Drupal fields but that's not the case, it's one rich text field
       
     • Drupal: Since I realized this might be helpful as well
       

Not in scope: V1 components that need to be upgraded: handled in separate tickets

1. Accordion
   • Accordion sections are using the v1 component and need to be updated to v3
2. Alert
   • Currently using the v1 component but needs to be updated to v3.
3. Button
   • It is inside the alert and is currently using the v1 component but needs to be updated to v3.

Acceptance Criteria

• If possible, Link component has been added, with appropriate variants
• Accordion component has been updated to v3
• v3 Summary Box component has been added
• Alert component has been updated to v3
• Button component has been updated to v3
• v3 Additional info component has been added (if possible)
• Back to top component has been added
• If possible, v3 Process list component has been added
• Update and run existing test(s).
• If additional tests are needed, stub a ticket to note this for future work.
• Requires accessibility review

Team

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

• CMS Team
• Public Websites
• Facilities
• Accelerated Publishing

[maxx1128]

I would estimate this ticket at a 5 since it's a relatively simple page, but there are a lot of components that need to be added, updated, and checked afterward. It is all static content and nothing too complicated, which is why I don't think it would be an 8 or higher.

[laflannery]

I struck out the featured content/summary box component update because we aren't able to do this - the content coming from drupal does not fit what the component needs. Full details of this issue in the comment here

I also updated Link, Phone, and Process list because since this is CMS content, updating these may not be possible.

[laflannery]

Alert and button are already v3, I believe it happened with this PW ticket

[laflannery]

Accordions are also using v3 already

I will try to track down the ticket/s where this happened

[laflannery]

Telephone moved to #16148

[eselkin]

@laflannery Where is the additional info component needed? I can't find anything about additional info on the linked pages. I see one additional info section that's in https://www.va.gov/boston-health-care/contact-us/ for FOIA requests, but that's drupal wysiwyg content.

Also, not sure where we'd use the process list, it appears it is Drupal content you're probably talking about because most stuff (90%) on the Detail page is CMS content.

Just for links and back-to-top this is likely a 3.

[laflannery]

Answers below @eselkin!

• For the additional info component:

  • I am seeing on instance inside the alert here. Can that/should that be a nested component?
  • And regarding the CMS content, editors can add a separate block for the additional info, it's not inside the WYSIWYG I added it in staging(not sure when this will get blown away but added screenshots just in case)
  • I was thinking we would be able to add the Trigger text content into the trigger prop in the component and then the Text as the rest of the stuff
    FE
    (No idea why in the word the code says spanish translation)
    
    Drupal
    

• And then I sort of have the same thought for the Process list - it's not within a wysiwyg but it's actually a separate block that editors would add. Can we take the pieces of this block and put them into the correct places into the component? Do we have enough separate pieces coming out of Drupal for this?

[eselkin]

@laflannery Do you mean the "How do I talk to someone right now?" alert that has the fake expandable "Find out how to get support anytime, day or night." toggle that should be and additional info component, but is not. Let me look at the paragraph to see how the additional info gets processed.

Ok, that alert is processed with the block alert (src/site/blocks/alert.drupal.liquid) not the paragraph alert. So that just needs to get updated to use the additional info component. Not too hard.

[eselkin]

There's a paragraphs/process which I'm guessing is supposed to be a process list but not sure. It would not be that hard to convert. Though with the prior change and this change would likely be at least a 5 in terms of checking we aren't breaking things and that they look ok.

[eselkin]

There's a paragraphs/process which I'm guessing is supposed to be a process list but not sure. It would not be that hard to convert. Though with the prior change and this change would likely be at least a 5 in terms of checking we aren't breaking things and that they look ok.

@omahane @davidmpickett is there some view or something where we can see if the entity_bundle process is getting used on a detail page somewhere?

[laflannery]

1. It sounds like we can do the process list - yay!
   Re: your questions above - I just added one for you to confirm, is that what you needed?
   
2. Is sounds like we can do the additional info content inside an alert - yay again!
3. Did we confirm if we can also do the paragraphs/spanish_translation content as well?

[davidmpickett]

@eselkin So the Detail page Content type is unique in that it has lots of optional paragraphs types that could be added. I don't think there is an easy way to get a report of which VAMC Detail pages use which paragraph types. But @omahane might have an idea for a magical View.

A more likely path to testing would be to create a test VAMC Detail Page that uses 1 of each possible Paragraph type so you have an example that covers all the scnearios rather than trying to hunt for one in the wild.

[davidmpickett]

Not sure if this helps, but here's an example from PW of a page using the Process List in Drupal and the Corresponding FE.

• https://prod.cms.va.gov/disability/after-you-file-claim
• https://www.va.gov/disability/after-you-file-claim/

[laflannery]

I just want to make sure we aren’t making this too complicated - I have already gone through the VAMC detail pages to determine what blocks/content can and cannot be added, that’s how this ticket was created. So that shouldn’t need to be done again

I also created the Process list on a VAMC page in my previous comment and that’s what we should be using here. Content from a different page may not be exact so the first example would
Probably be best

[eselkin]

@laflannery sorry, I didn't see the process list there. I just was wondering if there was a location to test on a detail page in existance. You creating one is just as good! Thanks! The spanish translation summary really should just include the expandable additional info component because it's literally the same exact code. No idea why there's a duplicate of that block. Yes, that'd be included in that 5 estimate then.

[davidmpickett]

I also created the Process list on a VAMC page in my previous comment and that’s what we should be using here. Content from a different page may not be exact so the first example would Probably be best

Can you add a link to that VAMC page to the ticket body under Process List (like you did for the video link example) so it's easy to find for QA & validation?

[jilladams]

Rather than divide this ticket to address only icon related things first, and the rest of componentizing later, we'll just do the components along with the icon work.

[jilladams]

For Additional Info & Process list: @laflannery can generate test content on staging and provide screenshot of the HTML markup from Preview, to make this easier.

[laflannery]

Screenshots added to description, For whomever picks this up, let me know if anything else is needed I can get you

[randimays]

@laflannery I read through the comments but I'm not clear where we landed on a test page for process list.

Do you know of a production page that uses the process list already? If not, I'll spin up a Tugboat and add one to an existing page.

[laflannery]

Sorry @randimays I had added screenshots of the markup I got from preview into the ticket description. There are production benefit detail pages (example) that use a process list but I don't know of a VAMC detail page that uses this currently.

[randimays]

This will be posted for review today. It most likely won't make the production deploy, so it will carry over to tomorrow.

[randimays]

Successfully validated in production. Closing!