Add step-by-step component

[ilbassa]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• Ho verificato e non esiste

Cosa

New Step-by-step component for creating guidelines.

It would contains a component step-by-step wrapper and inside of it various single step component.

The step-by-step wrapper component should contains:

1. [optional] Title
2. [multiple] Single Step component

The single step component should contains:

1. Main information (a date or a cardinal number)
2. Title
3. Body text
4. [optional] Link to a document (icon + description)
5. [optional] Link CTA
6. [optional] Info paragraph

Perché

It would be useful to design step-by-step guidelines where the user is guided to follow a procedure that requires completing various steps.
It would be useful also for display events in a timeline.

Contesto

No response

Altro

Single step component
Proposal of generic design of single step with all the optional feature

Step by step component
An example of implementation of the wrapper

[Fupete]

Ciao @ilbassa, grazie per la proposta!!! Se hai un Figma da condividere scrivici pure a [email protected].

Nel merito: per i nuovi modelli per Musei Civici e ASL, è stato implementato un componente molto simile. Riteniamo anche noi che potrebbe essere utile integrarlo in UI Kit Italia.

Nelle prossime settimane possiamo usare questa discussione per farti vedere cose e discuterne.

Un saluto cc @zetareticoli

[zetareticoli]

Ciao @ilbassa,

ti allego due esempio di componente che utilizziamo nei modelli per ASL e Comuni.

Il componente adottato per il modello ASL è ideale per creare procedure step-by-step dove ogni fase ha un titolo e un contenuto che di può espandere:

È disponibile su Figma

Il componente adottato per il modello Comuni invece è meno recente ed era stato pensato per indicare procedure legate ad un fattore temporale, come giorni o mesi:

Anch'esso è disponibile su Figma, lo trovi nella sezione "Flussi di servizio".

Come vedi, i due componenti sono molto diversi tra loro. Nella tua proposta c'è di buono il fatto che si adatta a entrambe le casistiche pur rimanendo uguale.

Stiamo ragionando sull'opportunità di aggiungere al design system .italia (e quindi a UI Kit Italia) la versione introdotta nel modello ASL.

[ilbassa]

Ottimo, in effetti il componente del modello ASL ha un legame visivo più intuitivo tra i vari passi e con l'accordion è possibile isolare uno step, questo permette inoltre di inserire anche maggior contenuto come nell'esempio su Figma.
Prendiamo spunto e vediamo se riusciamo a implementarlo così anche noi.

Stiamo ragionando sull'opportunità di aggiungere al design system .italia (e quindi a UI Kit Italia) la versione introdotta nel modello ASL.

Sarebbe molto utile per non dover creare tutto da zero :)