Subida del módulo y tema de PrestaShop

themes/hummingbird/stories/ui/alerts/additional.html

@@ -0,0 +1,13 @@
+<div class="alert alert-success" role="alert">
+  <h4 class="alert-heading">Well done!</h4>
+  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+  <hr>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</div>
+
+<div class="alert alert-primary" role="alert">
+  <h4 class="alert-heading">Well done!</h4>
+  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+  <hr>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</div>

themes/hummingbird/stories/ui/alerts/basics.html

@@ -0,0 +1,24 @@
+<div class="alert alert-primary" role="alert">
+  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-secondary" role="alert">
+  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-success" role="alert">
+  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-danger" role="alert">
+  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-warning" role="alert">
+  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-info" role="alert">
+  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-light" role="alert">
+  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-dark" role="alert">
+  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>

themes/hummingbird/stories/ui/alerts/icons.html

@@ -0,0 +1,24 @@
+<div class="alert alert-primary d-flex align-items-center" role="alert">
+  <i class="material-icons me-2">information</i>
+  <div>
+    An example alert with an icon
+  </div>
+</div>
+<div class="alert alert-success d-flex align-items-center" role="alert">
+  <i class="material-icons me-2">check</i>
+  <div>
+    An example success alert with an icon
+  </div>
+</div>
+<div class="alert alert-warning d-flex align-items-center" role="alert">
+  <i class="material-icons me-2">warning</i>
+  <div>
+    An example warning alert with an icon
+  </div>
+</div>
+<div class="alert alert-danger d-flex align-items-center" role="alert">
+  <i class="material-icons me-2">error</i>
+  <div>
+    An example danger alert with an icon
+  </div>
+</div>

themes/hummingbird/stories/ui/alerts/index.stories.js

@@ -0,0 +1,41 @@
+import basicsContent from './basics.html'
+import additionalContent from './additional.html'
+import iconsContent from './icons.html'
+
+export default {
+  title: 'UI/Alerts',
+  parameters: {
+    docs: {
+      description: {
+        component: 'These alerts are used to display messages.'
+      }
+    }
+  }
+};
+
+export const Basics = () => basicsContent;
+Basics.parameters = {
+  docs: {
+    source: {
+      code: basicsContent
+    }
+  }
+};
+
+export const Additional = () => additionalContent;
+Additional.parameters = {
+  docs: {
+    source: {
+      code: additionalContent
+    }
+  }
+};
+
+export const WithIcons = () => iconsContent;
+WithIcons.parameters = {
+  docs: {
+    source: {
+      code: iconsContent
+    }
+  }
+};