chore(release): design system .italia docs 🇮🇹 v1.0.0 📢

package.json

@@ -39,7 +39,7 @@
     "@loadable/component": "^5.15.2",
     "adm-zip": "^0.5.10",
     "babel-preset-gatsby": "^3.9.0",
-    "bootstrap-italia": "^2.9.0",
+    "bootstrap-italia": "^2.9.1",
     "classnames": "^2.3.2",
     "dotenv": "^16.1.4",
     "express": "^4.21.0",

src/data/components_json/bsi/componenti/sections.json

@@ -1,26 +1,26 @@
 [
     {
         "name": "Base",
-        "content": "\n<section class=\"section\" aria-describedby=\"titleEx1\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx1\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
+        "content": "\n<section class=\"section\" aria-labelledby=\"titleEx1\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx1\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
     },
     {
         "name": "Sfondo tenue",
-        "content": "\n<section class=\"section section-muted\" aria-describedby=\"titleEx2\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx2\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
+        "content": "\n<section class=\"section section-muted\" aria-labelledby=\"titleEx2\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx2\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
     },
     {
         "name": "Sfondo primario",
-        "content": "\n<section class=\"section section-primary\" aria-describedby=\"titleEx3\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container white-color\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx3\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
+        "content": "\n<section class=\"section section-primary\" aria-labelledby=\"titleEx3\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container white-color\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx3\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
     },
     {
         "name": "Sfondo neutrale",
-        "content": "\n<section class=\"section section-neutral\" aria-describedby=\"titleEx4\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container white-color\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx4\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
+        "content": "\n<section class=\"section section-neutral\" aria-labelledby=\"titleEx4\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container white-color\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx4\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
     },
     {
         "name": "Con immagine di sfondo",
-        "content": "\n<section class=\"section section-image\" style=\"background-image: url('https://picsum.photos/1280/720?image=811')\"  aria-describedby=\"titleEx5\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container white-color\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx5\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
+        "content": "\n<section class=\"section section-image\" style=\"background-image: url('https://picsum.photos/1280/720?image=811')\"  aria-labelledby=\"titleEx5\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container white-color\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12\">\n          <h2 id=\"titleEx5\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 mb-3 font-serif\">Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. Etiam dignissim diam quis enim. Eu nisl nunc mi ipsum faucibus.</div>\n        <div class=\"col-12 col-lg-6 col-xl-4 pe-0 pe-md-5 font-serif\">Euismod lacinia at quis risus sed vulputate. Scelerisque purus semper eget duis at tellus at urna condimentum. Mattis enim ut tellus elementum sagittis.</div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
     },
     {
         "name": "Con card",
-        "content": "\n<section class=\"section section-muted\"  aria-describedby=\"titleEx6\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <h2 class=\"mb-4\" id=\"titleEx6\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row gy-3\">\n        <div class=\"col-12 col-md-6\">\n          <div class=\"card shadow\">\n            <div class=\"card-body\">\n              <p class=\"card-text font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 col-md-6\">\n          <div class=\"card shadow\">\n            <div class=\"card-body\">\n              <p class=\"card-text font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
+        "content": "\n<section class=\"section section-muted\"  aria-labelledby=\"titleEx6\">\n  <div class=\"section-content\">\n    <!-- contenuto di esempio START -->\n    <div class=\"container\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <h2 class=\"mb-4\" id=\"titleEx6\">Morbi fermentum amet</h2>\n        </div>\n      </div>\n      <div class=\"row gy-3\">\n        <div class=\"col-12 col-md-6\">\n          <div class=\"card shadow\">\n            <div class=\"card-body\">\n              <p class=\"card-text font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. </p>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 col-md-6\">\n          <div class=\"card shadow\">\n            <div class=\"card-body\">\n              <p class=\"card-text font-serif\">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Eget egestas purus viverra accumsan. Diam maecenas ultricies mi eget mauris pharetra et. </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- contenuto di esempio END -->\n  </div>\n</section>\n"
     }
 ]

src/data/content/design-system/componenti/accordion.yaml

@@ -5,7 +5,8 @@ metadata:
 seo:
   name: Accordion - Designers Italia
   description: >-
-    Sezione di contenuti espandibile e richiudibile per ottimizzare spazio su pagina e creare collegamenti con contenuti correlati.
+    Sezione di contenuti espandibile e richiudibile per ottimizzare spazio su
+    pagina e creare collegamenti con contenuti correlati.
   canonical: null
   pathname: /design-system/componenti/accordion/
 components:
@@ -15,7 +16,8 @@ components:
     title: Accordion
     column: true
     subtitle: >-
-      Sezione di contenuti espandibile e richiudibile per ottimizzare spazio su pagina e creare collegamenti con contenuti correlati
+      Sezione di contenuti espandibile e richiudibile per ottimizzare spazio su
+      pagina e creare collegamenti con contenuti correlati
     tag:
       label: Componenti
       addonClasses: mt-3 text-uppercase

src/data/content/design-system/componenti/affix.yaml

@@ -5,7 +5,8 @@ metadata:
 seo:
   name: Affix - Designers Italia
   description: >-
-    Elemento ancorato su schermata durante lo scorrere di una specifica sezione di pagina.
+    Elemento ancorato su schermata durante lo scorrere di una specifica sezione
+    di pagina.
   canonical: null
   pathname: /design-system/componenti/affix/
 components:
@@ -18,7 +19,8 @@ components:
       addonClasses: mt-3 text-uppercase
     column: true
     subtitle: >-
-      Elemento ancorato su schermata durante lo scorrere di una specifica sezione di pagina
+      Elemento ancorato su schermata durante lo scorrere di una specifica
+      sezione di pagina
     imgRatio: 1x1
     noBorder: true
     kangaroo:
@@ -58,9 +60,9 @@ tabs:
             title: Quando usarlo
             headingLevel: 2
             text: >
-              Gli affix sono elementi ancorati in una specifica area della schermata per facilitarne la visibilità e l’interazione utente. È utile soprattutto su pagine lunghe e su mobile.
-
-
+              Gli affix sono elementi ancorati in una specifica area della
+              schermata per facilitarne la visibilità e l’interazione utente. È
+              utile soprattutto su pagine lunghe e su mobile.
       - full: true
         noSpace: true
         paddingLeft: true
@@ -261,13 +263,13 @@ tabs:
             title: Comportamento
             headingLevel: 2
             text: >
-              Un affix rimane ancorato su schermata mentre si è su una
-              specifica area della pagina. Allo scorrere completo dell’area di
-              pagina, scorrerà anche l’affix.
+              Un affix rimane ancorato su schermata mentre si è su una specifica
+              area della pagina. Allo scorrere completo dell’area di pagina,
+              scorrerà anche l’affix.
 
-              Un affix può avere uno sviluppo **verticale** o
-              **orizzontale** e può essere ancorato alla **parte alta** o alla
-              **parte bassa** della schermata.
+              Un affix può avere uno sviluppo **verticale** o **orizzontale** e
+              può essere ancorato alla **parte alta** o alla **parte bassa**
+              della schermata.
       - full: true
         noSpace: true
         paddingLeft: true