Add form field update capability to toggle components

app/components/form_elements/fieldset_toggle_component.html.erb

@@ -1,9 +1,23 @@
-<%= tag.public_send(@tag, class: "flex items-center justify-between py-6") do %>
+<%= tag.public_send @tag, class: "flex items-center justify-between mb-6 last:mb-0",
+      data: @form.present? ? {
+        controller: "settings--toggle",
+        :'settings--toggle-switch-enabled-value' => @enabled.to_s
+      } : nil do %>
   <div class="flex flex-col">
     <label class="font-bold mb-1"><%= @title %></label>
     <p class="text-gray-500"><%= @descripton %></p>
   </div>
   <div class="relative ml-4 inline-flex flex-shrink-0">
-    <%= render FormElements::ToggleComponent.new(enabled: @enabled, input_enabled: @input_enabled) %>
+    <%= render FormElements::ToggleComponent.new(
+          enabled: @enabled,
+          input_enabled: @input_enabled,
+          data: {
+            :'settings--toggle-target' => "button",
+            action: "settings--toggle#toggleSwitch"
+          }) %>
+    <% if @form.present? %>
+      <%= @form.hidden_field @attribute, value: @enabled.to_s,
+            data: { :'settings--toggle-target' => "input" } %>
+    <% end %>
   </div>
 <% end %>

app/components/form_elements/fieldset_toggle_component.rb

@@ -2,7 +2,10 @@
 
 module FormElements
   class FieldsetToggleComponent < ViewComponent::Base
-    def initialize(tag: "li", enabled: false, input_enabled: true, title:, description:)
+    def initialize(form: nil, attribute: nil, tag: "li", enabled: false,
+                   input_enabled: true, title:, description:)
+      @form = form
+      @attribute = attribute
       @tag = tag
       @enabled = enabled
       @input_enabled = input_enabled

app/components/form_elements/toggle_component.html.erb

@@ -1,13 +1,15 @@
-<button type="submit" role="switch" aria-checked="false"
-        <%= @input_enabled ? "" : "disabled=disabled"%>
-        class="<%= @enabled ? 'bg-indigo-600' : 'bg-gray-200' %>
-               relative inline-flex h-6 w-11 flex-shrink-0
-               cursor-pointer rounded-full border-2 border-transparent
-               transition-colors duration-200 ease-in-out focus:outline-none
-               focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
+<%= button_tag type: "button",
+      data: @data,
+      role: "switch", aria: { checked: @enabled.to_s },
+      disabled: !@input_enabled,
+      class: "#{ @enabled ? 'bg-blue-600' : 'bg-gray-200' }
+              relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer
+              rounded-full border-2 border-transparent transition-colors
+              duration-200 ease-in-out focus:outline-none focus:ring-2
+              focus:ring-blue-600 focus:ring-offset-2" do %>
   <span class="sr-only"><%= @button_text %></span>
-  <span aria-hidden="true"
+  <span aria-hidden="true" data-settings--toggle-target="switch"
         class="<%= @enabled ? 'translate-x-5' : 'translate-x-0' %>
                pointer-events-none inline-block h-5 w-5 transform rounded-full
                bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-</button>
+<% end %>

app/components/form_elements/toggle_component.rb

@@ -2,9 +2,10 @@
 
 module FormElements
   class ToggleComponent < ViewComponent::Base
-    def initialize(enabled:, input_enabled: true)
+    def initialize(enabled:, input_enabled: true, data: nil)
       @enabled = !!enabled
       @input_enabled = input_enabled
+      @data = data
     end
   end
 end

app/javascript/controllers/settings/toggle_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "button", "switch", "input" ]
+  static values = { switchEnabled: Boolean }
+
+  toggleSwitch () {
+    this.switchEnabledValue = !this.switchEnabledValue
+    this.inputTarget.value = this.switchEnabledValue.toString()
+
+    if (this.switchEnabledValue) {
+      this.buttonTarget.setAttribute("aria-checked", "true");
+      this.buttonTarget.classList.remove("bg-gray-200")
+      this.buttonTarget.classList.add("bg-blue-600")
+      this.switchTarget.classList.remove("translate-x-0")
+      this.switchTarget.classList.add("translate-x-5")
+    } else {
+      this.buttonTarget.setAttribute("aria-checked", "false");
+      this.buttonTarget.classList.remove("bg-blue-600")
+      this.buttonTarget.classList.add("bg-gray-200")
+      this.switchTarget.classList.remove("translate-x-5")
+      this.switchTarget.classList.add("translate-x-0")
+    }
+  }
+}