Add ui/progress-bar stories (twentyhq#936)

* Add ui/progress-bar stories Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Add requested changes Co-authored-by: RubensRafael <[email protected]> Co-authored-by: v1b3m <[email protected]> --------- Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]>
AdityaPimpalkar · Aug 3, 2023 · 29473fe · 29473fe
1 parent 9176935
commit 29473fe
Showing 1 changed file with 60 additions and 0 deletions.
diff --git a/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx b/front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx
@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ProgressBar } from '../ProgressBar';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'UI/ProgressBar/ProgressBar',
+  component: ProgressBar,
+  args: {
+    duration: 10000,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressBar>;
+const args = {};
+const defaultArgTypes = {
+  control: false,
+};
+export const Default: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog = {
+  args: {
+    ...args,
+  },
+  argTypes: {
+    barHeight: defaultArgTypes,
+    barColor: defaultArgTypes,
+    autoStart: defaultArgTypes,
+  },
+  parameters: {
+    catalog: [
+      {
+        name: 'animation',
+        values: [true, false],
+        props: (autoStart: string) => ({ autoStart }),
+        labels: (autoStart: string) => `AutoStart: ${autoStart}`,
+      },
+      {
+        name: 'colors',
+        values: [undefined, 'blue'],
+        props: (barColor: string) => ({ barColor }),
+        labels: (color: string) => `Color: ${color ?? 'default'}`,
+      },
+      {
+        name: 'sizes',
+        values: [undefined, 10],
+        props: (barHeight: number) => ({ barHeight }),
+        labels: (size: number) => `Size: ${size ? size + ' px' : 'default'}`,
+      },
+    ],
+  },
+  decorators: [CatalogDecorator],
+};