From 5a70255b1168778ec5159ba9af3200779f2b07b2 Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Thu, 9 Jan 2025 13:27:06 +0200
Subject: [PATCH] chore(html): add test for ColorGradient sizes

---
 .../tests/colorgradient-sizes.tsx             | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 packages/html/src/colorgradient/tests/colorgradient-sizes.tsx

diff --git a/packages/html/src/colorgradient/tests/colorgradient-sizes.tsx b/packages/html/src/colorgradient/tests/colorgradient-sizes.tsx
new file mode 100644
index 00000000000..571d67b8c28
--- /dev/null
+++ b/packages/html/src/colorgradient/tests/colorgradient-sizes.tsx
@@ -0,0 +1,36 @@
+import { ColorGradient, ColorGradientNormal } from '../../colorgradient';
+
+
+const styles = `
+    #test-area {
+        grid-template-columns: 1fr 1fr 2fr;
+    }
+
+    .k-hue-slider {
+        --kendo-slider-start: 0;
+        --kendo-slider-end: 0;
+    }
+    .k-alpha-slider {
+        --kendo-slider-start: 0;
+        --kendo-slider-end: 100;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-gap-2">
+            <span>Small</span>
+            <span>Medium</span>
+            <span>Large</span>
+
+            { ColorGradient.options.size.map((size) => (
+                <>
+                    <section>
+                        <ColorGradientNormal size={size} />
+                    </section>
+                </>
+            ))}
+        </div>
+    </>
+);