From 7edd328aa745475b1d0a3a8ff839848440ce58fb Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Thu, 28 Nov 2024 20:53:26 +0100 Subject: [PATCH] docs: remove base component and update new paths --- _data/nav.yml | 1 - docs/come-iniziare/componente-base.md | 35 --------------------- docs/come-iniziare/modificare-componenti.md | 14 +++------ 3 files changed, 4 insertions(+), 46 deletions(-) delete mode 100644 docs/come-iniziare/componente-base.md diff --git a/_data/nav.yml b/_data/nav.yml index e52114d14d..b81afc9ecb 100755 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -6,7 +6,6 @@ - title: Strumenti di compilazione - title: Personalizzazione della libreria - title: Modificare Componenti - - title: Componente base - title: Migrazione dalla versione 1 - title: Organizzare gli spazi diff --git a/docs/come-iniziare/componente-base.md b/docs/come-iniziare/componente-base.md deleted file mode 100644 index 28ce479a84..0000000000 --- a/docs/come-iniziare/componente-base.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -layout: docs -group: come-iniziare -toc: true -title: Componente Base ---- - -Secondo quanto descritto alla [pagina che spiega come modificare componenti]({{ site.baseurl }}/docs/come-iniziare/modificare-componenti/), di seguito è possibile analizzare il comportamento di un componente _base_ di esempio: - -{% comment %}Example name: Base {% endcomment %} -{% capture example %} -componente base -{% endcapture %}{% include example.html content=example %} - -## File utilizzati - -I file sorgente di questo componente sono descritti di seguito. - -### Documentazione - -Il file `docs/come-iniziare/componente-base.md` è il codice `markdown` sorgente della pagina che si sta leggendo. - -### Stile - -Il file `src/scss/custom/_componente-base.scss` permette al componente di avere sfondo e padding personalizzati. Si può notare in questo file l'utilizzo di variabili definite all'interno della libreria Bootstrap {{ site.bootstrap_version }} o Bootstrap Italia. - -### Comportamento dinamico - -Il file `src/js/plugins/componente-base.js` abilita all'evento `click` un tracciamento del valore presente nell'attributo `data-value`. Per visualizzare il risultato aprire la `console` tra gli strumenti per sviluppatori presenti in tutti i browser. Questo file Javascript utilizza una struttura dettata da una convenzione per la creazione di plugin di Bootstrap {{ site.bootstrap_version }}, che permette di avere più flessibilità nella gestione degli eventi ed esporre le Data-API per l'estensione del loro utilizzo e di esporre proprietà del componente stesso: - -```js -$.fn.componenteBase.Constructor.VERSION -``` - -È possibile trovare maggiori informazioni sull'argomento alla [pagina sull'utilizzo di Javascript](https://getbootstrap.com/docs/{{ site.bootstrap_minor }}/getting-started/javascript/) al sito di Bootstrap {{ site.bootstrap_version }}. diff --git a/docs/come-iniziare/modificare-componenti.md b/docs/come-iniziare/modificare-componenti.md index 602db8a014..80e5e00375 100755 --- a/docs/come-iniziare/modificare-componenti.md +++ b/docs/come-iniziare/modificare-componenti.md @@ -8,7 +8,7 @@ toc: true ## Struttura di un componente -Ogni componente può avere una personalizzazione di stile e di funzionalità, preferibilmente attraverso l'utilizzo di un singolo file `scss` nella cartella `src/scss/custom/` e, opzionalmente, di un file `javascript` nella cartella `src/js/plugins/`. Questo permette di avere una struttura dei file semplice da comprendere e di più facile manutenzione. +Ogni componente può avere una personalizzazione di stile e di funzionalità, preferibilmente attraverso l'utilizzo di un singolo file `scss` nella cartella `src/scss/components/` e, opzionalmente, di un file `javascript` nella cartella `src/js/plugins/`. Questo permette di avere una struttura dei file semplice da comprendere e di più facile manutenzione. Queste due cartelle, assieme alla cartella `docs` per la stesura della documentazione, sono le uniche cartelle dove avviene l'editing dei componenti. @@ -28,9 +28,7 @@ Nel caso di un nuovo componente, sarà necessario aggiungere un nuovo file `.md` ### Personalizzazione di stile -I componenti base ereditano ovviamente stili e funzionalità da [Bootstrap {{ site.bootstrap_version }}][documentazione-bootstrap], di cui si può trovare il codice sorgente all'interno di `node_modules/bootstrap/`. Ovviamente, la consultazione di tale codice servirà soltanto come riferimento e nessun file all'interno di `node_modules` andrà modificato, ma esteso utilizzando quanto più possibile le variabili che Bootstrap {{ site.bootstrap_version }} mette a disposizione. - -Per la personalizzazione dello stile di tali componenti, andranno infatti sovrascritte o aggiunte variabili nella cartella `src/scss/_variables.scss`; oppure, in caso non sia sufficiente sovrascrivere variabili, aggiungere o modificare classi e proprietà nella cartella `src/scss/custom/`. Si può notare le modalità con cui il file `bootstrap-italia.scss` importa ed estende secondo un preciso ordine gli stili e le funzioni di base di Bootstrap {{ site.bootstrap_version }}. +Per la personalizzazione dello stile dei componenti, andranno sovrascritte o aggiunte variabili nella cartella `src/scss/base/_variables.scss`; oppure, in caso non sia sufficiente sovrascrivere variabili, aggiungere o modificare classi e proprietà nella cartella `src/scss/components/`. Si può notare le modalità con cui il file `bootstrap-italia.scss` importa ed estende secondo un preciso ordine gli stili e le funzioni di base di Bootstrap {{ site.bootstrap_version }}. Il componente dovrebbe utilizzare una classe base `.nome-componente`, che ne definisce gli stili, e dei modificatori (se necessari) che ne possano alterare alcune proprietà (es.: `.nome-componente-sm`, `.nome-componente-primary`, ecc.). @@ -38,8 +36,6 @@ Il componente dovrebbe utilizzare una classe base `.nome-componente`, che ne def Per l'implementazione di funzionalità dinamiche che richiedano l'uso di `javascript`, si può invece fare riferimento alla cartella `src/js/plugins/`. -Anche in questo caso, è bene seguire la struttura per la creazione di Plugin secondo quanto è già presente nella cartella `node_modules/bootstrap/js/` e la [pagina relativa all'utilizzo di Javascript](https://getbootstrap.com/docs/{{ site.bootstrap_minor }}/getting-started/javascript/) sul sito Bootstrap {{ site.bootstrap_version }}. - ### Test di accessibilità Bootstrap Italia utilizza [`pa11y-ci`](https://github.com/pa11y/pa11y-ci) per validare l'accessibilità dei propri componenti. Il file di configurazione esclude alcuni selettori che non sono parte della libreria ed è visibile al file `.pa11yci`. @@ -62,16 +58,14 @@ per ricevere feedback sui problemi e avviare il processo di auto fix. #### Esempio -Attraverso questo comando è possibile effettuare il test di accessibilità per il componente di esempio "[componente base]({{ site.baseurl }}/docs/come-iniziare/componente-base/)". +Attraverso questo comando è possibile effettuare il test di accessibilità per il componente "[Button]({{ site.baseurl }}/docs/componenti/buttons/)". -`npm run test-a11y-one http://localhost:4000/docs/come-iniziare/componente-base/` +`npm run test-a11y-one http://localhost:4000/docs/componenti/buttons//` --- ###### Continua la lettura > -Per analizzare un componente di esempio da cui partire per lo sviluppo di componenti avanzati personalizzati, puoi fare riferimento alla pagina descrittiva del [componente base]({{ site.baseurl }}/docs/come-iniziare/componente-base/). - [documentazione-bootstrap]: https://getbootstrap.com/docs/{{ site.bootstrap_minor }}/getting-started/introduction/ [documentazione-bootstrap-theming]: https://getbootstrap.com/docs/{{ site.bootstrap_minor }}/getting-started/theming/ [linee-guida]: https://docs.italia.it/italia/design/lg-design-servizi-web/