Accordion component customisation

[jgreenblatt-JPM]

Hello,

I'm a ux designer, currently working on a KYC onboarding flow for a payments product (mobility payments solutions). It's a long web form experience with lots of questions and merchant users often complete the journey in multiple visits (they may not have all the answers in one go). To create a positive and motivating re-entry experience, we've designed a "home" page that displays a users high-level progress through the various sections of the flow.

We are leveraging salt as much as possible for our project and recently pivoted the home page design so we can use the accordion component.

We can get pretty close to the functionality that we want for our use case. The main issue is that we want to communicate progress/completion, not validation status. Therefore we would like an easy stable way to implement an icon in the accordion header and not be limited to error, warning or success status.

I've attached designs on a spectrum from no customisation to full customisation and have highlighted our short-term interim step as well as our desired target state for the design.

What is the best approach for achieving the customisation we're looking for?

SaltDS Accordion Customisation 1.1.pdf

Thanks!

[joshwooding]

Hi @jgreenblatt-JPM, sorry for the slow reply. You should be able to do this quite easily.

I've created an example here: https://codesandbox.io/s/accordion-w-progress-icons-qdjhln

Salt has been built in a way that encourages composability so with a little CSS you can make it look like your PDF.