Merge pull request #5233 from solidusio/elia/admin/ui-button-component

[Admin] add a `ui/button` component

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

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: %w[
+      h-7 px-1.5 py-1
+      text-xs font-semibold leading-none
+    ],
+    m: %w[
+      h-9 px-3 py-1.5
+      text-sm font-semibold leading-none
+    ],
+    l: %w[
+      h-12 px-4 py-2
+      text-base font-semibold leading-none
+    ],
+  }
+
+  SCHEMES = {
+    primary: %w[
+      text-white bg-black rounded
+      hover:text-white hover:bg-gray-600
+      active:text-white active:bg-gray-800
+      focus:text-white focus:bg-gray-700
+      disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed
+    ],
+    secondary: %w[
+      text-gray-700 bg-white border border-1 rounded border-gray-200
+      hover:bg-gray-50
+      active:bg-gray-100
+      focus:bg-gray-50
+      disabled:text-gray-300 disabled:bg-white border-gray-200 disabled:cursor-not-allowed
+    ],
+    ghost: %w[
+      text-gray-700 bg-transparent rounded
+      hover:bg-gray-50
+      active:bg-gray-100
+      focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
+      disabled:text-gray-300 disabled:bg-transparent border-gray-300 disabled:cursor-not-allowed
+    ],
+  }
+
+  def initialize(text: nil, class_name: nil, size: :m, scheme: :primary, **attributes)
+    @text = text
+    @attributes = attributes
+
+    @class_name = [
+      class_name,
+      'justify-start items-center gap-1 inline-flex',
+      SIZES.fetch(size.to_sym),
+      SCHEMES.fetch(scheme.to_sym),
+    ].join(' ')
+  end
+
+  def call
+    content_tag(:button, @text, class: @class_name, **@attributes)
+  end
+end

admin/lib/generators/solidus_admin/component/templates/component_preview_overview.html.erb

@@ -3,5 +3,5 @@
     Scenario 1
   </h6>
 
-  <%%= render component.new<%= preview_signature %> %>
+  <%%= render current_component.new<%= preview_signature %> %>
 </div>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# @component "ui/button"
+class SolidusAdmin::UI::Button::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  # @param text text
+  def overview(text: "Button")
+    render_with_template locals: { text: text }
+  end
+
+  # @param size select { choices: [s, m, l] }
+  # @param scheme select { choices: [primary, secondary, ghost] }
+  # @param text text
+  def playground(size: :m, scheme: :primary, text: "Button")
+    render component("ui/button").new(size: size, scheme: scheme, text: text)
+  end
+end

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

@@ -0,0 +1,27 @@
+<% current_component::SCHEMES.keys.each do |scheme| %>
+  <div class="mb-8">
+    <h6 class="text-gray-500 mb-3 mt-0">
+      <%= scheme.to_s.humanize %>
+    </h6>
+
+    <table>
+      <tr>
+        <td></td>
+        <% current_component::SIZES.keys.each do |size| %>
+          <td class="px-3 py-1 text-gray-500 text-center text-[16px]"><%= size.to_s.humanize %></td>
+        <% end %>
+      </tr>
+      <% %i[default disabled].each do |state| %>
+        <tr>
+          <td class="font-bold px-3 py-1"><%= state.to_s.humanize %></td>
+          <% current_component::SIZES.keys.each do |size| %>
+            <td class="px-3 py-1 text-center">
+              <%= render current_component.new(size: size, scheme: scheme, text: text, disabled: state == :disabled) %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+    </table>
+
+  </div>
+<% end %>

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

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

admin/spec/generator/solidus_admin/component_generator_spec.rb

@@ -30,7 +30,7 @@
         .and include(%{# @param baz text})
 
       expect(engine_path('spec/components/previews/solidus_admin/ui/foo/component_preview/overview.html.erb').read)
-        .to include(%{<%= render component.new(bar: "bar", baz: "baz") %>})
+        .to include(%{<%= render current_component.new(bar: "bar", baz: "baz") %>})
     end
   end