[Admin] Add order/show/summary component

admin/app/components/solidus_admin/ui/details_list/component.html.erb

@@ -0,0 +1,10 @@
+<div class="<%= stimulus_id %>">
+  <ul class="text-sm">
+    <% @items.each do |item| %>
+      <li class="flex justify-between py-2 <%= item[:class] %>">
+        <span><%= item[:label] %></span>
+        <span><%= item[:value] %></span>
+      </li>
+    <% end %>
+  </ul>
+</div>

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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::DetailsList::Component < SolidusAdmin::BaseComponent
+  def initialize(items:)
+    @items = items
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# @component "ui/details_list"
+class SolidusAdmin::UI::DetailsList::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param items select { choices: [[Order details, './data/example1.json'], [Product details, './data/example2.json'], [Account details, './data/example3.json']] }
+  def playground(items: './data/example1.json')
+    parsed_items = JSON.parse(
+      File.read(File.join(__dir__, items)),
+      symbolize_names: true
+    )
+
+    render current_component.new(items: parsed_items)
+  end
+end

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

@@ -0,0 +1,10 @@
+<%= render current_component.new(
+  items: [
+    { label: 'Subtotal', value: '€90.00', class: 'font-semibold' },
+    { label: 'Taxes', value: '€0.00' },
+    { label: 'Shipping', value: '€0.00' },
+    { label: link_to('Add promo code', '#', class: "body-link"), value: '€0.00' },
+    { label: link_to('Adjustments', '#', class: "body-link"), value: '€0.00' },
+    { label: 'Total', value: '€90.00', class: 'font-semibold' }
+  ]
+) %>

admin/spec/components/previews/solidus_admin/ui/details_list/data/example1.json

@@ -0,0 +1,6 @@
+[
+  { "label": "Subtotal", "value": "€120.00", "class": "font-semibold" },
+  { "label": "Discount", "value": "€20.00", "class": "text-red-500" },
+  { "label": "Shipping", "value": "€5.00" },
+  { "label": "Total", "value": "€105.00", "class": "font-bold" }
+]

admin/spec/components/previews/solidus_admin/ui/details_list/data/example2.json

@@ -0,0 +1,6 @@
+[
+  { "label": "Weight", "value": "2kg" },
+  { "label": "Dimensions", "value": "10x20x30 cm" },
+  { "label": "Color", "value": "Red", "class": "text-red-500" },
+  { "label": "Material", "value": "Aluminum" }
+]

admin/spec/components/previews/solidus_admin/ui/details_list/data/example3.json

@@ -0,0 +1,6 @@
+[
+  { "label": "Name", "value": "John Doe" },
+  { "label": "Membership", "value": "Gold", "class": "font-semibold" },
+  { "label": "Points", "value": "1500" },
+  { "label": "Account Status", "value": "Deactivated", "class": "text-red-500" }
+]

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

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