Merge pull request #5299 from solidusio/the-krg/admin/admin-ui-switch

[Admin] Add toggle switch component

admin/app/components/solidus_admin/ui/forms/switch/component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Switch::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: '
+      w-8 h-5
+
+      after:w-4 after:h-4
+      after:top-0.5 after:left-0.5
+
+      active:after:w-4
+      after:checked:left-[1.875rem]
+    ',
+    m: '
+      w-10 h-6
+
+      after:w-5 after:h-5
+      after:top-0.5 after:left-0.5
+
+      active:after:w-5
+      after:checked:left-[2.375rem]
+    ',
+  }.freeze
+
+  def initialize(size: :m, **attributes)
+    @size = size
+    @attributes = attributes
+  end
+
+  def call
+    tag.input(
+      type: 'checkbox',
+      class: "
+        #{SIZES.fetch(@size)}
+        appearance-none	outline-0 cursor-pointer bg-gray-200 inline-block rounded-full relative
+
+        after:content-[''] after:absolute after:bg-white
+        after:duration-300 after:rounded-full after:checked:-translate-x-full
+
+        hover:bg-gray-300
+        disabled:opacity-40 disabled:cursor-not-allowed
+        checked:bg-gray-500 checked:hover:bg-gray-700
+      ",
+      **@attributes,
+    )
+  end
+end

admin/spec/components/previews/solidus_admin/ui/forms/switch/component_preview.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# @component "ui/forms/switch"
+class SolidusAdmin::UI::Forms::Switch::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  # **With a form builder**
+  #
+  # The switch component renders a standalone switch input.
+  # If the id attribute is not filled, it will be set as a random string.
+  #
+  # ```erb
+  #   <%= form_for @product do |form| %>
+  #     ...
+  #     <%= render component('ui/forms/switch').new(
+  #       id: "#{form.object_name}-switch",
+  #       checked: form.object.accept_tos,
+  #     ) %>
+  #     ...
+  #   <% end %>
+  # ```
+  #
+
+  def overview
+    render_with_template
+  end
+
+  # @param size select { choices: [s, m] }
+  # @param checked toggle
+  # @param disabled toggle
+  def playground(size: :m, checked: false, disabled: false)
+    render current_component.new(id: 1, size: size.to_sym, checked: checked, disabled: disabled)
+  end
+end

admin/spec/components/previews/solidus_admin/ui/forms/switch/component_preview/overview.html.erb

@@ -0,0 +1,33 @@
+<div class="flex justify-center items-center h-screen">
+  <table>
+    <tr>
+      <td></td>
+      <% current_component::SIZES.keys.each do |size| %>
+        <td class="px-3 py-1 text-gray-500 text-center text-[16px]" colspan="2"><%= size.to_s.humanize %></td>
+      <% end %>
+    </tr>
+    <tr>
+      <td></td>
+      <% current_component::SIZES.keys.each do |size| %>
+        <% %i[default disabled].each do |state| %>
+          <td class="px-3 py-1 text-gray-500 text-center"><%= state.to_s.humanize %></td>
+        <% end %>
+      <% end %>
+    </tr>
+    <% %i[off on].each do |checked| %>
+      <tr>
+        <td class="font-bold px-3 py-1"><%= checked.to_s.humanize %></td>
+        <% current_component::SIZES.keys.each do |size| %>
+          <% %i[default disabled].each do |state| %>
+            <% cell_id = SecureRandom.uuid %>
+            <td class="px-3 py-1 text-center">
+              <div class="leading-[0]">
+                <%= render current_component.new(id: cell_id, size: size, checked: checked == :on, disabled: state == :disabled) %>
+              </div>
+            </td>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
+  </table>
+</div>

admin/spec/components/solidus_admin/ui/forms/switch/component_spec.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Forms::Switch::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end