Module: Otto::DesignSystem

Defined in:
lib/otto/design_system.rb

Instance Method Summary collapse

Instance Method Details

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



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

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 



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

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, &block) ⇒ Object 



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

def otto_card(title = nil, &block)
  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 



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

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 



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

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 



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

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

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



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

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 



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

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