From 68f9f5d0e052d7e661956878a55f2b1c4d107a94 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 14:03:25 +0300
Subject: [PATCH] #31 : Add progress storybook

---
 .../Progress/stories/Progress.stories.js      | 13 +++++++++++
 .../Progress/stories/ProgressView.svelte      | 23 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/Progress/stories/Progress.stories.js
 create mode 100644 src/components/Progress/stories/ProgressView.svelte

diff --git a/src/components/Progress/stories/Progress.stories.js b/src/components/Progress/stories/Progress.stories.js
new file mode 100644
index 0000000..be1d74d
--- /dev/null
+++ b/src/components/Progress/stories/Progress.stories.js
@@ -0,0 +1,13 @@
+import ProgressView from './ProgressView.svelte';
+
+export default {
+  title: 'Default Components/Progress',
+  component: ProgressView
+};
+
+const Template = ({ ...args }) => ({
+  Component: ProgressView,
+  props: args
+});
+
+export const Primary = Template.bind({});
diff --git a/src/components/Progress/stories/ProgressView.svelte b/src/components/Progress/stories/ProgressView.svelte
new file mode 100644
index 0000000..25f2d86
--- /dev/null
+++ b/src/components/Progress/stories/ProgressView.svelte
@@ -0,0 +1,23 @@
+<script>
+  import Progress from '../Progress.svelte'
+
+  /**
+   * Progress value
+   */
+  export let value = 0
+</script>
+
+<div class="progress-container">
+  <Progress
+    {value}
+  >
+  </Progress>
+</div>
+
+<style>
+  .progress-container {
+    width: 100%;
+    height: 5px;
+    background-color: rgba(93, 93, 93, 0.5);
+  }
+</style>