solidus/admin/app/components/solidus_admin/ui/button/component.rb at 9b7e3333ce2abcd4c64645f7ceeec56e353efce1 · chaimann/solidus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# frozen_string_literal: true

class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
  SIZES = {
    s: %{
      h-7 w-7 p-1
      text-xs font-semibold leading-none
    },
    m: %{
      h-9 w-9 p-1.5
      text-sm font-semibold leading-none
    },
    l: %{
      h-12 w-12 p-2
      text-base font-semibold leading-none
    },
  }

  TEXT_PADDINGS = {
    s: %{px-1.5 w-auto},
    m: %{px-3 w-auto},
    l: %{px-4 w-auto},
  }

  ICON_SIZES = {
    s: %{w-[1.4em] h-[1.4em]},
    m: %{w-[1.35em] h-[1.35em]},
    l: %{w-[1.5em] h-[1.5em]},
  }

  SCHEMES = {
    primary: %{
      text-white bg-black
      hover:text-white hover:bg-gray-600
      active:text-white active:bg-gray-800 aria-current:text-white aria-current:bg-gray-800
      focus:text-white focus:bg-gray-700
      disabled:text-gray-400 disabled:bg-gray-100
      aria-disabled:text-gray-400 aria-disabled:bg-gray-100
    },
    secondary: %{
      text-gray-700 bg-white border border-1 border-gray-200
      hover:bg-gray-50
      active:bg-gray-100            aria-current:bg-gray-100
      focus:bg-gray-50
      disabled:text-gray-300 disabled:bg-white
      aria-disabled:text-gray-300 aria-disabled:bg-white
    },
    danger: %{
      text-red-500 bg-white border border-1 border-red-500
      hover:bg-red-500 hover:border-red-600 hover:text-white
      active:bg-red-600 active:border-red-700 active:text-white aria-current:bg-red-600 aria-current:border-red-700 aria-current:text-white
      focus:bg-red-50 focus:bg-red-500 focus:border-red-600 focus:text-white
      disabled:text-red-300 disabled:bg-white disabled:border-red-200
      aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200
    },
    ghost: %{
      text-gray-700 bg-transparent
      hover:bg-gray-50
      active:bg-gray-100 aria-current:bg-gray-100
      focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
      disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300
      aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300
    },
  }

  def initialize(
    tag: :button,
    text: nil,
    icon: nil,
    size: :m,
    scheme: :primary,
    **attributes
  )
    @tag = tag
    @text = text
    @icon = icon
    @attributes = attributes

    @attributes[:class] = [
      'justify-start items-center justify-center gap-1 inline-flex rounded',
      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-0 [&:focus-visible]:outline-none',
      SIZES.fetch(size.to_sym),
      (TEXT_PADDINGS.fetch(size.to_sym) if @text),
      SCHEMES.fetch(scheme.to_sym),
      @attributes[:class],
    ].join(' ')

    @icon_classes = [
      'fill-current',
      ICON_SIZES.fetch(size.to_sym),
    ]
  end

  def self.submit(resource:, **attrs)
    resource_name = resource.model_name.human
    text = resource.new_record? ? t('.submit.create', resource_name:) : t('.submit.update', resource_name:)
    new(text:, type: :submit, **attrs)
  end

  def self.cancel
    new(scheme: :secondary, text: t('.cancel'))
  end

  def call
    content = []
    content << render(component('ui/icon').new(name: @icon, class: @icon_classes)) if @icon
    content << @text if @text

    content_tag(@tag, safe_join(content), **@attributes)
  end
end