UI-419: Added story to Progress (#383)

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;

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) {

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
 }