[Update Events > Figma] Create a mockup in Figma for the 'See more events links'

[FranECross]

Description

After we officially move from Sketch to Figma, create a prototype depicting the two links referenced in ticket #15766 : Update Events > See more events link to use more descriptive text.

Design

Outreach and events Figma file

User story

AS A person working on the VA.gov site in any given role (PO/PM/Delivery/Dev/UX, etc.)
I WANT to see a prototype in Figma for the new see more events links/text
SO THAT our future selves have visual reference of the work done

Update See more events at the foot of main content on events.

Want to see more events offered at Example VAMC?
[Go to [exampleVAMC] events calendar]

Want to see more events offered by the VA across the country? (for Outreach events or VAMC+Outreach events only)
[Go to outreach events calendar]

Acceptance criteria

GIVEN I'm a person who is working on the VA.gov website
WHEN I want to see what see more links were added in the linked story
THEN I can look in Figma to see a representation of what was build

• Convert Sketch components to Figma components in Figma file [Figma Migration] Move Outreach and events Files to Figma #16670
• Update "See more event links" text
• Review with Accessibility
• Review with UX Lead

[jilladams]

Copy Dave provided:

Case	Proposed language
VAMC event	Learn about other events offered at VA Eastern Oklahoma health care. Browse the VA Eastern Oklahoma health care events calendar > Learn about other events offered by the VA. Browse the VA outreach events calendar >
VAMC events that are also featured on National Outreach calendar	Learn about other events offered at VA Eastern Oklahoma health care. Browse the VA Eastern Oklahoma health care events calendar > Learn about other events offered by the VA. Browse the VA outreach events calendar >
Outreach calendar events	Learn about other events offered by the VA. Browse the VA outreach events calendar >

Variations

• Learn about other VA events.
• Learn about other VA outreach events.
• Learn about other VA events across North America.
• Learn about other events at VA Eastern Oklahoma health care.

The one open design question here is which kind of link the link should should be (active vs. default)

[jilladams]

@FranECross @thejordanwood could we pull this into Sprint 102? Should be smallish, I think, and we're now unblocked on copy.

[FranECross]

If @thejordanwood doesn't object, I can tag for Sprint 102... Thanks @jilladams !!

[thejordanwood]

@FranECross We can add this to Sprint 102.

[thejordanwood]

@jilladams @FranECross I created mockups for this on the See more events page in the Figma file. The links should be the default style and I've added a header above them that says "Other VA events." This helps to align it with something similar we do for Other locations sections on Vet Center pages (example).

@laflannery Can you review this design, specifically the new "Other VA events" heading level I'm suggesting? It's an h4, which is the same heading level used when the details section gets a heading. An example of this is the "Welcome to the Hampton Roads..." header on this event page. Is h4 the correct level I should be using here?

[laflannery]

@thejordanwood The page you took as an example has an incorrect heading level because that heading is defined within a text editor, not by us, and so shenanigans happened.

If this should be a heading - which I think it should be - it should be an H2 because it's the only other defined heading on the page besides the main H1. If you would like to make the font size slightly smaller then the default H2 that would be ok though.

Also, can you indicate in the figma that these links should use the <va-link> component?

[thejordanwood]

@laflannery I had a feeling something about that heading wasn't quite right. Thanks for clarifying! I left a note that it should be an h2 with h3 styling–h2 styling felt a bit too big.

I also added an annotation on the mockup to show that the link should be a component.

[thejordanwood]

@aklausmeier This is ready for your review. This design is showing how we can add links to other event calendars at the bottom of event detail pages. (Figma file link)

[aklausmeier]

@thejordanwood design and annotations look good