mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
78c3331360
* 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\`).
49 lines
1.8 KiB
Ruby
49 lines
1.8 KiB
Ruby
class DS::Disclosure < DesignSystemComponent
|
|
renders_one :summary_content
|
|
|
|
VARIANTS = %i[default card].freeze
|
|
|
|
attr_reader :title, :align, :open, :variant, :opts
|
|
|
|
# `:default` — bg-surface summary, no chrome on the `<details>`. Use
|
|
# for inline expanders inside a parent card.
|
|
#
|
|
# `:card` — `<details>` itself becomes a `bg-container shadow-border-xs
|
|
# rounded-xl` card; the summary inherits the container (no own bg).
|
|
# Use for provider-item rows (binance, lunchflow, plaid, etc.) where
|
|
# each card is the surface and the summary is custom rich content.
|
|
# Callers in `:card` mode should pass their own `summary_content`
|
|
# slot; the built-in title rendering assumes the `:default` shape.
|
|
def initialize(title: nil, align: "right", open: false, variant: :default, **opts)
|
|
@title = title
|
|
@align = align.to_sym
|
|
@open = open
|
|
@variant = variant.to_sym
|
|
@opts = opts
|
|
|
|
raise ArgumentError, "Invalid variant: #{@variant}. Must be one of #{VARIANTS.inspect}" unless VARIANTS.include?(@variant)
|
|
end
|
|
|
|
def details_classes
|
|
case variant
|
|
when :card
|
|
"group bg-container p-4 shadow-border-xs rounded-xl"
|
|
else
|
|
"group"
|
|
end
|
|
end
|
|
|
|
def summary_classes
|
|
case variant
|
|
when :card
|
|
# Card variant: no bg on summary — the parent details *is* the
|
|
# surface. Keep cursor + focus-visible ring + flex baseline.
|
|
# Ring token matches `settings/provider_card.html.erb` (the
|
|
# established focus pattern on container cards).
|
|
"list-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-300 rounded-xl"
|
|
else
|
|
"px-3 py-2 rounded-xl cursor-pointer flex items-center justify-between bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-300"
|
|
end
|
|
end
|
|
end
|