mirror of
https://github.com/we-promise/sure.git
synced 2026-07-12 04:45:19 +00:00
a3d6a7aede
Ships DS::EmptyState — a centered icon / title / optional description /
optional action-slot state — plus a preview, tests, and an exemplar migration
of the recurring-transactions empty screen.
Consolidates the repeated `text-center py-12 + icon + title + description + CTA`
markup across the empty / no-data screens (recurring, imports, statements,
exports, and several connector setups). The audit flagged the self-hosted
feature-disabled pages rendering bare unstyled top-left text ("reads as a 500,
not a state") — wiring those through this primitive is the follow-up.
- app/components/DS/empty_state.rb: render DS::EmptyState.new(icon:, title:,
description:) with an optional `with_action` slot for the CTA.
- Migrate recurring_transactions/index empty branch.
Tests + rubocop + erb_lint clean.
Deferred: the remaining ~10 empty screens + the bare-text feature-disabled
states — same primitive, one migration each.
34 lines
1.3 KiB
Ruby
34 lines
1.3 KiB
Ruby
class DS::EmptyState < DesignSystemComponent
|
|
# Centered empty / no-data / disabled state: icon, title, optional
|
|
# description, optional action slot. Replaces the repeated
|
|
# `text-center py-12 + icon + title + description + CTA` markup across the
|
|
# empty screens (#2137), and gives the bare-text feature-disabled pages a real
|
|
# state instead of unstyled top-left text.
|
|
#
|
|
# <%= render DS::EmptyState.new(icon: "repeat", title: "...", description: "...") do |es| %>
|
|
# <% es.with_action do %><%= render DS::Link.new(...) %><% end %>
|
|
# <% end %>
|
|
renders_one :action
|
|
|
|
def initialize(icon:, title:, description: nil, icon_size: "xl", **opts)
|
|
@icon = icon
|
|
@title = title
|
|
@description = description
|
|
@icon_size = icon_size
|
|
@opts = opts
|
|
end
|
|
|
|
erb_template <<~ERB
|
|
<%= content_tag :div,
|
|
class: class_names("flex flex-col items-center text-center px-4 py-12", @opts[:class]),
|
|
**@opts.except(:class) do %>
|
|
<div class="mb-4"><%= helpers.icon(@icon, size: @icon_size) %></div>
|
|
<p class="text-primary font-medium mb-2"><%= @title %></p>
|
|
<% if @description.present? %>
|
|
<p class="<%= class_names("text-secondary text-sm max-w-md", ("mb-4" if action?)) %>"><%= @description %></p>
|
|
<% end %>
|
|
<% if action? %><div><%= action %></div><% end %>
|
|
<% end %>
|
|
ERB
|
|
end
|