From 67cd6304cf6a4497605dc03a9970e4662c505e7d Mon Sep 17 00:00:00 2001
From: Eduard Carrerars <ecarreras@gisce.net>
Date: Tue, 24 Dec 2024 11:12:20 +0100
Subject: [PATCH] feat(colorPicker): add new component colorPicker

---
 src/ColorPicker.ts           |  9 +++++
 src/WidgetFactory.ts         |  4 +++
 src/index.ts                 |  2 ++
 src/spec/ColorPicker.spec.ts | 64 ++++++++++++++++++++++++++++++++++++
 4 files changed, 79 insertions(+)
 create mode 100644 src/ColorPicker.ts
 create mode 100644 src/spec/ColorPicker.spec.ts

diff --git a/src/ColorPicker.ts b/src/ColorPicker.ts
new file mode 100644
index 0000000..d89c8ee
--- /dev/null
+++ b/src/ColorPicker.ts
@@ -0,0 +1,9 @@
+import Char from "./Char";
+
+class ColorPicker extends Char {
+  get showText(): boolean {
+    return this.parsedWidgetProps.show_text ?? true;
+  }
+}
+
+export default ColorPicker;
diff --git a/src/WidgetFactory.ts b/src/WidgetFactory.ts
index 73bfa34..24cd53f 100644
--- a/src/WidgetFactory.ts
+++ b/src/WidgetFactory.ts
@@ -42,6 +42,7 @@ import JSONField from "./JSONField";
 import Email from "./Email";
 import Spinner from "./Spinner";
 import Carousel from "./Carousel";
+import ColorPicker from "./ColorPicker";
 
 class WidgetFactory {
   /**
@@ -188,6 +189,9 @@ class WidgetFactory {
       case "carousel":
         this._widgetClass = Carousel;
         break;
+      case "colorPicker":
+        this._widgetClass = ColorPicker;
+        break;
       default:
         break;
     }
diff --git a/src/index.ts b/src/index.ts
index 23041e0..b7f1927 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -54,6 +54,7 @@ import Comments from "./Comments";
 import Email from "./Email";
 import Spinner from "./Spinner";
 import Carousel from "./Carousel";
+import ColorPicker from "./ColorPicker";
 
 import {
   Graph,
@@ -144,4 +145,5 @@ export {
   Email,
   Spinner,
   Carousel,
+  ColorPicker,
 };
diff --git a/src/spec/ColorPicker.spec.ts b/src/spec/ColorPicker.spec.ts
new file mode 100644
index 0000000..3d3c37c
--- /dev/null
+++ b/src/spec/ColorPicker.spec.ts
@@ -0,0 +1,64 @@
+// src/spec/ColorPicker.spec.ts
+import WidgetFactory from "../WidgetFactory";
+import ColorPicker from "../ColorPicker";
+import { it, expect, describe } from "vitest";
+
+describe("A ColorPicker", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "colorPicker",
+    };
+
+    const widget = widgetFactory.createWidget("colorPicker", props);
+    expect(widget).toBeInstanceOf(ColorPicker);
+  });
+
+  it("should properly set label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "colorPicker",
+      string: "colorPicker caption",
+    };
+    const widget = widgetFactory.createWidget("colorPicker", props);
+
+    expect(widget.label).toBe("colorPicker caption");
+  });
+
+  describe("showText property", () => {
+    it("should show text by default", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "colorPicker",
+      };
+      const widget = widgetFactory.createWidget("colorPicker", props);
+
+      expect(widget.showText).toBe(true);
+    });
+    it("should show text when widget_props.showText is true", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "colorPicker",
+        widget_props: {
+          show_text: true,
+        },
+      };
+      const widget = widgetFactory.createWidget("colorPicker", props);
+
+      expect(widget.showText).toBe(true);
+    });
+
+    it("should not show text when widget_props.showText is false", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "colorPicker",
+        widget_props: {
+          show_text: false,
+        },
+      };
+      const widget = widgetFactory.createWidget("colorPicker", props);
+
+      expect(widget.showText).toBe(false);
+    });
+  });
+});