Proposal to allow multiple links on Call to Action Card

[bgilhome-now]

Describe the feature

Currently the Call to Action Card has a property for a single link (url and ctaText), and links the card to it as well as rendering a primary filled button.

There may be a use case for multiple links (no more than say 3) for a card which groups together related calls to action - e.g. links related to a permit application - "Am I eligible?", "Permitted activities", "Apply online".

Motivation

The EPA project is asking for a card with 2-3 related actions like the below:

Structurally and conceptually it's a Call to Action Card, but with multiple links and different visual treatment on the links.

It's possible to achieve this with a data-driven component and some custom code to extract an image & list from the rich text 'Description' field passed from the backend - but gives cause to consider whether this feature might be useful to other projects.

Proposal

To add an extraLinks or secondaryLinks property to the RplCallToActionCard component - an array of objects of type RplLink. Design input would be needed on how to style extra links if set - they could be given less visual weight than what might now be called the 'primary link' passed via url and ctaText (for example, outline buttons, or a inline list of plain links with an arrow or other icon).

Update Tide's 'Call to Action' paragraph type to add a field_extra_links multiple-cardinality Link field, and handle it in ripple-tide-landing-page's component mapping and TideLandingPageCallToAction template.

Benefits

Can be used on 'section landing pages' to direct users to related child pages within a given sub-section, and/or related actions relevant to a given aspect of the site.

Drawbacks

Potential cluttering on the card - needs consideration from content design and visual design perspectives.

Adoption strategy

If implemented via an extra property/field, there should be no breaking changes. Documentation for Ripple & Tide would need to be updated, and a story added to the Ripple storybook.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be created outside of Ripple-framework as a layer?

Final checks

• I have read the contribution guide for information on submitting a feature request.
• I have checked the discussions and issues for duplicate feature requests.

[waitingallday]

There's an added caveat on the component itself, it uses the accessible container pattern to capture all clicks on the card and trigger a click to the link - it wouldn't work if there is more than one link.

Visually, I think the design could be reused to accommodate this but it would need to be implemented in a separate component (one that doesn't use the accessible container).

[bgilhome-now]

Thanks @waitingallday - if the feature request review team decide this is a useful enough component to include, I'm happy to work on a PR for review.