Toggle input disabled when on demand checked

This introduces a new 'toggle' controller, and we already had three\! So I created a generic interface that could be extended to potentially support all of them. I propose we try to reduce them all into the one controller, but won't go down the rabbit-hole just yet..

I have an idea on how to re-arrange and make it more contained, by assigning the controller only to the checkbox, and defining targets with aria-controls="", but chose to stick with Stimulus conventions for now.

spec/javascripts/stimulus/toggle_control_controller_test.js

@@ -0,0 +1,70 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import toggle_controller from "../../../app/webpacker/controllers/toggle_control_controller";
+
+describe("ToggleControlController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("toggle-control", toggle_controller);
+  });
+
+  describe("#disableIfPresent", () => {
+    describe("with checkbox", () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<div data-controller="toggle-control">
+          <input id="checkbox" type="checkbox" value="1" data-action="change->toggle-control#disableIfPresent" />
+          <input id="control" data-toggle-control-target="control">
+        </div>`;
+
+        const checkbox = document.getElementById("checkbox");
+        const control = document.getElementById("control");
+      });
+
+      it("Disables when checkbox is checked", () => {
+        checkbox.click();
+        expect(checkbox.checked).toBe(true);
+
+        expect(control.disabled).toBe(true);
+      });
+
+      it("Enables when checkbox is un-checked", () => {
+        checkbox.click();
+        checkbox.click();
+        expect(checkbox.checked).toBe(false);
+
+        expect(control.disabled).toBe(false);
+      });
+    });
+    describe("with input", () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<div data-controller="toggle-control">
+          <input id="input" value="" data-action="input->toggle-control#disableIfPresent" />
+          <input id="control" data-toggle-control-target="control">
+        </div>`;
+
+        const input = document.getElementById("input");
+        const control = document.getElementById("control");
+      });
+
+      it("Disables when input is filled", () => {
+        input.value = "test"
+        input.dispatchEvent(new Event("input"));
+
+        expect(control.disabled).toBe(true);
+      });
+
+      it("Enables when input is emptied", () => {
+        input.value = "test"
+        input.dispatchEvent(new Event("input"));
+
+        input.value = ""
+        input.dispatchEvent(new Event("input"));
+
+        expect(control.disabled).toBe(false);
+      });
+    });
+  });
+});