publishing_platform_publishing_components 0.6.0 → 0.7.0
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/publishing_platform_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/publishing_platform_publishing_components/components/_reorderable-list.scss +134 -0
- data/app/views/publishing_platform_publishing_components/components/_layout.html.erb +4 -1
- data/app/views/publishing_platform_publishing_components/components/_reorderable_list.html.erb +52 -0
- data/app/views/publishing_platform_publishing_components/components/docs/reorderable_list.yml +86 -0
- data/lib/publishing_platform_publishing_components/version.rb +1 -1
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 953768c8ffb997141bf1b7ddcaf8f30885cc1f93cae82606529731f69a47df93
|
|
4
|
+
data.tar.gz: f988fa81e5e31ca4ebcdcbd1afbedb6ef92e35545a0fa091c239e6f4afe811b7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e121e1d386e6e45228e48a07563d9c2fd6fe5e5e3e12f5a2ca28123b145a5a03063c41b586d5066ee7d61be616ee1f055b6e4c3f4dc199d045414f843bad9282
|
|
7
|
+
data.tar.gz: 25d03818838eb8fb0c9d9bd97d18eb90bb4f02de69033c56a67e972acd1fc730c93019218d70a151a37b9efc0876b4e1303b68c62b1980ec05f2aa9741b97ca0
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
@import 'functions';
|
|
2
|
+
@import 'variables';
|
|
3
|
+
@import 'mixins';
|
|
4
|
+
|
|
5
|
+
.gem-c-reorderable-list {
|
|
6
|
+
list-style-type: none;
|
|
7
|
+
margin-bottom: 30px;
|
|
8
|
+
margin-top: 0;
|
|
9
|
+
padding-left: 0;
|
|
10
|
+
position: relative;
|
|
11
|
+
font-weight: $font-weight-bold;
|
|
12
|
+
|
|
13
|
+
.gem-c-reorderable-list__form-group {
|
|
14
|
+
margin-bottom: 0;
|
|
15
|
+
|
|
16
|
+
.form-label {
|
|
17
|
+
display: block !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.form-control {
|
|
21
|
+
display: inline-block !important;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.gem-c-reorderable-list__item {
|
|
27
|
+
margin-bottom: 15px;
|
|
28
|
+
border: 1px solid $gray-500;
|
|
29
|
+
padding: 15px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.gem-c-reorderable-list__item--chosen {
|
|
33
|
+
background-color: $gray-200;
|
|
34
|
+
outline: 2px dotted $gray-500;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.gem-c-reorderable-list__actions {
|
|
38
|
+
display: block;
|
|
39
|
+
|
|
40
|
+
@include media-breakpoint-up(sm) {
|
|
41
|
+
flex: 1 0 auto;
|
|
42
|
+
text-align: right;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.btn {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.gem-c-reorderable-list__item--drag {
|
|
51
|
+
background-color: $white;
|
|
52
|
+
list-style-type: none;
|
|
53
|
+
|
|
54
|
+
.gem-c-reorderable-list__actions {
|
|
55
|
+
visibility: hidden;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.gem-c-reorderable-list__wrapper {
|
|
60
|
+
display: block;
|
|
61
|
+
|
|
62
|
+
@include media-breakpoint-up(sm) {
|
|
63
|
+
display: inline-flex;
|
|
64
|
+
width: 100%;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.gem-c-reorderable-list__content {
|
|
69
|
+
margin-bottom: 10px;
|
|
70
|
+
|
|
71
|
+
@include media-breakpoint-up(sm) {
|
|
72
|
+
margin-bottom: 0;
|
|
73
|
+
flex: 0 1 auto;
|
|
74
|
+
min-width: 65%;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.gem-c-reorderable-list__title {
|
|
79
|
+
margin: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.gem-c-reorderable-list__description {
|
|
83
|
+
margin: 0;
|
|
84
|
+
font-size: $small-font-size;
|
|
85
|
+
font-weight: $font-weight-normal;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.gem-c-reorderable-list__input {
|
|
89
|
+
max-width: 2.75em;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.js-enabled {
|
|
93
|
+
.gem-c-reorderable-list__item {
|
|
94
|
+
@include media-breakpoint-up(sm) {
|
|
95
|
+
cursor: move;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.gem-c-reorderable-list__actions .gem-c-reorderable-list__form-group {
|
|
100
|
+
display: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.gem-c-reorderable-list__actions .btn {
|
|
104
|
+
display: inline-block;
|
|
105
|
+
margin-left: 15px;
|
|
106
|
+
width: 80px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.gem-c-reorderable-list__actions .btn:first-of-type {
|
|
110
|
+
margin-left: 0;
|
|
111
|
+
|
|
112
|
+
@include media-breakpoint-up(sm) {
|
|
113
|
+
margin-left: 15px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.gem-c-reorderable-list__item:first-child .btn:first-of-type,
|
|
118
|
+
.gem-c-reorderable-list__item:last-child .btn:last-of-type {
|
|
119
|
+
display: none;
|
|
120
|
+
|
|
121
|
+
@include media-breakpoint-up(sm) {
|
|
122
|
+
display: inline-block;
|
|
123
|
+
visibility: hidden;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.gem-c-reorderable-list__item:first-child .btn:last-of-type {
|
|
128
|
+
margin-left: 0;
|
|
129
|
+
|
|
130
|
+
@include media-breakpoint-up(sm) {
|
|
131
|
+
margin-left: 15px;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
@@ -20,7 +20,10 @@
|
|
|
20
20
|
|
|
21
21
|
<%= yield :head %>
|
|
22
22
|
</head>
|
|
23
|
-
<body>
|
|
23
|
+
<body>
|
|
24
|
+
<%= javascript_tag nonce: true do -%>
|
|
25
|
+
document.body.className += ' js-enabled';
|
|
26
|
+
<% end %>
|
|
24
27
|
<div class="gem-c-layout container py-3">
|
|
25
28
|
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
|
|
26
29
|
<div class="col-md-3 mb-2 mb-md-0">
|
data/app/views/publishing_platform_publishing_components/components/_reorderable_list.html.erb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<%
|
|
2
|
+
items ||= []
|
|
3
|
+
input_name ||= "ordering"
|
|
4
|
+
|
|
5
|
+
component_helper = PublishingPlatformPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
6
|
+
component_helper.add_class("gem-c-reorderable-list")
|
|
7
|
+
component_helper.add_data_attribute({ module: "reorderable-list" })
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= tag.ol(**component_helper.all_attributes) do %>
|
|
11
|
+
<% items.each_with_index do |item, index| %>
|
|
12
|
+
<%= tag.li class: "gem-c-reorderable-list__item" do %>
|
|
13
|
+
<%= tag.div class: "gem-c-reorderable-list__wrapper" do %>
|
|
14
|
+
<%= tag.div class: "gem-c-reorderable-list__content" do %>
|
|
15
|
+
<%= tag.p item[:title], class: "gem-c-reorderable-list__title" %>
|
|
16
|
+
<%= tag.p(item[:description], class: "gem-c-reorderable-list__description") if item[:description].present? %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= tag.div class: "gem-c-reorderable-list__actions" do %>
|
|
19
|
+
|
|
20
|
+
<% label_text = capture do %>
|
|
21
|
+
Position<span class='visually-hidden'> for <%= item[:title] %></span>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
24
|
+
<% input_id = "input-#{SecureRandom.hex(4)}" %>
|
|
25
|
+
|
|
26
|
+
<%= tag.div class: "gem-c-reorderable-list__form-group" do %>
|
|
27
|
+
<%= label_tag input_id, label_text, class: "form-label fw-bold" %>
|
|
28
|
+
<%= text_field_tag "#{input_name}[#{item[:id]}]",
|
|
29
|
+
index + 1,
|
|
30
|
+
id: input_id,
|
|
31
|
+
inputmode: "numeric",
|
|
32
|
+
class: "form-control gem-c-reorderable-list__input" %>
|
|
33
|
+
<% end %>
|
|
34
|
+
|
|
35
|
+
<%= content_tag :button,
|
|
36
|
+
"Up",
|
|
37
|
+
class: "btn btn-secondary js-reorderable-list-up",
|
|
38
|
+
type: "button",
|
|
39
|
+
"aria-label": "Move \"#{item[:title]}\" up"
|
|
40
|
+
%>
|
|
41
|
+
|
|
42
|
+
<%= content_tag :button,
|
|
43
|
+
"Down",
|
|
44
|
+
class: "btn btn-secondary js-reorderable-list-down",
|
|
45
|
+
type: "button",
|
|
46
|
+
"aria-label": "Move \"#{item[:title]}\" down"
|
|
47
|
+
%>
|
|
48
|
+
<% end %>
|
|
49
|
+
<% end %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
name: Reorderable list
|
|
2
|
+
description: A list of items that can be reordered
|
|
3
|
+
body: |
|
|
4
|
+
List items can be reordered by drag and drop or by using the up/down buttons.
|
|
5
|
+
On small viewports the drag and drop feature is disabled to prevent being triggered
|
|
6
|
+
when scrolling on touch devices.
|
|
7
|
+
|
|
8
|
+
This component uses SortableJS - a JavaScript library for drag and drop interactions.
|
|
9
|
+
When JavaScript is disabled a set of inputs will be shown allowing users to provide
|
|
10
|
+
an order index for each item.
|
|
11
|
+
|
|
12
|
+
When this component is embedded into a form and that form is submit you will receive a
|
|
13
|
+
parameter of `ordering` (which can be customised with the `input_name` option).
|
|
14
|
+
This will contain item ids and ordering positions in a hash.
|
|
15
|
+
|
|
16
|
+
For example, for two items with id "a" and "b" that are ordered accordingly,
|
|
17
|
+
you'd receive a submission of `ordering[a]=1&ordering[b]=2`, which Rails can
|
|
18
|
+
translate to `"ordering" => { "a" => "1", "b" => "2" }`.
|
|
19
|
+
|
|
20
|
+
uses_component_wrapper_helper: true
|
|
21
|
+
accessibility_criteria: |
|
|
22
|
+
Buttons in this component must:
|
|
23
|
+
|
|
24
|
+
* be keyboard focusable
|
|
25
|
+
* inform the user about which item they operate on
|
|
26
|
+
* preserve focus after interacting with them
|
|
27
|
+
examples:
|
|
28
|
+
default:
|
|
29
|
+
data:
|
|
30
|
+
items:
|
|
31
|
+
- id: "ce99dd60-67dc-11eb-ae93-0242ac130002"
|
|
32
|
+
title: "Budget 2018"
|
|
33
|
+
- id: "d321cb86-67dc-11eb-ae93-0242ac130002"
|
|
34
|
+
title: "Budget 2018 (web)"
|
|
35
|
+
- id: "63a6d29e-6b6d-4157-9067-84c1a390e352"
|
|
36
|
+
title: "Impact on households: distributional analysis to accompany Budget 2018"
|
|
37
|
+
- id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
|
|
38
|
+
title: "Table 2.1: Budget 2018 policy decisions"
|
|
39
|
+
- id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
|
|
40
|
+
title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
|
|
41
|
+
with_description:
|
|
42
|
+
data:
|
|
43
|
+
items:
|
|
44
|
+
- id: "ce99dd60-67dc-11eb-ae93-0242ac130002"
|
|
45
|
+
title: "Budget 2018"
|
|
46
|
+
description: "PDF, 2.56MB, 48 pages"
|
|
47
|
+
- id: "d321cb86-67dc-11eb-ae93-0242ac130002"
|
|
48
|
+
title: "Budget 2018 (web)"
|
|
49
|
+
description: "HTML attachment"
|
|
50
|
+
- id: "63a6d29e-6b6d-4157-9067-84c1a390e352"
|
|
51
|
+
title: "Impact on households: distributional analysis to accompany Budget 2018"
|
|
52
|
+
description: "PDF, 592KB, 48 pages"
|
|
53
|
+
- id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
|
|
54
|
+
title: "Table 2.1: Budget 2018 policy decisions"
|
|
55
|
+
description: "MS Excel Spreadsheet, 248KB"
|
|
56
|
+
- id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
|
|
57
|
+
title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
|
|
58
|
+
description: "MS Excel Spreadsheet, 248KB"
|
|
59
|
+
within_form:
|
|
60
|
+
embed: |
|
|
61
|
+
<form>
|
|
62
|
+
<%= component %>
|
|
63
|
+
<button class="btn btn-primary" type="submit">Save order</button>
|
|
64
|
+
</form>
|
|
65
|
+
data:
|
|
66
|
+
items:
|
|
67
|
+
- id: "ce99dd60-67dc-11eb-ae93-0242ac130002"
|
|
68
|
+
title: "Budget 2018"
|
|
69
|
+
- id: "d321cb86-67dc-11eb-ae93-0242ac130002"
|
|
70
|
+
title: "Budget 2018 (web)"
|
|
71
|
+
- id: "63a6d29e-6b6d-4157-9067-84c1a390e352"
|
|
72
|
+
title: "Impact on households: distributional analysis to accompany Budget 2018"
|
|
73
|
+
- id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
|
|
74
|
+
title: "Table 2.1: Budget 2018 policy decisions"
|
|
75
|
+
- id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
|
|
76
|
+
title: "Table 2.2: Measures announced at Autumn Budget 2017 or earlier that will take effect from November 2018 or later (£ million)"
|
|
77
|
+
with_custom_input_name:
|
|
78
|
+
data:
|
|
79
|
+
input_name: "attachments[ordering]"
|
|
80
|
+
items:
|
|
81
|
+
- id: "5ebd75d7-6c37-4b93-b444-1b7c49757fb9"
|
|
82
|
+
title: "Budget 2018"
|
|
83
|
+
description: "PDF, 2.56MB, 48 pages"
|
|
84
|
+
- id: "0a4d377d-68f4-472f-b2e3-ef71dc750f85"
|
|
85
|
+
title: "Budget 2020"
|
|
86
|
+
description: "PDF, 2.56MB, 48 pages"
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: publishing_platform_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.7.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Publishing Platform
|
|
@@ -179,6 +179,7 @@ files:
|
|
|
179
179
|
- app/assets/stylesheets/publishing_platform_publishing_components/components/_attachment.scss
|
|
180
180
|
- app/assets/stylesheets/publishing_platform_publishing_components/components/_inset-text.scss
|
|
181
181
|
- app/assets/stylesheets/publishing_platform_publishing_components/components/_layout.scss
|
|
182
|
+
- app/assets/stylesheets/publishing_platform_publishing_components/components/_reorderable-list.scss
|
|
182
183
|
- app/assets/stylesheets/publishing_platform_publishing_components/components/_summary-list.scss
|
|
183
184
|
- app/controllers/publishing_platform_publishing_components/application_controller.rb
|
|
184
185
|
- app/helpers/publishing_platform_publishing_components/application_helper.rb
|
|
@@ -193,6 +194,7 @@ files:
|
|
|
193
194
|
- app/views/publishing_platform_publishing_components/components/_inset_text.html.erb
|
|
194
195
|
- app/views/publishing_platform_publishing_components/components/_layout.html.erb
|
|
195
196
|
- app/views/publishing_platform_publishing_components/components/_navigation.html.erb
|
|
197
|
+
- app/views/publishing_platform_publishing_components/components/_reorderable_list.html.erb
|
|
196
198
|
- app/views/publishing_platform_publishing_components/components/_summary_list.html.erb
|
|
197
199
|
- app/views/publishing_platform_publishing_components/components/attachment/_thumbnail_document.html.erb
|
|
198
200
|
- app/views/publishing_platform_publishing_components/components/attachment/_thumbnail_external.html.erb
|
|
@@ -205,6 +207,7 @@ files:
|
|
|
205
207
|
- app/views/publishing_platform_publishing_components/components/docs/error_summary.yml
|
|
206
208
|
- app/views/publishing_platform_publishing_components/components/docs/inset_text.yml
|
|
207
209
|
- app/views/publishing_platform_publishing_components/components/docs/navigation.yml
|
|
210
|
+
- app/views/publishing_platform_publishing_components/components/docs/reorderable_list.yml
|
|
208
211
|
- app/views/publishing_platform_publishing_components/components/docs/summary_list.yml
|
|
209
212
|
- config/initializers/assets.rb
|
|
210
213
|
- config/routes.rb
|