SquatchMail.Web.Components (SquatchMail v0.1.0)

Copy Markdown View Source

Shared design-system components for SquatchMail dashboard pages: badges, stat cards, the live indicator, and empty states. Every visual rule here traces back to a rule in DESIGN.md — see that file before changing colors, radii, or copy.

Summary

Functions

empty_state(assigns)

A big-footprint empty state with field-journal copy, per DESIGN.md.

live_indicator(assigns)

The pulsing "TRACKING LIVE" indicator shown in page headers.

stat_card(assigns)

One compact "Field Report" stat card: a mono label, a mono number, and an optional delta vs. the prior period.

stat_strip(assigns)

The five-card "Field Report" stat strip: Sightings (sent), Delivery rate, Open rate, Click rate, Bounce rate.

status_badge(assigns)

A status badge. One CSS class per status per DESIGN.md — never color alone conveys status; the text label is always rendered.

Functions

empty_state(assigns)

A big-footprint empty state with field-journal copy, per DESIGN.md.

Attributes

  • title (:string) (required)
  • copy (:string) (required)

live_indicator(assigns)

The pulsing "TRACKING LIVE" indicator shown in page headers.

stat_card(assigns)

One compact "Field Report" stat card: a mono label, a mono number, and an optional delta vs. the prior period.

Attributes

  • label (:string) (required)
  • value (:string) (required)
  • delta (:string) - Defaults to nil.
  • delta_direction (:atom) - Defaults to nil.Must be one of nil, :up, or :down.

stat_strip(assigns)

The five-card "Field Report" stat strip: Sightings (sent), Delivery rate, Open rate, Click rate, Bounce rate.

Attributes

  • sightings (:string) (required)
  • delivery_rate (:string) (required)
  • open_rate (:string) (required)
  • click_rate (:string) (required)
  • bounce_rate (:string) (required)

status_badge(assigns)

A status badge. One CSS class per status per DESIGN.md — never color alone conveys status; the text label is always rendered.

Attributes

  • status (:string) (required)