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>' : ''

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

#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' : ''

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

#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>" : ''

  <<~HTML
    <div class="otto-card">
      #{title_html}
      #{content}
    </div>
  HTML
end

#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 = '')
  <<~HTML
    <div class="otto-code-block">
      <pre><code class="language-#{language}">#{escape_html(code)}</code></pre>
    </div>
  HTML
end

#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)}")

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

#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"' : ''

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

#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 = '')
  <<~HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>#{escape_html(title)}</title>
        #{otto_styles}
        #{additional_head}
    </head>
    <body>
        <div class="otto-container">
            #{content}
        </div>
    </body>
    </html>
  HTML
end

#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' : ''

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