publishing_platform_publishing_components 0.5.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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c220b3353f06ea1deb75bcc07e60a7eeeb269793c1bbe9712a5ab970230a7d98
4
- data.tar.gz: c68ad207fdf6ced57cba965674ab4285c945f086c0b603e1a6383573006df990
3
+ metadata.gz: 953768c8ffb997141bf1b7ddcaf8f30885cc1f93cae82606529731f69a47df93
4
+ data.tar.gz: f988fa81e5e31ca4ebcdcbd1afbedb6ef92e35545a0fa091c239e6f4afe811b7
5
5
  SHA512:
6
- metadata.gz: c0073afe1fa51c7740e1830495124bf99a4aee701cdf33e498f21c3525f756a143950aa40ef533a0f8d2a6b4e809c2908091c36b32fd3088969b2de6ed9af3f5
7
- data.tar.gz: 7217522d3598a41d937e8aa8e4d5084bb2df08c908bc40b8f13cceb5c02aa6e6c98aafd7c788d46fbfc85c9bf03e62dc57d7b4b7f63675356404abbde7ecc40a
6
+ metadata.gz: e121e1d386e6e45228e48a07563d9c2fd6fe5e5e3e12f5a2ca28123b145a5a03063c41b586d5066ee7d61be616ee1f055b6e4c3f4dc199d045414f843bad9282
7
+ data.tar.gz: 25d03818838eb8fb0c9d9bd97d18eb90bb4f02de69033c56a67e972acd1fc730c93019218d70a151a37b9efc0876b4e1303b68c62b1980ec05f2aa9741b97ca0
@@ -1,5 +1,7 @@
1
1
  @import "bootstrap";
2
2
  @import "components/attachment";
3
3
  @import "components/attachment-link";
4
+ @import "components/inset-text";
4
5
  @import "components/layout";
6
+ @import "components/reorderable-list";
5
7
  @import "components/summary-list";
@@ -0,0 +1,29 @@
1
+ @import 'functions';
2
+ @import 'variables';
3
+ @import 'mixins';
4
+
5
+ .gem-c-inset-text {
6
+ padding: 15px;
7
+
8
+ // Margin top intended to collapse
9
+ // This adds an additional 10px to the paragraph above
10
+ margin-top: 20px;
11
+ margin-bottom: 20px;
12
+
13
+ @include media-breakpoint-up(sm) {
14
+ margin-top: 30px;
15
+ margin-bottom: 30px;
16
+ }
17
+
18
+ clear: both;
19
+ border-left: 10px solid $gray-500;
20
+
21
+ > :first-child {
22
+ margin-top: 0;
23
+ }
24
+
25
+ > :only-child,
26
+ > :last-child {
27
+ margin-bottom: 0;
28
+ }
29
+ }
@@ -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
+ }
@@ -0,0 +1,14 @@
1
+ <%
2
+ id ||= "inset-text-#{SecureRandom.hex(4)}"
3
+
4
+ component_helper = PublishingPlatformPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
5
+ component_helper.add_class("gem-c-inset-text")
6
+ component_helper.set_id(id)
7
+ %>
8
+ <%= tag.div(**component_helper.all_attributes) do %>
9
+ <% if defined? text %>
10
+ <%= text %>
11
+ <% elsif block_given? %>
12
+ <%= yield %>
13
+ <% end %>
14
+ <% end %>
@@ -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">
@@ -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,19 @@
1
+ name: Inset text
2
+ description: Use the inset text component to differentiate a block of text from the content that surrounds it.
3
+ uses_component_wrapper_helper: true
4
+ accessibility_criteria: |
5
+ All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
6
+ examples:
7
+ default:
8
+ data:
9
+ text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
10
+
11
+ with_block:
12
+ description: |
13
+ Note that the contents should be styled separately from the component, which takes no responsibility for what it is passed.
14
+ data:
15
+ block: |
16
+ <div>
17
+ <h2 id='heading'>To publish this step by step you need to</h2>
18
+ <a href='/foo'>Check for broken links</a>
19
+ </div>
@@ -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"
@@ -1,3 +1,3 @@
1
1
  module PublishingPlatformPublishingComponents
2
- VERSION = "0.5.0".freeze
2
+ VERSION = "0.7.0".freeze
3
3
  end
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.5.0
4
+ version: 0.7.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Publishing Platform
@@ -177,7 +177,9 @@ files:
177
177
  - app/assets/stylesheets/publishing_platform_publishing_components/_all_components.scss
178
178
  - app/assets/stylesheets/publishing_platform_publishing_components/components/_attachment-link.scss
179
179
  - app/assets/stylesheets/publishing_platform_publishing_components/components/_attachment.scss
180
+ - app/assets/stylesheets/publishing_platform_publishing_components/components/_inset-text.scss
180
181
  - app/assets/stylesheets/publishing_platform_publishing_components/components/_layout.scss
182
+ - app/assets/stylesheets/publishing_platform_publishing_components/components/_reorderable-list.scss
181
183
  - app/assets/stylesheets/publishing_platform_publishing_components/components/_summary-list.scss
182
184
  - app/controllers/publishing_platform_publishing_components/application_controller.rb
183
185
  - app/helpers/publishing_platform_publishing_components/application_helper.rb
@@ -189,8 +191,10 @@ files:
189
191
  - app/views/publishing_platform_publishing_components/components/_attachment.html.erb
190
192
  - app/views/publishing_platform_publishing_components/components/_attachment_link.html.erb
191
193
  - app/views/publishing_platform_publishing_components/components/_error_summary.html.erb
194
+ - app/views/publishing_platform_publishing_components/components/_inset_text.html.erb
192
195
  - app/views/publishing_platform_publishing_components/components/_layout.html.erb
193
196
  - app/views/publishing_platform_publishing_components/components/_navigation.html.erb
197
+ - app/views/publishing_platform_publishing_components/components/_reorderable_list.html.erb
194
198
  - app/views/publishing_platform_publishing_components/components/_summary_list.html.erb
195
199
  - app/views/publishing_platform_publishing_components/components/attachment/_thumbnail_document.html.erb
196
200
  - app/views/publishing_platform_publishing_components/components/attachment/_thumbnail_external.html.erb
@@ -201,7 +205,9 @@ files:
201
205
  - app/views/publishing_platform_publishing_components/components/docs/attachment.yml
202
206
  - app/views/publishing_platform_publishing_components/components/docs/attachment_link.yml
203
207
  - app/views/publishing_platform_publishing_components/components/docs/error_summary.yml
208
+ - app/views/publishing_platform_publishing_components/components/docs/inset_text.yml
204
209
  - app/views/publishing_platform_publishing_components/components/docs/navigation.yml
210
+ - app/views/publishing_platform_publishing_components/components/docs/reorderable_list.yml
205
211
  - app/views/publishing_platform_publishing_components/components/docs/summary_list.yml
206
212
  - config/initializers/assets.rb
207
213
  - config/routes.rb
@@ -449,7 +455,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
449
455
  - !ruby/object:Gem::Version
450
456
  version: '0'
451
457
  requirements: []
452
- rubygems_version: 4.0.1
458
+ rubygems_version: 4.0.2
453
459
  specification_version: 4
454
460
  summary: A gem to document components in Publishing Platform frontend applications
455
461
  test_files: []