Module: Protege::Components::TypographyHelper

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

Overview

Text primitives: headings, muted hints, and verbatim/monospace blocks. Theme colors come from CSS custom properties (--text-faint, …) so type tracks light/dark mode via the single .dark toggle.

Instance Method Summary collapse

Instance Method Details

#body_text(text) ⇒ ActiveSupport::SafeBuffer

Render a block of verbatim body text — whitespace preserved, monospace — for content shown as-is, such as an email body or a persona's instructions. Escapes its input.

Parameters:

  • text (String) —

    the text to render

Returns:

  • (ActiveSupport::SafeBuffer) —

    the preformatted text block



46
47
48
 
# File 'app/helpers/protege/components/typography_helper.rb', line 46

def body_text(text)
  tag.div(text, class: 'text-sm whitespace-pre-wrap font-mono')
end

#code_block(text) ⇒ ActiveSupport::SafeBuffer

Render a short code snippet as a boxed, monospace chip — a config line or command shown inline in a page (e.g. an empty state). Sizes to its content, matching the badge surface/border styling. Click-to-copy: the data-copy marker wires it to copy.js (copies the text on click) and the matching CSS rule shows the copy cursor on hover. Escapes its input.

Parameters:

  • text (String) —

    the code to display

Returns:

  • (ActiveSupport::SafeBuffer) —

    the code-chip markup



57
58
59
60
61
 
# File 'app/helpers/protege/components/typography_helper.rb', line 57

def code_block(text)
  tag.code(text, class: 'inline-block rounded-md px-3 py-1.5 text-xs font-mono break-all',
                 data:  { copy: true },
                 style: 'background: var(--surface-subtle); border: 1px solid var(--border)')
end

#heading_1(text) ⇒ ActiveSupport::SafeBuffer

Render a level-1 heading.

Parameters:

  • text (String) —

    the heading text

Returns:

  • (ActiveSupport::SafeBuffer) —

    the <h1> markup



12
13
14
 
# File 'app/helpers/protege/components/typography_helper.rb', line 12

def heading_1(text)
  tag.h1(text, class: 'text-lg font-semibold')
end

#heading_2(text) ⇒ ActiveSupport::SafeBuffer

Render a level-2 heading styled as a muted, uppercase section label.

Parameters:

  • text (String) —

    the heading text

Returns:

  • (ActiveSupport::SafeBuffer) —

    the <h2> markup



20
21
22
 
# File 'app/helpers/protege/components/typography_helper.rb', line 20

def heading_2(text)
  tag.h2(text, class: 'text-xs font-semibold uppercase tracking-wider', style: 'color: var(--text-faint)')
end

#heading_3(text) ⇒ ActiveSupport::SafeBuffer

Render a level-3 heading.

Parameters:

  • text (String) —

    the heading text

Returns:

  • (ActiveSupport::SafeBuffer) —

    the <h3> markup



28
29
30
 
# File 'app/helpers/protege/components/typography_helper.rb', line 28

def heading_3(text)
  tag.h3(text, class: 'text-sm font-semibold')
end

#hint(text, classes: '') ⇒ ActiveSupport::SafeBuffer

Render a line of muted helper text — a caption, hint, or inline empty-state note.

Parameters:

  • text (String) —

    the hint text

  • classes (String) (defaults to: '')

Returns:

  • (ActiveSupport::SafeBuffer) —

    the muted paragraph markup



37
38
39
 
# File 'app/helpers/protege/components/typography_helper.rb', line 37

def hint(text, classes: '')
  tag.p(text, class: "text-xs #{classes}", style: 'color: var(--text-faint)')
end