Module: Otto::DesignSystem

Defined in:
lib/otto/design_system.rb

Overview

Shared design system for Otto framework examples Provides consistent styling, components, and utilities

Instance Method Summary collapse

Instance Method Details

#otto_alert(type, title, message, dismissible: false) ⇒ Object 



69
70
71
72
73
74
75
76
77
78
79
 
# File 'lib/otto/design_system.rb', line 69

def otto_alert(type, title, message, dismissible: false)
  dismiss_btn = dismissible ? '<button class="otto-alert-dismiss" onclick="this.parentElement.remove()">×</button>' : ''

  "    <div class=\"otto-alert otto-alert-\#{type}\">\n      \#{dismiss_btn}\n      <h3 class=\"otto-alert-title\">\#{escape_html(title)}</h3>\n      <p class=\"otto-alert-message\">\#{escape_html(message)}</p>\n    </div>\n  HTML\nend\n"

#otto_button(text, type: 'submit', variant: 'primary', size: 'default') ⇒ Object 



59
60
61
62
63
64
65
66
67
 
# File 'lib/otto/design_system.rb', line 59

def otto_button(text, type: 'submit', variant: 'primary', size: 'default')
  size_class = size == 'small' ? 'otto-btn-sm' : ''

  "    <button type=\"\#{type}\" class=\"otto-btn otto-btn-\#{variant} \#{size_class}\">\n      \#{escape_html(text)}\n    </button>\n  HTML\nend\n"

#otto_card(title = nil) ⇒ Object 



81
82
83
84
85
86
87
88
89
90
91
 
# File 'lib/otto/design_system.rb', line 81

def otto_card(title = nil, &)
  content    = block_given? ? yield : ''
  title_html = title ? "<h2 class=\"otto-card-title\">#{escape_html(title)}</h2>" : ''

  "    <div class=\"otto-card\">\n      \#{title_html}\n      \#{content}\n    </div>\n  HTML\nend\n"

#otto_code_block(code, language = '') ⇒ Object 



103
104
105
106
107
108
109
 
# File 'lib/otto/design_system.rb', line 103

def otto_code_block(code, language = '')
  "    <div class=\"otto-code-block\">\n      <pre><code class=\"language-\#{language}\">\#{escape_html(code)}</code></pre>\n    </div>\n  HTML\nend\n"

#otto_input(name, type: 'text', placeholder: '', value: '', required: false) ⇒ Object 



29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
# File 'lib/otto/design_system.rb', line 29

def otto_input(name, type: 'text', placeholder: '', value: '', required: false)
  req_attr = required ? 'required' : ''
  val_attr = value.empty? ? '' : %(value="#{escape_html(value)}")

  "    <input\n      type=\"\#{type}\"\n      name=\"\#{name}\"\n      placeholder=\"\#{escape_html(placeholder)}\"\n      \#{val_attr}\n      \#{req_attr}\n      class=\"otto-input\"\n    />\n  HTML\nend\n"

#otto_link(text, href, external: false) ⇒ Object 



93
94
95
96
97
98
99
100
101
 
# File 'lib/otto/design_system.rb', line 93

def otto_link(text, href, external: false)
  target_attr = external ? 'target="_blank" rel="noopener noreferrer"' : ''

  "    <a href=\"\#{escape_html(href)}\" class=\"otto-link\" \#{target_attr}>\n      \#{escape_html(text)}\n    </a>\n  HTML\nend\n"

#otto_page(content, title = 'Otto Framework', additional_head = '') ⇒ Object 



9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
# File 'lib/otto/design_system.rb', line 9

def otto_page(content, title = 'Otto Framework', additional_head = '')
  "    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>\#{escape_html(title)}</title>\n        \#{otto_styles}\n        \#{additional_head}\n    </head>\n    <body>\n        <div class=\"otto-container\">\n            \#{content}\n        </div>\n    </body>\n    </html>\n  HTML\nend\n"

#otto_textarea(name, placeholder: '', value: '', rows: 4, required: false) ⇒ Object 



45
46
47
48
49
50
51
52
53
54
55
56
57
 
# File 'lib/otto/design_system.rb', line 45

def otto_textarea(name, placeholder: '', value: '', rows: 4, required: false)
  req_attr = required ? 'required' : ''

  "    <textarea\n      name=\"\#{name}\"\n      rows=\"\#{rows}\"\n      placeholder=\"\#{escape_html(placeholder)}\"\n      \#{req_attr}\n      class=\"otto-input\"\n    >\#{escape_html(value)}</textarea>\n  HTML\nend\n"