Subida del módulo y tema de PrestaShop

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

@@ -0,0 +1,21 @@
+import progressContent from './progress.html';
+
+export default {
+  title: 'UI/Progress Bar',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Progress bars are used to show the completion status of a task or process.'
+      }
+    }
+  }
+};
+
+export const ProgressBar = () => progressContent;
+ProgressBar.parameters = {
+  docs: {
+    source: {
+      code: progressContent
+    }
+  }
+};

themes/hummingbird/stories/ui/progress/progress.html

@@ -0,0 +1,51 @@
+<div class="progress">
+  <div
+    class="progress-bar bg-primary"
+    role="progressbar"
+    style="width: 25%;"
+    aria-valuenow="25"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    25%
+  </div>
+</div>
+<br />
+<div class="progress">
+  <div
+    class="progress-bar bg-success"
+    role="progressbar"
+    style="width: 50%;"
+    aria-valuenow="50"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    50%
+  </div>
+</div>
+<br />
+<div class="progress">
+  <div
+    class="progress-bar bg-danger"
+    role="progressbar"
+    style="width: 75%;"
+    aria-valuenow="75"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    75%
+  </div>
+</div>
+<br />
+<div class="progress">
+  <div
+    class="progress-bar bg-warning"
+    role="progressbar"
+    style="width: 100%;"
+    aria-valuenow="100"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    100%
+  </div>
+</div>