govuk_publishing_components 66.5.0 → 66.6.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/_breadcrumbs.scss +0 -22
- data/app/assets/stylesheets/govuk_publishing_components/components/_cards.scss +83 -0
- data/app/views/govuk_publishing_components/components/_cards.html.erb +1 -0
- data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml +8 -17
- data/app/views/govuk_publishing_components/components/docs/cards.yml +35 -0
- 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: ab8154e3861817b4b3715d2eea62bb92736ad4bd6fe842774b92aaf677252812
|
|
4
|
+
data.tar.gz: 2ba507170514ffb2c67ea8fc9bd2241c1943688d004c5ae0ce16ef2790b6b5fc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3e297e668a6c2cce7746b0408d1652b6293a9c737c755c6db89b42912c872428ab74b8ede5423e8c2efc9ac1fffcbc94b29500e648696fb0ea6aa1df337bb9ca
|
|
7
|
+
data.tar.gz: 8a5df50c254dcb946ca52b0d1f0efcb7df2ae1b30abcf100f75bac2c0a1d4e3e3dbfef068ec283bcf0e7379d430c9924d6218e6800196f40c746443b6e2ab26d
|
|
@@ -11,28 +11,6 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.govuk-breadcrumbs--collapse-on-mobile {
|
|
15
|
-
@include govuk-media-query($until: tablet) {
|
|
16
|
-
.govuk-breadcrumbs__list-item {
|
|
17
|
-
padding-top: 14px;
|
|
18
|
-
padding-bottom: 14px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.govuk-breadcrumbs__list-item::before {
|
|
22
|
-
top: 20px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.govuk-breadcrumbs__link::after {
|
|
26
|
-
content: "";
|
|
27
|
-
position: absolute;
|
|
28
|
-
top: 0;
|
|
29
|
-
right: 0;
|
|
30
|
-
left: 0;
|
|
31
|
-
bottom: 0;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
14
|
.gem-c-breadcrumbs[dir="rtl"] {
|
|
37
15
|
text-align: start;
|
|
38
16
|
|
|
@@ -60,6 +60,89 @@
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
+
.gem-c-cards--auto-layout {
|
|
64
|
+
.gem-c-cards__list {
|
|
65
|
+
container-type: inline-size;
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: row;
|
|
68
|
+
flex-wrap: wrap;
|
|
69
|
+
column-gap: 30px;
|
|
70
|
+
|
|
71
|
+
// pseudo elements form invisible elements to fill in
|
|
72
|
+
// the final row if it is incomplete, or fit below
|
|
73
|
+
&::before,
|
|
74
|
+
&::after {
|
|
75
|
+
content: "";
|
|
76
|
+
height: 0.1px;
|
|
77
|
+
opacity: 0;
|
|
78
|
+
order: 100;
|
|
79
|
+
transform: translateY(-5px);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.gem-c-cards__link {
|
|
84
|
+
&::before {
|
|
85
|
+
top: 27px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.gem-c-cards__description {
|
|
90
|
+
max-width: none;
|
|
91
|
+
margin: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.gem-c-cards__list::before,
|
|
95
|
+
.gem-c-cards__list::after,
|
|
96
|
+
.gem-c-cards__list-item {
|
|
97
|
+
box-sizing: border-box;
|
|
98
|
+
width: 100%;
|
|
99
|
+
flex-grow: 1;
|
|
100
|
+
flex-shrink: 1;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@include govuk-media-query($from: tablet) {
|
|
104
|
+
.gem-c-cards__list::before,
|
|
105
|
+
.gem-c-cards__list::after,
|
|
106
|
+
.gem-c-cards__list-item {
|
|
107
|
+
width: 25%;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@container (width < 560px) {
|
|
111
|
+
.gem-c-cards__list::before,
|
|
112
|
+
.gem-c-cards__list::after,
|
|
113
|
+
.gem-c-cards__list-item {
|
|
114
|
+
width: 30%;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@container (width < 360px) {
|
|
119
|
+
.gem-c-cards__list::before,
|
|
120
|
+
.gem-c-cards__list::after,
|
|
121
|
+
.gem-c-cards__list-item {
|
|
122
|
+
width: 100%;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@include govuk-media-query($from: desktop) {
|
|
128
|
+
@container (width < 660px) {
|
|
129
|
+
.gem-c-cards__list::before,
|
|
130
|
+
.gem-c-cards__list::after,
|
|
131
|
+
.gem-c-cards__list-item {
|
|
132
|
+
width: 31%;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@container (width < 360px) {
|
|
137
|
+
.gem-c-cards__list::before,
|
|
138
|
+
.gem-c-cards__list::after,
|
|
139
|
+
.gem-c-cards__list-item {
|
|
140
|
+
width: 100%;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
63
146
|
.gem-c-cards__list-item {
|
|
64
147
|
border-top: 1px solid $govuk-border-colour;
|
|
65
148
|
padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
13
13
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
14
14
|
component_helper.add_class("gem-c-cards")
|
|
15
|
+
component_helper.add_class("gem-c-cards--auto-layout") if columns == "auto"
|
|
15
16
|
%>
|
|
16
17
|
<% if items.present? %>
|
|
17
18
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
@@ -3,7 +3,7 @@ description: "Navigational breadcrumbs, showing page hierarchy"
|
|
|
3
3
|
body: |
|
|
4
4
|
Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
|
|
5
5
|
|
|
6
|
-
We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can
|
|
6
|
+
We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can omit this option to stop this behaviour.
|
|
7
7
|
shared_accessibility_criteria:
|
|
8
8
|
- link
|
|
9
9
|
accessibility_criteria: |
|
|
@@ -20,10 +20,12 @@ examples:
|
|
|
20
20
|
data:
|
|
21
21
|
collapse_on_mobile: true
|
|
22
22
|
breadcrumbs:
|
|
23
|
-
- title: '
|
|
24
|
-
url: '/
|
|
25
|
-
- title: '
|
|
26
|
-
url: '/
|
|
23
|
+
- title: 'Home'
|
|
24
|
+
url: '/'
|
|
25
|
+
- title: 'Passports, travel and living abroad'
|
|
26
|
+
url: '/browse/abroad'
|
|
27
|
+
- title: 'Travel abroad'
|
|
28
|
+
url: '/browse/abroad/travel-abroad'
|
|
27
29
|
inverse:
|
|
28
30
|
description: On a dark background, such as the header of topic pages
|
|
29
31
|
data:
|
|
@@ -67,16 +69,6 @@ examples:
|
|
|
67
69
|
url: '/service-manual'
|
|
68
70
|
- title: 'Agile Delivery'
|
|
69
71
|
url: '/service-manual/agile-delivery'
|
|
70
|
-
real:
|
|
71
|
-
data:
|
|
72
|
-
collapse_on_mobile: true
|
|
73
|
-
breadcrumbs:
|
|
74
|
-
- title: 'Home'
|
|
75
|
-
url: '/'
|
|
76
|
-
- title: 'Passports, travel and living abroad'
|
|
77
|
-
url: '/browse/abroad'
|
|
78
|
-
- title: 'Travel abroad'
|
|
79
|
-
url: '/browse/abroad/travel-abroad'
|
|
80
72
|
long_taxon:
|
|
81
73
|
description: This is an example of a breadcrumb with long taxons to demonstrate the wrapping behaviour and touch target area on mobile
|
|
82
74
|
data:
|
|
@@ -89,9 +81,8 @@ examples:
|
|
|
89
81
|
- title: 'Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon'
|
|
90
82
|
url: '/education'
|
|
91
83
|
stop_collapsing_on_mobile:
|
|
92
|
-
description: We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can
|
|
84
|
+
description: We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can omit this option to stop this behaviour.
|
|
93
85
|
data:
|
|
94
|
-
collapse_on_mobile: false
|
|
95
86
|
breadcrumbs:
|
|
96
87
|
- title: 'Home'
|
|
97
88
|
url: '/'
|
|
@@ -114,6 +114,41 @@ examples:
|
|
|
114
114
|
text: Citizenship and living in the UK
|
|
115
115
|
path: http://www.gov.uk
|
|
116
116
|
description: Voting, community participation, life in the UK, international projects
|
|
117
|
+
auto_layout:
|
|
118
|
+
description: |
|
|
119
|
+
Automatically adjusts the number of columns used by the component based on the container size, as well as the screen size. Based on the size of the govuk-grid. If the component is in a full width container, it will show three columns - in a two thirds container, two columns - in a one third, one column.
|
|
120
|
+
|
|
121
|
+
The example below shows how it appears in a two thirds column.
|
|
122
|
+
data:
|
|
123
|
+
columns: auto
|
|
124
|
+
heading: Services and information
|
|
125
|
+
items:
|
|
126
|
+
- link:
|
|
127
|
+
text: Benefits
|
|
128
|
+
path: http://www.gov.uk
|
|
129
|
+
description: Includes eligibility, appeals, tax credits and Universal Credit
|
|
130
|
+
- link:
|
|
131
|
+
text: Births, deaths, marriages and care
|
|
132
|
+
path: http://www.gov.uk
|
|
133
|
+
description: Parenting, civil partnerships, divorce and Lasting Power of Attorney
|
|
134
|
+
- link:
|
|
135
|
+
text: Business and self-employed
|
|
136
|
+
path: http://www.gov.uk
|
|
137
|
+
description: Tools and guidance for businesses
|
|
138
|
+
- link:
|
|
139
|
+
text: Childcare and parenting
|
|
140
|
+
path: http://www.gov.uk
|
|
141
|
+
description: Includes giving birth, fostering, adopting, benefits for children, childcare and schools
|
|
142
|
+
- link:
|
|
143
|
+
text: Citizenship and living in the UK
|
|
144
|
+
path: http://www.gov.uk
|
|
145
|
+
description: Voting, community participation, life in the UK, international projects
|
|
146
|
+
embed: |
|
|
147
|
+
<div class="govuk-grid-row">
|
|
148
|
+
<div class="govuk-grid-column-two-thirds">
|
|
149
|
+
<%= component %>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
117
152
|
custom_heading_levels:
|
|
118
153
|
description: |
|
|
119
154
|
Override default heading level by passing through `heading_level` parameter (defaults to `<h2>`).
|