bs5 0.0.12 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/components/bs5/list_group_component.html.erb +17 -0
  3. data/app/components/bs5/list_group_component.rb +143 -0
  4. data/app/controllers/bs5/pages_controller.rb +11 -0
  5. data/app/helpers/bs5/components_helper.rb +1 -1
  6. data/app/views/bs5/examples/accordion/default/_example.html.erb +1 -1
  7. data/app/views/bs5/examples/accordion/flush/_example.html.erb +1 -1
  8. data/app/views/bs5/examples/alert/additional_content/_example.html.erb +1 -1
  9. data/app/views/bs5/examples/alert/default/_example.html.erb +1 -1
  10. data/app/views/bs5/examples/alert/dismissable/_example.html.erb +1 -1
  11. data/app/views/bs5/examples/alert/style/_example.html.erb +1 -1
  12. data/app/views/bs5/examples/badge/default/_example.html.erb +1 -1
  13. data/app/views/bs5/examples/badge/pill/_example.html.erb +1 -1
  14. data/app/views/bs5/examples/badge/style/_example.html.erb +1 -1
  15. data/app/views/bs5/examples/breadcrumb/default/_example.html.erb +1 -1
  16. data/app/views/bs5/examples/buttons/button_tag/default/snippet.html.erb +6 -6
  17. data/app/views/bs5/examples/buttons/button_tag/outline/snippet.html.erb +9 -9
  18. data/app/views/bs5/examples/buttons/button_tag/size/large.html.erb +2 -2
  19. data/app/views/bs5/examples/buttons/button_tag/size/small.html.erb +2 -2
  20. data/app/views/bs5/examples/buttons/button_tag/style/snippet.html.erb +9 -9
  21. data/app/views/bs5/examples/close_button/default/_example.html.erb +1 -1
  22. data/app/views/bs5/examples/close_button/disabled/_example.html.erb +1 -1
  23. data/app/views/bs5/examples/close_button/white/_example.html.erb +1 -1
  24. data/app/views/bs5/examples/list_group/actionable/_example.html.erb +3 -0
  25. data/app/views/bs5/examples/list_group/actionable/button.html.erb +7 -0
  26. data/app/views/bs5/examples/list_group/actionable/snippet.html.erb +7 -0
  27. data/app/views/bs5/examples/list_group/active/_example.html.erb +2 -0
  28. data/app/views/bs5/examples/list_group/active/snippet.html.erb +7 -0
  29. data/app/views/bs5/examples/list_group/checkboxes_and_radios/_example.html.erb +3 -0
  30. data/app/views/bs5/examples/list_group/checkboxes_and_radios/default.html.erb +22 -0
  31. data/app/views/bs5/examples/list_group/checkboxes_and_radios/with_labels.html.erb +32 -0
  32. data/app/views/bs5/examples/list_group/custom_content/_example.html.erb +2 -0
  33. data/app/views/bs5/examples/list_group/custom_content/default.html.erb +32 -0
  34. data/app/views/bs5/examples/list_group/default/_example.html.erb +2 -0
  35. data/app/views/bs5/examples/list_group/default/snippet.html.erb +7 -0
  36. data/app/views/bs5/examples/list_group/disabled/_example.html.erb +2 -0
  37. data/app/views/bs5/examples/list_group/disabled/snippet.html.erb +7 -0
  38. data/app/views/bs5/examples/list_group/flush/_example.html.erb +2 -0
  39. data/app/views/bs5/examples/list_group/flush/snippet.html.erb +7 -0
  40. data/app/views/bs5/examples/list_group/horizontal/_example.html.erb +2 -0
  41. data/app/views/bs5/examples/list_group/horizontal/snippet.html.erb +30 -0
  42. data/app/views/bs5/examples/list_group/style/_example.html.erb +3 -0
  43. data/app/views/bs5/examples/list_group/style/actionable.html.erb +11 -0
  44. data/app/views/bs5/examples/list_group/style/default.html.erb +11 -0
  45. data/app/views/bs5/examples/list_group/with_badges/_example.html.erb +2 -0
  46. data/app/views/bs5/examples/list_group/with_badges/default.html.erb +14 -0
  47. data/app/views/bs5/examples/tooltips/default/_example.html.erb +1 -1
  48. data/app/views/bs5/pages/accordion.html.erb +3 -0
  49. data/app/views/bs5/{examples/_alert.html.erb → pages/alert.html.erb} +1 -1
  50. data/app/views/bs5/{examples/_badge.html.erb → pages/badge.html.erb} +1 -1
  51. data/app/views/bs5/pages/breadcrumb.html.erb +2 -0
  52. data/app/views/bs5/{examples/_buttons.html.erb → pages/buttons.html.erb} +3 -3
  53. data/app/views/bs5/{examples/_close_button.html.erb → pages/close_button.html.erb} +1 -1
  54. data/app/views/bs5/pages/list_group.html.erb +11 -0
  55. data/app/views/bs5/{examples/_tooltips.html.erb → pages/tooltips.html.erb} +1 -1
  56. data/app/views/layouts/bs5/pages.html.erb +32 -0
  57. data/config/routes.rb +2 -2
  58. data/lib/bs5/version.rb +1 -1
  59. metadata +51 -11
  60. data/app/controllers/bs5/examples_controller.rb +0 -9
  61. data/app/views/bs5/examples/_accordion.html.erb +0 -3
  62. data/app/views/bs5/examples/_breadcrumb.html.erb +0 -2
  63. data/app/views/bs5/examples/index.html.erb +0 -25
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 74aab58d89e345e58ed93c1960217477600d6c0bb9c3e9af1dcb3b3542ec55f0
4
- data.tar.gz: 79c1ddc04689b15bb773de0b99751045f30ffb101acd8ed62e8d816263723f8d
3
+ metadata.gz: b63f00444e32de97ae7167d85ab798ec58085c325730e18a48d21bdde8a8de89
4
+ data.tar.gz: 2a8ab48a4bd4fe50a629868448315c3ef9d641ef7b30cdb189db8e95015ddd38
5
5
  SHA512:
6
- metadata.gz: 623342435dddb84001b2d70dfd1abc6cf6088b278d2f7c8deb0b11793778fcfcb7e531f5e6c32dcb18865ce918d5bb7a209496577ae486e85304e0d98fc590f3
7
- data.tar.gz: ba822b14f63cce1ea2be57273aef6014618d1cdab09050a6e842ac8719bf68f7d40b5f04d8a27991f7905700fe35a30b75640d805460599242449b9b7d36cbf6
6
+ metadata.gz: 94fc5dc2aab1bb53e3155d14acfdf889ef58d3aee2e03fa8a9620fd2e3379bfd48d0c453c9c42f22a826457b8f7fb7edc0274c0db54c6437ecf901dd6f371e6e
7
+ data.tar.gz: e3cf1bbf76474375de657c37ecc3395d51993dc33cac54240014769b58b63dc466bc3e1c669f7f3500ba966de17cb17a4799cb902057d1ae39660ab6a5300c41
@@ -0,0 +1,17 @@
1
+ <% if items.any? %>
2
+ <% if actionables? %>
3
+ <div class="<%= component_class %>">
4
+ <% items.each do |item| %>
5
+ <%= item.decorated_content %>
6
+ <% end %>
7
+ </div>
8
+ <% else %>
9
+ <ul class="<%= component_class %>">
10
+ <% items.each do |item| %>
11
+ <%= tag.li(**item.options) do %>
12
+ <%= item.content %>
13
+ <% end %>
14
+ <% end %>
15
+ </ul>
16
+ <% end %>
17
+ <% end %>
@@ -0,0 +1,143 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bs5
4
+ class ListGroupComponent < ViewComponent::Base
5
+ CLASS_NAME_BASE = 'list-group'
6
+ CLASS_NAME_FLUSH = "#{CLASS_NAME_BASE}-flush"
7
+ CLASS_NAME_HORIZONTAL = "#{CLASS_NAME_BASE}-horizontal"
8
+
9
+ include ViewComponent::Slotable
10
+
11
+ with_slot :item, collection: true, class_name: 'Item'
12
+
13
+ def initialize(flush: false, horizontal: false)
14
+ @flush = flush
15
+ @horizontal = horizontal
16
+ end
17
+
18
+ private
19
+
20
+ def flush?
21
+ !!@flush
22
+ end
23
+
24
+ def actionables?
25
+ items.any?(&:actionable?)
26
+ end
27
+
28
+ def horizontal?
29
+ !!@horizontal
30
+ end
31
+
32
+ def component_class
33
+ class_names = [CLASS_NAME_BASE]
34
+ class_names << flush_class
35
+ class_names << horizontal_class
36
+ class_names.join(' ')
37
+ end
38
+
39
+ def flush_class
40
+ CLASS_NAME_FLUSH if flush?
41
+ end
42
+
43
+ def horizontal_class
44
+ return unless horizontal?
45
+
46
+ class_names = [CLASS_NAME_HORIZONTAL]
47
+ class_names << @horizontal if @horizontal.in?(%i[sm md lg xl xxl])
48
+ class_names.join('-')
49
+ end
50
+
51
+ class Item < ViewComponent::Slot
52
+ CLASS_NAME_BASE = 'list-group-item'
53
+ CLASS_NAME_ACTION = "#{CLASS_NAME_BASE}-action"
54
+
55
+ attr_reader :options
56
+
57
+ def initialize(options = {})
58
+ @options = options.symbolize_keys
59
+
60
+ @active = @options.delete(:active) || false
61
+ @disabled = @options.delete(:disabled) || false
62
+ @style = @options.delete(:style)
63
+
64
+ set_attributes
65
+ end
66
+
67
+ def actionable?
68
+ !!actionable_element
69
+ end
70
+
71
+ def actionable_element
72
+ @actionable_element ||= begin
73
+ if (elements = Nokogiri::HTML::DocumentFragment.parse(content).elements).one? &&
74
+ (element = elements.first).name.in?(%w[a button label])
75
+ element
76
+ end
77
+ end
78
+ end
79
+
80
+ def decorated_content
81
+ set_actionable_element_attributes
82
+ actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
83
+ end
84
+
85
+ private
86
+
87
+ def set_actionable_element_class_names
88
+ class_names = Array(actionable_element[:class])
89
+ class_names << item_classes
90
+ class_names << CLASS_NAME_ACTION if actionable_element.name.in?(%w[a button])
91
+ actionable_element[:class] = class_names.join(' ')
92
+ end
93
+
94
+ def set_actionable_element_attributes
95
+ set_actionable_element_class_names
96
+ actionable_element['aria-current'] = true if active?
97
+
98
+ return unless disabled?
99
+
100
+ case actionable_element.name
101
+ when 'a'
102
+ actionable_element['aria-disabled'] = true
103
+ actionable_element['tabindex'] = -1
104
+ when 'button'
105
+ actionable_element['disabled'] = ''
106
+ end
107
+ end
108
+
109
+ def set_attributes
110
+ @options[:class] = Array(@options[:class])
111
+ @options[:class] << item_classes
112
+ @options[:aria] ||= {}
113
+ @options[:aria][:current] = true if active?
114
+ @options[:aria][:disabled] = true if disabled?
115
+ end
116
+
117
+ def item_classes
118
+ class_names = [CLASS_NAME_BASE]
119
+ class_names << 'active' if active?
120
+ class_names << 'disabled' if disabled?
121
+ class_names << contextual_class if style?
122
+
123
+ class_names
124
+ end
125
+
126
+ def active?
127
+ !!@active
128
+ end
129
+
130
+ def disabled?
131
+ !!@disabled
132
+ end
133
+
134
+ def style?
135
+ !!@style
136
+ end
137
+
138
+ def contextual_class
139
+ [CLASS_NAME_BASE, @style].join('-')
140
+ end
141
+ end
142
+ end
143
+ end
@@ -0,0 +1,11 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_dependency 'bs5/application_controller'
4
+
5
+ module Bs5
6
+ class PagesController < ApplicationController
7
+ def show
8
+ render template: "bs5/pages/#{params[:page]}"
9
+ end
10
+ end
11
+ end
@@ -2,7 +2,7 @@
2
2
 
3
3
  module Bs5
4
4
  module ComponentsHelper
5
- COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to].freeze
5
+ COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to list_group].freeze
6
6
 
7
7
  COMPONENTS.each do |name|
8
8
  define_method("bs5_#{name}") do |*args, &block|
@@ -1,2 +1,2 @@
1
- <h3>Default</h3>
1
+ <h2>Example</h2>
2
2
  <%= bs5_example(snippet: 'accordion/default/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Flush</h3>
1
+ <h2>Flush</h2>
2
2
  <%= bs5_example(snippet: 'accordion/flush/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Additional content</h3>
1
+ <h2>Additional content</h2>
2
2
  <%= bs5_example(snippet: 'alert/additional_content/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Default</h3>
1
+ <h2>Examples</h2>
2
2
  <%= bs5_example(snippet: 'alert/default/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Dismissing</h3>
1
+ <h2>Dismissing</h2>
2
2
  <%= bs5_example(snippet: 'alert/dismissable/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Style</h3>
1
+ <h2>Style</h2>
2
2
  <%= bs5_example(snippet: 'alert/style/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Example</h3>
1
+ <h2>Example</h2>
2
2
  <%= bs5_example(snippet: 'badge/default/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Pill badges</h3>
1
+ <h2>Pill badges</h2>
2
2
  <%= bs5_example(snippet: 'badge/pill/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Background colors</h3>
1
+ <h2>Background colors</h2>
2
2
  <%= bs5_example(snippet: 'badge/style/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Example</h3>
1
+ <h2>Example</h2>
2
2
  <%= bs5_example(snippet: 'breadcrumb/default/snippet') %>
@@ -1,15 +1,15 @@
1
1
  <%= bs5_button_tag %>
2
2
 
3
- <%= bs5_button_tag 'Reset', type: 'reset' %>
3
+ <%= bs5_button_tag('Reset', type: 'reset') %>
4
4
 
5
- <%= bs5_button_tag 'Button', type: 'button' %>
5
+ <%= bs5_button_tag('Button', type: 'button') %>
6
6
 
7
- <%= bs5_button_tag 'Reset', type: 'reset', disabled: true %>
7
+ <%= bs5_button_tag('Reset', type: 'reset', disabled: true) %>
8
8
 
9
9
  <%= bs5_button_tag(type: 'button') do %>
10
- <%= content_tag(:strong, 'Ask me!') %>
10
+ <%= tag.strong('Ask me!') %>
11
11
  <% end %>
12
12
 
13
- <%= bs5_button_tag 'Save', data: { confirm: 'Are you sure?' } %>
13
+ <%= bs5_button_tag('Save', data: { confirm: 'Are you sure?' }) %>
14
14
 
15
- <%= bs5_button_tag 'Checkout', data: { disable_with: 'Please wait...' } %>
15
+ <%= bs5_button_tag('Checkout', data: { disable_with: 'Please wait...' }) %>
@@ -1,19 +1,19 @@
1
- <%= bs5_button_tag 'Primary', style: :primary, outline: true %>
1
+ <%= bs5_button_tag('Primary', style: :primary, outline: true) %>
2
2
 
3
- <%= bs5_button_tag 'Secondary', style: :secondary, outline: true %>
3
+ <%= bs5_button_tag('Secondary', style: :secondary, outline: true) %>
4
4
 
5
- <%= bs5_button_tag 'Success', style: :success, outline: true %>
5
+ <%= bs5_button_tag('Success', style: :success, outline: true) %>
6
6
 
7
- <%= bs5_button_tag 'Danger', style: :danger, outline: true %>
7
+ <%= bs5_button_tag('Danger', style: :danger, outline: true) %>
8
8
 
9
9
  <%= bs5_button_tag(style: :warning, outline: true, type: 'button') do %>
10
- <%= content_tag(:strong, 'Warning') %>
10
+ <%= tag.strong('Warning') %>
11
11
  <% end %>
12
12
 
13
- <%= bs5_button_tag 'Info', style: :info, outline: true %>
13
+ <%= bs5_button_tag('Info', style: :info, outline: true) %>
14
14
 
15
- <%= bs5_button_tag 'Light', style: :light, outline: true %>
15
+ <%= bs5_button_tag('Light', style: :light, outline: true) %>
16
16
 
17
- <%= bs5_button_tag 'Dark', style: :dark, outline: true %>
17
+ <%= bs5_button_tag('Dark', style: :dark, outline: true) %>
18
18
 
19
- <%= bs5_button_tag 'Link', style: :link, outline: true %>
19
+ <%= bs5_button_tag('Link', style: :link, outline: true) %>
@@ -1,3 +1,3 @@
1
- <%= bs5_button_tag 'Large button', style: :primary, size: :large %>
1
+ <%= bs5_button_tag('Large button', style: :primary, size: :large) %>
2
2
 
3
- <%= bs5_button_tag 'Large button', style: :secondary, size: :large %>
3
+ <%= bs5_button_tag('Large button', style: :secondary, size: :large) %>
@@ -1,3 +1,3 @@
1
- <%= bs5_button_tag 'Small button', style: :primary, size: :small %>
1
+ <%= bs5_button_tag('Small button', style: :primary, size: :small) %>
2
2
 
3
- <%= bs5_button_tag 'Small button', style: :secondary, size: :small %>
3
+ <%= bs5_button_tag('Small button', style: :secondary, size: :small) %>
@@ -1,19 +1,19 @@
1
- <%= bs5_button_tag 'Primary', style: :primary %>
1
+ <%= bs5_button_tag('Primary', style: :primary) %>
2
2
 
3
- <%= bs5_button_tag 'Secondary', style: :secondary %>
3
+ <%= bs5_button_tag('Secondary', style: :secondary) %>
4
4
 
5
- <%= bs5_button_tag 'Success', style: :success %>
5
+ <%= bs5_button_tag('Success', style: :success) %>
6
6
 
7
- <%= bs5_button_tag 'Danger', style: :danger %>
7
+ <%= bs5_button_tag('Danger', style: :danger) %>
8
8
 
9
9
  <%= bs5_button_tag(style: :warning, type: 'button') do %>
10
- <%= content_tag(:strong, 'Warning') %>
10
+ <%= tag.strong('Warning') %>
11
11
  <% end %>
12
12
 
13
- <%= bs5_button_tag 'Info', style: :info %>
13
+ <%= bs5_button_tag('Info', style: :info) %>
14
14
 
15
- <%= bs5_button_tag 'Light', style: :light %>
15
+ <%= bs5_button_tag('Light', style: :light) %>
16
16
 
17
- <%= bs5_button_tag 'Dark', style: :dark %>
17
+ <%= bs5_button_tag('Dark', style: :dark) %>
18
18
 
19
- <%= bs5_button_tag 'Link', style: :link %>
19
+ <%= bs5_button_tag('Link', style: :link) %>
@@ -1,2 +1,2 @@
1
- <h3>Default</h3>
1
+ <h2>Default</h2>
2
2
  <%= bs5_example(snippet: 'close_button/default/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>Disabled</h3>
1
+ <h2>Disabled</h2>
2
2
  <%= bs5_example(snippet: 'close_button/disabled/snippet') %>
@@ -1,2 +1,2 @@
1
- <h3>White</h3>
1
+ <h2>White</h2>
2
2
  <%= bs5_example(snippet: 'close_button/white/snippet') %>
@@ -0,0 +1,3 @@
1
+ <h2>Links and buttons</h2>
2
+ <%= bs5_example(snippet: 'list_group/actionable/snippet') %>
3
+ <%= bs5_example(snippet: 'list_group/actionable/button') %>
@@ -0,0 +1,7 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item, active: true) do %><%= button_tag 'Cras justo odio' %><% end %>
3
+ <% lg.slot(:item) do %><%= button_tag 'Dapibus ac facilisis in' %><% end %>
4
+ <% lg.slot(:item) do %><%= button_tag 'Morbi leo risus' %><% end %>
5
+ <% lg.slot(:item) do %><%= button_tag 'Porta ac consectetur ac' %><% end %>
6
+ <% lg.slot(:item, disabled: true) do %><%= button_tag 'Vestibulum at eros' %><% end %>
7
+ <%- end %>
@@ -0,0 +1,7 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item, active: true) do %><%= link_to 'Cras justo odio', '#' %><% end %>
3
+ <% lg.slot(:item) do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
4
+ <% lg.slot(:item) do %><%= link_to 'Morbi leo risus', '#' %><% end %>
5
+ <% lg.slot(:item) do %><%= link_to 'Porta ac consectetur ac', '#' %><% end %>
6
+ <% lg.slot(:item, disabled: true) do %><%= link_to 'Vestibulum at eros', '#' %><% end %>
7
+ <%- end %>
@@ -0,0 +1,2 @@
1
+ <h2>Active items</h2>
2
+ <%= bs5_example(snippet: 'list_group/active/snippet') %>
@@ -0,0 +1,7 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item, active: true) do %>Cras justo odio<% end %>
3
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
4
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
5
+ <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
6
+ <% lg.slot(:item) do %>Vestibulum at eros<% end %>
7
+ <%- end %>
@@ -0,0 +1,3 @@
1
+ <h2>Checkboxes and radios</h2>
2
+ <%= bs5_example(snippet: 'list_group/checkboxes_and_radios/default') %>
3
+ <%= bs5_example(snippet: 'list_group/checkboxes_and_radios/with_labels') %>
@@ -0,0 +1,22 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item) do %>
3
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
4
+ Cras justo odio
5
+ <% end %>
6
+ <% lg.slot(:item) do %>
7
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
8
+ Dapibus ac facilisis in
9
+ <% end %>
10
+ <% lg.slot(:item) do %>
11
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
12
+ Morbi leo risus
13
+ <% end %>
14
+ <% lg.slot(:item) do %>
15
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
16
+ Porta ac consectetur ac
17
+ <% end %>
18
+ <% lg.slot(:item) do %>
19
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
20
+ Vestibulum at eros
21
+ <% end %>
22
+ <%- end %>
@@ -0,0 +1,32 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item) do %>
3
+ <%= label_tag do %>
4
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
5
+ Cras justo odio
6
+ <% end %>
7
+ <% end %>
8
+ <% lg.slot(:item) do %>
9
+ <%= label_tag do %>
10
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
11
+ Dapibus ac facilisis in
12
+ <% end %>
13
+ <% end %>
14
+ <% lg.slot(:item) do %>
15
+ <%= label_tag do %>
16
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
17
+ Morbi leo risus
18
+ <% end %>
19
+ <% end %>
20
+ <% lg.slot(:item) do %>
21
+ <%= label_tag do %>
22
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
23
+ Porta ac consectetur ac
24
+ <% end %>
25
+ <% end %>
26
+ <% lg.slot(:item) do %>
27
+ <%= label_tag do %>
28
+ <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
29
+ Vestibulum at eros
30
+ <% end %>
31
+ <% end %>
32
+ <%- end %>
@@ -0,0 +1,2 @@
1
+ <h2>Custom content</h2>
2
+ <%= bs5_example(snippet: 'list_group/custom_content/default') %>
@@ -0,0 +1,32 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item, active: true) do %>
3
+ <%= link_to '#' do %>
4
+ <div class="d-flex w-100 justify-content-between">
5
+ <h5 class="mb-1">List group item heading</h5>
6
+ <small>3 days ago</small>
7
+ </div>
8
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
9
+ <small>Donec id elit non mi porta.</small>
10
+ <% end %>
11
+ <% end %>
12
+ <% lg.slot(:item) do %>
13
+ <%= link_to '#' do %>
14
+ <div class="d-flex w-100 justify-content-between">
15
+ <h5 class="mb-1">List group item heading</h5>
16
+ <small class="text-muted">3 days ago</small>
17
+ </div>
18
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
19
+ <small class="text-muted">Donec id elit non mi porta.</small>
20
+ <% end %>
21
+ <% end %>
22
+ <% lg.slot(:item) do %>
23
+ <%= link_to '#' do %>
24
+ <div class="d-flex w-100 justify-content-between">
25
+ <h5 class="mb-1">List group item heading</h5>
26
+ <small class="text-muted">3 days ago</small>
27
+ </div>
28
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
29
+ <small class="text-muted">Donec id elit non mi porta.</small>
30
+ <% end %>
31
+ <% end %>
32
+ <%- end %>
@@ -0,0 +1,2 @@
1
+ <h2>Basic example</h2>
2
+ <%= bs5_example(snippet: 'list_group/default/snippet') %>
@@ -0,0 +1,7 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
3
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
4
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
5
+ <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
6
+ <% lg.slot(:item) do %>Vestibulum at eros<% end %>
7
+ <%- end %>
@@ -0,0 +1,2 @@
1
+ <h2>Disabled items</h2>
2
+ <%= bs5_example(snippet: 'list_group/disabled/snippet') %>
@@ -0,0 +1,7 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item, disabled: true) do %>Cras justo odio<% end %>
3
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
4
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
5
+ <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
6
+ <% lg.slot(:item) do %>Vestibulum at eros<% end %>
7
+ <%- end %>
@@ -0,0 +1,2 @@
1
+ <h2>Flush</h2>
2
+ <%= bs5_example(snippet: 'list_group/flush/snippet') %>
@@ -0,0 +1,7 @@
1
+ <%= bs5_list_group(flush: true) do |lg| %>
2
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
3
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
4
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
5
+ <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
6
+ <% lg.slot(:item) do %>Vestibulum at eros<% end %>
7
+ <%- end %>
@@ -0,0 +1,2 @@
1
+ <h2>Horizontal</h2>
2
+ <%= bs5_example(snippet: 'list_group/horizontal/snippet') %>
@@ -0,0 +1,30 @@
1
+ <%= bs5_list_group(horizontal: true) do |lg| %>
2
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
3
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
4
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
5
+ <%- end %>
6
+ <%= bs5_list_group(horizontal: :sm) do |lg| %>
7
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
8
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
9
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
10
+ <%- end %>
11
+ <%= bs5_list_group(horizontal: :md) do |lg| %>
12
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
13
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
14
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
15
+ <%- end %>
16
+ <%= bs5_list_group(horizontal: :lg) do |lg| %>
17
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
18
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
19
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
20
+ <%- end %>
21
+ <%= bs5_list_group(horizontal: :xl) do |lg| %>
22
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
23
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
24
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
25
+ <%- end %>
26
+ <%= bs5_list_group(horizontal: :xxl) do |lg| %>
27
+ <% lg.slot(:item) do %>Cras justo odio<% end %>
28
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
29
+ <% lg.slot(:item) do %>Morbi leo risus<% end %>
30
+ <%- end %>
@@ -0,0 +1,3 @@
1
+ <h2>Contextual classes</h2>
2
+ <%= bs5_example(snippet: 'list_group/style/default') %>
3
+ <%= bs5_example(snippet: 'list_group/style/actionable') %>
@@ -0,0 +1,11 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item) do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
3
+ <% lg.slot(:item, style: :primary) do %><%= link_to 'A simple primary list group item', '#' %><% end %>
4
+ <% lg.slot(:item, style: :secondary) do %><%= link_to 'A simple secondary list group item', '#' %><% end %>
5
+ <% lg.slot(:item, style: :success) do %><%= link_to 'A simple success list group item', '#' %><% end %>
6
+ <% lg.slot(:item, style: :danger) do %><%= link_to 'A simple danger list group item', '#' %><% end %>
7
+ <% lg.slot(:item, style: :warning) do %><%= link_to 'A simple warning list group item', '#' %><% end %>
8
+ <% lg.slot(:item, style: :info) do %><%= link_to 'A simple info list group item', '#' %><% end %>
9
+ <% lg.slot(:item, style: :light) do %><%= link_to 'A simple light list group item', '#' %><% end %>
10
+ <% lg.slot(:item, style: :dark) do %><%= link_to 'A simple dark list group item', '#' %><% end %>
11
+ <%- end %>
@@ -0,0 +1,11 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
3
+ <% lg.slot(:item, style: :primary) do %>A simple primary list group item<% end %>
4
+ <% lg.slot(:item, style: :secondary) do %>A simple secondary list group item<% end %>
5
+ <% lg.slot(:item, style: :success) do %>A simple success list group item<% end %>
6
+ <% lg.slot(:item, style: :danger) do %>A simple danger list group item<% end %>
7
+ <% lg.slot(:item, style: :warning) do %>A simple warning list group item<% end %>
8
+ <% lg.slot(:item, style: :info) do %>A simple info list group item<% end %>
9
+ <% lg.slot(:item, style: :light) do %>A simple light list group item<% end %>
10
+ <% lg.slot(:item, style: :dark) do %>A simple dark list group item<% end %>
11
+ <%- end %>
@@ -0,0 +1,2 @@
1
+ <h3>With badges</h3>
2
+ <%= bs5_example(snippet: 'list_group/with_badges/default') %>
@@ -0,0 +1,14 @@
1
+ <%= bs5_list_group do |lg| %>
2
+ <% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
3
+ Cras justo odio
4
+ <%= bs5_badge(text: 14, style: :primary, pill: true) %>
5
+ <% end %>
6
+ <% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
7
+ Dapibus ac facilisis in
8
+ <%= bs5_badge(text: 2, style: :primary, pill: true) %>
9
+ <% end %>
10
+ <% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
11
+ Morbi leo risus
12
+ <%= bs5_badge(text: 1, style: :primary, pill: true) %>
13
+ <% end %>
14
+ <%- end %>
@@ -1,4 +1,4 @@
1
- <h3>Default</h3>
1
+ <h2>Default</h2>
2
2
  <%= bs5_example(snippet: 'tooltips/default/snippet') %>
3
3
  <%= bs5_example(snippet: 'tooltips/default/buttons') %>
4
4
  <%= bs5_example(snippet: 'tooltips/default/disabled_elements') %>
@@ -0,0 +1,3 @@
1
+ <h1 id='accordion'>Accordion</h1>
2
+ <%= render 'bs5/examples/accordion/default/example' %>
3
+ <%= render 'bs5/examples/accordion/flush/example' %>
@@ -1,4 +1,4 @@
1
- <h2>Alert</h2>
1
+ <h1 id='alert'>Alert</h1>
2
2
  <%= render 'bs5/examples/alert/default/example' %>
3
3
  <%= render 'bs5/examples/alert/style/example' %>
4
4
  <%= render 'bs5/examples/alert/additional_content/example' %>
@@ -1,4 +1,4 @@
1
- <h2>Badge</h2>
1
+ <h1 id='badge'>Badge</h1>
2
2
  <%= render 'bs5/examples/badge/default/example' %>
3
3
  <%= render 'bs5/examples/badge/style/example' %>
4
4
  <%= render 'bs5/examples/badge/pill/example' %>
@@ -0,0 +1,2 @@
1
+ <h1 id='breadcrumb'>Breadcrumb</h1>
2
+ <%= render 'bs5/examples/breadcrumb/default/example' %>
@@ -1,5 +1,5 @@
1
- <h2>Buttons</h2>
2
- <h3>Decorating Rails' <code>button_tag</code></h3>
1
+ <h1 id='buttons'>Buttons</h1>
2
+ <h2>Decorating Rails' <code>button_tag</code></h2>
3
3
  <%= render 'bs5/examples/buttons/button_tag/default/example' %>
4
4
  <%= render 'bs5/examples/buttons/button_tag/style/example' %>
5
5
  <%= render 'bs5/examples/buttons/button_tag/outline/example' %>
@@ -7,5 +7,5 @@
7
7
  <%= render 'bs5/examples/buttons/button_tag/block_buttons/example' %>
8
8
  <%= render 'bs5/examples/buttons/button_tag/toggle_states/example' %>
9
9
 
10
- <h3>Decorating Rails' <code>button_to</code></h3>
10
+ <h2>Decorating Rails' <code>button_to</code></h2>
11
11
  <%= render 'bs5/examples/buttons/button_to/default/example' %>
@@ -1,4 +1,4 @@
1
- <h2>Close button</h2>
1
+ <h1 id='close_button'>Close button</h1>
2
2
  <%= render 'bs5/examples/close_button/default/example' %>
3
3
  <%= render 'bs5/examples/close_button/disabled/example' %>
4
4
  <%= render 'bs5/examples/close_button/white/example' %>
@@ -0,0 +1,11 @@
1
+ <h1 id='list_group'>List group</h1>
2
+ <%= render 'bs5/examples/list_group/default/example' %>
3
+ <%= render 'bs5/examples/list_group/active/example' %>
4
+ <%= render 'bs5/examples/list_group/disabled/example' %>
5
+ <%= render 'bs5/examples/list_group/actionable/example' %>
6
+ <%= render 'bs5/examples/list_group/flush/example' %>
7
+ <%= render 'bs5/examples/list_group/horizontal/example' %>
8
+ <%= render 'bs5/examples/list_group/style/example' %>
9
+ <%= render 'bs5/examples/list_group/with_badges/example' %>
10
+ <%= render 'bs5/examples/list_group/custom_content/example' %>
11
+ <%= render 'bs5/examples/list_group/checkboxes_and_radios/example' %>
@@ -1,2 +1,2 @@
1
- <h2>Tooltips</h2>
1
+ <h1 id='tooltip'>Tooltips</h1>
2
2
  <%= render 'bs5/examples/tooltips/default/example' %>
@@ -0,0 +1,32 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Bs5</title>
5
+ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
6
+ <%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
7
+ <style><%= Rouge::Themes::Github.render(scope: '.highlight') %></style>
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <div class="row">
12
+ <div class="col">
13
+ <div class="sticky-top">
14
+ <%= bs5_list_group(flush: true) do |lg| %>
15
+ <% lg.slot(:item, active: current_page?(pages_path('accordion'))) do %><%= link_to 'Accordion', pages_path('accordion') %><% end %>
16
+ <% lg.slot(:item, active: current_page?(pages_path('alert'))) do %><%= link_to 'Alert', pages_path('alert') %><% end %>
17
+ <% lg.slot(:item, active: current_page?(pages_path('badge'))) do %><%= link_to 'Badge', pages_path('badge') %><% end %>
18
+ <% lg.slot(:item, active: current_page?(pages_path('breadcrumb'))) do %><%= link_to 'Breadcrumb', pages_path('breadcrumb') %><% end %>
19
+ <% lg.slot(:item, active: current_page?(pages_path('buttons'))) do %><%= link_to 'Buttons', pages_path('buttons') %><% end %>
20
+ <% lg.slot(:item, active: current_page?(pages_path('close_button'))) do %><%= link_to 'Close button', pages_path('close_button') %><% end %>
21
+ <% lg.slot(:item, active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>
22
+ <% lg.slot(:item, active: current_page?(pages_path('tooltips'))) do %><%= link_to 'Tooltips', pages_path('tooltips') %><% end %>
23
+ <%- end %>
24
+ </div>
25
+ </div>
26
+ <div class="col-10">
27
+ <%= yield %>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </body>
32
+ </html>
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  Bs5::Engine.routes.draw do
4
- get 'examples/index'
4
+ get 'pages/:page', to: 'pages#show', as: :pages
5
5
 
6
- root to: 'examples#index'
6
+ root to: 'pages#show', page: 'accordion'
7
7
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Bs5
4
- VERSION = '0.0.12'
4
+ VERSION = '0.0.13'
5
5
  end
metadata CHANGED
@@ -1,15 +1,29 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bs5
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.12
4
+ version: 0.0.13
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-11-28 00:00:00.000000000 Z
11
+ date: 2020-12-06 00:00:00.000000000 Z
12
12
  dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: nokogiri
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: 1.10.10
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: 1.10.10
13
27
  - !ruby/object:Gem::Dependency
14
28
  name: rails
15
29
  requirement: !ruby/object:Gem::Requirement
@@ -140,20 +154,15 @@ files:
140
154
  - app/components/bs5/close_button_component.rb
141
155
  - app/components/bs5/example_component.html.erb
142
156
  - app/components/bs5/example_component.rb
157
+ - app/components/bs5/list_group_component.html.erb
158
+ - app/components/bs5/list_group_component.rb
143
159
  - app/controllers/bs5/application_controller.rb
144
- - app/controllers/bs5/examples_controller.rb
160
+ - app/controllers/bs5/pages_controller.rb
145
161
  - app/helpers/bs5/application_helper.rb
146
162
  - app/helpers/bs5/components_helper.rb
147
163
  - app/helpers/bs5/examples_helper.rb
148
164
  - app/models/bs5/application_record.rb
149
165
  - app/validators/style_validator.rb
150
- - app/views/bs5/examples/_accordion.html.erb
151
- - app/views/bs5/examples/_alert.html.erb
152
- - app/views/bs5/examples/_badge.html.erb
153
- - app/views/bs5/examples/_breadcrumb.html.erb
154
- - app/views/bs5/examples/_buttons.html.erb
155
- - app/views/bs5/examples/_close_button.html.erb
156
- - app/views/bs5/examples/_tooltips.html.erb
157
166
  - app/views/bs5/examples/accordion/default/_example.html.erb
158
167
  - app/views/bs5/examples/accordion/default/snippet.html.erb
159
168
  - app/views/bs5/examples/accordion/flush/_example.html.erb
@@ -198,12 +207,43 @@ files:
198
207
  - app/views/bs5/examples/close_button/disabled/snippet.html.erb
199
208
  - app/views/bs5/examples/close_button/white/_example.html.erb
200
209
  - app/views/bs5/examples/close_button/white/snippet.html.erb
201
- - app/views/bs5/examples/index.html.erb
210
+ - app/views/bs5/examples/list_group/actionable/_example.html.erb
211
+ - app/views/bs5/examples/list_group/actionable/button.html.erb
212
+ - app/views/bs5/examples/list_group/actionable/snippet.html.erb
213
+ - app/views/bs5/examples/list_group/active/_example.html.erb
214
+ - app/views/bs5/examples/list_group/active/snippet.html.erb
215
+ - app/views/bs5/examples/list_group/checkboxes_and_radios/_example.html.erb
216
+ - app/views/bs5/examples/list_group/checkboxes_and_radios/default.html.erb
217
+ - app/views/bs5/examples/list_group/checkboxes_and_radios/with_labels.html.erb
218
+ - app/views/bs5/examples/list_group/custom_content/_example.html.erb
219
+ - app/views/bs5/examples/list_group/custom_content/default.html.erb
220
+ - app/views/bs5/examples/list_group/default/_example.html.erb
221
+ - app/views/bs5/examples/list_group/default/snippet.html.erb
222
+ - app/views/bs5/examples/list_group/disabled/_example.html.erb
223
+ - app/views/bs5/examples/list_group/disabled/snippet.html.erb
224
+ - app/views/bs5/examples/list_group/flush/_example.html.erb
225
+ - app/views/bs5/examples/list_group/flush/snippet.html.erb
226
+ - app/views/bs5/examples/list_group/horizontal/_example.html.erb
227
+ - app/views/bs5/examples/list_group/horizontal/snippet.html.erb
228
+ - app/views/bs5/examples/list_group/style/_example.html.erb
229
+ - app/views/bs5/examples/list_group/style/actionable.html.erb
230
+ - app/views/bs5/examples/list_group/style/default.html.erb
231
+ - app/views/bs5/examples/list_group/with_badges/_example.html.erb
232
+ - app/views/bs5/examples/list_group/with_badges/default.html.erb
202
233
  - app/views/bs5/examples/tooltips/default/_example.html.erb
203
234
  - app/views/bs5/examples/tooltips/default/buttons.html.erb
204
235
  - app/views/bs5/examples/tooltips/default/disabled_elements.html.erb
205
236
  - app/views/bs5/examples/tooltips/default/snippet.html.erb
237
+ - app/views/bs5/pages/accordion.html.erb
238
+ - app/views/bs5/pages/alert.html.erb
239
+ - app/views/bs5/pages/badge.html.erb
240
+ - app/views/bs5/pages/breadcrumb.html.erb
241
+ - app/views/bs5/pages/buttons.html.erb
242
+ - app/views/bs5/pages/close_button.html.erb
243
+ - app/views/bs5/pages/list_group.html.erb
244
+ - app/views/bs5/pages/tooltips.html.erb
206
245
  - app/views/layouts/bs5/application.html.erb
246
+ - app/views/layouts/bs5/pages.html.erb
207
247
  - config/definitions.rb
208
248
  - config/locales/en.yml
209
249
  - config/routes.rb
@@ -1,9 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- require_dependency 'bs5/application_controller'
4
-
5
- module Bs5
6
- class ExamplesController < ApplicationController
7
- def index; end
8
- end
9
- end
@@ -1,3 +0,0 @@
1
- <h2>Accordion</h2>
2
- <%= render 'bs5/examples/accordion/default/example' %>
3
- <%= render 'bs5/examples/accordion/flush/example' %>
@@ -1,2 +0,0 @@
1
- <h2>Breadcrumb</h2>
2
- <%= render 'bs5/examples/breadcrumb/default/example' %>
@@ -1,25 +0,0 @@
1
- <div class="row">
2
- <div class="col">
3
- <div class="sticky-top">
4
- <ul class="nav flex-column">
5
- <li>Accordion</li>
6
- <li>Alert</li>
7
- <li>Badge</li>
8
- <li>Close button</li>
9
- <li>Breadcrumb</li>
10
- <li>Buttons</li>
11
- <li>Tooltips</li>
12
- </ul>
13
- </div>
14
- </div>
15
- <div class="col-10">
16
- <h1>Bootstrap Examples</h1>
17
- <%= render 'accordion' %>
18
- <%= render 'alert' %>
19
- <%= render 'badge' %>
20
- <%= render 'close_button' %>
21
- <%= render 'breadcrumb' %>
22
- <%= render 'buttons' %>
23
- <%= render 'tooltips' %>
24
- </div>
25
- </div>