feature/Use toggle component on snippet edit form

Author: LewisYoul

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

@@ -18,18 +18,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: !@snippet.public, flip: true } %>
+        
         <div class="flex">
           <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_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, @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/shared/form/_toggle.html.erb

@@ -1,10 +1,15 @@
+<% enabled_color = 'bg-cyan' %>
+<% disabled_color = 'bg-gray-200' %>
+<% enabled_translate = 'translate-x-6' %>
+<% disabled_translate = 'translate-x-0' %>
+
 <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-color-class="<%= enabled_color %>"
+    data-toggle-disabled-color-class="<%= disabled_color %>"
+    data-toggle-enabled-translate-class="<%= enabled_translate %>"
+    data-toggle-disabled-translate-class="<%= disabled_translate %>"
     data-toggle-enabled-text-value="<%= enabled_text %>"
     data-toggle-disabled-text-value="<%= disabled_text %>"
     data-toggle-enabled-value="<%= enabled %>"
@@ -13,12 +18,12 @@
 
     <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"
+			class="<%= enabled ? enabled_color : disabled_color %> 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>
+			<span aria-hidden="true" data-toggle-target="toggle" class="<%= enabled ? enabled_translate : disabled_translate %> 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">