feature/Implement toggle component

Author: LewisYoul

app/javascript/controllers/checkbox_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  static targets = ['background', 'text', 'toggle', 'value']
+  static classes = ['enabledColor', 'disabledColor', 'enabledTranslate', 'disabledTranslate']
+  static values = {
+    enabledText: String,
+    disabledText: String,
+    enabled: Boolean,
+    flip: Boolean
+  }
+
+  toggle() {
+    this.toggleValue()
+    this.toggleToggle()
+    this.toggleText()
+  }
+
+  toggleValue() {
+    this.enabledValue = !this.enabledValue
+    
+    if (this.flipValue) {
+      this.valueTarget.value = !this.enabledValue
+    } else {
+      this.valueTarget = this.enabledValue
+    }
+  }
+
+  toggleToggle() {
+    this.backgroundTarget.classList.toggle(this.enabledColorClass)
+    this.backgroundTarget.classList.toggle(this.disabledColorClass)
+    this.toggleTarget.classList.toggle(this.enabledTranslateClass)
+    this.toggleTarget.classList.toggle(this.disabledTranslateClass)
+  }
+
+  toggleText() {
+    if (this.isEnabled) {
+      this.textTarget.innerHTML = this.enabledTextValue
+    } else {
+      this.textTarget.innerHTML = this.disabledTextValue
+    }
+  }
+
+  get isEnabled() {
+    return this.enabledValue
+  }
+}

app/javascript/controllers/toggle_controller.js

@@ -13,18 +13,9 @@
     </div>
 
     <div class="create-snippet--options-wrapper">
-      <div class="flex v-center" style="cursor: pointer;"
-        data-controller="checkbox"
-        data-action="click->checkbox#toggle"
-        data-checkbox-checked-text-value="Public"
-        data-checkbox-checked-icon-value="/icons/lock-open.svg"
-        data-checkbox-unchecked-text-value="Private"
-        data-checkbox-unchecked-icon-value="/icons/lock-closed.svg"
-      >
-        <span data-checkbox-target="text">Public</span>
-        <img data-checkbox-target="icon" src="/icons/lock-open.svg" width="20">
-        <%= f.hidden_field :public, value: true, data: { checkbox_target: 'value' } %>
-      </div>
+  
+      <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: false, flip: true } %>
+      
       <div class="flex">
         <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @javascript.id), { prompt: 'Select language...' }, class: "block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", data: { action: 'change->codemirror#updateMode' } %>
         <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, params[:folder_id]), { prompt: 'Select folder...' }, { class: "ml-1 block w-full pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" } %>

app/views/modals/snippets/new.html.erb

@@ -0,0 +1,29 @@
+<div 
+    class="flex items-center"
+    data-controller="toggle"
+    data-toggle-enabled-color-class="bg-cyan"
+    data-toggle-disabled-color-class="bg-gray-200"
+    data-toggle-enabled-translate-class="translate-x-6"
+    data-toggle-disabled-translate-class="translate-x-0"
+    data-toggle-enabled-text-value="<%= enabled_text %>"
+    data-toggle-disabled-text-value="<%= disabled_text %>"
+    data-toggle-enabled-value="<%= enabled %>"
+    data-toggle-flip-value="<%= flip %>"
+	>
+
+    <button
+			type="button"
+			class="bg-gray-200 relative inline-flex flex-shrink-0 h-5 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+			aria-pressed="false"
+			data-action="click->toggle#toggle"
+			data-toggle-target="background"
+    >
+			<span aria-hidden="true" data-toggle-target="toggle" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
+    </button>
+
+    <span class="ml-3" id="annual-billing-label">
+			<span class="text-sm font-medium text-gray-900" data-toggle-target="text"><%= enabled ? enabled_text : disabled_text %></span>
+    </span>
+	
+    <%= form.hidden_field field, value: flip ? !enabled : enabled, data: { toggle_target: 'value' } %>
+  </div>