search

italia / design-ui-kit

UI Kit Italia è la risorsa del design system .italia per costruire e prototipare siti internet e servizi digitali della Pubblica Amministrazione
https://designers.italia.it/design-system/come-iniziare/per-designer
Creative Commons Attribution 4.0 International
170 stars 28 forks source link

Add `step-by-step` component #132

Open ilbassa opened 6 months ago

ilbassa commented 6 months ago

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

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_component

Step by step component An example of implementation of the wrapper Step_by_step_component

Fupete commented 4 months ago

Ciao @ilbassa, grazie per la proposta!!! Se hai un Figma da condividere scrivici pure a contatti@designers.italia.it.

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 commented 3 months ago

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:

Slice 1

È 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:

Slice 3

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 commented 2 months ago

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 :)