italia · Virtute90 · Sep 12, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 13, 2024
diff --git a/.storybook/preview.tsx → .storybook/preview.ts b/.storybook/preview.tsx → .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
@@ -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;
+}
diff --git a/assets/docs/scss/_callouts.scss 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%);
+  }
diff --git a/assets/docs/scss/_colors.scss 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;
diff --git a/assets/css/bi-fonts.scss → assets/docs/scss/bi-fonts.scss b/assets/css/bi-fonts.scss → assets/docs/scss/bi-fonts.scss
diff --git a/assets/docs/scss/docs.scss 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';
diff --git 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,

diff --git 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'

diff --git 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} />