From 2a72b6bba8d01fcbb4882507ea3f5e31160bddeb Mon Sep 17 00:00:00 2001
From: Eduardo Gris <gris.eduardo@gmail.com>
Date: Mon, 21 Oct 2024 14:34:58 -0300
Subject: [PATCH] docs: add DisplayGapsPercentage to storybook

---
 .../DisplayGapsPercentage.stories.tsx         | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/pages/components/DisplayGapsPercentage.stories.tsx

diff --git a/src/pages/components/DisplayGapsPercentage.stories.tsx b/src/pages/components/DisplayGapsPercentage.stories.tsx
new file mode 100644
index 00000000..03331ac8
--- /dev/null
+++ b/src/pages/components/DisplayGapsPercentage.stories.tsx
@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/react'
+import DisplayGapsPercentage from './DisplayGapsPercentage'
+
+const meta: Meta<typeof DisplayGapsPercentage> = {
+  title: 'Components/DisplayGapsPercentage',
+  component: DisplayGapsPercentage,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof DisplayGapsPercentage>
+
+export const GreatGapPercentage: Story = {
+  args: {
+    gapsPercentage: 5,
+    decentPercentage: 10,
+    terriblePercentage: 15
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When gapsPercentage is lower than decentPercentage'
+      }
+    }
+  }
+}
+
+export const DecentGapPercentage: Story = {
+  args: {
+    gapsPercentage: 12,
+    decentPercentage: 10,
+    terriblePercentage: 15
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When gapsPercentage is between decentPercentage and terriblePercentage'
+      }
+    }
+  }
+}
+
+export const TerribleGapPercentage: Story = {
+  args: {
+    gapsPercentage: 17,
+    decentPercentage: 10,
+    terriblePercentage: 15
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When gapsPercentage is higher than terriblePercentage'
+      }
+    }
+  }
+}