bs5 0.0.12 → 0.0.13

Sign up to get free protection for your applications and to get access to all the features.
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>