From 921d5b23f06400d5954268e07bd9cc22605bc477 Mon Sep 17 00:00:00 2001
From: mosarabi <149577299+mosarabi@users.noreply.github.com>
Date: Wed, 3 Jul 2024 17:19:32 +0100
Subject: [PATCH] UI-419: Added story to Progress (#383)

---
 .../components/Progress/Progress.stories.ts   | 44 +++++++++++++++++++
 .../alto/src/components/Progress/Progress.vue |  5 +--
 .../alto/src/components/Progress/types.ts     |  1 -
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 packages/alto/src/components/Progress/Progress.stories.ts

diff --git a/packages/alto/src/components/Progress/Progress.stories.ts b/packages/alto/src/components/Progress/Progress.stories.ts
new file mode 100644
index 00000000..560c34b8
--- /dev/null
+++ b/packages/alto/src/components/Progress/Progress.stories.ts
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Progress } from '~/components';
+
+type Story = StoryObj<typeof Progress>;
+const meta: Meta<typeof Progress> = {
+  title: 'Application/Progress',
+  component: Progress,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['progress', 'bar', 'circle', 'loading'],
+  argTypes: {
+    progressType: {
+      control: 'select',
+      options: ['circle', 'bar'],
+    },
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+      },
+    },
+    maxValue: { table: { disable: true } },
+  },
+  args: {
+    value: 0,
+    maxValue: 100,
+    size: 110,
+    progressType: 'circle',
+  },
+};
+
+export const Default: Story = {
+  render: args => ({
+    components: { Progress },
+    setup() {
+      return { args };
+    },
+    template: '<Progress v-bind="args" />',
+  }),
+};
+
+export default meta;
diff --git a/packages/alto/src/components/Progress/Progress.vue b/packages/alto/src/components/Progress/Progress.vue
index 3a00edac..22390c6e 100644
--- a/packages/alto/src/components/Progress/Progress.vue
+++ b/packages/alto/src/components/Progress/Progress.vue
@@ -7,7 +7,6 @@ const props = withDefaults(defineProps<ProgressProps>(),
     size: 110,
     value: 0,
     maxValue: 100,
-    playable: true,
     progressType: 'circle',
   },
 );
@@ -22,9 +21,9 @@ const barWidthValue = computed(() => `${barWidth.value}%`);
 const percentFormat = computed(() => Math.floor(currentPercent.value * 100));
 
 function update() {
-  const { value, maxValue, progressType, playable } = props;
+  const { value, maxValue, progressType } = props;
 
-  if (maxValue >= value && value >= 0 && playable) {
+  if (maxValue >= value && value >= 0) {
     const percent = value / maxValue;
     currentPercent.value = percent;
     switch (progressType) {
diff --git a/packages/alto/src/components/Progress/types.ts b/packages/alto/src/components/Progress/types.ts
index 901817bc..471bcacd 100644
--- a/packages/alto/src/components/Progress/types.ts
+++ b/packages/alto/src/components/Progress/types.ts
@@ -2,7 +2,6 @@ type ProgressTypes = 'circle' | 'bar';
 export interface ProgressProps {
   value?: number
   maxValue?: number
-  playable?: boolean
   size?: number
   progressType?: ProgressTypes
 }