Module: Decidim::Design::ButtonsHelper

Defined in:
decidim-design/app/helpers/decidim/design/buttons_helper.rb

Instance Method Summary collapse

Instance Method Details

#background_button_row(button_args) ⇒ Object 



130
131
132
133
134
135
 
# File 'decidim-design/app/helpers/decidim/design/buttons_helper.rb', line 130

def background_button_row(button_args)
  [
    content_tag(:div, cell("decidim/button", button_args.slice(:icon_name).merge(text: "Send"), button_args), class: "bg-primary p-4 rounded"),
    button_args[:description] || button_args[:button_classes]
  ]
end

#button_row(button_args) ⇒ Object 



123
124
125
126
127
128
 
# File 'decidim-design/app/helpers/decidim/design/buttons_helper.rb', line 123

def button_row(button_args)
  [
    { method: :cell, args: ["decidim/button", button_args.slice(:icon).merge(text: "Send"), button_args] },
    button_args[:description] || button_args[:button_classes]
  ]
end

#buttons_sections ⇒ Object 



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
112
113
114
115
116
117
118
119
120
121
 
# File 'decidim-design/app/helpers/decidim/design/buttons_helper.rb', line 6

def buttons_sections
  [
    {
      id: "sizes",
      contents: [
        {
          type: :table,
          options: buttons_table_options,
          items: buttons_table_items_from_args(
            { button_classes: "button button__primary button__xs" },
            { button_classes: "button button__primary button__sm" },
            { button_classes: "button button__primary button__lg" },
            { button_classes: "button button__primary button__xl" }
          ),
          cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__primary button__xs" }] }
        }
      ]
    },
    {
      id: "colors",
      contents: [
        {
          type: :table,
          options: buttons_table_options,
          items: buttons_table_items_from_args(
            { button_classes: "button button__lg button__primary" },
            { button_classes: "button button__lg button__secondary" },
            { button_classes: "button button__lg button__tertiary" }
          ),
          cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__primary" }] }
        }
      ]
    },
    {
      id: "transparent",
      contents: [
        {
          type: :table,
          options: buttons_table_options,
          items: buttons_table_items_from_args(
            { button_classes: "button button__lg button__transparent-primary" },
            { button_classes: "button button__lg button__transparent-secondary" },
            { button_classes: "button button__lg button__transparent-tertiary" }
          ),
          cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__transparent-primary" }] }
        },
        {
          type: :text,
          values: ["In case of a darker background:"]
        },
        {
          type: :table,
          options: buttons_table_options,
          items: buttons_table_items_from_args(
            { button_classes: "button button__lg button__transparent" },
            background: true
          ),
          cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__transparent" }] }
        }
      ]
    },
    {
      id: "text",
      contents: [
        {
          type: :table,
          options: buttons_table_options,
          items: buttons_table_items_from_args(
            { button_classes: "button button__lg button__text" },
            { button_classes: "button button__lg button__text-primary" },
            { button_classes: "button button__lg button__text-secondary" },
            { button_classes: "button button__lg button__text-tertiary" }
          ),
          cell_snippet: { cell: "decidim/button", args: [{ text: "Send" }, { button_classes: "button button__lg button__text" }] }
        }
      ]
    },
    {
      id: "icons",
      contents: [
        {
          type: :table,
          options: buttons_table_options,
          items: buttons_table_items_from_args(
            { button_classes: "button button__lg button__secondary", icon: "question-line" },
            { button_classes: "button button__lg button__transparent-secondary", icon: "question-line" }
          ),
          cell_snippet: { cell: "decidim/button", args: [{ text: "Send", icon: "question-line" }, { button_classes: "button button__lg button__secondary" }] }
        }
      ]
    },
    {
      id: "disabled",
      contents: [
        {
          type: :table,
          options: buttons_table_options,
          items: buttons_table_items_from_args(
            {
              button_classes: "button button__lg button__secondary",
              html_options: { disabled: true },
              description: "<code>disabled</code> data-attribute present".html_safe
            }
          ),
          cell_snippet: {
            cell: "decidim/button",
            args: [
              { text: "Send" },
              { button_classes: "button button__lg button__secondary", html_options: { disabled: true } }
            ]
          }
        }
      ]
    }
  ]
end

#buttons_table_items_from_args(*buttons_args, **opts) ⇒ Object 



137
138
139
140
141
 
# File 'decidim-design/app/helpers/decidim/design/buttons_helper.rb', line 137

def buttons_table_items_from_args(*buttons_args, **opts)
  buttons_args.map do |button_args|
    opts[:background] ? background_button_row(button_args) : button_row(button_args)
  end
end

#buttons_table_options ⇒ Object 



143
144
145
 
# File 'decidim-design/app/helpers/decidim/design/buttons_helper.rb', line 143

def buttons_table_options
  @buttons_table_options ||= { headings: %w(Button Classes) }
end