Add a ui/panel component

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

@@ -0,0 +1,36 @@
+<div
+  class="
+    bg-white
+    rounded-lg
+    shadow-sm
+    border
+    border-gray-100
+    flex-col
+    justify-start
+    items-start
+    gap-6
+    inline-flex
+    w-full
+    py-6
+  "
+  data-controller="<%= stimulus_id %>"
+>
+  <% if @title %>
+    <h6 class="mt-0 px-6 w-full">
+      <span class="body-title"><%= @title %></span>
+      <%= render component('ui/toggletip').new(guide: @title_hint, position: :left) if @title_hint %>
+    </h6>
+  <% end %>
+
+  <% if content? %>
+    <div class="px-6 w-full">
+      <%= content %>
+    </div>
+  <% end %>
+
+  <% if @actions %>
+    <div class="flex gap-2 items-center border-t border-gray-100 px-6 pt-6 w-full">
+      <%= @actions %>
+    </div>
+  <% end %>
+</div>

admin/app/components/solidus_admin/ui/panel/component.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['output']
+
+  typed(event) {
+    this.text = event.currentTarget.value
+    this.render()
+  }
+
+  render() {
+    this.outputTarget.innerText = this.text
+  }
+}

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
+  # @param title [String] the title of the panel
+  # @param title_hint [String] the title hint of the panel
+  # @param actions [String] the rendered html for the actions section
+  # @block content [String] the rendered html for the content section
+  def initialize(title: nil, title_hint: nil, actions: nil)
+    @title = title
+    @title_hint = title_hint
+    @actions = actions
+  end
+end

admin/app/components/solidus_admin/ui/panel/component.yml

@@ -0,0 +1,4 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  hello: "Hello world!"

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

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

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

@@ -0,0 +1,59 @@
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Content only
+  </h6>
+
+  <%= render current_component.new do %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With title
+  </h6>
+
+  <%= render current_component.new(title: "SEO") do %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With title and hint
+  </h6>
+
+  <%= render current_component.new(title: "SEO", title_hint: "Search Engine Optimization") do %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With title, hint, and actions
+  </h6>
+
+  <%= render current_component.new(title: "SEO", title_hint: "Search Engine Optimization", actions: "foo action") do %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With no content
+  </h6>
+
+  <%= render current_component.new(title: "SEO", title_hint: "Search Engine Optimization", actions: "foo action") %>
+</div>

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

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