Skip to content

Commit

Permalink
fix(a11y): hero component
Browse files Browse the repository at this point in the history
  • Loading branch information
Virtute90 authored Oct 15, 2024
1 parent c0a92be commit 4d17fe7
Show file tree
Hide file tree
Showing 10 changed files with 767 additions and 599 deletions.
4 changes: 3 additions & 1 deletion .storybook/preview.tsx → .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
12 changes: 12 additions & 0 deletions assets/css/accesibility.css
Original file line number Diff line number Diff line change
@@ -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;
}
63 changes: 63 additions & 0 deletions assets/docs/scss/_callouts.scss
Original file line number Diff line number Diff line change
@@ -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%);
}
32 changes: 32 additions & 0 deletions assets/docs/scss/_colors.scss
Original file line number Diff line number Diff line change
@@ -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;
File renamed without changes.
29 changes: 29 additions & 0 deletions assets/docs/scss/docs.scss
Original file line number Diff line number Diff line change
@@ -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';
4 changes: 2 additions & 2 deletions src/Hero/Hero.tsx
Original file line number Diff line number Diff line change
@@ -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 */
Expand All @@ -16,7 +16,7 @@ export interface HeroProps extends HTMLAttributes<HTMLElement> {
}

export const Hero: FC<HeroProps> = ({
tag: Tag = 'div',
tag: Tag = 'section',
small,
centered,
overlay,
Expand Down
14 changes: 7 additions & 7 deletions stories/Components/Hero.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from '../../src';

const meta: Meta<typeof Hero> = {
title: "Documentazione/Menu di navigazione/Hero",
title: "Documentazione/Componenti/Hero",
component: Hero,
};

Expand All @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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.
Expand All @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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'
Expand Down
40 changes: 34 additions & 6 deletions stories/Documentation/Hero.mdx
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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} />

Expand All @@ -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} />
Expand All @@ -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} />

Expand All @@ -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} />

Expand Down
Loading

0 comments on commit 4d17fe7

Please sign in to comment.