bs5 0.0.17 → 0.0.18

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 22c6a9e55865f643c0c955fa134144831a0e1aa3d68f9487757a2406429707fd
4
- data.tar.gz: 94f28cbdc41c9f5cc4a223779247521659d66b0ac82aa9756bc37cbb1f73c45c
3
+ metadata.gz: 7e7ed0ecd3b82a680eae723045c2c24020920a4942b4dfa5460951042be2a5c1
4
+ data.tar.gz: 4217f3cd7e572d702deb22988f772c0653da8709c39c8a2bff3796747990a4b0
5
5
  SHA512:
6
- metadata.gz: 7b08a72d089dba1ac047006893c765deac278eb925c5ace940882708af292e306a5f69ee71062493d120a1bc3be347a729113d0cb4c486cf8bd899918b4c5247
7
- data.tar.gz: bc39e72b8af466e92f006ce3833aa1610c294959bba9a4201d581fa4aa4839f2ec6fa841db203a6adee60c7dcffe5872697a87d9be3ee2f27014d21741de1354
6
+ metadata.gz: 3e520e4f93b185a7aa46cba4bf5c43b24655c03b8d75576eca3edf2b6740e0384caff3b413e9a3b18abadfda4edf1464be4ea4fb21eb66a67617b0f5268ed49c
7
+ data.tar.gz: 38fd799067d2148b0cd44f323dc41d0a4130771edc2e8de6fade8af6aaab4f2a19c22d5dba6abc77f84d1189a9e6f5529c471f903796f07dc47cc40dab769b2a
@@ -0,0 +1,3 @@
1
+ <%= tag.div(component_attributes) do %>
2
+ <%= content %>
3
+ <% end %>
@@ -0,0 +1,49 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bs5
4
+ class ButtonGroupComponent < ViewComponent::Base
5
+ SIZES = { small: :sm, large: :lg }.with_indifferent_access.freeze
6
+ CLASS_PREFIX = 'btn-group'
7
+
8
+ attr_reader :vertical, :size
9
+
10
+ def initialize(options = {})
11
+ @options = options.symbolize_keys
12
+ @vertical = @options.delete(:vertical)
13
+ @size = @options.delete(:size)
14
+ end
15
+
16
+ def render?
17
+ content.present?
18
+ end
19
+
20
+ def component_attributes
21
+ default_options = { role: 'group' }
22
+ @options[:class] = component_class
23
+ @options.merge(default_options)
24
+ end
25
+
26
+ private
27
+
28
+ def component_class
29
+ class_names = Array(@options[:class])
30
+ class_names << vertical_class
31
+ class_names << size_class
32
+ class_names
33
+ end
34
+
35
+ def vertical_class
36
+ @vertical ? "#{CLASS_PREFIX}-vertical" : CLASS_PREFIX
37
+ end
38
+
39
+ def size_class
40
+ return unless size?
41
+
42
+ [CLASS_PREFIX, SIZES[size]].join('-')
43
+ end
44
+
45
+ def size?
46
+ !!size
47
+ end
48
+ end
49
+ end
@@ -0,0 +1,3 @@
1
+ <%= tag.div(component_attributes) do %>
2
+ <%= content %>
3
+ <% end %>
@@ -0,0 +1,21 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bs5
4
+ class ButtonToolbarComponent < ViewComponent::Base
5
+ def initialize(options = {})
6
+ @options = options
7
+ end
8
+
9
+ def render?
10
+ content.present?
11
+ end
12
+
13
+ def component_attributes
14
+ default_options = { role: 'toolbar' }
15
+ @options[:class] = Array(@options[:class])
16
+ @options[:class] << 'btn-toolbar'
17
+
18
+ @options.merge(default_options)
19
+ end
20
+ end
21
+ end
@@ -2,7 +2,8 @@
2
2
 
3
3
  module Bs5
4
4
  module ComponentsHelper
5
- COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to list_group].freeze
5
+ COMPONENTS = %w[accordion alert badge close_button breadcrumb button_group button_tag button_to button_toolbar
6
+ list_group].freeze
6
7
 
7
8
  COMPONENTS.each do |name|
8
9
  define_method("bs5_#{name}") do |*args, &block|
@@ -0,0 +1,3 @@
1
+ <h2>Button toolbar</h2>
2
+ <%= bs5_example(snippet: 'button_group/button_toolbar/snippet') %>
3
+ <%= bs5_example(snippet: 'button_group/button_toolbar/snippet2') %>
@@ -0,0 +1,18 @@
1
+ <%= bs5_button_toolbar(aria: { label: 'Toolbar with button groups' }) do %>
2
+ <%= bs5_button_group(class: 'me-2', aria: { label: 'First group' }) do %>
3
+ <%= bs5_button_tag('1', type: 'button') %>
4
+ <%= bs5_button_tag('2', type: 'button') %>
5
+ <%= bs5_button_tag('3', type: 'button') %>
6
+ <%= bs5_button_tag('4', type: 'button') %>
7
+ <% end %>
8
+
9
+ <%= bs5_button_group(class: 'me-2', aria: { label: 'Second group' }) do %>
10
+ <%= bs5_button_tag('5', type: 'button', style: :secondary) %>
11
+ <%= bs5_button_tag('6', type: 'button', style: :secondary) %>
12
+ <%= bs5_button_tag('7', type: 'button', style: :secondary) %>
13
+ <% end %>
14
+
15
+ <%= bs5_button_group(aria: { label: 'Third group' }) do %>
16
+ <%= bs5_button_tag('8', type: 'button', style: :info) %>
17
+ <% end %>
18
+ <% end %>
@@ -0,0 +1,27 @@
1
+ <%= bs5_button_toolbar(class: 'mb-3', aria: { label: 'Toolbar with button groups' }) do %>
2
+ <%= bs5_button_group(class: 'me-2', aria: { label: 'First group' }) do %>
3
+ <%= bs5_button_tag('1', type: 'button', outline: true, style: :secondary) %>
4
+ <%= bs5_button_tag('2', type: 'button', outline: true, style: :secondary) %>
5
+ <%= bs5_button_tag('3', type: 'button', outline: true, style: :secondary) %>
6
+ <%= bs5_button_tag('4', type: 'button', outline: true, style: :secondary) %>
7
+ <% end %>
8
+
9
+ <div class="input-group">
10
+ <div class="input-group-text" id="btnGroupAddon">@</div>
11
+ <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
12
+ </div>
13
+ <% end %>
14
+
15
+ <%= bs5_button_toolbar(class: 'justify-content-between', aria: { label: 'Toolbar with button groups' }) do %>
16
+ <%= bs5_button_group(aria: { label: 'First group' }) do %>
17
+ <%= bs5_button_tag('1', type: 'button', outline: true, style: :secondary) %>
18
+ <%= bs5_button_tag('2', type: 'button', outline: true, style: :secondary) %>
19
+ <%= bs5_button_tag('3', type: 'button', outline: true, style: :secondary) %>
20
+ <%= bs5_button_tag('4', type: 'button', outline: true, style: :secondary) %>
21
+ <% end %>
22
+
23
+ <div class="input-group">
24
+ <div class="input-group-text" id="btnGroupAddon2">@</div>
25
+ <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
26
+ </div>
27
+ <% end %>
@@ -0,0 +1,2 @@
1
+ <h2>Basic example</h2>
2
+ <%= bs5_example(snippet: 'button_group/default/snippet') %>
@@ -0,0 +1,5 @@
1
+ <%= bs5_button_group(aria: { label: 'Basic example' }) do %>
2
+ <%= bs5_button_tag('Left', type: 'button') %>
3
+ <%= bs5_button_tag('Middle', type: 'button') %>
4
+ <%= bs5_button_tag('Right', type: 'button') %>
5
+ <% end %>
@@ -0,0 +1,2 @@
1
+ <h2>Sizing</h2>
2
+ <%= bs5_example(snippet: 'button_group/sizing/snippet') %>
@@ -0,0 +1,17 @@
1
+ <%= bs5_button_group(size: 'large', class: 'mb-2', aria: { label: 'Large button group' }) do %>
2
+ <%= bs5_button_tag('Left', type: 'button', style: :dark, outline: true) %>
3
+ <%= bs5_button_tag('Middle', type: 'button', style: :dark, outline: true) %>
4
+ <%= bs5_button_tag('Right', type: 'button', style: :dark, outline: true) %>
5
+ <% end %>
6
+ <br/>
7
+ <%= bs5_button_group(class: 'mb-2', aria: { label: 'Default button group' }) do %>
8
+ <%= bs5_button_tag('Left', type: 'button', style: :dark, outline: true) %>
9
+ <%= bs5_button_tag('Middle', type: 'button', style: :dark, outline: true) %>
10
+ <%= bs5_button_tag('Right', type: 'button', style: :dark, outline: true) %>
11
+ <% end %>
12
+ <br/>
13
+ <%= bs5_button_group(size: :small, aria: { label: 'Small button group' }) do %>
14
+ <%= bs5_button_tag('Left', type: 'button', style: :dark, outline: true) %>
15
+ <%= bs5_button_tag('Middle', type: 'button', style: :dark, outline: true) %>
16
+ <%= bs5_button_tag('Right', type: 'button', style: :dark, outline: true) %>
17
+ <% end %>
@@ -0,0 +1,2 @@
1
+ <h2>Vertical variation</h2>
2
+ <%= bs5_example(snippet: 'button_group/vertical/snippet') %>
@@ -0,0 +1,8 @@
1
+ <%= bs5_button_group(vertical: :true, aria: { label: 'Vertical button group' }) do %>
2
+ <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
3
+ <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
4
+ <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
5
+ <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
6
+ <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
7
+ <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
8
+ <% end %>
@@ -0,0 +1,5 @@
1
+ <h1>Button group</h1>
2
+ <%= render 'bs5/examples/button_group/default/example' %>
3
+ <%= render 'bs5/examples/button_group/button_toolbar/example' %>
4
+ <%= render 'bs5/examples/button_group/sizing/example' %>
5
+ <%= render 'bs5/examples/button_group/vertical/example' %>
@@ -18,6 +18,7 @@
18
18
  <% lg.slot(:item, active: current_page?(pages_path('badge'))) do %><%= link_to 'Badge', pages_path('badge') %><% end %>
19
19
  <% lg.slot(:item, active: current_page?(pages_path('breadcrumb'))) do %><%= link_to 'Breadcrumb', pages_path('breadcrumb') %><% end %>
20
20
  <% lg.slot(:item, active: current_page?(pages_path('buttons'))) do %><%= link_to 'Buttons', pages_path('buttons') %><% end %>
21
+ <% lg.slot(:item, active: current_page?(pages_path('button_group'))) do %><%= link_to 'Button group', pages_path('button_group') %><% end %>
21
22
  <% lg.slot(:item, active: current_page?(pages_path('close_button'))) do %><%= link_to 'Close button', pages_path('close_button') %><% end %>
22
23
  <% lg.slot(:item, active: current_page?(pages_path('collapse'))) do %><%= link_to 'Collapse', pages_path('collapse') %><% end %>
23
24
  <% lg.slot(:item, active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Bs5
4
- VERSION = '0.0.17'
4
+ VERSION = '0.0.18'
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bs5
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.17
4
+ version: 0.0.18
5
5
  platform: ruby
6
6
  authors:
7
7
  - Patrick Baselier
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-09 00:00:00.000000000 Z
11
+ date: 2020-12-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: nokogiri
@@ -148,8 +148,12 @@ files:
148
148
  - app/components/bs5/badge_component.rb
149
149
  - app/components/bs5/breadcrumb_component.html.erb
150
150
  - app/components/bs5/breadcrumb_component.rb
151
+ - app/components/bs5/button_group_component.html.erb
152
+ - app/components/bs5/button_group_component.rb
151
153
  - app/components/bs5/button_tag_component.rb
152
154
  - app/components/bs5/button_to_component.rb
155
+ - app/components/bs5/button_toolbar_component.html.erb
156
+ - app/components/bs5/button_toolbar_component.rb
153
157
  - app/components/bs5/close_button_component.html.erb
154
158
  - app/components/bs5/close_button_component.rb
155
159
  - app/components/bs5/example_component.html.erb
@@ -186,6 +190,15 @@ files:
186
190
  - app/views/bs5/examples/badge/style/snippet.html.erb
187
191
  - app/views/bs5/examples/breadcrumb/default/_example.html.erb
188
192
  - app/views/bs5/examples/breadcrumb/default/snippet.html.erb
193
+ - app/views/bs5/examples/button_group/button_toolbar/_example.html.erb
194
+ - app/views/bs5/examples/button_group/button_toolbar/snippet.html.erb
195
+ - app/views/bs5/examples/button_group/button_toolbar/snippet2.html.erb
196
+ - app/views/bs5/examples/button_group/default/_example.html.erb
197
+ - app/views/bs5/examples/button_group/default/snippet.html.erb
198
+ - app/views/bs5/examples/button_group/sizing/_example.html.erb
199
+ - app/views/bs5/examples/button_group/sizing/snippet.html.erb
200
+ - app/views/bs5/examples/button_group/vertical/_example.html.erb
201
+ - app/views/bs5/examples/button_group/vertical/snippet.html.erb
189
202
  - app/views/bs5/examples/buttons/button_tag/block_buttons/_example.html.erb
190
203
  - app/views/bs5/examples/buttons/button_tag/block_buttons/block_buttons.html.erb
191
204
  - app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_1.html.erb
@@ -252,6 +265,7 @@ files:
252
265
  - app/views/bs5/pages/alert.html.erb
253
266
  - app/views/bs5/pages/badge.html.erb
254
267
  - app/views/bs5/pages/breadcrumb.html.erb
268
+ - app/views/bs5/pages/button_group.html.erb
255
269
  - app/views/bs5/pages/buttons.html.erb
256
270
  - app/views/bs5/pages/close_button.html.erb
257
271
  - app/views/bs5/pages/collapse.html.erb