Module: ViewComponent::TypographyComponent

Included in:
UiHelper
Defined in:
app/helpers/view_component/typography_component.rb

Constant Summary collapse

HEADING_SIZE = 
{
  'xs' => 'text-base font-semibold',
  'sm' => 'text-lg font-semibold',
  'md' => 'text-xl font-semibold',
  'lg' => 'text-2xl font-semibold',
  'xl' => 'text-3xl font-semibold'
}.freeze

Instance Method Summary collapse

Instance Method Details

#h1_component(text: '', html_options: {}) ⇒ Object 



36
37
38
39
40
41
 
# File 'app/helpers/view_component/typography_component.rb', line 36

def h1_component(text: '', html_options: {})
  render partial: 'view_components/typography/h1_component', locals: {
    text:,
    html_options: merge_class(html_options, ['heading-3xl'])
  }
end

#h2_component(text: '', html_options: {}) ⇒ Object 



43
44
45
46
47
48
 
# File 'app/helpers/view_component/typography_component.rb', line 43

def h2_component(text: '', html_options: {})
  render partial: 'view_components/typography/h2_component', locals: {
    text:,
    html_options: merge_class(html_options, ['heading-2xl'])
  }
end

#h3_component(text: '', html_options: {}) ⇒ Object 



50
51
52
53
54
55
 
# File 'app/helpers/view_component/typography_component.rb', line 50

def h3_component(text: '', html_options: {})
  render partial: 'view_components/typography/h3_component', locals: {
    text:,
    html_options: merge_class(html_options, ['heading-xl'])
  }
end

#heading_component(text:, size: 'md') ⇒ Object

Parameters:

  • size (defaults to: 'md') —

    • xs, sm, md, lg, xl



26
27
28
29
30
31
32
33
34
 
# File 'app/helpers/view_component/typography_component.rb', line 26

def heading_component(text:, size: 'md')
  raise 'BlankValue - heading cannot be blank' if text.blank?
  raise 'IncorrectValue - incorrect size value' unless %w[xs sm md lg xl].include?(size)

  render partial: 'view_components/typography/heading_component', locals: {
    text:,
    css: HEADING_SIZE[size]
  }
end

#link_component(text:, url: '#', target: '_self', html_options: {}) ⇒ Object

Parameters:

  • text —

    • text to be displayed

  • url (defaults to: '#') —

    • url to be linked

  • target (defaults to: '_self') —

    • _blank, _self, _parent, _top, framename

  • html_options (defaults to: {}) —

    • additional html options



72
73
74
75
76
77
78
79
80
81
 
# File 'app/helpers/view_component/typography_component.rb', line 72

def link_component(text:, url: '#', target: '_self', html_options: {})
  raise 'BlankValue - text cannot be blank' if text.blank?

  link_css = ['main-text-sm-normal', 'underline', 'text-primary', 'hover:text-primary-light']
  render partial: 'view_components/typography/link_component', locals: {
    text:,
    url:,
    html_options: merge_class(html_options, link_css).merge(target: target)
  }
end

#link_text_component(text, link, html_options = {}) ⇒ Object 



17
18
19
20
21
22
23
 
# File 'app/helpers/view_component/typography_component.rb', line 17

def link_text_component(text, link, html_options = {})
  render partial: 'view_components/typography/linked_text_component', locals: {
    text:,
    link:,
    html_options:
  }
end

#merge_class(options, class_names) ⇒ Object 



13
14
15
 
# File 'app/helpers/view_component/typography_component.rb', line 13

def merge_class(options, class_names)
  options.merge(class: [*class_names, options[:class]].compact.join(' '))
end

#text_component(text: '', tag: 'span', html_options: {}) ⇒ Object

Parameters:

  • text (defaults to: '') —

    • text to be displayed

  • tag (defaults to: 'span') —

    • span, p, div

  • html_options (defaults to: {}) —

    • additional html options including css classes



60
61
62
63
64
65
66
 
# File 'app/helpers/view_component/typography_component.rb', line 60

def text_component(text: '', tag: 'span', html_options: {})
  render partial: 'view_components/typography/text_component', locals: {
    text:,
    tag:,
    html_options: merge_class(html_options, ['general-text-md-normal'])
  }
end