Skip to content

Commit

Permalink
feat: new callout component
Browse files Browse the repository at this point in the history
  • Loading branch information
@astagi
astagi committed May 2, 2023
1 parent 8b82bee commit 646bf41
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 24 deletions.
69 changes: 55 additions & 14 deletions docs/componenti/callout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,13 @@ I Callout posso essere utilizzati per evidenziare alcune parti del testo che ric

## Esempi

Il Callout basico è costituito da un contenitore `<div>` con classe `.callout`, un titolo contenuto in un `<div>` con classe `.callout-title` e un testo contenuto in uno o più tag `<p>`.
{% capture callout %}
Breaking feature dalla versione **2.7.0**

Il contenitore `<div>` con classe `.callout` deve essere seguito da un ulteriore contenitore `<div>` con classe `.callout-inner`. Seguire gli esempi e la successiva descrizione per capire la composizione del nuovo componente.
{% endcapture %}{% include callout.html content=callout type="danger" %}

Il Callout basico è costituito da un contenitore `<div>` con classe `.callout`, un contenitore `<div>` con classe `.callout-inner` contenente a sua volta un titolo contenuto in un `<div>` con classe `.callout-title`. A seguire il testo del contenuto principale del Callout incluso in uno o più tag `<p>`.

Al titolo può essere aggiunta un'icona a scelta fra quelle disponibili, avendo cura di nasconderla agli screen reader con la proprietà `aria-hidden="true"`.

Expand All @@ -23,10 +29,15 @@ Nel caso l'icona comunicasse visivamente contenuti non disponibili nel testo (ad

{% comment %}Example name: Testo{% endcomment %}
{% capture example %}

<div class="callout">
<div class="callout-title"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-info-circle"></use></svg><span class="visually-hidden">Confermato</span> Titolo callout</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
<div class="callout-inner">
<div class="callout-title">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-info-circle"></use></svg>
<span class="visually-hidden">Confermato</span>
<span class="text">Titolo callout</span>
</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>
</div>
{% endcapture %}{% include example.html content=example %}

Expand All @@ -40,8 +51,14 @@ Aggiungere la classe `.success` per indicare una procedura andata a buon fine.
{% capture example %}

<div class="callout success">
<div class="callout-title"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-check-circle"></use></svg>Usa</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
<div class="callout-inner">
<div class="callout-title">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-check-circle"></use></svg>
<span class="visually-hidden">Usa</span>
<span class="text">Usa</span>
</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>
</div>
{% endcapture %}{% include example.html content=example %}

Expand All @@ -53,8 +70,14 @@ Aggiungere la classe `.warning` per indicare una procedura o testo che richiede
{% capture example %}

<div class="callout warning">
<div class="callout-title"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>Attenzione</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
<div class="callout-inner">
<div class="callout-title">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
<span class="visually-hidden">Attenzione</span>
<span class="text">Attenzione</span>
</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
</div>
</div>
{% endcapture %}{% include example.html content=example %}

Expand All @@ -66,8 +89,14 @@ Aggiungere la classe `.danger` per indicare un errore o una procedura pericolosa
{% capture example %}

<div class="callout danger">
<div class="callout-title"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close-circle"></use></svg>Non usare</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
<div class="callout-inner">
<div class="callout-title">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close-circle"></use></svg>
<span class="visually-hidden">Non usare</span>
<span class="text">Non usare</span>
</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
</div>
</div>
{% endcapture %}{% include example.html content=example %}

Expand All @@ -79,8 +108,14 @@ Aggiungere la classe `.important` per attirare ulteriormente l'attenzione.
{% capture example %}

<div class="callout important">
<div class="callout-title"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-info-circle"></use></svg>Importante</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
<div class="callout-inner">
<div class="callout-title">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-info-circle"></use></svg>
<span class="visually-hidden">Importante</span>
<span class="text">Importante</span>
</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
</div>
</div>
{% endcapture %}{% include example.html content=example %}

Expand All @@ -92,8 +127,14 @@ Aggiungere la classe `.note` per caratterizzare il Callout come una nota.
{% capture example %}

<div class="callout note">
<div class="callout-title"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-info-circle"></use></svg>Note a riguardo</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
<div class="callout-inner">
<div class="callout-title">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-info-circle"></use></svg>
<span class="visually-hidden">Note</span>
<span class="text">Note a riguardo</span>
</div>
<p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
</div>
</div>
{% endcapture %}{% include example.html content=example %}

Expand Down
63 changes: 53 additions & 10 deletions src/scss/custom/_callout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
.callout {
padding: 2.5rem 2.222rem;
border: 2px solid $color-border-secondary;
position: relative;
max-width: 60ch;
margin: 1.75rem 0 1rem;
border-radius: 8px;
overflow: hidden;

.callout-inner {
padding: 1.1rem 2.222rem;
border: 2px solid;
border-top: 0;
border-color: $color-border-secondary;
margin: 1.75rem 0 1rem;
}

// Highlights version
&.callout-highlight {
border: none;
border-left: 2px solid $color-border-secondary;
border-radius: 0;
padding: 0 2.222rem;
p {
&:last-child {
margin: 0;
}
}
.callout-title {
margin-bottom: 1.556rem;
}
Expand Down Expand Up @@ -89,6 +99,9 @@
// color versions
&.success {
border-color: $success;
.callout-inner {
border-color: rgba($success, 1);
}
.callout-title {
color: $success;
.icon {
Expand All @@ -97,10 +110,19 @@
span {
border-color: $success;
}
.text:after {
border-color: $success;
}
&:before {
border-color: $success;
}
}
}
&.warning {
border-color: $warning;
.callout-inner {
border-color: $color-border-warning;
}
.callout-title {
color: $color-text-warning;
.icon {
Expand All @@ -113,6 +135,9 @@
}
&.danger {
border-color: $danger;
.callout-inner {
border-color: rgba($danger, 1);
}
.callout-title {
color: $danger;
.icon {
Expand All @@ -125,6 +150,9 @@
}
&.important {
border-color: $success;
.callout-inner {
border-color: $success;
}
.callout-title {
color: $success;
.icon {
Expand All @@ -137,6 +165,9 @@
}
&.note {
border-color: $primary;
.callout-inner {
border-color: $primary;
}
.callout-title {
color: $primary;
.icon {
Expand Down Expand Up @@ -185,11 +216,26 @@
// standard title
&:not(.callout-highlight):not(.callout-more) {
.callout-title {
position: absolute;
position: relative;
font-size: 1rem;
padding: 0 1.389rem;
background: $white;
top: -0.78em;
top: -2em;
.text:after {
content: '';
top: 0.78em;
border-top: 2px solid;
position: absolute;
width: 200%;
margin-left: calc(10px + 0.7rem);
}
&:before {
content: '';
top: 0.78em;
border-top: 2px solid;
position: absolute;
width: 3.222rem;
left: calc(-40px - 0.7rem);
}
}
}

Expand All @@ -198,9 +244,6 @@
font-family: $font-family-serif;
font-size: 0.889rem;
color: $color-text-secondary; // UI kit
&:last-child {
margin: 0;
}
&.callout-big-text {
font-weight: bold;
font-size: 1.111rem;
Expand Down

0 comments on commit 646bf41

Please sign in to comment.