Class: Pulse::Button

Inherits:
Component
  • Object
show all
Defined in:
app/components/pulse/button.rb

Overview

Renders a button or link button

Constant Summary collapse

DEFAULT_SCHEME = 
:secondary
SCHEME_MAPPINGS = 
{
  primary: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
           'pulse-bg-green-700 pulse-text-white hover:pulse-bg-green-800 ' \
           'focus-visible:pulse-bg-green-800 hover:pulse-text-white ' \
           'focus-visible:pulse-text-white ' \
           'focus-visible:pulse-shadow-btn-inset',
  secondary: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
             'pulse-bg-gray-50 pulse-text-gray hover:pulse-bg-gray-100 ' \
             'focus-visible:pulse-bg-gray-100',
  danger: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
          'pulse-bg-gray-50 pulse-text-danger-800 ' \
          'hover:pulse-bg-danger-800 focus-visible:pulse-bg-danger-800 ' \
          'hover:pulse-text-white focus-visible:pulse-text-white ' \
          'focus-visible:pulse-shadow-btn-inset'
}.freeze
SCHEME_OPTIONS = 
SCHEME_MAPPINGS.keys
DEFAULT_SIZE = 
:md
SIZE_MAPPINGS = 
{
  xs: 'pulse-text-xs pulse-leading-5 pulse-font-medium pulse-py-0.5 ' \
      'pulse-px-4',
  sm: 'pulse-text-sm pulse-font-medium pulse-py-1 pulse-px-5',
  md: 'pulse-text-base pulse-font-bold pulse-py-1.5 pulse-px-6'
}.freeze
SIZE_OPTIONS = 
SIZE_MAPPINGS.keys

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(label: nil, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, url: nil, button_to: false, disabled: false, **kwargs) ⇒ Button

Returns a new instance of Button.



56
57
58
59
60
61
62
63
64
65
66
 
# File 'app/components/pulse/button.rb', line 56

def initialize(label: nil, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE,
               url: nil, button_to: false, disabled: false, **kwargs)
  @kwargs = kwargs
  @label = label
  @scheme = scheme
  @url = url
  @size = size
  @button_to_helper = button_to
  @disabled = disabled
  @tag = kwargs.fetch(:tag, :button)
end

Instance Attribute Details

#button_to_helper ⇒ Object (readonly)

Returns the value of attribute button_to_helper.



6
7
8
 
# File 'app/components/pulse/button.rb', line 6

def button_to_helper
  @button_to_helper
end

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



6
7
8
 
# File 'app/components/pulse/button.rb', line 6

def disabled
  @disabled
end

#kwargs ⇒ Object (readonly)

Returns the value of attribute kwargs.



6
7
8
 
# File 'app/components/pulse/button.rb', line 6

def kwargs
  @kwargs
end

#label ⇒ Object (readonly)

Returns the value of attribute label.



6
7
8
 
# File 'app/components/pulse/button.rb', line 6

def label
  @label
end

#tag ⇒ Object (readonly)

Returns the value of attribute tag.



6
7
8
 
# File 'app/components/pulse/button.rb', line 6

def tag
  @tag
end

#url ⇒ Object (readonly)

Returns the value of attribute url.



6
7
8
 
# File 'app/components/pulse/button.rb', line 6

def url
  @url
end

Instance Method Details

#btn_class ⇒ Object 



83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
# File 'app/components/pulse/button.rb', line 83

def btn_class
  merge_classes(
    'pulse-appearance-none pulse-inline-flex pulse-justify-center',
    'pulse-items-center pulse-rounded-md pulse-no-underline',
    'hover:pulse-no-underline focus-visible:pulse-no-underline',
    'focus-visible:-pulse-outline-offset-2',
    'focus-visible:pulse-outline-[2px] focus-visible:pulse-outline-solid',
    'focus-visible:pulse-outline-[var(--pulse-focus-outlineColor)]',
    'disabled:pulse-opacity-25 disabled:pulse-cursor-not-allowed',
    SIZE_MAPPINGS[@size],
    SCHEME_MAPPINGS[@scheme],
    kwargs.fetch(:classes, '')
  )
end

#call ⇒ Object 



129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
# File 'app/components/pulse/button.rb', line 129

def call
  if button_to_helper
    raise(ArgumentError, 'URL is required') if url.blank?

    @options = options.merge(disabled:) if disabled
    render_button_to
  elsif url.present?
    if disabled
      @options = options.merge(disabled:) if disabled
      render_button
    else
      render_link
    end
  else
    @options = options.merge(disabled:) if disabled
    render_button
  end
end

#options ⇒ Object 



68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
# File 'app/components/pulse/button.rb', line 68

def options
  @options ||= begin
    values = kwargs.except(:style, :tag, :label, :url, :size, :classes)

    if tag == :button && url.blank?
      # Default button to "type" to prevent the HTML5 default "submit"
      # behavior
      # See: https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms
      values = values.merge(type: kwargs.fetch(:type, 'button'))
    end

    values.merge(class: btn_class)
  end
end

#render_button ⇒ Object 



106
107
108
109
110
111
112
113
114
 
# File 'app/components/pulse/button.rb', line 106

def render_button
  if label.present?
    content_tag(tag, helpers.safe_join([leading_visual, label]), options)
  else
    content_tag(tag, options) do
      helpers.safe_join([leading_visual, content])
    end
  end
end

#render_button_to ⇒ Object 



116
117
118
119
120
121
122
123
124
125
126
127
 
# File 'app/components/pulse/button.rb', line 116

def render_button_to
  form_class = options[:form_class] || 'contents'

  if label.present?
    button_to(helpers.safe_join([leading_visual, label]), url,
              options.merge(form_class:))
  else
    button_to(url, options.merge(form_class:)) do
      helpers.safe_join([leading_visual, content])
    end
  end
end

#render_link ⇒ Object 



98
99
100
101
102
103
104
 
# File 'app/components/pulse/button.rb', line 98

def render_link
  if label.present?
    link_to(helpers.safe_join([leading_visual, label]), url, options)
  else
    link_to(url, options) { helpers.safe_join([leading_visual, content]) }
  end
end