From 99b150ef6a79a23a1750530c840b7606e3443271 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 30 Aug 2023 12:39:02 +0300
Subject: [PATCH] feat: add examples for key generation sync card story

---
 .../KeyGenerationSyncCard.stories.ts          | 56 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts
index d7213cac..123ef259 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.stories.ts
@@ -15,7 +15,7 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Page: Story = {
+export const Blue: Story = {
   args: {
     synced: 123.524,
     total: 172.503,
@@ -23,3 +23,57 @@ export const Page: Story = {
     color: '#2a4af5',
   },
 }
+
+export const Red: Story = {
+  args: {
+    synced: 123.524,
+    total: 172.503,
+    title: 'Execution Sync Status',
+    color: '#ff6161',
+  },
+}
+
+export const MaxValue: Story = {
+  args: {
+    synced: 172.503,
+    total: 172.503,
+    title: 'Execution Sync Status',
+    color: '#2a4af5',
+  },
+}
+
+export const OverMaxValue: Story = {
+  args: {
+    synced: 200,
+    total: 172.503,
+    title: 'Execution Sync Status',
+    color: '#2a4af5',
+  },
+}
+
+export const MinValue: Story = {
+  args: {
+    synced: 0,
+    total: 172.503,
+    title: 'Execution Sync Status',
+    color: '#2a4af5',
+  },
+}
+
+export const UnderMinValue: Story = {
+  args: {
+    synced: -100,
+    total: 172.503,
+    title: 'Execution Sync Status',
+    color: '#2a4af5',
+  },
+}
+
+export const WithoutTitle: Story = {
+  args: {
+    synced: 123.524,
+    total: 172.503,
+    title: '',
+    color: '#2a4af5',
+  },
+}