Description
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
Activity