bramw_baserow/web-frontend/stories/ProgressBar.stories.mdx

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} />