Create UI radio component

Author: chaimann

admin/app/components/solidus_admin/ui/radio/component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Radio::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: "size-4 checked:border-[5px]",
+    m: "size-5 checked:border-[6px]",
+  }.freeze
+
+  def initialize(size: :m, **attributes)
+    @size = size
+    @attributes = attributes
+    @attributes[:class] = "
+      #{SIZES.fetch(@size)}
+      appearance-none cursor-pointer outline-none
+      rounded-full border-2 border-gray-300 bg-white
+      checked:border-gray-700
+      hover:border-gray-700 hover:checked:border-gray-500
+      focus:ring-2 focus:ring-offset-1 focus:ring-gray-300
+      active:ring-2 active:ring-offset-1 active:ring-gray-300
+      focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-300
+      disabled:border-gray-300/50 disabled:hover:border-gray-300/50 disabled:active:ring-0 disabled:cursor-not-allowed
+      transition-all duration-75 ease-linear
+    "
+  end
+
+  def call
+    tag.input(type: "radio", **@attributes)
+  end
+end

admin/spec/components/previews/solidus_admin/ui/radio/component_preview.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# @component "ui/forms/switch"
+class SolidusAdmin::UI::Radio::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+end

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

@@ -0,0 +1,39 @@
+<div class="grid grid-cols-5 gap-2 text-sm text-gray-700 items-center">
+  <div></div>
+  <div class="col-span-2 text-center font-semibold">Small</div>
+  <div class="col-span-2 text-center font-semibold">Medium</div>
+
+  <div></div>
+  <div class="text-center">Default</div>
+  <div class="text-center">Disabled</div>
+  <div class="text-center">Default</div>
+  <div class="text-center">Disabled</div>
+
+  <div class="font-semibold text-right">Off</div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "small-default", size: :s %>
+  </div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "small-disabled", size: :s, disabled: true %>
+  </div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "medium-default" %>
+  </div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "medium-disabled", disabled: true %>
+  </div>
+
+  <div class="font-semibold text-right">On</div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "small-default", size: :s, checked: true %>
+  </div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "small-disabled", size: :s, checked: true, disabled: true %>
+  </div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "medium-default", checked: true %>
+  </div>
+  <div class="place-self-center">
+    <%= render current_component.new name: "medium-disabled", checked: true, disabled: true %>
+  </div>
+</div>

admin/spec/components/solidus_admin/ui/radio/component_spec.rb

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