From d174053a84a0538104a1b43a9759e5650afcda37 Mon Sep 17 00:00:00 2001
From: Virtute90 <matteo.ave@gmail.com>
Date: Thu, 12 Sep 2024 17:04:40 +0200
Subject: [PATCH 1/5] fix: corretto tag html

---
 src/Hero/Hero.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Hero/Hero.tsx b/src/Hero/Hero.tsx
index dbc6fa2f7..d5679a07d 100644
--- a/src/Hero/Hero.tsx
+++ b/src/Hero/Hero.tsx
@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classname from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 
 export interface HeroProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
@@ -16,7 +16,7 @@ export interface HeroProps extends HTMLAttributes<HTMLElement> {
 }
 
 export const Hero: FC<HeroProps> = ({
-  tag: Tag = 'div',
+  tag: Tag = 'section',
   small,
   centered,
   overlay,

From d82989cd85d9eef4fa3a3a5a805c1b54008ed91f Mon Sep 17 00:00:00 2001
From: Virtute90 <matteo.ave@gmail.com>
Date: Thu, 12 Sep 2024 17:05:01 +0200
Subject: [PATCH 2/5] docs: corretti esempi con da issue

---
 stories/Components/Hero.stories.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/stories/Components/Hero.stories.tsx b/stories/Components/Hero.stories.tsx
index 1542af593..ab8772210 100644
--- a/stories/Components/Hero.stories.tsx
+++ b/stories/Components/Hero.stories.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../src';
 
 const meta: Meta<typeof Hero> = {
-  title: "Documentazione/Menu di navigazione/Hero",
+  title: "Documentazione/Componenti/Hero",
   component: Hero,
 };
 
@@ -29,7 +29,7 @@ type Story = StoryObj<typeof Hero>;
 
 export const HeroConSfondo: Story = {
   render: () => (
-    <Hero>
+    <Hero aria-label='In evidenza'>
       <HeroBackground
         src='https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg'
         title='image title'
@@ -41,7 +41,7 @@ export const HeroConSfondo: Story = {
 
 export const HeroConSfondoSmall: Story = {
   render: () => (
-    <Hero small>
+    <Hero aria-label='In evidenza' small>
       <HeroBackground
         src='https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg'
         title='image title'
@@ -74,7 +74,7 @@ export const HeroConTestoCentrato: Story = {
     <Hero centered>
       <HeroBody>
         <HeroCategory>Category</HeroCategory>
-        <HeroTitle>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
+        <HeroTitle tag={'h2'}>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
         <p className='d-none d-lg-block'>
           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.
@@ -97,7 +97,7 @@ export const HeroConTestoSuSfondo: Story = {
       />
       <HeroBody>
         <HeroCategory>Category</HeroCategory>
-        <HeroTitle>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
+        <HeroTitle tag={'h2'}>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
         <p className='d-none d-lg-block'>
           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.
@@ -118,7 +118,7 @@ export const HeroConTestoSuSfondoOverlayPrimario: Story = {
       />
       <HeroBody>
         <HeroCategory>Category</HeroCategory>
-        <HeroTitle>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
+        <HeroTitle tag={'h2'}>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
         <p className='d-none d-lg-block'>
           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.
@@ -146,7 +146,7 @@ export const HeroConSfondoOverlayFiltro: Story = {
 export const HeroConSfondoMargineNegativo: Story = {
   render: () => (
     <>
-      <Hero overlap>
+      <Hero overlay='dark' overlap>
         <HeroBackground
           src='https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg'
           title='image title'

From 0e4f6b3483f109214125df6e4fdd88a87adeb835 Mon Sep 17 00:00:00 2001
From: Virtute90 <matteo.ave@gmail.com>
Date: Thu, 12 Sep 2024 17:09:41 +0200
Subject: [PATCH 3/5] test: update snap

---
 test/__snapshots__/Storybook.test.tsx.snap | 1168 ++++++++++----------
 1 file changed, 585 insertions(+), 583 deletions(-)

diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
index 8f9377493..6910bbed1 100644
--- a/test/__snapshots__/Storybook.test.tsx.snap
+++ b/test/__snapshots__/Storybook.test.tsx.snap
@@ -6631,204 +6631,443 @@ exports[`Stories Snapshots Documentazione/Componenti/GoBack PulsantiSoloIcona 1`
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale _CentraturaVerticale 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConSfondo 1`] = `
 <div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
+  <section
+    aria-label="In evidenza"
+    class="it-hero-wrapper"
+  >
+    <div
+      class="img-responsive-wrapper"
     >
-      Lancia la demo della modale
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/Modale _Dimensioni 1`] = `
-<div>
-  <div>
-    <div>
-      <button
-        class="me-3 btn btn-primary"
-        type="button"
-      >
-        Modale grande
-      </button>
-      <button
-        class="btn btn-primary"
-        type="button"
+      <div
+        class="img-responsive"
       >
-        Modale piccola
-      </button>
+        <div
+          class="img-wrapper"
+        >
+          <img
+            alt="imagealt"
+            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
+            title="image title"
+          />
+        </div>
+      </div>
     </div>
-  </div>
+  </section>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale _EsempioBase 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConSfondoMargineNegativo 1`] = `
 <div>
-  <div>
+  <section
+    class="it-hero-wrapper it-overlay it-dark it-bottom-overlapping-content"
+  >
     <div
-      class="modal-dialog"
-      role="document"
+      class="img-responsive-wrapper"
     >
       <div
-        class="modal-header"
+        class="img-responsive"
       >
-        <h5
-          class="modal-title"
+        <div
+          class="img-wrapper"
         >
-          Titolo della modale
-        </h5>
+          <img
+            alt="imagealt"
+            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
+            title="image title"
+          />
+        </div>
       </div>
+    </div>
+    <div
+      class="container"
+    >
       <div
-        class="modal-body"
+        class="row"
       >
-        Il testo del corpo della modale va qui.
+        <div
+          class="col"
+        >
+          <div
+            class="it-hero-text-wrapper bg-dark"
+          >
+            <span
+              class="it-category"
+            >
+              Category
+            </span>
+            <h1
+              class=""
+            >
+              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
+            </h1>
+            <p
+              class="d-none d-lg-block"
+            >
+              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.
+            </p>
+            <div
+              class="it-btn-container"
+            >
+              <button
+                class="btn btn-secondary btn-sm"
+              >
+                Label button
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
+    </div>
+  </section>
+  <div
+    class="container"
+  >
+    <div
+      class="row"
+    >
       <div
-        class="modal-footer"
+        class="col"
       >
-        <button
-          class="btn btn-secondary"
-        >
-          Chiudi
-        </button>
-        <button
-          class="btn btn-primary"
+        <div
+          class="card-wrapper card-space"
         >
-          Salva le modifiche
-        </button>
+          <div
+            class="card-bg card"
+          >
+            <div
+              class="card-body"
+            >
+              <h5
+                class="big-heading card-title"
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit…
+              </h5>
+              <p
+                class="card-text"
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </p>
+              <span
+                class="card-signature"
+              >
+                di Federico De Paolis
+              </span>
+              <a
+                class="read-more"
+              >
+                <span
+                  class="text"
+                >
+                  Leggi di più
+                </span>
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m13.9 5.4-.7.7 5.3 5.4H3v1h15.5l-5.3 5.4.7.7 6.6-6.6-6.6-6.6z"
+                  />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale AllineamentoADestra 1`] = `
-<div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Lancia la demo della modale a destra
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/Modale AllineamentoASinistra 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConSfondoOverlayFiltro 1`] = `
 <div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
+  <section
+    class="it-hero-wrapper it-overlay it-filter"
+  >
+    <div
+      class="img-responsive-wrapper"
     >
-      Lancia la demo della modale a sinistra
-    </button>
-  </div>
+      <div
+        class="img-responsive"
+      >
+        <div
+          class="img-wrapper"
+        >
+          <img
+            alt="imagealt"
+            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
+            title="image title"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleBase 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConSfondoSmall 1`] = `
 <div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
+  <section
+    aria-label="In evidenza"
+    class="it-hero-wrapper it-hero-small-size"
+  >
+    <div
+      class="img-responsive-wrapper"
     >
-      Lancia la demo della modale
-    </button>
-  </div>
+      <div
+        class="img-responsive"
+      >
+        <div
+          class="img-wrapper"
+        >
+          <img
+            alt="imagealt"
+            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
+            title="image title"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleBaseConBottoneChiusura 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConTesto 1`] = `
 <div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
+  <section
+    class="it-hero-wrapper"
+  >
+    <div
+      class="container"
     >
-      Mostra modale con bottone di chiusura
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConContenutoScrollabile 1`] = `
-<div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Lancia modale con contenuto scrollabile
-    </button>
-  </div>
+      <div
+        class="row"
+      >
+        <div
+          class="col"
+        >
+          <div
+            class="it-hero-text-wrapper bg-dark"
+          >
+            <span
+              class="it-category"
+            >
+              Category
+            </span>
+            <h1
+              class=""
+            >
+              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
+            </h1>
+            <p
+              class="d-none d-lg-block"
+            >
+              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.
+            </p>
+            <div
+              class="it-btn-container"
+            >
+              <button
+                class="btn btn-outline-primary btn-sm"
+              >
+                Label button
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConFormInputs 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConTestoCentrato 1`] = `
 <div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
+  <section
+    class="it-hero-wrapper it-text-centered"
+  >
+    <div
+      class="container"
     >
-      Lancia modale con form
-    </button>
-  </div>
+      <div
+        class="row"
+      >
+        <div
+          class="col"
+        >
+          <div
+            class="it-hero-text-wrapper bg-dark"
+          >
+            <span
+              class="it-category"
+            >
+              Category
+            </span>
+            <h2
+              class=""
+            >
+              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
+            </h2>
+            <p
+              class="d-none d-lg-block"
+            >
+              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.
+            </p>
+            <div
+              class="it-btn-container"
+            >
+              <button
+                class="btn btn-outline-primary btn-sm"
+              >
+                Label button
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConIcona 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConTestoSuSfondo 1`] = `
 <div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
+  <section
+    class="it-hero-wrapper it-overlay it-dark"
+  >
+    <div
+      class="img-responsive-wrapper"
     >
-      Lancia modale con icona
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConLinkList 1`] = `
-<div>
-  <div>
-    <button
-      class="btn btn-primary"
-      type="button"
+      <div
+        class="img-responsive"
+      >
+        <div
+          class="img-wrapper"
+        >
+          <img
+            alt="imagealt"
+            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
+            title="image title"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="container"
     >
-      Lancia modale con LinkList
-    </button>
-  </div>
+      <div
+        class="row"
+      >
+        <div
+          class="col"
+        >
+          <div
+            class="it-hero-text-wrapper bg-dark"
+          >
+            <span
+              class="it-category"
+            >
+              Category
+            </span>
+            <h2
+              class=""
+            >
+              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
+            </h2>
+            <p
+              class="d-none d-lg-block"
+            >
+              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.
+            </p>
+            <div
+              class="it-btn-container"
+            >
+              <button
+                class="btn btn-secondary btn-sm"
+              >
+                Label button
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale ModalePopConfirm 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Hero HeroConTestoSuSfondoOverlayPrimario 1`] = `
 <div>
-  <div>
-    <button
-      class="me-3 btn btn-primary"
-      type="button"
+  <section
+    class="it-hero-wrapper it-overlay it-primary"
+  >
+    <div
+      class="img-responsive-wrapper"
     >
-      Lancia modale pop-confirm base
-    </button>
-    <button
-      class="me-3 btn btn-primary"
-      type="button"
+      <div
+        class="img-responsive"
+      >
+        <div
+          class="img-wrapper"
+        >
+          <img
+            alt="imagealt"
+            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
+            title="image title"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="container"
     >
-      Lancia modale pop-confirm con titolo
-    </button>
-  </div>
+      <div
+        class="row"
+      >
+        <div
+          class="col"
+        >
+          <div
+            class="it-hero-text-wrapper bg-dark"
+          >
+            <span
+              class="it-category"
+            >
+              Category
+            </span>
+            <h2
+              class=""
+            >
+              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
+            </h2>
+            <p
+              class="d-none d-lg-block"
+            >
+              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.
+            </p>
+            <div
+              class="it-btn-container"
+            >
+              <button
+                class="btn btn-outline-primary btn-sm"
+              >
+                Label button
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale RimuovereLanimazione 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Modale _CentraturaVerticale 1`] = `
 <div>
   <div>
     <button
@@ -6841,17 +7080,214 @@ exports[`Stories Snapshots Documentazione/Componenti/Modale RimuovereLanimazione
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Modale ScrollDiContenutiLunghi 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Modale _Dimensioni 1`] = `
 <div>
   <div>
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Lancia la demo della modale scrollabile
-    </button>
-  </div>
-</div>
+    <div>
+      <button
+        class="me-3 btn btn-primary"
+        type="button"
+      >
+        Modale grande
+      </button>
+      <button
+        class="btn btn-primary"
+        type="button"
+      >
+        Modale piccola
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale _EsempioBase 1`] = `
+<div>
+  <div>
+    <div
+      class="modal-dialog"
+      role="document"
+    >
+      <div
+        class="modal-header"
+      >
+        <h5
+          class="modal-title"
+        >
+          Titolo della modale
+        </h5>
+      </div>
+      <div
+        class="modal-body"
+      >
+        Il testo del corpo della modale va qui.
+      </div>
+      <div
+        class="modal-footer"
+      >
+        <button
+          class="btn btn-secondary"
+        >
+          Chiudi
+        </button>
+        <button
+          class="btn btn-primary"
+        >
+          Salva le modifiche
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale AllineamentoADestra 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia la demo della modale a destra
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale AllineamentoASinistra 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia la demo della modale a sinistra
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleBase 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia la demo della modale
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleBaseConBottoneChiusura 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Mostra modale con bottone di chiusura
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConContenutoScrollabile 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia modale con contenuto scrollabile
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConFormInputs 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia modale con form
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConIcona 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia modale con icona
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ModaleConLinkList 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia modale con LinkList
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ModalePopConfirm 1`] = `
+<div>
+  <div>
+    <button
+      class="me-3 btn btn-primary"
+      type="button"
+    >
+      Lancia modale pop-confirm base
+    </button>
+    <button
+      class="me-3 btn btn-primary"
+      type="button"
+    >
+      Lancia modale pop-confirm con titolo
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale RimuovereLanimazione 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia la demo della modale
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Componenti/Modale ScrollDiContenutiLunghi 1`] = `
+<div>
+  <div>
+    <button
+      class="btn btn-primary"
+      type="button"
+    >
+      Lancia la demo della modale scrollabile
+    </button>
+  </div>
+</div>
 `;
 
 exports[`Stories Snapshots Documentazione/Componenti/Notification _Example 1`] = `
@@ -26305,440 +26741,6 @@ exports[`Stories Snapshots Documentazione/Menu di navigazione/Header/Slim SlimHe
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConSfondo 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper"
-  >
-    <div
-      class="img-responsive-wrapper"
-    >
-      <div
-        class="img-responsive"
-      >
-        <div
-          class="img-wrapper"
-        >
-          <img
-            alt="imagealt"
-            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
-            title="image title"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConSfondoMargineNegativo 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper it-bottom-overlapping-content"
-  >
-    <div
-      class="img-responsive-wrapper"
-    >
-      <div
-        class="img-responsive"
-      >
-        <div
-          class="img-wrapper"
-        >
-          <img
-            alt="imagealt"
-            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
-            title="image title"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="container"
-    >
-      <div
-        class="row"
-      >
-        <div
-          class="col"
-        >
-          <div
-            class="it-hero-text-wrapper bg-dark"
-          >
-            <span
-              class="it-category"
-            >
-              Category
-            </span>
-            <h1
-              class=""
-            >
-              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
-            </h1>
-            <p
-              class="d-none d-lg-block"
-            >
-              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.
-            </p>
-            <div
-              class="it-btn-container"
-            >
-              <button
-                class="btn btn-secondary btn-sm"
-              >
-                Label button
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="container"
-  >
-    <div
-      class="row"
-    >
-      <div
-        class="col"
-      >
-        <div
-          class="card-wrapper card-space"
-        >
-          <div
-            class="card-bg card"
-          >
-            <div
-              class="card-body"
-            >
-              <h5
-                class="big-heading card-title"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit…
-              </h5>
-              <p
-                class="card-text"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-              <span
-                class="card-signature"
-              >
-                di Federico De Paolis
-              </span>
-              <a
-                class="read-more"
-              >
-                <span
-                  class="text"
-                >
-                  Leggi di più
-                </span>
-                <svg
-                  class="icon"
-                  enable-background="new 0 0 24 24"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  xml:space="preserve"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m13.9 5.4-.7.7 5.3 5.4H3v1h15.5l-5.3 5.4.7.7 6.6-6.6-6.6-6.6z"
-                  />
-                </svg>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConSfondoOverlayFiltro 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper it-overlay it-filter"
-  >
-    <div
-      class="img-responsive-wrapper"
-    >
-      <div
-        class="img-responsive"
-      >
-        <div
-          class="img-wrapper"
-        >
-          <img
-            alt="imagealt"
-            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
-            title="image title"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConSfondoSmall 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper it-hero-small-size"
-  >
-    <div
-      class="img-responsive-wrapper"
-    >
-      <div
-        class="img-responsive"
-      >
-        <div
-          class="img-wrapper"
-        >
-          <img
-            alt="imagealt"
-            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
-            title="image title"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConTesto 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper"
-  >
-    <div
-      class="container"
-    >
-      <div
-        class="row"
-      >
-        <div
-          class="col"
-        >
-          <div
-            class="it-hero-text-wrapper bg-dark"
-          >
-            <span
-              class="it-category"
-            >
-              Category
-            </span>
-            <h1
-              class=""
-            >
-              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
-            </h1>
-            <p
-              class="d-none d-lg-block"
-            >
-              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.
-            </p>
-            <div
-              class="it-btn-container"
-            >
-              <button
-                class="btn btn-outline-primary btn-sm"
-              >
-                Label button
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConTestoCentrato 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper it-text-centered"
-  >
-    <div
-      class="container"
-    >
-      <div
-        class="row"
-      >
-        <div
-          class="col"
-        >
-          <div
-            class="it-hero-text-wrapper bg-dark"
-          >
-            <span
-              class="it-category"
-            >
-              Category
-            </span>
-            <h1
-              class=""
-            >
-              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
-            </h1>
-            <p
-              class="d-none d-lg-block"
-            >
-              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.
-            </p>
-            <div
-              class="it-btn-container"
-            >
-              <button
-                class="btn btn-outline-primary btn-sm"
-              >
-                Label button
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConTestoSuSfondo 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper it-overlay it-dark"
-  >
-    <div
-      class="img-responsive-wrapper"
-    >
-      <div
-        class="img-responsive"
-      >
-        <div
-          class="img-wrapper"
-        >
-          <img
-            alt="imagealt"
-            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
-            title="image title"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="container"
-    >
-      <div
-        class="row"
-      >
-        <div
-          class="col"
-        >
-          <div
-            class="it-hero-text-wrapper bg-dark"
-          >
-            <span
-              class="it-category"
-            >
-              Category
-            </span>
-            <h1
-              class=""
-            >
-              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
-            </h1>
-            <p
-              class="d-none d-lg-block"
-            >
-              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.
-            </p>
-            <div
-              class="it-btn-container"
-            >
-              <button
-                class="btn btn-secondary btn-sm"
-              >
-                Label button
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Menu di navigazione/Hero HeroConTestoSuSfondoOverlayPrimario 1`] = `
-<div>
-  <div
-    class="it-hero-wrapper it-overlay it-primary"
-  >
-    <div
-      class="img-responsive-wrapper"
-    >
-      <div
-        class="img-responsive"
-      >
-        <div
-          class="img-wrapper"
-        >
-          <img
-            alt="imagealt"
-            src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg"
-            title="image title"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="container"
-    >
-      <div
-        class="row"
-      >
-        <div
-          class="col"
-        >
-          <div
-            class="it-hero-text-wrapper bg-dark"
-          >
-            <span
-              class="it-category"
-            >
-              Category
-            </span>
-            <h1
-              class=""
-            >
-              Heading lorem ipsum dolor sit amet, consetetur sadipscing.
-            </h1>
-            <p
-              class="d-none d-lg-block"
-            >
-              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.
-            </p>
-            <div
-              class="it-btn-container"
-            >
-              <button
-                class="btn btn-outline-primary btn-sm"
-              >
-                Label button
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Stories Snapshots Documentazione/Menu di navigazione/Megamenu ConCallToActionADestra 1`] = `
 <div>
   <nav

From 272ff3cd1cb02b259c0a69f0afb09311f42cf1b4 Mon Sep 17 00:00:00 2001
From: Virtute90 <matteo.ave@gmail.com>
Date: Fri, 13 Sep 2024 10:57:00 +0200
Subject: [PATCH 4/5] feat: aggiunti stili per callouts per doc come in BSI

---
 .storybook/{preview.tsx => preview.ts}  |  4 +-
 assets/css/accesibility.css             | 12 +++++
 assets/docs/scss/_callouts.scss         | 63 +++++++++++++++++++++++++
 assets/docs/scss/_colors.scss           | 32 +++++++++++++
 assets/{css => docs/scss}/bi-fonts.scss |  0
 assets/docs/scss/docs.scss              | 29 ++++++++++++
 6 files changed, 139 insertions(+), 1 deletion(-)
 rename .storybook/{preview.tsx => preview.ts} (87%)
 create mode 100644 assets/css/accesibility.css
 create mode 100644 assets/docs/scss/_callouts.scss
 create mode 100644 assets/docs/scss/_colors.scss
 rename assets/{css => docs/scss}/bi-fonts.scss (100%)
 create mode 100644 assets/docs/scss/docs.scss

diff --git a/.storybook/preview.tsx b/.storybook/preview.ts
similarity index 87%
rename from .storybook/preview.tsx
rename to .storybook/preview.ts
index 52f469578..c018cb051 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.ts
@@ -1,7 +1,9 @@
 import { Preview } from "@storybook/react";
 import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
-import "../assets/css/bi-fonts.scss";
 import "../assets/css/storybook-fixes.css";
+import "../assets/docs/scss/bi-fonts.scss";
+import "../assets/docs/scss/docs.scss";
+
 import theme from "./theme";
 
 const preview: Preview = {
diff --git a/assets/css/accesibility.css b/assets/css/accesibility.css
new file mode 100644
index 000000000..fca545c31
--- /dev/null
+++ b/assets/css/accesibility.css
@@ -0,0 +1,12 @@
+.bd-callout-accessibility {
+    border-left-color: #10925f !important;
+}
+
+.bd-callout {
+    padding: 1.25rem;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    border: 1px solid #eee;
+    border-left-width: .25rem;
+    border-radius: .25rem;
+}
\ No newline at end of file
diff --git a/assets/docs/scss/_callouts.scss b/assets/docs/scss/_callouts.scss
new file mode 100644
index 000000000..742275c14
--- /dev/null
+++ b/assets/docs/scss/_callouts.scss
@@ -0,0 +1,63 @@
+.bd-callout {
+    padding: 1.25rem;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    border: 1px solid #eee;
+    border-left-width: 0.25rem;
+    border-radius: 0.25rem;
+  
+    h4 {
+      margin-top: 0;
+      margin-bottom: 0.25rem;
+    }
+    h3 {
+      margin-top: 0;
+      margin-bottom: 0.25rem;
+    }
+  
+    p:last-child {
+      margin-bottom: 0;
+    }
+  
+    code {
+      border-radius: 0.25rem;
+    }
+  
+    & + .bd-callout {
+      margin-top: -0.25rem;
+    }
+  }
+  
+  // Variations
+  @mixin bs-callout-variant($color) {
+    border-left-color: darken($color, 10%);
+    h4 {
+      color: darken($color, 10%);
+    }
+    h3 {
+      color: darken($color, 10%);
+    }
+  }
+  
+  .bd-callout-info {
+    @include bs-callout-variant($docs-info);
+  }
+  
+  .bd-callout-warning {
+    @include bs-callout-variant($docs-warning);
+  }
+  
+  .bd-callout-danger {
+    @include bs-callout-variant($docs-danger);
+  }
+  
+  .bd-callout-accessibility {
+    h4 {
+      color: $docs-accessibility;
+    }
+    border-left-color: lighten($docs-accessibility, 10%);
+    h3 {
+      color: $docs-accessibility;
+    }
+    border-left-color: lighten($docs-accessibility, 10%);
+  }
\ No newline at end of file
diff --git a/assets/docs/scss/_colors.scss b/assets/docs/scss/_colors.scss
new file mode 100644
index 000000000..e01182005
--- /dev/null
+++ b/assets/docs/scss/_colors.scss
@@ -0,0 +1,32 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+    .swatch-#{$color} {
+      color: color-contrast($value);
+      background-color: #{$value};
+    }
+  }
+  
+  @each $color, $value in $theme-colors {
+    .swatch-#{$color} {
+      color: color-contrast($value);
+      background-color: #{$value};
+    }
+  }
+  
+  @each $color, $value in $grays {
+    .swatch-#{$color} {
+      color: color-contrast($value);
+      background-color: #{$value};
+    }
+  }
+  
+  $primary-bright: lighten(saturate($primary, 5%), 15%) !default;
+  $primary-light: lighten(saturate($primary, 5%), 45%) !default;
+  $docs-info: rgb(23, 50, 77) !default;
+  $docs-warning: rgb(255, 151, 0) !default;
+  $docs-danger: rgb(248, 62, 90) !default;
+  $docs-accessibility: rgb(11, 100, 65) !default;
+  $docs-dark: #3e5266 !default;
\ No newline at end of file
diff --git a/assets/css/bi-fonts.scss b/assets/docs/scss/bi-fonts.scss
similarity index 100%
rename from assets/css/bi-fonts.scss
rename to assets/docs/scss/bi-fonts.scss
diff --git a/assets/docs/scss/docs.scss b/assets/docs/scss/docs.scss
new file mode 100644
index 000000000..10cef5a23
--- /dev/null
+++ b/assets/docs/scss/docs.scss
@@ -0,0 +1,29 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+// Dev notes
+//
+// Background information on nomenclature and architecture decisions here.
+//
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
+//   Doing so gives us access to the same core utilities provided by Bootstrap.
+//   For example, consistent media queries through those mixins.
+//
+// - Bootstrap's **docs variables** are prefixed with `$docs-`.
+//   These custom colors avoid collision with the components Bootstrap provides.
+//
+// - Classes are prefixed with `.bd-`.
+//   These classes indicate custom-built or modified components for the design
+//   and layout of the Bootstrap docs. They are not included in our builds.
+//
+// Happy Bootstrapping!
+@import '../../../node_modules/bootstrap/scss/functions';
+@import '../../../node_modules/bootstrap/scss/mixins';
+@import '../../../node_modules/bootstrap/scss/variables';
+// Load docs components
+@import 'colors';
+@import 'callouts';
\ No newline at end of file

From 3d0bbfdbc2673377e52026bf8ef611b8e9bd7145 Mon Sep 17 00:00:00 2001
From: Virtute90 <matteo.ave@gmail.com>
Date: Fri, 13 Sep 2024 10:57:54 +0200
Subject: [PATCH 5/5] =?UTF-8?q?docs:=20aggiunti=20avvisi=20per=20accessibi?=
 =?UTF-8?q?lit=C3=A0=20e=20migliorata=20in=20generale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 stories/Documentation/Hero.mdx | 40 +++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/stories/Documentation/Hero.mdx b/stories/Documentation/Hero.mdx
index 6d79617ae..a3323e157 100644
--- a/stories/Documentation/Hero.mdx
+++ b/stories/Documentation/Hero.mdx
@@ -1,14 +1,15 @@
 import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
-import { Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from '../../src';
+import { Code } from "@storybook/components";
+import { Callout, CalloutText, CalloutTitle, Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from '../../src';
 import * as HeroStories from '../Components/Hero.stories';
 
 <Meta of={HeroStories} />
 
 # Hero
 
-## Lo Hero (ciò che Bootstrap definisce “Jumbotron”) è un componente per la presentazione di contenuti in evidenza.
+### Lo Hero (ciò che Bootstrap definisce “Jumbotron”) è un componente per la presentazione di contenuti in evidenza.
 
-Il cosiddetto `Hero` è un componente leggero e flessibile che può facoltativamente estendere l’intera finestra per mostrare i messaggi in evidenza sul tuo sito. Di seguito una serie di esempi con la descrizione degli elementi e delle classi applicabili.
+La `hero` è un componente leggero e flessibile che può facoltativamente estendere l’intera finestra per mostrare i messaggi in evidenza sul tuo sito. Di seguito una serie di esempi con la descrizione degli elementi e delle classi applicabili.
 
 Il componente `Hero` può contenere
 
@@ -18,7 +19,16 @@ Il componente `Hero` può contenere
 - Call to action - `HeroButton`
 - Immagine di background - `HeroBackground`
 
-### Con immagine
+## Con immagine
+
+<div className="docs">
+    <div className="bd-callout bd-callout-accessibility">
+            <h3 id='accessibilità'>Accessibilità sola immagine</h3>
+        <p>
+             Nel caso di un componente hero con sola immagine utilizzare il componente con attributo <Code>aria-label="In evidenza"</Code>.
+        </p>
+    </div>
+</div>
 
 <Canvas of={HeroStories.HeroConSfondo} />
 
@@ -30,6 +40,15 @@ Per ottenere il componente `Hero` nella sua versione più piccola utilizzare l'a
 
 ## Con contenuti testuali
 
+<div className="docs">
+    <div className="bd-callout bd-callout-accessibility">
+            <h3 id='accessibilità'>Accessibilità contenuti testuali</h3>
+        <p>
+            Nei casi in cui fossero presenti contenuti testuali utilizzare per il titolo il livello <Code>h</Code> corretto a seconda del contesto.
+        </p>
+    </div>
+</div>
+
 Esempio di Hero con tutti i componenti testuali
 
 <Canvas of={HeroStories.HeroConTesto} />
@@ -42,7 +61,16 @@ Per ottenere il componente `Hero` centrando i testi orizzontalmente aggiungere l
 
 ## Con testi ed immagine di sfondo
 
-Per visualizzare i testi in overlay sulle immagini, viene creato un div scuro in opacità per migliorare la leggibilità del testo in caso di immagini dai toni chiari. Aggiungere al componente `Hero` l'attributo `overlay` con il colore desiderato (tra `dark`, `primary` o `filter`). Di seguito l'esempio con `overlay='dark'`:
+Per visualizzare i testi in overlay sulle immagini, viene creato un div scuro in opacità per migliorare la leggibilità del testo in caso di immagini dai toni chiari. Aggiungere al componente `Hero` l'attributo `overlay` con il colore desiderato (tra `dark`, `primary` o `filter`). Di seguito l'esempio con `overlay='dark'`
+
+<div className="docs">
+    <div className="bd-callout bd-callout-accessibility">
+            <h3 id='accessibilità'>Accessibilità e contrasto</h3>
+        <p>
+            Verificare che l’immagine utilizzata assicuri sempre un adeguato contrasto rispetto al testo.
+        </p>
+    </div>
+</div>
 
 <Canvas of={HeroStories.HeroConTestoSuSfondo} />
 
@@ -60,7 +88,7 @@ Per aggiungere un filtro di tipo “screen” utilizzare `overlay="filter"`:
 
 ## Con immagine e margine negativo per contenuti sovrapposti
 
-In alcuni casi, il contenuto che seguirà la card può sovrapporsi al componente `Hero`. Aggiungere l'attributo `overlap` per far si che il contenuto seguente si sovrapponga al componente `Hero` (in questo caso il componente seguente è una card):
+In alcuni casi, il contenuto che seguirà la card può sovrapporsi al componente `Hero`. Aggiungere gli attributi `overlap` e `overlay="dark"` per far si che il contenuto seguente si sovrapponga al componente `Hero` (in questo caso il componente seguente è una card):
 
 <Canvas of={HeroStories.HeroConSfondoMargineNegativo} />