Module: Protege::Components::BadgesHelper

Included in:
ComponentsHelper
Defined in:
app/helpers/protege/components/badges_helper.rb

Overview

Compact status indicators: the pill badge and the labelled status_dot. Both take a semantic color and resolve it through the badge_colors / dot_colors maps defined alongside them, so the palette lives with the components that use it.

Instance Method Summary collapse

Instance Method Details

#badge(text, color = :gray, size: :md) ⇒ ActiveSupport::SafeBuffer

Render a small pill badge tinted by semantic color.

Parameters:

  • text (String) —

    the badge label

  • color (Symbol) (defaults to: :gray) —

    the semantic color (see badge_colors)

  • size (Symbol) (defaults to: :md) —

    :md (default) or :sm for a tinier pill (see badge_size)

Returns:

  • (ActiveSupport::SafeBuffer) —

    the badge markup



15
16
17
18
19
 
# File 'app/helpers/protege/components/badges_helper.rb', line 15

def badge(text, color = :gray, size: :md)
  _, fg = badge_colors(color)
  tag.span(text, class: "inline-flex items-center rounded font-medium #{badge_size(size)} #{fg}",
                 style: 'background: var(--surface-subtle); border: 1px solid var(--border)')
end

#badge_colors(color) ⇒ Array(nil, String)

Map a semantic badge color to its [background, foreground] classes.

Parameters:

  • color (Symbol) —

    the semantic color

Returns:

  • (Array(nil, String)) —

    the background and foreground class pair



33
34
35
36
37
38
39
40
 
# File 'app/helpers/protege/components/badges_helper.rb', line 33

def badge_colors(color)
  case color
  when :green  then [nil, 'text-green-600']
  when :red    then [nil, 'text-red-600']
  when :yellow then [nil, 'text-yellow-600']
  else              [nil, '']
  end
end

#badge_size(size) ⇒ String

Map a badge size to its padding + text-size classes.

Parameters:

  • size (Symbol) —

    :sm or :md

Returns:

  • (String) —

    the sizing classes



25
26
27
 
# File 'app/helpers/protege/components/badges_helper.rb', line 25

def badge_size(size)
  size == :sm ? 'px-1 py-px text-[10px]' : 'px-1.5 py-0.5 text-xs'
end

#dot_colors(color) ⇒ String

Map a semantic status color to its dot background class.

Parameters:

  • color (Symbol) —

    the semantic color

Returns:

  • (String) —

    the Tailwind background class for the dot



58
59
60
61
62
63
64
65
 
# File 'app/helpers/protege/components/badges_helper.rb', line 58

def dot_colors(color)
  case color
  when :green  then 'bg-green-600'
  when :red    then 'bg-red-600'
  when :yellow then 'bg-yellow-600'
  else              'bg-gray-500'
  end
end

#status_dot(text, color = :gray) ⇒ ActiveSupport::SafeBuffer

Render a colored status dot followed by its label.

Parameters:

  • text (String) —

    the status label

  • color (Symbol) (defaults to: :gray) —

    the semantic color (see dot_colors)

Returns:

  • (ActiveSupport::SafeBuffer) —

    the status-dot markup



47
48
49
50
51
52
 
# File 'app/helpers/protege/components/badges_helper.rb', line 47

def status_dot(text, color = :gray)
  dot_color = dot_colors(color)
  tag.span(class: 'inline-flex items-center gap-1.5 text-xs', style: 'color: var(--text-muted)') do
    tag.span('', class: "h-1.5 w-1.5 rounded-full #{dot_color}") + text
  end
end