mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
8de14ed2a5
* feat(design-system): add :inline variant + migrate indexa_capital + snaptrade panels Adds an `:inline` variant to `DS::Disclosure` for plain text-link-style toggles that have no surface, no padding, no shadow — the disclosure reads as a clickable summary text + revealed content, nothing more. Use case: "Alternative auth" form section toggle in the Indexa Capital provider panel; "Manage connections" lazy-loaded toggle in the Snaptrade provider panel. Both were the last raw-`<details>` callsites in `app/views/settings/providers/`. Migrations: - `_indexa_capital_panel.html.erb` — single inline `<details>` revealing username / document / password form fields under an "Alternative auth" summary text. - `_snaptrade_panel.html.erb` — lazy-load `<details>` with `data-controller="lazy-load"` etc. The new `tag.details ... **opts` forwarding from #1857 lets the Stimulus controller attrs flow through cleanly via DS::Disclosure's `data:` keyword. Chevron rotation on snaptrade gets the standard `motion-safe:transition-transform motion-safe:duration-150` treatment (was `transition-transform` without the motion-safe gate). Variant summary now: | Variant | Details surface | Use case | |---|---|---| | `:default` | none / bg-surface summary | inline expander inside parent card | | `:card` | `bg-container shadow-border-xs rounded-xl p-4` | provider rows, settings sections | | `:card_inset` | `bg-surface-inset rounded-xl p-4` | inset sub-panels | | `:inline` | no surface | text-link-style toggles | * fix(review): guard variant.to_sym against nil in DS::Disclosure CodeRabbit on #1858 flagged that `variant: nil` crashed with `NoMethodError` at `variant.to_sym` before the explicit `VARIANTS` check could run. Use safe navigation (`variant&.to_sym`) so nil falls through to the validation, and inspect `@variant` in the error message so nil / non-symbol inputs render readably. Verified manually via runner: `DS::Disclosure.new(variant: nil)` now raises `ArgumentError: Invalid variant: nil. Must be one of [:default, :card, :card_inset, :inline]`.
80 lines
3.2 KiB
Ruby
80 lines
3.2 KiB
Ruby
class DS::Disclosure < DesignSystemComponent
|
|
renders_one :summary_content
|
|
|
|
VARIANTS = %i[default card card_inset inline].freeze
|
|
|
|
attr_reader :title, :align, :open, :variant, :opts
|
|
|
|
# `:default` — bg-surface summary, no chrome on the `<details>`. Use
|
|
# for inline expanders that sit inside a parent card (the summary
|
|
# itself reads as the surface).
|
|
#
|
|
# `: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.
|
|
#
|
|
# `:card_inset` — `<details>` is `bg-surface-inset rounded-xl` (no
|
|
# shadow). Use for inset sub-panels inside a parent card surface
|
|
# (e.g. the IBKR flex-query "report details" panel embedded inside
|
|
# the IBKR settings flow). Same summary contract as `:card`.
|
|
#
|
|
# `:inline` — no surface, no padding, no shadow. The disclosure reads
|
|
# as a plain text-link-style toggle (e.g. "Alternative auth" inside
|
|
# a form, or a "Manage connections" lazy-load opener). Caller provides
|
|
# the summary text (and optional chevron) via the `summary_content`
|
|
# slot.
|
|
#
|
|
# In card / inline variants, callers 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.inspect}. Must be one of #{VARIANTS.inspect}" unless VARIANTS.include?(@variant)
|
|
end
|
|
|
|
def details_classes
|
|
base = case variant
|
|
when :card
|
|
"group bg-container p-4 shadow-border-xs rounded-xl"
|
|
when :card_inset
|
|
"group bg-surface-inset rounded-xl p-4"
|
|
else
|
|
"group"
|
|
end
|
|
|
|
class_names(base, opts[:class])
|
|
end
|
|
|
|
# `opts` minus the `:class` key, since `details_classes` merges that
|
|
# separately to avoid duplicate-keyword collisions when forwarding to
|
|
# `tag.details`.
|
|
def details_opts
|
|
opts.except(:class)
|
|
end
|
|
|
|
def summary_classes
|
|
case variant
|
|
when :card, :card_inset
|
|
# Card variants: 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"
|
|
when :inline
|
|
# Inline variant: no surface, no padding — the summary reads as
|
|
# plain text-link copy. Caller markup (text + optional chevron)
|
|
# provides the visual. Keep cursor + focus-visible ring + matching
|
|
# alpha-black-300 token used by the card variants for consistency.
|
|
"list-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-300 rounded-sm"
|
|
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
|