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] 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 52f46957..c018cb05 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 00000000..fca545c3
--- /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 00000000..742275c1
--- /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 00000000..e0118200
--- /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 00000000..10cef5a2
--- /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