feat: aggiunti stili per callouts per doc come in BSI

.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 = {

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;
+}

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%);
+ }

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;

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';