Reimplement the pagination as ui/button components

- Switch some ARIA attributes to semantic HTML
  - added `rel="prev"` and `rel="next"`
  - added text visible only to screen-readers
  - use aria-disabled

admin/app/components/solidus_admin/ui/table/pagination/component.html.erb

@@ -1,29 +1,24 @@
-<div>
-  <nav aria-label="pagination">
-    <ul class="flex items-center">
-      <li>
-        <% if @prev_link.blank? %>
-          <span class="<%= link_classes(rounded: :left) %>", "aria-label"=<%= t(".prev") %>, "aria-disabled"=true>
-            <%= icon_tag("arrow-left-s-line", class: "fill-current text-grey-400 w-5 h-5") %>
-          </span>
-        <% else %>
-          <%= link_to @prev_link, class: link_classes(rounded: :left), "aria-label" => t(".prev") do %>
-            <%= icon_tag("arrow-left-s-line", class: "w-5 h-5") %>
-          <% end %>
-        <% end %>
-      </li>
-
-      <li>
-        <% if @next_link.blank? %>
-          <span class="<%= link_classes(rounded: :right) %>", "aria-label"=<%= t(".next") %>, "aria-disabled"=true>
-            <%= icon_tag("arrow-right-s-line", class: "fill-current text-grey-400 w-5 h-5") %>
-          </span>
-        <% else %>
-          <%= link_to @next_link, class: link_classes(rounded: :right), "aria-label" => t(".next") do %>
-            <%= icon_tag("arrow-right-s-line", class: "w-5 h-5") %>
-          <% end %>
-        <% end %>
-      </li>
-    </ul>
-  </nav>
-</div>
+<nav aria-label="pagination" class="flex items-center">
+  <%= render component('ui/button').new(
+    icon: 'arrow-left-s-line',
+    class: 'rounded-tr-none rounded-br-none border-r-0',
+    scheme: :secondary,
+    size: :s,
+    tag: :a,
+    href: @prev_link,
+    'aria-disabled': @prev_link.blank?,
+    rel: 'prev',
+    text: content_tag(:span, t('.previous'), class: 'sr-only'),
+  ) -%>
+  <%= render component('ui/button').new(
+    icon: 'arrow-right-s-line',
+    class: 'rounded-tl-none rounded-bl-none',
+    scheme: :secondary,
+    size: :s,
+    tag: :a,
+    href: @next_link,
+    'aria-disabled': @next_link.blank?,
+    rel: 'next',
+    text: content_tag(:span, t('.next'), class: 'sr-only'),
+  ) %>
+</nav>

admin/app/components/solidus_admin/ui/table/pagination/component.rb

@@ -11,30 +11,4 @@ def initialize(prev_link: nil, next_link: nil)
   def render?
     @prev_link.present? || @next_link.present?
   end
-
-  def link_classes(rounded: nil)
-    classes = %w[
-      flex
-      items-center
-      justify-center
-      px-2
-      h-10
-      ml-0
-      leading-tight
-      text-gray-500
-      bg-white
-      border
-      border-gray-300
-      hover:bg-gray-100
-      hover:text-gray-700
-      dark:bg-gray-800
-      dark:border-gray-700
-      dark:text-gray-400
-      dark:hover:bg-gray-700
-      dark:hover:text-white
-    ]
-    classes << 'rounded-l-lg' if rounded == :left
-    classes << 'rounded-r-lg' if rounded == :right
-    classes.join(' ')
-  end
 end

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

@@ -18,6 +18,10 @@ def playground(size: :m, scheme: :primary, text: "Button", icon: 'search-line')
     render component("ui/button").new(size: size, scheme: scheme, text: text, icon: icon.presence)
   end
 
+  def group
+    render_with_template
+  end
+
   private
 
   def icon_options

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

@@ -0,0 +1,18 @@
+<%= render current_component.new(
+  tag: :a,
+  rel: 'prev',
+  href: '#',
+  icon: 'arrow-left-s-line',
+  class: 'rounded-tr-none rounded-br-none border-r-0',
+  scheme: :secondary,
+  size: :s
+) -%>
+<%= render current_component.new(
+  tag: :a,
+  rel: 'next',
+  icon: 'arrow-right-s-line',
+  class: 'rounded-tl-none rounded-bl-none',
+  scheme: :secondary,
+  size: :s,
+  'aria-disabled': true
+) %>

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

@@ -3,7 +3,9 @@
 require "spec_helper"
 
 RSpec.describe SolidusAdmin::UI::Button::Component, type: :component do
-  it "renders the overview preview" do
+  it "renders previews" do
+    render_preview(:playground)
     render_preview(:overview)
+    render_preview(:group)
   end
 end