Class: Uchi::Flowbite::Button

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/uchi/flowbite/button.rb,
app/components/uchi/flowbite/button/pill.rb,
app/components/uchi/flowbite/button/outline.rb

Overview

Renders a HTML button element.

See flowbite.com/docs/components/buttons/

All other parameters are optional and are passed directly to the button tag as HTML attributes.

Direct Known Subclasses

Outline, Pill

Defined Under Namespace

Classes: Outline, Pill

Constant Summary collapse

SIZES = 
{
  xs: ["text-xs", "px-3", "py-1.5"],
  sm: ["text-sm", "px-3", "py-2"],
  default: ["text-sm", "px-4", "py-2.5"],
  lg: ["text-base", "px-5", "py-3"],
  xl: ["text-base", "px-6", "py-3.5"]
}.freeze

Instance Attribute Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(class: nil, size: :default, style: :default, **button_attributes) ⇒ Button

Returns a new instance of Button.



66
67
68
69
70
71
 
# File 'app/components/uchi/flowbite/button.rb', line 66

def initialize(class: nil, size: :default, style: :default, **button_attributes)
  @class = Array.wrap(binding.local_variable_get(:class))
  @size = size
  @style = style
  @button_attributes = button_attributes
end

Instance Attribute Details

#button_attributes ⇒ Object (readonly)

Returns the value of attribute button_attributes.



64
65
66
 
# File 'app/components/uchi/flowbite/button.rb', line 64

def button_attributes
  @button_attributes
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



64
65
66
 
# File 'app/components/uchi/flowbite/button.rb', line 64

def size
  @size
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



64
65
66
 
# File 'app/components/uchi/flowbite/button.rb', line 64

def style
  @style
end

Class Method Details

.classes(size: :default, state: :default, style: :default) ⇒ Object 



22
23
24
25
26
 
# File 'app/components/uchi/flowbite/button.rb', line 22

def classes(size: :default, state: :default, style: :default)
  style = styles.fetch(style) or raise "wut"
  classes = style.fetch(state)
  classes + sizes.fetch(size)
end

.sizes ⇒ Object 



28
29
30
 
# File 'app/components/uchi/flowbite/button.rb', line 28

def sizes
  SIZES
end

.styles ⇒ Object

rubocop:disable Layout/LineLength



33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
# File 'app/components/uchi/flowbite/button.rb', line 33

def styles
  {
    danger: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
    ),
    dark: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
    ),
    default: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
    ),
    ghost: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-base"]
    ),
    secondary: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
    ),
    success: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
    ),
    tertiary: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
    ),
    warning: Uchi::Flowbite::Style.new(
      default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
    )
  }.freeze
end

Instance Method Details

#call ⇒ Object 



73
74
75
76
77
78
79
 
# File 'app/components/uchi/flowbite/button.rb', line 73

def call
  content_tag(
    :button,
    content,
    **options
  )
end