Experimental design - Call To Action Web Design System component

[rmessina1010]

Story:

As a developer, I need to be able to output content of a Call To Action Widget, provided in various parts, in a consistent manner  and compliant with the VA Design System.

What

Add a Web component to create and standardize Call To Action Widgets and allow for usage in static and React pages.

Why

Many CTA’s follow the same output pattern but approach it in various directions. Creating a web component for CTAs would standardize the rendering process and help consolidate how CTAs are created. This, in turn, will facilitate making their functionality. more granular and ultimately allow to hoisting CTA (and possibly all widgets) up from being sub components of the static-page app.

Anything else

Expected Params:

The primary set of props provided will include, but is not limited to,  a subset of the following:

ctaType = [a string] // tentative, an identifier of the widget being output alertType = [va-alert status values or NULL; default NULL]  // for use to determine if CTA will  follow alert format level = [1-6; default: 3]  // determines level of Hx tag, if needed serviceName = [a string or NULL : default NULL]  // the name of the action description =[ a formatted string of text or HTML or NULL ] //  additional text about the CTA,  to be displayed below the headline children = [HTML or Elements or NULL] //  child elements or additional HTML, rendered after the description uri = [string] // the URI to be used  in the  button or anchor link action =  [function or NULL] //  if present,  the  label will be displayed as a Button element instead of an Anchor Link, this value will serve as the o’clock action. label = [a string or NULL] //  if present a button or  anchor link will be generated with the text isActionLink = [boolean, def:false]

Appearance

Visually this should appear no different than a VADS  Button / Action Link / Process-List /  Anchor Link ( or any combination there of) and will implement existing VA Web Component practices.

Discovery Notes:

[https://vfs.atlassian.net/wiki/spaces/~96033397/pages/2078801963/CTA+Widget+Evaluation+Recommendation](Discovery Notes for context)

Suggested logic

Start with an empty content arrary Generate CTA button using Design System components, using (url, linkText) Apply all proper accessibility standards when constructing components, including passing hasFocus to CTA button. If actionLink use Action Link component else if buttonAction use Button component (type=”button” , onClick = buttonAction) in DIV else Button (anchor) component in DIV If serviceDescription || altHeadline use props.level and create tag , with altHeadline || serviceHeadline+serviceDescription; add this to content array. If description, add to content array. If children, add to content array. Append the CTA button to content If isAlert create Design System alert, with type isAlert and content as children. Else return a DIV/<> element with content as children

[caw310]

@rmessina1010 , this is on the agenda for the Design System Council meeting on Friday, Feb 18. You should get an invite to the meeting which we hope you can attend.

[caw310]

Need to define variations of cards we will support before we work on this.

[humancompanion-usds]

@rmessina1010 - I'm going back through our DSC requests and trying to figure out where some of them are at. We've just added a va-card component and some additional examples. Some questions for you:

• Are any of the existing Card examples close to what you need?
• Do you have examples of what CTAs look like today? Screenshots or URLs are helpful to jump start an audit of what we have.
• Is there a designer you are working with that we could talk to?

[humancompanion-usds]

@danbrady is working on this here: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2447 Dan and Ray to discuss this.

[rmessina1010]

@humancompanion-usds, @caw310

1. Not exactly, I noted that CTA had varied appearances and compositions, ranging from simple inline buttons to step outlines; It also depends on whether the user is logged in ( which USUALLY defaults to a sign in prompt ). There would have to be some logic behind this. My proposal, at the time it was written, was meant as a way for VFS teams to show intent. Please note, that widgets also had a placeholder div around them containing data attributes, I at the time of my proposal I was thinking this could be consolidated if a va-cta element was created.

2. I noticed, when following up this question that a lot of the instances in content-build have changed or disappeared from the code. I will check further on this and add updated images/examples.

3. No, but I would be happy to check with Dan on this.

Code reference:

<div data-template="paragraphs/react_widget" data-entity-id="59360" data-widget-type="form-686-CTA" data-widget-timeout="20">
   <div>
        <va-alert visible="true" status="continue" class="hydrated">
             <h3 slot="headline">Sign in to add or remove dependents</h3>
             <div>
                 <p>Sign in with your existing <strong>Login.gov</strong>, <strong>ID.me</strong>, <strong>DS Logon</strong>, or <strong>My HealtheVet</strong> account. If you don’t have any of these accounts, you can create a free <strong>Login.gov</strong> or <strong>ID.me</strong> account now.</p>
                <va-button text="Sign in or create an account" uswds="false" class="hydrated"></va-button>
             </div>
       </va-alert>
    </div>
</div>

For clarity, I am suggesting an aggregate component, to account for the variety displayed above.