Class: Maglev::Uikit::ButtonGroupComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/maglev/uikit/button_group_component.rb

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods inherited from BaseComponent

#button_class_names

Constructor Details

#initialize(color: nil, size: nil) ⇒ ButtonGroupComponent

Returns a new instance of ButtonGroupComponent.



10
11
12
13
 
# File 'app/components/maglev/uikit/button_group_component.rb', line 10

def initialize(color: nil, size: nil)
  @color = color || :primary
  @size = size || :medium
end

Instance Attribute Details

#color ⇒ Object (readonly)

Returns the value of attribute color.



8
9
10
 
# File 'app/components/maglev/uikit/button_group_component.rb', line 8

def color
  @color
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



8
9
10
 
# File 'app/components/maglev/uikit/button_group_component.rb', line 8

def size
  @size
end

Instance Method Details

#button_classes ⇒ Object

rubocop:disable Metrics/MethodLength



16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
# File 'app/components/maglev/uikit/button_group_component.rb', line 16

def button_classes
  class_variants(
    base: %(
      inline-flex items-center justify-center cursor-pointer
      group-[.is-success]/form:bg-green-500/95 group-[.is-success]/form:hover:bg-green-500/100
      group-[.is-success]/form:disabled:bg-green-500/75
      group-[.is-error]/form:bg-red-500/95 group-[.is-error]/form:hover:bg-red-500/100
      group-[.is-error]/form:disabled:bg-red-500/75
    ),
    variants: {
      size: {
        medium: 'inline-flex items-center justify-center px-4 h-10'
      },
      color: {
        primary: 'text-white bg-editor-primary hover:bg-editor-primary/90 disabled:bg-editor-primary/75',
        secondary: 'text-gray-800 hover:bg-gray-100'
      }
    }
  ).render(color: color, size: size)
end

#wrapped_button_classes(**args) ⇒ Object

rubocop:enable Metrics/MethodLength



58
59
60
61
62
63
64
65
66
67
 
# File 'app/components/maglev/uikit/button_group_component.rb', line 58

def wrapped_button_classes(**args)
  class_variants(
    base: 'cursor-pointer',
    variants: {
      size: {
        medium: 'inline-flex items-center justify-center px-4 h-10'
      }
    }
  ).render(size: size, **args)
end

#wrapper_classes(**args) ⇒ Object

rubocop:disable Metrics/MethodLength



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
# File 'app/components/maglev/uikit/button_group_component.rb', line 39

def wrapper_classes(**args)
  class_variants(
    base: %(
      inline-flex items-center transition-colors duration-200 h-full
      [.is-success]:bg-green-500/95 [.is-success]:hover:bg-green-500/100
      [.is-success]:disabled:bg-green-500/75
      [.is-error]:bg-red-500/95 [.is-error]:hover:bg-red-500/100
      [.is-error]:disabled:bg-red-500/75
    ),
    variants: {
      color: {
        primary: 'text-white bg-editor-primary hover:bg-editor-primary/90 has-[:disabled]:bg-editor-primary/75',
        secondary: 'text-gray-800 hover:bg-gray-100'
      }
    }
  ).render(color: color, **args)
end