Progressbar refactor

web-frontend/modules/core/assets/scss/components/progress.scss

@@ -2,19 +2,19 @@
   @include fixed-height(9px, 12px);
 
   width: 100%;
-  background-color: $color-neutral-100;
+  background-color: $palette-neutral-100;
   margin-right: 30px;
   @include rounded($rounded-md);
 }
 
 .progress-bar__inner {
-  background-color: $color-success-300;
+  background-color: $palette-green-500;
   height: 100%;
   transition-timing-function: linear;
   @include rounded($rounded-md);
 
   &--overflow {
-    background-color: $color-error-500;
+    background-color: $palette-red-400;
   }
 }
 

web-frontend/stories/ProgressBar.stories.mdx

@@ -0,0 +1,75 @@
+import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
+import { config, withDesign } from 'storybook-addon-designs'
+import { action } from '@storybook/addon-actions'
+import { useArgs } from '@storybook/client-api'
+
+import ProgressBar from '@baserow/modules/core/components/ProgressBar'
+
+<Meta
+    title="Baserow/ProgressBar"
+    component={ProgressBar}
+    parameters={{
+        backgrounds: {
+            default: 'white',
+            values: [
+                { name: 'white', value: '#ffffff' },
+                { name: 'light', value: '#eeeeee' },
+                { name: 'dark', value: '#222222' },
+            ],
+        },
+    }}
+    decorators={[withDesign]}
+    argTypes={{
+        value: {
+            control: {
+                type: 'number',
+            },
+            defaultValue: 72,
+        },
+        status: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: '',
+        },
+        showValue: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: true,
+        },
+        showOverflow: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+    }}
+/>
+
+# ProgressBar
+
+The ProgressBar component is used to show the progress of a certain task.
+
+export const Template = (args, { argTypes, updateArgs }) => ({
+    methods: {},
+    components: { ProgressBar },
+    props: Object.keys(argTypes),
+    template: `<ProgressBar v-bind="$props" />`,
+})
+
+<Canvas>
+    <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+## Example
+
+```javascript
+<ProgressBar></ProgressBar>
+```
+
+## Props
+
+<Props of={ProgressBar} />

web-frontend/test/unit/core/components/progressBar.spec.js

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import ProgressBar from '@baserow/modules/core/components/ProgressBar'
+
+describe('ProgressBar.vue', () => {
+  it('renders the progress bar', () => {
+    const wrapper = mount(ProgressBar)
+    expect(wrapper.find('.progress-bar').exists()).toBe(true)
+  })
+
+  it('sets the correct width based on the value prop', () => {
+    const value = 72
+    const wrapper = mount(ProgressBar, {
+      propsData: {
+        value,
+      },
+    })
+
+    const progressBar = wrapper.find('.progress-bar__inner')
+    expect(progressBar.attributes('style')).toContain(`width: ${value}%`)
+  })
+
+  it('shows the value when the showValue prop is true', () => {
+    const value = 72
+    const wrapper = mount(ProgressBar, {
+      propsData: {
+        value,
+        showValue: true,
+      },
+    })
+
+    expect(wrapper.text()).toContain(`${value}%`)
+  })
+
+  it('does not show the value when the showValue prop is false', () => {
+    const value = 72
+    const wrapper = mount(ProgressBar, {
+      propsData: {
+        value,
+        showValue: false,
+      },
+    })
+
+    expect(wrapper.text()).not.toContain(`${value}%`)
+  })
+
+  // Add more tests as needed...
+})