Guillem Arias Fauste 78c3331360 feat(design-system): DS::Disclosure :card variant + migrate 14 provider items (#1715 §6) (#1855) ...

* feat(design-system): DS::Disclosure :card variant + migrate 14 provider items

Resolves part of #1715 §6. The provider-item view templates
(binance, brex, coinbase, coinstats, enable_banking, ibkr,
indexa_capital, kraken, lunchflow, mercury, plaid, simplefin,
snaptrade, sophtron — 14 in total) all hand-rolled the same
`<details open class="group bg-container p-4 shadow-border-xs
rounded-xl">` shell with a custom summary inside and content below.

Extend `DS::Disclosure` with a `:card` variant that bakes the card
chrome onto the `<details>` element itself; the summary becomes
slot-driven via the existing `summary_content` slot. Provider items
keep their custom summary content (logos, brand colors, status copy)
unchanged — they just hand it to the slot instead of writing it
between `<summary>` tags.

API:

  DS::Disclosure.new(variant: :card, open: true) do |d|
    d.with_summary_content do
      <div class="flex items-center gap-2">
        chevron + custom summary markup
      </div>
    end
    body content
  end

While here:

- Drop the no-op `group-open:transform` from the default chevron
  (Tailwind v4 applies `rotate-90` directly).
- Add `motion-safe:transition-transform motion-safe:duration-150`
  to chevron rotation for reduced-motion respect (matches the
  pattern landing in #1841).
- Extract `summary_classes` / `details_classes` helpers so the
  default and card surfaces stay readable side-by-side.

Note: this PR touches `DS::Disclosure` and will textually conflict
with #1841 (focus-ring + reduced-motion polish). Both changes are
compatible — when #1841 merges first, the resolution is just
preserving both edits (the focus-ring classes are already merged
into `summary_classes` here).

* fix(review): use ring-alpha-black-300 focus token in DS::Disclosure

CodeRabbit P2: switch the focus-visible outline from raw
gray-900/white palette values to the alpha-black-300 ring token,
matching the established focus pattern on settings/provider_card.html.erb.
This keeps theme behavior centralized in the design system tokens
instead of branching on theme-dark: in the component.

Applies to both :default and :card summary variants.

* fix(review): stretch DS::Disclosure summary_content to full width

Codex P2 follow-up on the disclosure-migration stack: \`<summary>\` is
\`display: list-item\`, so a flex inner div inside the slot
shrink-wraps to content width — any \`justify-between\` the caller
adds has nothing to distribute, and the right-side admin actions
collapse toward the title across every provider-item partial migrated
to \`DS::Disclosure variant: :card\` in #1855 (and the panels in
#1856 / #1857 / #1858 that inherit this component).

Wrap the slot in \`<div class=\"w-full\">\` so caller-supplied flex
rows stretch across the card. \`:default\` variant is unchanged
(it never uses \`summary_content\`).

2026-05-21 12:56:02 +02:00

..

_coinstats_item.html.erb

feat(design-system): DS::Disclosure :card variant + migrate 14 provider items (#1715 §6) (#1855)

2026-05-21 12:56:02 +02:00

new.html.erb

refactor(design-system): migrate 38 hand-rolled provider buttons to DS::Button / DS::Link (#1715 §5 part B) (#1860)

2026-05-20 18:15:15 +02:00