mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
ec023cfe71
DS::SelectableCard — a checkbox rendered as a selectable card (whole card toggles; brand-accent border + bg-surface when selected via peer-checked on the sibling). Submits like a normal checkbox, so the bucket's replace-all form is unchanged. Lookbook preview + component test. Retirement bucket now renders each account as a DS::SelectableCard (name · type · balance) instead of a bare checkbox row. Money stays privacy-sensitive.
15 lines
766 B
Plaintext
15 lines
766 B
Plaintext
<label class="block cursor-pointer">
|
|
<%= check_box_tag name, value, checked, class: "peer sr-only", **opts %>
|
|
<div class="flex items-center justify-between gap-3 rounded-xl border-2 border-secondary bg-surface-inset p-4 transition-colors peer-checked:border-primary peer-checked:bg-surface peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-gray-400">
|
|
<div class="min-w-0">
|
|
<p class="text-primary text-sm font-medium truncate"><%= title %></p>
|
|
<% if subtitle %>
|
|
<p class="text-secondary text-xs truncate"><%= subtitle %></p>
|
|
<% end %>
|
|
</div>
|
|
<% if amount %>
|
|
<span class="text-primary text-sm tabular-nums shrink-0 privacy-sensitive"><%= amount %></span>
|
|
<% end %>
|
|
</div>
|
|
</label>
|