Riferimento su documentazione Bootstrap:

• Card

Il riferimento sull'attuale web toolkit è https://italia.github.io/design-web-toolkit/components/detail/card--default.html, ma possiamo anche vedere se c'è qualcosa di interessante su http://materializecss.com/cards.html.

Comportamento atteso

Implementazione menu di navigazione per Mobile.

Design

https://projects.invisionapp.com/d/main#/console/13150017/293805265/preview

Comportamento attuale

https://italia.github.io/bootstrap-italia/docs/componenti/navigazione/
https://italia.github.io/bootstrap-italia/docs/componenti/navbar/

Primo assessment accessibilità con screen reader, con analisi dei seguenti componenti:

• Modale
• Tooltips
• Popovers
• Accordion

Riferimento su documentazione Bootstrap:

• Tipografia
• Codice inline

Riferimento temporaneo su Design UI Kit a questo file, da compilare con Kactus.

Riferimento su documentazione Bootstrap:

• Modale
• Bottone di chiusura

Riferimento all'attuale web toolkit: https://italia.github.io/design-web-toolkit/components/detail/dialog.html

Bootstrap v4.0.0-beta.3 è uscito (changelog here)!

• Aggiornamento della dipendenza dalla beta 2 alla beta 3
• Fix breaking changes
• Update della documentazione

Riferimento su documentazione Bootstrap:

• Breadcrumb

Valutare se questa pagina è necessaria o è già coperta da quanto descritto nella homepage e nell'area "come iniziare". Nel secondo caso, la pagina sul licensing potrebbe divenire di primo livello o un link nel footer.

Riferimento su documentazione Bootstrap:

• Tabelle

Riferimento su documentazione Bootstrap:

• Progress (eliminare dal paragrafo Multiple bars in giù, sono funzionalità che non ci interessano)
• Badge

Con riferimento all'icon kit e alle icone presenti nel web toolkit, includere icone con relative classi pronte all'utilizzo.

Come approccio, vedere di usare qualcosa di simile a FontAwesome SVG with JS.

Rivedere la pagina "Reboot" lasciando riferimenti come link esterni a Bootstrap e traducendo soltanto ciò che è importante per gli sviluppatori che lavoreranno su Bootstrap Italia.

Riferimento su documentazione Bootstrap:

• Reboot

Self-reminder: al momento il processo consta di:

• Aggiornamento versione su package.json
• Aggiornamento versione su _config.yml
• npm build e documentation-build per propagare il numero di versione nella documentazione
• npm i per aggiornare package-lock.json
• Commit, push, tag con numero versione
• Creazione bootstrap-italia.zip dalla cartella dist
• Release notes e zip allegato su GitHub
• npm publish

Creazione del componente cookie bar.

Si può usare come riferimento l'attuale web toolkit (e il suo codice), o altre librerie simili.

Da discutere.

Con riferimento all'attuale web toolkit

Link utili:

• https://material.io/guidelines/components/pickers.html#pickers-date-pickers
• https://mdbootstrap.com/javascript/date-picker/
• http://amsul.ca/pickadate.js/

We currently have one reference implementation of the user interface design guidelines. Create a prototype to provide a toolkit for Bootstrap (4) developers.

Link:

• The current reference implementation (source)
• https://italia.github.io/design-web-toolkit/
• https://design-italia.readthedocs.io/it/stable/doc/user-interface.html

Proviamo a buttare giù una pagina di esempio prendendo spunto in primis dal web toolkit, ma anche da altri progetti ben fatti (1, 2, 3) basati su di esso.

Riferimento su documentazione Bootstrap:

• Immagini
• Figure

Riferimento su documentazione Bootstrap:

• Collapse

Design: https://projects.invisionapp.com/share/RJFGS2UC3HS#/screens/288390465_italia-DataDisplay-Collapse

Riferimento su documentazione Bootstrap:

• https://getbootstrap.com/docs/4.0/utilities/flex/

Al momento non abbiamo particolari direttive in merito a livello di linee guida, quindi potrebbe tradursi semplicemente nella traduzione delle documentazione (o, più velocemente, ad un rimando alla documentazione ufficiale di Bootstrap stesso linkata sopra).

Riferimento su documentazione Bootstrap:

• Alerts

Riferimento su documentazione Bootstrap:

• Dropdown

Come discusso, includere una variante del dropdown multi-colonna a tutta larghezza

Con riferimento a Material Design, realizzare una pagina "componente Select" che comprenda:

• Select default
• Select disabilitata
• Select multipla
• Select con gruppi di opzioni

Riferimento su invision e documentazione Bootstrap pagina dei Bottoni.

Riferimento su documentazione Bootstrap:

• Introduzione (di questa me ne occupo io)
• Oggetti "media"
• Utilità

Riferimento su documentazione Bootstrap:

• Carosello
• Jumbotron (da capire come farlo o eliminare - con riferimento all'hero dell'attuale web-toolkit)

A11Y per il Carousel: trovare un po' di info sulle specifiche. C'è un esempio qui (anche se è basato su Bootstrap 3), e alcune linee guida qui.

Da discutere.

Riferimento attuale web toolkit.

Comportamento atteso

Implementazione menu di navigazione per Desktop.

Comportamento attuale

https://italia.github.io/bootstrap-italia/docs/componenti/navigazione/
https://italia.github.io/bootstrap-italia/docs/componenti/navbar/

Possibili soluzioni

Riferimento su documentazione Bootstrap:

• Tooltips
• Popovers

Riferimento sul sito Bootstrap:

• Gruppi di Bottoni

Riferimento su documentazione Bootstrap:

• Paginazione

Con riferimento a quanto pubblicato su Invision, rivedere e consolidare la pagina sulla tipografia.

Tra le varie cose, va aggiunta anche la possibilità di utilizzare il font Roboto (vedere se utilizzare la variante $font-family-sans-serif già presente in variables.scss).

Riferimento su documentazione Bootstrap:

• Griglia

Questo componente necessiterà di padding (gutter) variabile a seconda delle dimensioni dello schermo, come da indicazioni su file sketch nel design UI kit.
Tale feature era stata introdotta per review in Bootstrap alpha, poi è stata rimossa in Bootstrap beta per problemi di performance, ed apparentemente sembra essere in roadmap per la versione 4.1.

Noi con ogni probabilità non potremo attendere la versione 4.1 perché avremo bisogno di tale flessibilità fin da subito, per cui è possibile dovremo introdurre tale codice a livello di tema.

Definizione e documentazione passi da seguire per la generazione/aggiornamento di una nuova build di Bootstrap Italia.

Questa issue dovrebbe coprire sia la creazione delle librerie CSS e JS, che l'aggiornamento e la pubblicazione della relativa documentazione come GitHub pages.

Definire quali servizi integrare e aggiungere nel file README.md badge che mostrino lo stato dell'eventuale sistema di CI, oltre ai classici badge della community di Developers Italia su Slack.

Al momento, Header e Footer del sito statico sono semplicemente ereditati da Bootstrap e personalizzati nel colore e nel font utilizzato.

Completarne la declinazione integrando footer e header secondo linee guida, e completare la pagina di presentazione del progetto con maggiori informazioni e una migliore struttura complessiva (ancora da definire).

Riferimento su documentazione Bootstrap:

• Contenuti testuali
• Oggetti "embedded"
• Image replacement
• Screen Readers

Discussione, definizione e documentazione versionamento della libreria al fine di:

• Rendere chiara la strategia di versionamento per contributors e utilizzatori
• Rendere evidente quale versione della libreria una PA sta andando ad usare (valutare semver su file name, pubblicazione come dipendenza, tagging, ecc.)
• Stesura copyright comment block contenente copyright e versione

Da discutere.

Riferimento attuale web toolkit:
https://italia.github.io/design-web-toolkit/components/detail/forward--default.html

Riferimento su documentazione Bootstrap:

• Spaziature
• Dimensionamenti
• Visibilità
• Display
• Bordature
• Clearfix
• Float
• Allineamenti verticali
• Posizionamento

Con riferimento alla pagina degli esempi, rimuovere la maggior parte degli esempi inutili nell'ottica dei siti per le PA, e rimandare nel caso agli esempi sulla pagina ufficiale di Bootstrap.
Tradurre la pagina esistente.

Aggiungere zip scaricabile o simile.

Riferimento su documentazione Bootstrap:

• Listato

Con riferimento a Material Design, realizzare una pagina "componenti Input e Text Areas" con tutte le varianti come discusso (da aggiornare).

Bootstrap v4.0.0 è uscito.

• Aggiornamento della dipendenza dalla beta 3 alla versione stabile
• Fix breaking changes
• Update della documentazione

Al momento, la libreria viene pubblicata attraverso uno script che crea un bundle unico contenente il tema Bootstrap comprensivo della libreria Bootstrap completa di tutti i componenti, sia per CSS che JS.

Valutare se implementare e documentare un approccio avanzato per la creazione di build customizzabili che permettano l'inclusione solo di alcuni componenti.

Questo processo tende ad essere complicato da comprendere e gestire, per cui cerchiamo di tenerlo quasi trasparente per gli utilizzatori meno esperti.

Con riferimento a Material Design, realizzare una pagina "componente Radio Buttons" e una "componente Checkbox"

Riferimento su documentazione Bootstrap:

• Colori

Riferimento su Design UI Kit a questo file sketch.

❗️ Questo task dovrebbe comprendere anche lo sviluppo e la documentazione di una modalità per la customizzazione del colore primario che modifica a cascata tutto il resto.

Riferimento su documentazione Bootstrap:

• Forms
• Gruppi di input

Riferimento su documentazione Bootstrap:

• Scrollspy

Definire quali analisi e dati sono necessari, che strumenti usare (sicuramente Piwik, anche GA?), ottenere e condividere accessi ai pannelli amministrativi.