bs5_expandable_list_group 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +192 -0
  4. data/Rakefile +18 -0
  5. data/app/assets/config/bs5_expandable_list_group_manifest.js +1 -0
  6. data/app/assets/stylesheets/bs5_expandable_list_group/application.css +15 -0
  7. data/app/components/bs5/expandable_list_group_component.html.erb +5 -0
  8. data/app/components/bs5/expandable_list_group_component.rb +33 -0
  9. data/app/components/bs5/expandable_list_item_component.html.erb +9 -0
  10. data/app/components/bs5/expandable_list_item_component.rb +52 -0
  11. data/app/components/bs5/expandable_list_item_header_actions_component.html.erb +12 -0
  12. data/app/components/bs5/expandable_list_item_header_actions_component.rb +14 -0
  13. data/app/components/bs5/expandable_list_item_header_title_component.html.erb +12 -0
  14. data/app/components/bs5/expandable_list_item_header_title_component.rb +20 -0
  15. data/app/controllers/bs5_expandable_list_group/application_controller.rb +4 -0
  16. data/app/helpers/bs5_expandable_list_group/application_helper.rb +4 -0
  17. data/app/jobs/bs5_expandable_list_group/application_job.rb +4 -0
  18. data/app/mailers/bs5_expandable_list_group/application_mailer.rb +6 -0
  19. data/app/models/bs5_expandable_list_group/application_record.rb +5 -0
  20. data/app/views/layouts/bs5_expandable_list_group/application.html.erb +15 -0
  21. data/config/routes.rb +2 -0
  22. data/lib/bs5_expandable_list_group.rb +7 -0
  23. data/lib/bs5_expandable_list_group/engine.rb +11 -0
  24. data/lib/bs5_expandable_list_group/version.rb +3 -0
  25. data/lib/generators/bs5_expandable_list_group/install/USAGE +8 -0
  26. data/lib/generators/bs5_expandable_list_group/install/install_generator.rb +17 -0
  27. data/lib/generators/bs5_expandable_list_group/install/templates/controllers/stretchable_item_controller.js +34 -0
  28. data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_expandable-items.scss +28 -0
  29. data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_stretchable-items.scss +19 -0
  30. data/lib/tasks/bs5_expandable_list_group_tasks.rake +4 -0
  31. data/lib/tasks/ci.rake +3 -0
  32. metadata +152 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: b3cf656df05f0efc37c63c574dc62e39dfc143911398bc3346f5641a1ac14400
4
+ data.tar.gz: 1122074157406c6c4a52aa579d59c64fe8162e3c320c5bb03d6dc56b8e5f9b12
5
+ SHA512:
6
+ metadata.gz: 2e225cb6367f28f3e31123bf1a9af9d6735bf441ef64e5d2276f04ebbfbf6d6b7545f7e00fc64741ca81b293b6273a9363cb802832f39fbc426a7a22998b819e
7
+ data.tar.gz: 3294f3b18925ebf3f7317bf07f67816e03e4fe54c700a8156de928675c88ec7183a1175de4aeebf738e0ecab9cda4bb0d5f8d971f0651e733121c67135671c3a
data/MIT-LICENSE ADDED
@@ -0,0 +1,20 @@
1
+ Copyright 2021 Patrick Baselier
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,192 @@
1
+ # Bootstrap 5 expandable list group
2
+
3
+ [![Build Status](https://travis-ci.org/bazzel/Bs5ExpandableListGroup.svg?branch=main)](https://travis-ci.org/bazzel/Bs5ExpandableListGroup)
4
+
5
+ **Bootstrap 5 expandable list group** gives you a simple API for creating expandable and stretchable list groups. A bit like [Bootstrap 5](https://getbootstrap.com/)'s [Accordion](https://getbootstrap.com/docs/5.0/components/accordion/), [Collapse](https://getbootstrap.com/docs/5.0/components/collapse/) and [List group](https://getbootstrap.com/docs/5.0/components/list-group/) components combined.
6
+
7
+ https://user-images.githubusercontent.com/7672/120296188-27170580-c2c8-11eb-936a-a93c16326acb.mp4
8
+
9
+ ## TL;DR
10
+
11
+ ```erb
12
+ <%= render(Bs5::ExpandableListGroupComponent.new) do |c| %>
13
+ <% @posts.each do |post| %>
14
+ <% c.item do |i| %>
15
+ <%= i.title { post.title } %>
16
+ <%= i.body { post.text } %>
17
+ <% end %>
18
+ <% end %>
19
+ <% end %>
20
+ ```
21
+
22
+ ## Features
23
+
24
+ - Choose to show a different title when the item is expanded
25
+ - Show one or more actions (buttons, links, icons, ...) when hovering over an item
26
+ - Choose to show a different set of items when the item is expanded
27
+ - When configured as an *accordion* only one item can expanded
28
+ - When configured as *expandable* expanded items are shown a little bit bigger as if they come out a bit.
29
+
30
+
31
+ ## Prerequisites
32
+
33
+ - [Stimulus](https://github.com/hotwired/stimulus-rails) or [Hotwire](https://github.com/hotwired/hotwire-rails) added to your project
34
+ - [Bootstrap 5](https://getbootstrap.com/) added to your project. There are different ways to do this, but you should use [Yarn](https://getbootstrap.com/docs/5.0/getting-started/download/#rubygems) with Webpacker.
35
+
36
+ ## Installation
37
+
38
+ Add this line to your application's Gemfile:
39
+
40
+ ```ruby
41
+ gem 'bs5_expandable_list_group'
42
+ ```
43
+
44
+ And then execute:
45
+
46
+ ```bash
47
+ $ bundle
48
+ ```
49
+
50
+ Run the following command to setup your project to use Bootstrap 5 expandable list group:
51
+
52
+ ```bash
53
+ $ bin/rails generate bs5_expandable_list_group:install
54
+ ```
55
+
56
+ This copies the required assets to your application directory:
57
+
58
+ Stylesheets are copied to `app/javascript/stylesheets`. If needed, you can the following line to your `application.scss` to import them:
59
+
60
+ ```scss
61
+ @import "bootstrap";
62
+ @import "stylesheets/expandable-items";
63
+ @import "stylesheets/stretchable-items";
64
+ ```
65
+
66
+ When you use Webpacker for your CSS, you should move these added stylesheets to the proper location (propably somewhere in `app/javascript` and import them in `application.scss` (or alike) located there.
67
+
68
+ ## Usage
69
+
70
+ To render a **Bootstrap 5 expandable list group** you use `render(Bs5::ExpandableListGroupComponent.new)` and pass it a block for rendering every list item.
71
+
72
+ Let's say, in the `index` action of your `PostsController`, you have assigned `@posts` that contains a list of `Post` instances. To render these `@posts` in a **Bootstrap 5 expandable list group**, you put the following code in your `index.html.erb` template:
73
+
74
+ ```erb
75
+ <%= render(Bs5::ExpandableListGroupComponent.new) do |c| %>
76
+ <% @posts.each do |post| %>
77
+ <% c.item do |i| %>
78
+ <%= i.title { post.title } %>
79
+ <%= i.body { post.text } %>
80
+ <% end %>
81
+ <% end %>
82
+ <% end %>
83
+ ```
84
+
85
+ This will render a [List group](https://getbootstrap.com/docs/5.0/components/list-group/) showing the title of every post. When you click a title, it will expand the item and the text of the post will be shown.
86
+
87
+ You are not limited to passing a simple attribute as title or body:
88
+
89
+ ```erb
90
+ ...
91
+ <% c.item do |i| %>
92
+ <%= i.title do %>
93
+ <div class="ms-2 me-auto">
94
+ <div class="fw-bold"><%= post.title %></div>
95
+ <%= post.author_name %>
96
+ </div>
97
+ <span class="badge bg-primary rounded-pill"><%= post.comments_count %></span>
98
+ <% end %>
99
+ <%= i.body { ... } %>
100
+ <% end %>
101
+ ```
102
+
103
+ ### Show different titles
104
+
105
+ You can show a different title when the item is expanded then when it is collapsed. Use the `.collapsed` and `.expanded` methods on the `title` object:
106
+
107
+ ```erb
108
+ ...
109
+ <% c.item do |i| %>
110
+ <%= i.title do |t| %>
111
+ <%= t.collapsed { 'Collapsed title' } %>
112
+ <%= t.expanded { 'Expanded title' } %>
113
+ <% end %>
114
+ <%= i.body { ... } %>
115
+ <% end %>
116
+ ```
117
+
118
+ ### Show actions
119
+
120
+ Actions can be used for defining links or buttons that will become visible when hovering over an item and are aligned to the right. When the item is expanded, the actions are permanently visible.
121
+
122
+ You can choose to either show one set of actions of using a different set when the item is expanded.
123
+
124
+ To show one set:
125
+
126
+ ```erb
127
+ ...
128
+ <% c.item do |i| %>
129
+ <%= i.title do |t| %>
130
+ ...
131
+ <% end %>
132
+ <% i.actions do %>
133
+ <%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
134
+ <%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
135
+ <% end %>
136
+ <%= i.body { ... } %>
137
+ <% end %>
138
+ ```
139
+
140
+ To show a different set on hovering:
141
+
142
+ ```erb
143
+ ...
144
+ <% c.item do |i| %>
145
+ <%= i.title do |t| %>
146
+ ...
147
+ <% end %>
148
+ <% i.actions do |a| %>
149
+ <% a.collapsed %>
150
+ <%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
151
+ <%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
152
+ <% end %>
153
+ <% a.expanded %>
154
+ <%= link_to 'Details', post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
155
+ <%= link_to 'Comment' ... %>
156
+ <%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
157
+ <%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
158
+ <% end %>
159
+ <% end %>
160
+ <%= i.body { ... } %>
161
+ <% end %>
162
+ ```
163
+
164
+ ### Passing options
165
+
166
+ The following options can be passed to `Bs5::ExpandableListGroupComponent.new`:
167
+
168
+ | name | default | description |
169
+ |---|---|---|
170
+ | `id` | | is used to assign an id HTML attribute to the rendered container |
171
+ | `class` | | is added to the class attribute of the rendered container |
172
+ | `accordion` | `false` | Behaves as an Bootstrap [accordion](https://getbootstrap.com/docs/5.0/components/accordion/) by having only 1 item expanded |
173
+ | `expandable` | `false` | Expanded items are shown a little bit bigger as if they come out a bit|
174
+
175
+
176
+ Example:
177
+
178
+ ```erb
179
+ <%= render(Bs5::ExpandableListGroupComponent.new(accordion: true, expandable: true) do |c| %>
180
+ ...
181
+ <% end %>
182
+ ```
183
+
184
+ ## Running tests
185
+
186
+ ```bash
187
+ $ bin/rails app:ci
188
+ ```
189
+
190
+ ## License
191
+
192
+ The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
data/Rakefile ADDED
@@ -0,0 +1,18 @@
1
+ require 'bundler/setup'
2
+
3
+ APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
4
+ load 'rails/tasks/engine.rake'
5
+
6
+ load 'rails/tasks/statistics.rake'
7
+
8
+ require 'bundler/gem_tasks'
9
+
10
+ require 'rake/testtask'
11
+
12
+ Rake::TestTask.new(:test) do |t|
13
+ t.libs << 'test'
14
+ t.pattern = 'test/**/*_test.rb'
15
+ t.verbose = false
16
+ end
17
+
18
+ task default: :test
@@ -0,0 +1 @@
1
+ //= link_directory ../stylesheets/bs5_expandable_list_group .css
@@ -0,0 +1,15 @@
1
+ /*
2
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
3
+ * listed below.
4
+ *
5
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7
+ *
8
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
9
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
10
+ * files in this directory. Styles in this file should be added after the last require_* statement.
11
+ * It is generally better to create a new file per style scope.
12
+ *
13
+ *= require_tree .
14
+ *= require_self
15
+ */
@@ -0,0 +1,5 @@
1
+ <%= tag.div(id: accordion? && id, class: component_class) do %>
2
+ <% items.each do |item| %>
3
+ <%= item %>
4
+ <% end %>
5
+ <% end %>
@@ -0,0 +1,33 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bs5
4
+ class ExpandableListGroupComponent < ViewComponent::Base
5
+ renders_many :items, lambda {
6
+ ExpandableListItemComponent.new(parent_id: accordion? && id, stretchable: stretchable?)
7
+ }
8
+
9
+ attr_reader :accordion, :stretchable
10
+
11
+ def initialize(options = {})
12
+ @accordion = options.delete(:accordion)
13
+ @stretchable = options.delete(:stretchable)
14
+ @id = options[:id]
15
+ @options = options
16
+ end
17
+
18
+ private
19
+
20
+ def id
21
+ @id || "list-group-#{object_id}"
22
+ end
23
+
24
+ def component_class
25
+ class_names = ['list-group']
26
+ class_names << @options[:class]
27
+ class_names
28
+ end
29
+
30
+ alias accordion? accordion
31
+ alias stretchable? stretchable
32
+ end
33
+ end
@@ -0,0 +1,9 @@
1
+ <%= tag.div(class: "list-group-item expandable-item", data: component_data_options) do %>
2
+ <div class="expandable-item-header">
3
+ <%= title %>
4
+ <%= actions %>
5
+ </div>
6
+ <%= tag.div(id: target_id, class: "expandable-item-body collapse", data: body_data_options) do %>
7
+ <%= body %>
8
+ <% end %>
9
+ <% end %>
@@ -0,0 +1,52 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bs5
4
+ class ExpandableListItemComponent < ViewComponent::Base
5
+ renders_one :title, lambda {
6
+ ExpandableListItemHeaderTitleComponent.new(target_id: target_id)
7
+ }
8
+ renders_one :actions, ExpandableListItemHeaderActionsComponent
9
+ renders_one :body
10
+
11
+ attr_reader :parent_id, :stretchable
12
+
13
+ def initialize(options = {})
14
+ @parent_id = options.delete(:parent_id)
15
+ @stretchable = options.delete(:stretchable)
16
+ @options = options
17
+ end
18
+
19
+ private
20
+
21
+ def target_id
22
+ "expandable-list-item-#{object_id}"
23
+ end
24
+
25
+ def body_data_options
26
+ {}.tap do |h|
27
+ h['bs-parent'] = "##{parent_id}" if parent_id
28
+ end
29
+ end
30
+
31
+ def component_data_options
32
+ {}.tap do |h|
33
+ h.merge!(stimulus_attributes) if stretchable?
34
+ end
35
+ end
36
+
37
+ def stimulus_attributes
38
+ {
39
+ controller: stimulus_controller,
40
+ "#{stimulus_controller}-target": 'container',
41
+ "#{stimulus_controller}-item-class": 'stretchable-item',
42
+ "#{stimulus_controller}-stretched-class": 'stretched'
43
+ }
44
+ end
45
+
46
+ def stimulus_controller
47
+ 'stretchable-item'
48
+ end
49
+
50
+ alias stretchable? stretchable
51
+ end
52
+ end
@@ -0,0 +1,12 @@
1
+ <div class="expandable-item-header-actions">
2
+ <% if variable_actions? %>
3
+ <%= tag.div(class: "expandable-item-header-actions-collaped") do %>
4
+ <%= collapsed %>
5
+ <% end %>
6
+ <%= tag.div(class: "expandable-item-header-actions-expanded") do %>
7
+ <%= expanded %>
8
+ <% end %>
9
+ <% else %>
10
+ <%= content %>
11
+ <% end %>
12
+ </div>
@@ -0,0 +1,14 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bs5
4
+ class ExpandableListItemHeaderActionsComponent < ViewComponent::Base
5
+ renders_one :collapsed
6
+ renders_one :expanded
7
+
8
+ private
9
+
10
+ def variable_actions?
11
+ collapsed || expanded
12
+ end
13
+ end
14
+ end
@@ -0,0 +1,12 @@
1
+ <%= tag.div(class: "expandable-item-header-title", data: { "bs-toggle": :collapse, "bs-target": "##{target_id}" } ) do %>
2
+ <% if variable_title? %>
3
+ <%= tag.div(class: "expandable-item-header-title-collaped") do %>
4
+ <%= collapsed %>
5
+ <% end %>
6
+ <%= tag.div(class: "expandable-item-header-title-expanded") do %>
7
+ <%= expanded %>
8
+ <% end %>
9
+ <% else %>
10
+ <%= content %>
11
+ <% end %>
12
+ <% end %>
@@ -0,0 +1,20 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Bs5
4
+ class ExpandableListItemHeaderTitleComponent < ViewComponent::Base
5
+ renders_one :collapsed
6
+ renders_one :expanded
7
+
8
+ attr_reader :target_id
9
+
10
+ def initialize(target_id:)
11
+ @target_id = target_id
12
+ end
13
+
14
+ private
15
+
16
+ def variable_title?
17
+ collapsed || expanded
18
+ end
19
+ end
20
+ end
@@ -0,0 +1,4 @@
1
+ module Bs5ExpandableListGroup
2
+ class ApplicationController < ActionController::Base
3
+ end
4
+ end
@@ -0,0 +1,4 @@
1
+ module Bs5ExpandableListGroup
2
+ module ApplicationHelper
3
+ end
4
+ end
@@ -0,0 +1,4 @@
1
+ module Bs5ExpandableListGroup
2
+ class ApplicationJob < ActiveJob::Base
3
+ end
4
+ end
@@ -0,0 +1,6 @@
1
+ module Bs5ExpandableListGroup
2
+ class ApplicationMailer < ActionMailer::Base
3
+ default from: 'from@example.com'
4
+ layout 'mailer'
5
+ end
6
+ end
@@ -0,0 +1,5 @@
1
+ module Bs5ExpandableListGroup
2
+ class ApplicationRecord < ActiveRecord::Base
3
+ self.abstract_class = true
4
+ end
5
+ end
@@ -0,0 +1,15 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Bs5 expandable list group</title>
5
+ <%= csrf_meta_tags %>
6
+ <%= csp_meta_tag %>
7
+
8
+ <%= stylesheet_link_tag "bs5_expandable_list_group/application", media: "all" %>
9
+ </head>
10
+ <body>
11
+
12
+ <%= yield %>
13
+
14
+ </body>
15
+ </html>
data/config/routes.rb ADDED
@@ -0,0 +1,2 @@
1
+ Bs5ExpandableListGroup::Engine.routes.draw do
2
+ end
@@ -0,0 +1,7 @@
1
+ require 'bs5_expandable_list_group/version'
2
+ require 'bs5_expandable_list_group/engine'
3
+ require 'view_component/engine'
4
+
5
+ module Bs5ExpandableListGroup
6
+ # Your code goes here...
7
+ end
@@ -0,0 +1,11 @@
1
+ module Bs5ExpandableListGroup
2
+ class Engine < ::Rails::Engine
3
+ isolate_namespace Bs5ExpandableListGroup
4
+
5
+ config.generators do |g|
6
+ g.test_framework :rspec
7
+ g.assets false
8
+ g.helper false
9
+ end
10
+ end
11
+ end
@@ -0,0 +1,3 @@
1
+ module Bs5ExpandableListGroup
2
+ VERSION = '0.1.0'
3
+ end
@@ -0,0 +1,8 @@
1
+ Description:
2
+ Explain the generator
3
+
4
+ Example:
5
+ bin/rails generate install Thing
6
+
7
+ This will create:
8
+ what/will/it/create
@@ -0,0 +1,17 @@
1
+ class Bs5ExpandableListGroup::InstallGenerator < Rails::Generators::Base
2
+ source_root File.expand_path('templates', __dir__)
3
+
4
+ def list_prerequisites
5
+ # We can add functionality to install hotwire automatically.
6
+ exit if no?('Do you have Stimulus or Hotwire installed? [Y/n]')
7
+ exit if no?('Do you have Bootstrap 5 installed and configured properly? [Y/n]')
8
+ end
9
+
10
+ def copy_js
11
+ directory 'controllers', 'app/javascript/controllers'
12
+ end
13
+
14
+ def copy_css
15
+ directory 'stylesheets', 'app/javascript/stylesheets'
16
+ end
17
+ end
@@ -0,0 +1,34 @@
1
+ import { Controller } from "stimulus";
2
+
3
+ const SHOW_EVENT = "show.bs.collapse";
4
+ const HIDE_EVENT = "hide.bs.collapse";
5
+
6
+ export default class extends Controller {
7
+ static targets = ["container"];
8
+ static classes = ["item", "stretched"];
9
+
10
+ initialize() {
11
+ this.onShow = this._onShow.bind(this);
12
+ this.onHide = this._onHide.bind(this);
13
+ this.contentNode = this.element.querySelector(".collapse");
14
+ }
15
+
16
+ connect() {
17
+ this.containerTarget.classList.add(this.itemClass);
18
+ this.contentNode.addEventListener(SHOW_EVENT, this.onShow);
19
+ this.contentNode.addEventListener(HIDE_EVENT, this.onHide);
20
+ }
21
+
22
+ disconnect() {
23
+ this.contentNode.removeEventListener(SHOW_EVENT, this.onShow);
24
+ this.contentNode.removeEventListener(HIDE_EVENT, this.onHide);
25
+ }
26
+
27
+ _onShow() {
28
+ this.containerTarget.classList.add(this.stretchedClass);
29
+ }
30
+
31
+ _onHide() {
32
+ this.containerTarget.classList.remove(this.stretchedClass);
33
+ }
34
+ }
@@ -0,0 +1,28 @@
1
+ .expandable-item {
2
+ &-header {
3
+ position: relative;
4
+ cursor: pointer;
5
+
6
+ &-actions {
7
+ position: absolute;
8
+ top: 0;
9
+ right: 0;
10
+ }
11
+ }
12
+
13
+ &:hover &-header-actions,
14
+ &-header-title[aria-expanded="true"] &-header-title-expanded,
15
+ &-header-title:not([aria-expanded="true"]) &-header-title-collaped,
16
+ &-header-title[aria-expanded="true"] + &-header-actions,
17
+ &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-expanded {
18
+ display: revert;
19
+ }
20
+
21
+ &-header &-header-actions,
22
+ &-header-title[aria-expanded="true"] &-header-title-collaped,
23
+ &-header-title:not([aria-expanded="true"]) &-header-title-expanded,
24
+ &-header-actions-expanded,
25
+ &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-collaped {
26
+ display: none;
27
+ }
28
+ }
@@ -0,0 +1,19 @@
1
+ $stretched-item-padding-x: (-1 * $grid-gutter-width) !default;
2
+ $stretched-item-padding-y: (-1 * $stretched-item-padding-x) !default;
3
+
4
+ .stretchable-item {
5
+ transition: all .2s;
6
+
7
+ &.stretched {
8
+ margin: $stretched-item-padding-y $stretched-item-padding-x;
9
+ @extend .shadow-lg;
10
+ }
11
+
12
+ &:not(.stretched) {
13
+ @extend .shadow-sm;
14
+
15
+ &:hover {
16
+ @extend .shadow;
17
+ }
18
+ }
19
+ }
@@ -0,0 +1,4 @@
1
+ # desc "Explaining what the task does"
2
+ # task :bs5_expandable_list_group do
3
+ # # Task goes here
4
+ # end
data/lib/tasks/ci.rake ADDED
@@ -0,0 +1,3 @@
1
+ # frozen_string_literal: true
2
+
3
+ task ci: %i[spec]
metadata ADDED
@@ -0,0 +1,152 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: bs5_expandable_list_group
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Patrick Baselier
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2021-06-01 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: rails
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: 6.1.3
20
+ - - ">="
21
+ - !ruby/object:Gem::Version
22
+ version: 6.1.3.2
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: !ruby/object:Gem::Requirement
26
+ requirements:
27
+ - - "~>"
28
+ - !ruby/object:Gem::Version
29
+ version: 6.1.3
30
+ - - ">="
31
+ - !ruby/object:Gem::Version
32
+ version: 6.1.3.2
33
+ - !ruby/object:Gem::Dependency
34
+ name: view_component
35
+ requirement: !ruby/object:Gem::Requirement
36
+ requirements:
37
+ - - "~>"
38
+ - !ruby/object:Gem::Version
39
+ version: '2.32'
40
+ type: :runtime
41
+ prerelease: false
42
+ version_requirements: !ruby/object:Gem::Requirement
43
+ requirements:
44
+ - - "~>"
45
+ - !ruby/object:Gem::Version
46
+ version: '2.32'
47
+ - !ruby/object:Gem::Dependency
48
+ name: capybara
49
+ requirement: !ruby/object:Gem::Requirement
50
+ requirements:
51
+ - - "~>"
52
+ - !ruby/object:Gem::Version
53
+ version: 3.35.3
54
+ type: :development
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ requirements:
58
+ - - "~>"
59
+ - !ruby/object:Gem::Version
60
+ version: 3.35.3
61
+ - !ruby/object:Gem::Dependency
62
+ name: rspec-rails
63
+ requirement: !ruby/object:Gem::Requirement
64
+ requirements:
65
+ - - "~>"
66
+ - !ruby/object:Gem::Version
67
+ version: 5.0.1
68
+ type: :development
69
+ prerelease: false
70
+ version_requirements: !ruby/object:Gem::Requirement
71
+ requirements:
72
+ - - "~>"
73
+ - !ruby/object:Gem::Version
74
+ version: 5.0.1
75
+ - !ruby/object:Gem::Dependency
76
+ name: sqlite3
77
+ requirement: !ruby/object:Gem::Requirement
78
+ requirements:
79
+ - - ">="
80
+ - !ruby/object:Gem::Version
81
+ version: '0'
82
+ type: :development
83
+ prerelease: false
84
+ version_requirements: !ruby/object:Gem::Requirement
85
+ requirements:
86
+ - - ">="
87
+ - !ruby/object:Gem::Version
88
+ version: '0'
89
+ description: Description of Bs5ExpandableListGroup.
90
+ email:
91
+ - patrick.baselier@gmail.com
92
+ executables: []
93
+ extensions: []
94
+ extra_rdoc_files: []
95
+ files:
96
+ - MIT-LICENSE
97
+ - README.md
98
+ - Rakefile
99
+ - app/assets/config/bs5_expandable_list_group_manifest.js
100
+ - app/assets/stylesheets/bs5_expandable_list_group/application.css
101
+ - app/components/bs5/expandable_list_group_component.html.erb
102
+ - app/components/bs5/expandable_list_group_component.rb
103
+ - app/components/bs5/expandable_list_item_component.html.erb
104
+ - app/components/bs5/expandable_list_item_component.rb
105
+ - app/components/bs5/expandable_list_item_header_actions_component.html.erb
106
+ - app/components/bs5/expandable_list_item_header_actions_component.rb
107
+ - app/components/bs5/expandable_list_item_header_title_component.html.erb
108
+ - app/components/bs5/expandable_list_item_header_title_component.rb
109
+ - app/controllers/bs5_expandable_list_group/application_controller.rb
110
+ - app/helpers/bs5_expandable_list_group/application_helper.rb
111
+ - app/jobs/bs5_expandable_list_group/application_job.rb
112
+ - app/mailers/bs5_expandable_list_group/application_mailer.rb
113
+ - app/models/bs5_expandable_list_group/application_record.rb
114
+ - app/views/layouts/bs5_expandable_list_group/application.html.erb
115
+ - config/routes.rb
116
+ - lib/bs5_expandable_list_group.rb
117
+ - lib/bs5_expandable_list_group/engine.rb
118
+ - lib/bs5_expandable_list_group/version.rb
119
+ - lib/generators/bs5_expandable_list_group/install/USAGE
120
+ - lib/generators/bs5_expandable_list_group/install/install_generator.rb
121
+ - lib/generators/bs5_expandable_list_group/install/templates/controllers/stretchable_item_controller.js
122
+ - lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_expandable-items.scss
123
+ - lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_stretchable-items.scss
124
+ - lib/tasks/bs5_expandable_list_group_tasks.rake
125
+ - lib/tasks/ci.rake
126
+ homepage: https://github.com/bazzel/Bs5ExpandableListGroup
127
+ licenses:
128
+ - MIT
129
+ metadata:
130
+ homepage_uri: https://github.com/bazzel/Bs5ExpandableListGroup
131
+ source_code_uri: https://github.com/bazzel/Bs5ExpandableListGroup
132
+ changelog_uri: https://github.com/bazzel/Bs5ExpandableListGroup/CHANGELOG.md
133
+ post_install_message:
134
+ rdoc_options: []
135
+ require_paths:
136
+ - lib
137
+ required_ruby_version: !ruby/object:Gem::Requirement
138
+ requirements:
139
+ - - ">="
140
+ - !ruby/object:Gem::Version
141
+ version: '0'
142
+ required_rubygems_version: !ruby/object:Gem::Requirement
143
+ requirements:
144
+ - - ">="
145
+ - !ruby/object:Gem::Version
146
+ version: '0'
147
+ requirements: []
148
+ rubygems_version: 3.2.3
149
+ signing_key:
150
+ specification_version: 4
151
+ summary: Summary of Bs5ExpandableListGroup.
152
+ test_files: []