govuk_publishing_components 62.1.0 → 62.2.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/govuk_publishing_components/components/_image-card.scss +34 -165
- data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss +9 -0
- data/app/views/govuk_publishing_components/components/_image_card.html.erb +11 -13
- data/app/views/govuk_publishing_components/components/_inverse_header.html.erb +1 -0
- data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +14 -0
- data/lib/govuk_publishing_components/presenters/image_card_helper.rb +0 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4adbacb941a85158a89ee100d0a96a6d93640c915a3082e1eca30a0d696bf584
|
|
4
|
+
data.tar.gz: 3c4ceb2b2db7d062af5ab851cd563c0aa79b01222d796e842019f2fed58f49c0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: abe856ab03cbb25274788ccc6e5111dacb8676fd7ab62cf7cdc62df658d17fb1c34b52c6866c9d8a6966570e6f41fe9f775d68d38c3c757410e1b4ab78cf5734
|
|
7
|
+
data.tar.gz: 73082194a95c24fdff0b8af8fea8f6b772bb3a923cccc0c6a251923f46a59f2ea18666eb6f8f6f6e0215f4dc728869d44f9104e1be61c13cb6305d1448f58833
|
|
@@ -6,139 +6,39 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
display: -ms-flexbox;
|
|
8
8
|
flex-direction: column-reverse;
|
|
9
|
-
-ms-flex-direction:
|
|
9
|
+
-ms-flex-direction: row-reverse;
|
|
10
|
+
gap: govuk-spacing(2);
|
|
11
|
+
justify-content: space-between;
|
|
12
|
+
align-items: stretch;
|
|
10
13
|
@include govuk-text-colour;
|
|
11
|
-
@include govuk-clearfix;
|
|
12
|
-
|
|
13
|
-
@include govuk-media-query($from: mobile, $until: tablet) {
|
|
14
|
-
display: block;
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
15
|
+
@include govuk-media-query($until: tablet) {
|
|
16
|
+
flex-direction: row-reverse;
|
|
17
|
+
gap: govuk-spacing(3);
|
|
20
18
|
}
|
|
21
19
|
}
|
|
22
20
|
|
|
23
|
-
.gem-c-image-
|
|
24
|
-
|
|
25
|
-
flex-
|
|
26
|
-
-ms-flex-direction: column-reverse;
|
|
21
|
+
.gem-c-image-card__text-wrapper {
|
|
22
|
+
flex-grow: 1;
|
|
23
|
+
flex-basis: 50%;
|
|
27
24
|
}
|
|
28
25
|
|
|
29
26
|
.gem-c-image-card__image-wrapper {
|
|
27
|
+
flex-grow: 1;
|
|
28
|
+
flex-basis: 50%;
|
|
30
29
|
margin: 0;
|
|
31
30
|
|
|
32
31
|
@include govuk-media-query($from: tablet) {
|
|
33
|
-
margin-bottom: govuk-spacing(2);
|
|
34
32
|
height: 100%;
|
|
35
33
|
}
|
|
36
|
-
|
|
37
|
-
+ .gem-c-image-card__text-wrapper {
|
|
38
|
-
@include govuk-media-query($until: tablet) {
|
|
39
|
-
padding-left: 0;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@include govuk-media-query($from: mobile, $until: tablet) {
|
|
45
|
-
.gem-c-image-card {
|
|
46
|
-
margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.gem-c-image-card__image-wrapper {
|
|
50
|
-
@include govuk-grid-column($width: one-half, $at: mobile);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.gem-c-image-card__text-wrapper {
|
|
54
|
-
@include govuk-grid-column($width: one-half, $at: mobile);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
|
|
58
|
-
@include govuk-grid-column($width: one-third, $float: right, $at: mobile);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
|
|
62
|
-
@include govuk-grid-column($width: two-thirds, $float: right, $at: mobile);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
@include govuk-media-query($from: tablet) {
|
|
67
|
-
.gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
|
|
68
|
-
@include govuk-grid-column($width: one-third, $float: right, $at: tablet);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
|
|
72
|
-
@include govuk-grid-column($width: two-thirds, $float: right, $at: tablet);
|
|
73
|
-
}
|
|
74
34
|
}
|
|
75
35
|
|
|
76
36
|
.gem-c-image-card__image {
|
|
77
37
|
display: block;
|
|
78
38
|
height: auto;
|
|
79
39
|
width: 100%;
|
|
40
|
+
border: 0;
|
|
80
41
|
border-top: 1px solid $govuk-border-colour;
|
|
81
|
-
border-left: none;
|
|
82
|
-
border-right: none;
|
|
83
|
-
border-bottom: none;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.gem-c-image-card.gem-c-image-card--two-thirds {
|
|
87
|
-
// Change default flex-direction from column-reverse
|
|
88
|
-
// so that the image and text appear in the same row,
|
|
89
|
-
// with the image to the left
|
|
90
|
-
flex-direction: row-reverse;
|
|
91
|
-
-ms-flex-direction: row-reverse;
|
|
92
|
-
// Wrap flex items onto a new line and ensure
|
|
93
|
-
// that items are aligned correctly
|
|
94
|
-
flex-wrap: wrap-reverse;
|
|
95
|
-
-ms-flex-wrap: wrap-reverse;
|
|
96
|
-
justify-content: flex-end;
|
|
97
|
-
align-items: flex-end;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.gem-c-image-card--two-thirds {
|
|
101
|
-
.gem-c-image-card__image {
|
|
102
|
-
border-top: none;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// TODO: Temporary fixes to ensure the layout
|
|
106
|
-
// renders correctly on screen sizes less than 320px wide
|
|
107
|
-
@include govuk-media-query($until: "mobile") {
|
|
108
|
-
padding: 0 govuk-spacing(3);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.gem-c-image-card__image-wrapper {
|
|
112
|
-
@include govuk-media-query($until: "mobile") {
|
|
113
|
-
margin-bottom: govuk-spacing(2);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// Ensures the font-size is 19px on all screen sizes
|
|
118
|
-
.gem-c-image-card__title-link--large-font-size-mobile,
|
|
119
|
-
.gem-c-image-card__description--large-font-size-mobile {
|
|
120
|
-
@include govuk-media-query($until: "tablet") {
|
|
121
|
-
font-size: 19px;
|
|
122
|
-
font-size: govuk-px-to-rem(19);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
|
|
128
|
-
// The first two values set flex-grow and flex-basis to 0
|
|
129
|
-
// This ensures that the flex item does not grow or shrink
|
|
130
|
-
// The the last value, sets flex-basis to 95px
|
|
131
|
-
// padding-left is set to 15px and the image used is 80px wide
|
|
132
|
-
flex: 0 0 95px;
|
|
133
|
-
padding-right: 0;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
|
|
137
|
-
// The first two values set flex-grow and flex-basis to 1
|
|
138
|
-
// This allows the flex item contain the image card text to grow or shrink
|
|
139
|
-
// The last value, sets flex-basis to 70%
|
|
140
|
-
// If the width of the flex-item shrinks below 70%, it will wrap onto a new line
|
|
141
|
-
flex: 1 1 70%;
|
|
142
42
|
}
|
|
143
43
|
|
|
144
44
|
.gem-c-image-card__title {
|
|
@@ -155,22 +55,13 @@
|
|
|
155
55
|
// position relative and a higher z-index to put them above the after element
|
|
156
56
|
&::after {
|
|
157
57
|
content: "";
|
|
58
|
+
display: block;
|
|
158
59
|
position: absolute;
|
|
159
60
|
z-index: 1;
|
|
160
61
|
top: 0;
|
|
161
62
|
left: 0;
|
|
162
63
|
right: 0;
|
|
163
64
|
height: 100%;
|
|
164
|
-
$ie-background: rgba(255, 255, 255, 0);
|
|
165
|
-
background: $ie-background; // because internet explorer
|
|
166
|
-
-ms-high-contrast-adjust: none;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
@include govuk-media-query($from: mobile, $until: tablet) {
|
|
170
|
-
&::after {
|
|
171
|
-
left: govuk-spacing(3);
|
|
172
|
-
right: govuk-spacing(3);
|
|
173
|
-
}
|
|
174
65
|
}
|
|
175
66
|
}
|
|
176
67
|
|
|
@@ -235,47 +126,34 @@
|
|
|
235
126
|
}
|
|
236
127
|
}
|
|
237
128
|
|
|
238
|
-
.gem-c-image-card--
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
129
|
+
.gem-c-image-card--two-thirds {
|
|
130
|
+
flex-direction: row-reverse;
|
|
131
|
+
gap: govuk-spacing(3);
|
|
132
|
+
|
|
133
|
+
.gem-c-image-card__text-wrapper {
|
|
134
|
+
flex: 1 1 70%;
|
|
243
135
|
}
|
|
244
|
-
}
|
|
245
136
|
|
|
246
|
-
.gem-c-image-card--large {
|
|
247
137
|
.gem-c-image-card__image-wrapper {
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
width: auto;
|
|
251
|
-
max-width: 100%;
|
|
252
|
-
@include govuk-grid-column($width: one-half, $at: tablet);
|
|
253
|
-
|
|
254
|
-
& { // stylelint-disable-line no-duplicate-selectors
|
|
255
|
-
// overriding the padding from govuk-grid-column mixin
|
|
256
|
-
padding: 0;
|
|
257
|
-
}
|
|
138
|
+
flex: 0 0 80px;
|
|
139
|
+
}
|
|
258
140
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
margin-bottom: 0;
|
|
262
|
-
}
|
|
141
|
+
.gem-c-image-card__image {
|
|
142
|
+
border-top: none;
|
|
263
143
|
}
|
|
264
144
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
145
|
+
@include govuk-media-query($until: "mobile") {
|
|
146
|
+
flex-direction: column-reverse;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
268
149
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
}
|
|
150
|
+
.gem-c-image-card--large {
|
|
151
|
+
flex-direction: column-reverse;
|
|
152
|
+
gap: govuk-spacing(2);
|
|
273
153
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
margin-bottom: 0;
|
|
278
|
-
}
|
|
154
|
+
@include govuk-media-query($from: tablet) {
|
|
155
|
+
flex-direction: row-reverse;
|
|
156
|
+
gap: govuk-spacing(5);
|
|
279
157
|
}
|
|
280
158
|
|
|
281
159
|
.gem-c-image-card__title {
|
|
@@ -339,15 +217,6 @@
|
|
|
339
217
|
@include govuk-focused-text;
|
|
340
218
|
}
|
|
341
219
|
|
|
342
|
-
.gem-c-image-card--no-image {
|
|
343
|
-
.gem-c-image-card__text-wrapper {
|
|
344
|
-
@include govuk-media-query($from: mobile, $until: tablet) {
|
|
345
|
-
float: left;
|
|
346
|
-
padding: 0 govuk-spacing(3);
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
|
|
351
220
|
// stylelint-disable declaration-no-important
|
|
352
221
|
@include govuk-media-query($media-type: print) {
|
|
353
222
|
.gem-c-image-card__title[class*="govuk-heading-"] {
|
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
margin-bottom: govuk-spacing(6);
|
|
7
7
|
padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
|
|
8
8
|
box-sizing: border-box;
|
|
9
|
+
|
|
10
|
+
@include govuk-media-query($until: desktop) {
|
|
11
|
+
padding-left: govuk-spacing(3);
|
|
12
|
+
padding-right: govuk-spacing(3);
|
|
13
|
+
}
|
|
9
14
|
}
|
|
10
15
|
|
|
11
16
|
.gem-c-inverse-header__subtext {
|
|
@@ -33,6 +38,10 @@
|
|
|
33
38
|
color: govuk-colour("white");
|
|
34
39
|
}
|
|
35
40
|
|
|
41
|
+
.gem-c-inverse-header--hmrc-header {
|
|
42
|
+
background: govuk-organisation-colour("hm-revenue-customs");
|
|
43
|
+
}
|
|
44
|
+
|
|
36
45
|
@include govuk-media-query($media-type: print) {
|
|
37
46
|
.gem-c-inverse-header {
|
|
38
47
|
background: none;
|
|
@@ -9,14 +9,11 @@
|
|
|
9
9
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
10
10
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
11
11
|
component_helper.add_class("gem-c-image-card")
|
|
12
|
-
component_helper.add_class("govuk-grid-row") if card_helper.two_thirds
|
|
13
12
|
component_helper.add_class("gem-c-image-card--large") if card_helper.large
|
|
14
13
|
component_helper.add_class("gem-c-image-card--two-thirds") if card_helper.two_thirds
|
|
15
|
-
component_helper.add_class("gem-c-image-card--no-image") unless (card_helper.image_src || card_helper.youtube_video_id)
|
|
16
14
|
component_helper.add_class(brand_helper.brand_class) if brand_helper.brand_class
|
|
17
15
|
|
|
18
16
|
text_wrapper_classes = %w[gem-c-image-card__text-wrapper]
|
|
19
|
-
text_wrapper_classes << "gem-c-image-card__text-wrapper--two-thirds" if card_helper.two_thirds
|
|
20
17
|
|
|
21
18
|
font_size ||= card_helper.large ? "m" : "s"
|
|
22
19
|
heading_class = %w[gem-c-image-card__title]
|
|
@@ -42,19 +39,20 @@
|
|
|
42
39
|
<% if card_helper.href || card_helper.extra_details.any? %>
|
|
43
40
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
44
41
|
<%= content_tag(:div, class: text_wrapper_classes) do %>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
<%= card_helper.context %>
|
|
43
|
+
|
|
44
|
+
<% if card_helper.heading_text %>
|
|
45
|
+
<%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
|
|
46
|
+
<% if card_helper.href %>
|
|
47
|
+
<%= link_to card_helper.heading_text, card_helper.href, class: heading_link_classes %>
|
|
48
|
+
<% else %>
|
|
49
|
+
<%= card_helper.heading_text %>
|
|
53
50
|
<% end %>
|
|
54
51
|
<% end %>
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
<% end %>
|
|
53
|
+
|
|
57
54
|
<%= card_helper.description %>
|
|
55
|
+
|
|
58
56
|
<% if card_helper.extra_details.any? %>
|
|
59
57
|
<ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_details_no_indent %>">
|
|
60
58
|
<% card_helper.extra_details.each do |link| %>
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
component_helper.add_class("gem-c-inverse-header--html-publication-header") if local_assigns[:html_publication_header]
|
|
12
12
|
component_helper.add_class("govuk-!-padding-top-#{padding_top}") if [*0..9].include?(padding_top)
|
|
13
13
|
component_helper.add_class("govuk-!-padding-bottom-#{padding_bottom}") if [*0..9].include?(padding_bottom)
|
|
14
|
+
component_helper.add_class("gem-c-inverse-header--hmrc-header") if local_assigns[:hmrc_header]
|
|
14
15
|
%>
|
|
15
16
|
<% block = yield %>
|
|
16
17
|
<% unless block.empty? %>
|
|
@@ -72,6 +72,20 @@ examples:
|
|
|
72
72
|
margin_bottom: 0
|
|
73
73
|
} %>
|
|
74
74
|
<!-- end of example content -->
|
|
75
|
+
hmrc_header:
|
|
76
|
+
description: For use on HMRC manual pages such as [Capital Gains Manual](https://www.gov.uk/hmrc-internal-manuals/capital-gains-manual).
|
|
77
|
+
data:
|
|
78
|
+
hmrc_header: true
|
|
79
|
+
block: |
|
|
80
|
+
<!-- example content -->
|
|
81
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
82
|
+
context: "HMRC internal manual",
|
|
83
|
+
text: "Capital Gains Manual",
|
|
84
|
+
inverse: true,
|
|
85
|
+
margin_bottom: 0,
|
|
86
|
+
font_size: "xl"
|
|
87
|
+
} %>
|
|
88
|
+
<!-- end of example content -->
|
|
75
89
|
with_paragraph_and_link:
|
|
76
90
|
data:
|
|
77
91
|
block: |
|