diff --git a/app/assets/stylesheets/frontend/base.scss b/app/assets/stylesheets/frontend/base.scss index f8409afc26f..b7e88b8f038 100644 --- a/app/assets/stylesheets/frontend/base.scss +++ b/app/assets/stylesheets/frontend/base.scss @@ -9,6 +9,7 @@ $govuk-new-link-styles: true; @import 'govuk_publishing_components/govuk_frontend_support'; @import 'govuk_publishing_components/component_support'; +@import 'govuk_publishing_components/components/big-number'; @import 'govuk_publishing_components/components/button'; @import 'govuk_publishing_components/components/breadcrumbs'; @import 'govuk_publishing_components/components/contents-list'; diff --git a/app/assets/stylesheets/frontend/views/_how-gov-works.scss b/app/assets/stylesheets/frontend/views/_how-gov-works.scss index 752e9f344a7..b3aab2ca900 100644 --- a/app/assets/stylesheets/frontend/views/_how-gov-works.scss +++ b/app/assets/stylesheets/frontend/views/_how-gov-works.scss @@ -1,275 +1,26 @@ .inside_gov_how-gov-works { - .full-width-section { - clear: both; - } - - .thirds-width-section, - .halves-width-section { - overflow: visible; - clear: both; - margin-top: $gutter - $gutter-one-sixth; - margin-bottom: $gutter-two-thirds; - @extend %contain-floats; - - img { - width: $full-width; - height: auto; - } - - .inner-block { - padding: 0; - } - - @include media(tablet) { - margin-left: -$gutter-half; - margin-right: -$gutter-half; - - .inner-block { - padding: 0 $gutter-half; - } - - .two-thirds { - width: $two-thirds; - margin-bottom: $gutter; - float: left; - } - - .one-third { - width: $one-third; - margin-bottom: $gutter; - float: left; - } - - .one-half { - width: $half; - margin-bottom: $gutter; - float: left; - } - } + img { + max-width: 100%; + height: auto; } .depts { - .two-thirds, - .one-third { - margin-bottom: 0; - } - } - - .ministers { - margin-bottom: $gutter * 2; - } - - .coalition { - margin-top: $gutter; - } - - .feature-ministers { - text-align: center; - color: $secondary-text-colour; - padding: $gutter-half 0 $gutter; - - .feature-ministers__symbol, - .feature-ministers__equals-wrapper { - display: inline-block; - } - - .feature-ministers__item { - box-sizing: border-box; - color: $govuk-text-colour; - display: inline-block; - margin: .5em 0; - padding: 0; - text-align: center; - text-decoration: none; - vertical-align: middle; - width: 5em; - - @include govuk-media-query($until: tablet) { - &:hover { - color: $govuk-link-hover-colour; - } - - &:focus { - @include govuk-focused-text; - } - } - - .count, - .caption { - display: block; - line-height: 1em; - } - - @include govuk-media-query($from: tablet) { - border: .2em solid $inside-gov-secondary; // https://webaim.org/resources/contrastchecker/?fcolor=0B0C0C&bcolor=57DA95 - border-radius: 4.5em; - height: 9em; - width: 9em; - padding-top: 1.85em; - - &:hover, - &:focus { - text-decoration: none; - } - - &:hover { - color: $govuk-link-hover-colour; - background: govuk-colour("white"); - border-color: $govuk-link-hover-colour; - } - - &:focus { - color: $govuk-focus-text-colour; - background: $govuk-focus-colour; - border-color: $govuk-focus-text-colour; - outline: none; - } - - .count, - .caption { - text-align: center; - } - - .caption { - display: inline-block; - width: 6em; - } - } - } - - @include media(tablet) { - .feature-ministers__symbol { - margin: 0 1em; - position: relative; - top: .25em; - } - - .feature-ministers__item--invert { - background-color: $inside-gov-secondary; - border-color: $inside-gov-secondary; - } - } - } - - .ministers .caption { - max-width: 26em; - } - - .block { - float: none; - display: block; - width: $full-width; - } - - p.small-print { - @include ig-core-14; - } - - h2.coalition { - border-color: #000000; - } - - .coalition h3 { - border-color: #000000; - border-width: $gutter-one-sixth; - padding-top: $gutter - 9px; - } - - hr.keyline { - margin: 0; - border: solid $border-colour; - border-width: 0 0 1px; - } - - .prime-minister, - .cabinet { - .one-half { - &:first-child { - float: right; - } - } - } - - @include govuk-media-query($from: tablet, $until: desktop) { - .history { - .one-half { - width: $two-thirds; - - &:first-child { - width: $one-third; - } - } - } - - .prime-minister { - .one-half { - width: $one-third; - - &:first-child { - width: $two-thirds; - } - } - } - - .cabinet { - .two-thirds, - .one-third { - width: $half; - } - } - - .legislation, - .access-information { - .one-third { - float: right; - width: $two-thirds; - - &:first-child { - float: left; - width: $one-third; - } - } - } - - .depts-cont .one-third:nth-child(2), - .legislation .one-third:nth-child(4), - .access-information .one-third:nth-child(2) { - margin-bottom: $gutter-half; - } - - .gov-types { - .one-third { - width: $full-width; - } - } - } - - @include govuk-media-query($from: mobile, $until: tablet) { - .prime-minister, - .cabinet { - display: flex; - display: -ms-flexbox; - flex-direction: column-reverse; - -ms-flex-direction: column-reverse; - } + color: govuk-colour("dark-grey"); + @include govuk-responsive-margin(4, "bottom"); } - @include media(tablet) { - .legislation, - .access-information { - .one-third { - float: right; + .depts__item { + @include govuk-media-query($until: desktop) { + width: 100%; - &:first-child { - float: left; - width: $one-third; - } + &:not(:last-child) { + @include govuk-responsive-margin(4, "bottom"); } } - .legislation { - .two-thirds { - margin-bottom: $gutter-one-third; + @include govuk-media-query($from: desktop) { + &:not(:last-child) { + @include govuk-responsive-margin(7, "right"); } } } diff --git a/app/views/home/how_government_works.html.erb b/app/views/home/how_government_works.html.erb index 268f8e2d4fc..1c935c399cf 100644 --- a/app/views/home/how_government_works.html.erb +++ b/app/views/home/how_government_works.html.erb @@ -1,534 +1,553 @@ <% page_title "How government works" %> <% page_class "inside_gov_how-gov-works" %> -
-
-
-
- <%= render "govuk_publishing_components/components/title", { - title: "How government works", - } %> -

In the UK, the Prime Minister leads the government with the support of the Cabinet and ministers. You can find out <%= link_to("who runs government", "#who-runs-government", class: "govuk-link") %> and <%= link_to("how government is run", "#how-government-is-run", class: "govuk-link") %>, as well as learning about the <%= link_to("history of government", "#history-uk-government", class: "govuk-link") %>.

-
-
-
- -
-
- <%= render "govuk_publishing_components/components/heading", { - text: "Who runs government", - id: "who-runs-government", - heading_level: 2, +
+
+
+ <%= render "govuk_publishing_components/components/title", { + title: "How government works", + } %> + + <%= render "govuk_publishing_components/components/lead_paragraph", { + text: sanitize("In the UK, the Prime Minister leads the government with the support of the Cabinet and ministers. You can find out who runs government and how government is run, as well as learning about the history of government.") } %> -
-
-
- <%= render "govuk_publishing_components/components/heading", { - text: "The Prime Minister", - heading_level: 3, - margin_bottom: 5, - } %> - -

The <%= link_to("Prime Minister", "/government/ministers/prime-minister", class: "govuk-link") %> is the leader of Her Majesty’s Government and is ultimately responsible for all policy and decisions.

- -

The Prime Minister also:

- - <%= render "govuk_publishing_components/components/list", { - visible_counters: true, - items: [ - "oversees the operation of the Civil Service and government agencies", - "appoints members of the government", - "is the principal government figure in the House of Commons", - ] - } %> - <% if @prime_minister.present? %> -

The Prime Minister is <%= link_to @prime_minister.name, url_for(@prime_minister), class: "govuk-link" %>.

- <% end %> +
+
+
+
-

- <%= link_to "Read more about the Prime Minister's Office, 10 Downing Street", "/government/organisations/prime-ministers-office-10-downing-street", class: "govuk-link" %> -

-
-
-
-
- <% if @prime_minister.present? && @prime_minister.image_url(:s465).present? %> - <%= image_tag @prime_minister.image_url(:s465), { alt: @prime_minister.name } %> - <% else %> - <%= image_tag 'how-gov-works/10_Downing_Street.jpg', alt: 'Number 10, Downing Street' %> - <% end %> -
-
+
+
+
+
+ <%= render "govuk_publishing_components/components/contents_list", { + aria_label: "Pages in this guide", + contents: [ + { + href: "#who-runs-government", + text: "Who runs government", + }, + { + href: "#how-government-is-run", + text: "How government is run", + }, + { + href: "#civil-service", + text: "Civil service", + }, + { + href: "#get-involved", + text: "Get involved", + }, + { + href: "#legislation", + text: "Legislation", + }, + { + href: "#access-to-information", + text: "Access to information", + }, + { + href: "#devolved-government", + text: "Devolved government", + }, + { + href: "#local-government", + text: "Local government", + }, + { + href: "#parliament", + text: "Parliament", + }, + { + href: "#history-uk-government", + text: "History of government", + } + ] + } %>
-
-
-
- <%= render "govuk_publishing_components/components/heading", { - text: "The Cabinet", - heading_level: 3, - margin_bottom: 5, - } %> - -

The Cabinet is made up of the senior members of government. Every week during Parliament, members of the Cabinet (Secretaries of State from all departments and some other ministers) meet to discuss the most important issues for the government.

- -

<%= link_to("See who is in the Cabinet", "/government/ministers", class: "govuk-link") %>

-
-
-
-
- <%= image_tag 'how-gov-works/Cabinet_01.jpg', alt: 'The Cabinet' %> -
-
-
+
+ <%= render "govuk_publishing_components/components/heading", { + text: "Who runs government", + id: "who-runs-government", + font_size: "l", + margin_bottom: 4, + } %> + +
+ <%= render "govuk_publishing_components/components/heading", { + text: "The Prime Minister", + font_size: "m", + heading_level: 3, + margin_bottom: 4, + } %> + +

The <%= link_to("Prime Minister", "/government/ministers/prime-minister", class: "govuk-link") %> is the leader of Her Majesty’s Government and is ultimately responsible for all policy and decisions.

+

The Prime Minister also:

+ + <%= render "govuk_publishing_components/components/list", { + extra_spacing: true, + visible_counters: true, + items: [ + "oversees the operation of the Civil Service and government agencies", + "appoints members of the government", + "is the principal government figure in the House of Commons", + ] + } %> + + <% if @prime_minister.present? %> +

The Prime Minister is <%= link_to @prime_minister.name, url_for(@prime_minister), class: "govuk-link" %>.

+ <% end %> + +

+ <%= link_to "Read more about the Prime Minister's Office, 10 Downing Street", "/government/organisations/prime-ministers-office-10-downing-street", class: "govuk-link" %> +

+ + <% if @prime_minister.present? && @prime_minister.image_url(:s465).present? %> + <%= image_tag @prime_minister.image_url(:s465), { alt: '', width: '465', height: '310' } %> + <% else %> + <%= image_tag 'how-gov-works/10_Downing_Street.jpg', alt: '', width: '465', height: '310' %> + <% end %> +
+ +
+ <%= render "govuk_publishing_components/components/heading", { + text: "The Cabinet", + font_size: "m", + heading_level: 3, + margin_bottom: 4, + } %> + +

The Cabinet is made up of the senior members of government. Every week during Parliament, members of the Cabinet (Secretaries of State from all departments and some other ministers) meet to discuss the most important issues for the government.

+

<%= link_to("See who is in the Cabinet", "/government/ministers", class: "govuk-link") %>

+ + <%= image_tag 'how-gov-works/Cabinet_01.jpg', alt: '', width: '465', height: '310' %> +
+
+
+
+
-
+
+
+
+
<%= render "govuk_publishing_components/components/heading", { text: "Ministers", + font_size: "m", heading_level: 3, + margin_bottom: 4, } %> + <% if !@is_during_reshuffle %> - +
+
+
+
- <%= render "govuk_publishing_components/components/heading", { - text: "How government is run", - id: "how-government-is-run", - heading_level: 2, - margin_bottom: 6, - } %> -
- -
-
-

Departments and their agencies are responsible for putting government policy into practice.

-
-
-
+
+
+
+
+ <%= render "govuk_publishing_components/components/heading", { + text: "How government is run", + id: "how-government-is-run", + font_size: "l", + margin_bottom: 4, + } %> -
- + <%= render "govuk_publishing_components/components/heading", { + text: "Government departments and agencies", + font_size: "m", + heading_level: 3, + margin_bottom: 4, + } %> + +
+
+

Departments and their agencies are responsible for putting government policy into practice.

- - -
- -
- -
- -
-
-

The Civil Service does the practical and administrative work of government. It is co-ordinated and managed by the Prime Minister, in their role as Minister for the Civil Service.

- -

Around half of all civil servants provide services direct to the public, including:

- - <%= render "govuk_publishing_components/components/list", { - visible_counters: true, - items: [ - "paying benefits and pensions", - "running employment services", - "staffing prisons", - "issuing driving licences", - ] - } %> - -

The <%= link_to "Civil Service", "/government/organisations/civil-service", class: "govuk-link" %> is on GOV.UK.

-
-
- - - - -
- -
- -
- - -
-
-

Read about ways to <%= link_to "get involved", "/government/get-involved/", class: "govuk-link" %>.

-
-
- -
+
+
+
-
diff --git a/test/functional/home_controller_test.rb b/test/functional/home_controller_test.rb index 560991de75b..3bd33cea265 100644 --- a/test/functional/home_controller_test.rb +++ b/test/functional/home_controller_test.rb @@ -18,14 +18,14 @@ class HomeControllerTest < ActionController::TestCase view_test "how government works shows the current prime minister" do get :how_government_works - assert_select ".prime-minister p a", "Firstname Lastname" + assert_select ".prime-minister > p:nth-child(5) [href]", "Firstname Lastname" end view_test "how government works does not fail when there is no prime minister" do RoleAppointment.delete_all get :how_government_works - assert_select ".prime-minister p a", "Prime Minister" + assert_select ".prime-minister > p:nth-child(2) [href]", "Prime Minister" end view_test "how government works page shows a count of cabinet ministers, other ministers and total ministers" do @@ -43,9 +43,9 @@ class HomeControllerTest < ActionController::TestCase get :how_government_works - assert_select ".cabinet-ministers .count", "2" - assert_select ".other-ministers .count", "1" - assert_select ".all-ministers .count", "4" + assert_select ".cabinet-ministers .gem-c-big-number__value", "2" + assert_select ".other-ministers .gem-c-big-number__value", "1" + assert_select ".all-ministers .gem-c-big-number__value", "4" end test "how_government_works should assign @ministerial_department_count to the count of active ministerial departments" do