From 64c2cc160d879f4b20498a3e63343b9d66c6a807 Mon Sep 17 00:00:00 2001 From: Ian James <1732331+injms@users.noreply.github.com> Date: Wed, 18 Sep 2019 13:26:59 +0100 Subject: [PATCH 1/7] Revert "Revert "Update to GOV.UK Frontend v3"" --- Gemfile | 4 +- Gemfile.lock | 13 +- app/assets/stylesheets/application.scss | 11 +- app/assets/stylesheets/hacks/_full-width.scss | 25 +- .../stylesheets/hacks/_header-tweaks.scss | 2 +- app/assets/stylesheets/mixins/_margins.scss | 16 +- .../stylesheets/modules/_change-history.scss | 34 +- .../stylesheets/modules/_collection.scss | 12 +- .../modules/_community-contact.scss | 5 +- .../modules/_govspeak-wrapper.scss | 11 +- app/assets/stylesheets/modules/_hero.scss | 62 +-- .../modules/_improve-this-page.scss | 66 ---- app/assets/stylesheets/modules/_metadata.scss | 31 -- app/assets/stylesheets/modules/_notice.scss | 8 +- .../stylesheets/modules/_page-contents.scss | 40 +- .../stylesheets/modules/_page-header.scss | 51 +-- app/assets/stylesheets/modules/_panel.scss | 18 +- .../stylesheets/modules/_related-content.scss | 26 +- app/assets/stylesheets/modules/_search.scss | 118 ------ .../modules/_service-standard-point.scss | 38 +- .../stylesheets/modules/_subsections.scss | 162 -------- .../stylesheets/modules/_typography.scss | 17 +- app/assets/stylesheets/print.scss | 5 - app/presenters/topic_presenter.rb | 69 +++- app/views/content_items/guide.html.erb | 162 ++++---- app/views/content_items/homepage.html.erb | 88 ++--- .../content_items/service_standard.html.erb | 103 +++-- app/views/content_items/topic.html.erb | 119 +++--- app/views/layouts/application.html.erb | 28 +- app/views/shared/_change_history.html.erb | 13 +- .../shared/_custom_phase_message.html.erb | 2 +- .../_custom_phase_message_homepage.html.erb | 2 +- app/views/shared/_email_signup.html.erb | 8 + app/views/shared/_improve_this_page.html.erb | 60 --- .../accordion-with-descriptions-spec.js | 360 ------------------ test/integration/guide_test.rb | 23 +- test/integration/improve_this_page_test.rb | 20 - test/integration/service_standard_test.rb | 9 +- test/integration/topic_test.rb | 32 -- 39 files changed, 452 insertions(+), 1421 deletions(-) delete mode 100644 app/assets/stylesheets/modules/_improve-this-page.scss delete mode 100644 app/assets/stylesheets/modules/_metadata.scss delete mode 100644 app/assets/stylesheets/modules/_search.scss delete mode 100644 app/assets/stylesheets/modules/_subsections.scss create mode 100644 app/views/shared/_email_signup.html.erb delete mode 100644 app/views/shared/_improve_this_page.html.erb delete mode 100644 spec/javascripts/accordion-with-descriptions-spec.js delete mode 100644 test/integration/improve_this_page_test.rb diff --git a/Gemfile b/Gemfile index a3dfe160..f8aaf27f 100644 --- a/Gemfile +++ b/Gemfile @@ -6,7 +6,7 @@ gem 'gds-api-adapters', '~> 60.0.0' gem 'govuk_app_config', '~> 2.0' gem 'govuk_elements_rails' gem 'govuk_frontend_toolkit', '~> 8.2.0' -gem 'govuk_publishing_components', '~> 17.21.0' +gem 'govuk_publishing_components', '~> 20.3.0' gem 'plek', '3.0.0' gem 'rails', '~> 5.2.3' gem 'rails-i18n', '~> 5.1.3' @@ -18,7 +18,7 @@ gem 'uglifier', '>= 1.3.0' group :development, :test do gem 'govuk-lint' gem 'jasmine-rails' - gem 'phantomjs', '~> 2.1.1' + gem 'phantomjs', '~> 2.1', '>= 2.1.1.0' end group :development do diff --git a/Gemfile.lock b/Gemfile.lock index 9092172d..9d8383d3 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -114,7 +114,7 @@ GEM govuk_frontend_toolkit (8.2.0) railties (>= 3.1.0) sass (>= 3.2.0) - govuk_publishing_components (17.21.0) + govuk_publishing_components (20.3.0) gds-api-adapters govuk_app_config govuk_frontend_toolkit @@ -246,7 +246,7 @@ GEM mime-types (>= 1.16, < 4.0) netrc (~> 0.8) robotex (1.0.0) - rouge (3.7.0) + rouge (3.10.0) rubocop (0.72.0) jaro_winkler (~> 1.5.1) parallel (~> 1.10) @@ -274,9 +274,8 @@ GEM sprockets (>= 2.8, < 4.0) sprockets-rails (>= 2.0, < 4.0) tilt (>= 1.1, < 3) - sassc (2.0.1) + sassc (2.2.0) ffi (~> 1.9) - rake sassc-rails (2.1.2) railties (>= 4.0.0) sassc (>= 2.0) @@ -360,10 +359,10 @@ DEPENDENCIES govuk_app_config (~> 2.0) govuk_elements_rails govuk_frontend_toolkit (~> 8.2.0) - govuk_publishing_components (~> 17.21.0) + govuk_publishing_components (~> 20.3.0) jasmine-rails listen (>= 3.0.5, < 3.2) - phantomjs (~> 2.1.1) + phantomjs (~> 2.1, >= 2.1.1.0) plek (= 3.0.0) poltergeist pry-byebug @@ -382,4 +381,4 @@ RUBY VERSION ruby 2.6.3p62 BUNDLED WITH - 1.16.2 + 1.17.2 diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 6e618e9b..2eda776a 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,4 +1,7 @@ -// The main application stylesheet +$govuk-compatibility-govuktemplate: true; +$govuk-compatibility-govukfrontendtoolkit: true; +$govuk-compatibility-govukelements: true; +@import "govuk_publishing_components/all_components"; @import "common"; @@ -12,18 +15,12 @@ @import "modules/community-contact"; @import "modules/govspeak-wrapper"; @import "modules/hero"; -@import "modules/improve-this-page"; @import "modules/link-unit"; @import "modules/main-service-manual"; -@import "modules/metadata"; @import "modules/notice"; @import "modules/page-contents"; @import "modules/page-header"; @import "modules/panel"; @import "modules/related-content"; -@import "modules/search"; @import "modules/service-standard-point"; -@import "modules/subsections"; @import "modules/typography"; - -@import "govuk_publishing_components/all_components"; diff --git a/app/assets/stylesheets/hacks/_full-width.scss b/app/assets/stylesheets/hacks/_full-width.scss index 85856a2c..d77ce2d4 100644 --- a/app/assets/stylesheets/hacks/_full-width.scss +++ b/app/assets/stylesheets/hacks/_full-width.scss @@ -1,23 +1,10 @@ -.full-width { - // We're overriding static, we have to use IDs. - // scss-lint:disable IdSelector - #wrapper { - margin: 0; - width: auto; - max-width: 100%; - } - - #global-header-bar { +.app-full-width { + #global-header-bar { // scss-lint:disable IdSelector display: none; } +} - .govuk-beta-label { - border-bottom: none; - } - - .full-page-width-wrapper, - #wrapper .report-a-problem-toggle-wrapper, - #wrapper .report-a-problem-container { - @extend %site-width-container; - } +.app-\!-full-width-override { + margin: auto !important; + max-width: none !important; } diff --git a/app/assets/stylesheets/hacks/_header-tweaks.scss b/app/assets/stylesheets/hacks/_header-tweaks.scss index a24c393f..a50dc8fd 100644 --- a/app/assets/stylesheets/hacks/_header-tweaks.scss +++ b/app/assets/stylesheets/hacks/_header-tweaks.scss @@ -2,7 +2,7 @@ // this work, we need to slightly tweak the header's CSS from our app. .header-title { float: left; - color: $white; + color: govuk-colour("white"); @include bold-24; // When the title appears on its own line (the search box is hidden and only a diff --git a/app/assets/stylesheets/mixins/_margins.scss b/app/assets/stylesheets/mixins/_margins.scss index 33e5e42b..6ca7103c 100644 --- a/app/assets/stylesheets/mixins/_margins.scss +++ b/app/assets/stylesheets/mixins/_margins.scss @@ -1,16 +1,16 @@ @mixin responsive-bottom-margin { - margin-bottom: $gutter-half; + margin-bottom: govuk-spacing(3); @include media(tablet) { - margin-bottom: $gutter * 1.5; + margin-bottom: govuk-spacing(7); } } @mixin responsive-top-margin { - margin-top: $gutter-half; + margin-top: govuk-spacing(3); @include media(tablet) { - margin-top: $gutter * 1.5; + margin-top: govuk-spacing(7); } } @@ -21,11 +21,11 @@ @mixin gutter-bottom-margin { - margin-bottom: $gutter; + margin-bottom: govuk-spacing(6); } @mixin gutter-top-margin { - margin-top: $gutter; + margin-top: govuk-spacing(6); } @mixin gutter-vertical-margins { @@ -34,9 +34,9 @@ } @mixin gutter-bottom-margin-to-double { - margin-bottom: $gutter; + margin-bottom: govuk-spacing(3); @include media(tablet) { - margin-bottom: $gutter * 2; + margin-bottom: govuk-spacing(9); } } diff --git a/app/assets/stylesheets/modules/_change-history.scss b/app/assets/stylesheets/modules/_change-history.scss index 36469b5e..fb8c3534 100644 --- a/app/assets/stylesheets/modules/_change-history.scss +++ b/app/assets/stylesheets/modules/_change-history.scss @@ -1,33 +1,3 @@ -.change-history { - margin-top: 30px; - width: 66%; - - &__latest-change { - - dt { - @include core-19; - } - - dd { - @include bold-24; - margin-bottom: 10px; - } - } - - &__summary { - @include core-16; - color: $grey-1; - } - - &__past { - - time { - @include bold-19; - } - - li { - list-style: none; - margin-bottom: 10px; - } - } +.app-c-change-history__change-note { + color: $govuk-secondary-text-colour; } diff --git a/app/assets/stylesheets/modules/_collection.scss b/app/assets/stylesheets/modules/_collection.scss index 40e7701e..5f451fdc 100644 --- a/app/assets/stylesheets/modules/_collection.scss +++ b/app/assets/stylesheets/modules/_collection.scss @@ -1,12 +1,12 @@ .collection { - border-bottom: 1px solid $border-colour; + border-bottom: 1px solid $govuk-border-colour; - padding-bottom: $gutter-half; - margin-bottom: $gutter-half; + padding-bottom: govuk-spacing(3); + margin-bottom: govuk-spacing(3); @include media(tablet) { - padding-bottom: $gutter; - margin-bottom: $gutter; + padding-bottom: govuk-spacing(6); + margin-bottom: govuk-spacing(6); } &:last-child { @@ -22,7 +22,7 @@ &__description { @include core-24; - color: $secondary-text-colour; + color: $govuk-secondary-text-colour; margin-top: 0; } diff --git a/app/assets/stylesheets/modules/_community-contact.scss b/app/assets/stylesheets/modules/_community-contact.scss index 8628f3ec..cadd5cba 100644 --- a/app/assets/stylesheets/modules/_community-contact.scss +++ b/app/assets/stylesheets/modules/_community-contact.scss @@ -1,7 +1,6 @@ -.community-contact { - @include gutter-vertical-margins; +.app-c-community-contact { @include media(tablet) { text-align: right; - padding-top: $gutter-half; + padding-top: govuk-spacing(8); } } diff --git a/app/assets/stylesheets/modules/_govspeak-wrapper.scss b/app/assets/stylesheets/modules/_govspeak-wrapper.scss index e4a99eef..4880188d 100644 --- a/app/assets/stylesheets/modules/_govspeak-wrapper.scss +++ b/app/assets/stylesheets/modules/_govspeak-wrapper.scss @@ -8,17 +8,12 @@ .govuk-govspeak p, .govuk-govspeak ol, .govuk-govspeak ul { + line-height: 1.45; // govspeak margin bottom is 20px - margin-bottom: $gutter-half; + margin-bottom: govuk-spacing(3); } .govuk-govspeak h2 { - margin-top: 15px; - padding-top: 15px; - // govspeak margin-top is 45px - @include media(tablet) { - margin-top: 15px; - padding-top: 30px; - } + @extend %govuk-heading-m; } } diff --git a/app/assets/stylesheets/modules/_hero.scss b/app/assets/stylesheets/modules/_hero.scss index e4773fc0..0644458a 100644 --- a/app/assets/stylesheets/modules/_hero.scss +++ b/app/assets/stylesheets/modules/_hero.scss @@ -1,57 +1,25 @@ -.hero { - background-color: $govuk-blue; - color: $white; - - margin-bottom: $gutter-half; +.app-c-hero { + background-color: $govuk-brand-colour; + color: govuk-colour("white"); + margin-bottom: govuk-spacing(3); + position: relative; + top: -1px; @include media(tablet) { - margin-bottom: $gutter; + margin-bottom: govuk-spacing(6); } a:link, a:visited { - font-weight: bold; - color: $white; - } - - a:hover, - a:active { - color: $light-blue-25; + @include govuk-typography-weight-bold; } +} - &__content { - $border-top-width: 10px; - - @extend %site-width-container; - - padding: ($gutter-half + $border-top-width) 0 $gutter-half; - - @include media(tablet) { - padding: ($gutter + $border-top-width) 0 $gutter; - } - } - - &__title { - @include core-48; - margin-bottom: $gutter; - font-weight: bold; - } - - &__description { - @include core-24; - } - - &__feedback-link { - @include core-16; - line-height: 1.25; - margin-top: $gutter; - - @include media(tablet) { - margin-top: 0; - } - } +.app-c-hero-lead { + line-height: 1.35; +} - &__search { - margin-bottom: $gutter-half; - } +.app-c-hero__heading--inverse, +.app-c-hero__body--inverse { + color: govuk-colour("white"); } diff --git a/app/assets/stylesheets/modules/_improve-this-page.scss b/app/assets/stylesheets/modules/_improve-this-page.scss deleted file mode 100644 index b011b83a..00000000 --- a/app/assets/stylesheets/modules/_improve-this-page.scss +++ /dev/null @@ -1,66 +0,0 @@ -// Here we're using BEM which uses __ to denote an element within a block -// scss-lint:disable SelectorFormat - -.improve-this-page { - @include print { - display: none; - } -} - -.improve-this-page__prompt { - background-color: $govuk-blue; - color: $white; - padding: 10px $gutter-half 0; - - a:link, - a:visited { - color: $white; - display: inline-block; - - &:focus { - color: $black; - } - } - - &:focus { - outline: none; - } -} - -.improve-this-page__page-is-useful-button { - margin-right: 0.2em; -} - -.improve-this-page__is-useful-question { - @include bold-16; - - display: inline; -} - -.improve-this-page__anything-wrong { - float: right; -} - -.improve-this-page__form { - margin-top: $gutter; - padding: $gutter-half 0; - border-top: 10px solid $govuk-blue; - - .form-control { - width: 100%; - } -} - -.improve-this-page__close { - @include core-16; - - text-align: right; - display: block; - margin-bottom: 10px; - - @include media(tablet) { - display: inherit; - float: right; - padding-top: 0; - } -} diff --git a/app/assets/stylesheets/modules/_metadata.scss b/app/assets/stylesheets/modules/_metadata.scss deleted file mode 100644 index 07edd347..00000000 --- a/app/assets/stylesheets/modules/_metadata.scss +++ /dev/null @@ -1,31 +0,0 @@ -.metadata { - @include core-14; - @extend %contain-floats; - margin-bottom: 2em; - - dt { - float: left; - clear: left; - width: auto; - min-width: 120px; - - @include media(tablet) { - padding-right: $gutter-one-third; - } - } - - dd { - float: left; - width: 55%; - - @include media(tablet) { - width: 70%; - } - } - - // Adjust icon position for external links - a[rel="external"]:after { - content: "\A0\A0\A0\A0\A0\A0"; - background-position: right 0%; - } -} diff --git a/app/assets/stylesheets/modules/_notice.scss b/app/assets/stylesheets/modules/_notice.scss index 347412f4..07447485 100644 --- a/app/assets/stylesheets/modules/_notice.scss +++ b/app/assets/stylesheets/modules/_notice.scss @@ -1,17 +1,17 @@ .notice { clear: both; @include responsive-bottom-margin; - padding: $gutter-half; + padding: govuk-spacing(3); - border: 5px solid $govuk-blue; + border: 5px solid $govuk-brand-colour; @include media(tablet) { - padding: $gutter-two-thirds; + padding: govuk-spacing(4); } &__title { @include bold-36; - margin-bottom: $gutter-one-third; + margin-bottom: govuk-spacing(2); } &__description { diff --git a/app/assets/stylesheets/modules/_page-contents.scss b/app/assets/stylesheets/modules/_page-contents.scss index 26403ee6..cb0ea371 100644 --- a/app/assets/stylesheets/modules/_page-contents.scss +++ b/app/assets/stylesheets/modules/_page-contents.scss @@ -1,43 +1,15 @@ -.page-contents { - margin-top: 1em; - - @include media(tablet) { - margin-top: 0; - padding: 2em 0; - } - - &__title { - @include bold-16; - margin-bottom: 5px; - } - +.app-c-page-contents { &__list li { - @include core-16; - list-style-type: none; - margin-bottom: 5px; - margin-left: $gutter-half; - padding-right: $gutter-half; + margin-left: govuk-spacing(0); + padding-right: govuk-spacing(3); &:before { - content: "–"; - float: left; - display: block; - width: $gutter-half; - margin-left: -$gutter-half; + content: "– "; + display: inline-block; + padding-right: govuk-spacing(1); } } - &__list a { - text-decoration: none; - // Prevents emboldening from pushing text onto new lines - letter-spacing: 0.022em; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } // Styles required by GOVUK.HighlightActiveNavItem JS &__list .active { letter-spacing: 0; diff --git a/app/assets/stylesheets/modules/_page-header.scss b/app/assets/stylesheets/modules/_page-header.scss index 4210c173..2e0b4e09 100644 --- a/app/assets/stylesheets/modules/_page-header.scss +++ b/app/assets/stylesheets/modules/_page-header.scss @@ -1,43 +1,20 @@ -// Example usage: - -//
-//

Context

-//

Agile delivery

-//

-// How to work in an agile way: principles, tools and governance. -//

-//

-// Additional descriptive text can sit here -//

-//
- -// Here we're using BEM which uses __ to denote an element within a block -// scss-lint:disable SelectorFormat -.page-header { - @include responsive-vertical-margins; - - &__context { - @include core-24; - - color: $secondary-text-colour; - margin-bottom: 0; - padding-bottom: .167em; - } - - &__title { - @include bold-48; +.app-c-page-header { + &__intro { + p { + @extend %govuk-body-m; + } - @include responsive-bottom-margin; + a { + @extend %govuk-link; + } } - &__summary { - @include core-24; + &__heading { + margin-bottom: govuk-spacing(3); - @include responsive-bottom-margin; + @include govuk-media-query($from: tablet) { + margin-bottom: govuk-spacing(7) + govuk-spacing(1); + margin-top: govuk-spacing(7) + govuk-spacing(1); + } } - - &__intro { - @include core-19; - } - } diff --git a/app/assets/stylesheets/modules/_panel.scss b/app/assets/stylesheets/modules/_panel.scss index 59b0979d..218f6213 100644 --- a/app/assets/stylesheets/modules/_panel.scss +++ b/app/assets/stylesheets/modules/_panel.scss @@ -1,19 +1,3 @@ .panel { - margin-top: $gutter-half; - padding-top: $gutter-half; - - border-top: 1px solid $grey-2; - - @include media(desktop) { - margin-top: $gutter; - } - - &__title { - @include bold-24; - margin-bottom: $gutter-half; - } - - &__description { - @include core-19; - } + border-top: 1px solid $govuk-border-colour; } diff --git a/app/assets/stylesheets/modules/_related-content.scss b/app/assets/stylesheets/modules/_related-content.scss index c2e1d991..a9c8c2c9 100644 --- a/app/assets/stylesheets/modules/_related-content.scss +++ b/app/assets/stylesheets/modules/_related-content.scss @@ -1,34 +1,14 @@ .related { @include media(tablet) { - border-top: 1px solid $border-colour; + border-top: 1px solid $govuk-border-colour; } } .related-item { - padding-top: 1em; - - &__title { - @include bold-19; - margin-bottom: 0.5em; - } - - &__description { - margin-bottom: 0.5em; - } - - &__list { - @include core-16; - list-style: none; - } - - &__list-item { - margin-bottom: 0.5em; - } - &__email-link { - padding-left: 30px; + padding-left: 25px; font-weight: bold; - background: image-url('mail-icon-x2.png') 5px 40% no-repeat; + background: image-url('mail-icon-x2.png') 0 40% no-repeat; background-size: 20px 14px; } } diff --git a/app/assets/stylesheets/modules/_search.scss b/app/assets/stylesheets/modules/_search.scss deleted file mode 100644 index 9ebf4c20..00000000 --- a/app/assets/stylesheets/modules/_search.scss +++ /dev/null @@ -1,118 +0,0 @@ -.search { - @extend %contain-floats; - - &__input { - float: left; - width: 100%; - - input { - width: 100%; - margin: 0.5em 0; - padding: 6px; - - @include core-19($line-height: (28 / 19), $line-height-640: (28 / 16)); - } - } - - &__submit { - float: left; - padding: 6px; - background: $black; - color: $white; - border: 0; - } - - // IE6 + IE7 always get the simplest version, regardless of whether javascript - // is enabled - @if ($is-ie == false) or ($ie-version >= 8) { - $search-button-size: 40px; - - &__input { - @include box-sizing(border-box); - - padding-right: $search-button-size; - margin-right: -$search-button-size; - - input { - @include box-sizing(border-box); - @include appearance(none); - - position: relative; - height: $search-button-size; - margin: 0; - - border: 0; - outline-offset: 0; - } - } - - &__submit { - @include box-sizing(border-box); - height: $search-button-size; - width: $search-button-size; - - cursor: pointer; - - overflow: hidden; - text-indent: -5000px; - background: $black image-url("search-button.png") no-repeat 2px 50%; - - @include device-pixel-ratio() { - background-size: 52.5px 35px; - background-position: 115% 50%; - } - - &:hover { - background-color: lighten($black, 5%); - } - - &:focus { - z-index: 15; - position: relative; - } - - @include border-radius(0); - } - - // If JS is enabled, and browser is not IE6 or IE7, position label as a - // placeholder - .js-enabled & { - position: relative; - background: $white; - - // Absolutely position the label behind the input - &__label { - @include core-19($line-height: 40px, $line-height-640: 40px); - position: absolute; - left: 0; - top: 1px; - z-index: 5; - - text-indent: 15px; - - color: $secondary-text-colour; - } - - // Input is transparent and sits above the label - &__input input { - position: relative; - z-index: 10; - - // Internet Explorer does not play well with "empty" elements. The label - // behind the text box becomes selectable (i.e. it acts as if the input - // is not there.) Setting a background image fixes it. - // http://stackoverflow.com/questions/2098714/input-boxes-with-transparent-background-are-not-clickable-in-ie8 - // http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background - background: transparent url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); - - // Javascript adds a confusingly named `focus` class to the input when - // it contains text. We use this to set the background to white, hiding - // the label. - &:focus, - &.focus { - background: $white; - } - } - } - } -} diff --git a/app/assets/stylesheets/modules/_service-standard-point.scss b/app/assets/stylesheets/modules/_service-standard-point.scss index 8fa85dbf..5c820686 100644 --- a/app/assets/stylesheets/modules/_service-standard-point.scss +++ b/app/assets/stylesheets/modules/_service-standard-point.scss @@ -1,45 +1,39 @@ -.service-standard-point { - - $gutter-tablet: ($gutter * 1.5); // 45px - - border-top: 1px solid $border-colour; - margin-top: 1.5em; - padding-top: 1.5em; +.app-c-service-standard-point { + border-top: 1px solid $govuk-border-colour; + margin-top: govuk-spacing(5); + padding-top: govuk-spacing(5); &:first-child { - margin-top: 0; + margin-top: govuk-spacing(0); } &__title { - @include bold-24; - margin-bottom: 0.5em; - margin-left: $gutter; + margin-left: govuk-spacing(6); - @include media(tablet) { - margin-left: $gutter-tablet; + @include govuk-media-query($from: tablet) { + margin-left: govuk-spacing(8); } } &__number { float: left; - margin-left: -$gutter; + margin-left: -(govuk-spacing(6)); - @include media(tablet) { - margin-left: -$gutter-tablet; + @include govuk-media-query($from: tablet) { + margin-left: -(govuk-spacing(8)); } } &__details { - @include core-19; - margin-bottom: 0.5em; - margin-left: $gutter; + margin-bottom: govuk-spacing(2); + margin-left: govuk-spacing(6); - @include media(tablet) { - margin-left: $gutter-tablet; + @include govuk-media-query($from: tablet) { + margin-left: govuk-spacing(8); } } &__link { - margin-top: 0.5em; + margin-top: govuk-spacing(2); } } diff --git a/app/assets/stylesheets/modules/_subsections.scss b/app/assets/stylesheets/modules/_subsections.scss deleted file mode 100644 index f3367988..00000000 --- a/app/assets/stylesheets/modules/_subsections.scss +++ /dev/null @@ -1,162 +0,0 @@ -// Topic subsections -// Fallback styles first, for when JS is disabled - -// Here we're using BEM which uses __ to denote an element within a block -// scss-lint:disable SelectorFormat - -.subsection { - width: 100%; - margin-bottom: $gutter; - - @include media(tablet) { - margin-bottom: $gutter * 1.5; - } - - &__title { - @include bold-24; - margin-bottom: 5px; - } - - &__description { - @include core-19; - margin-bottom: $gutter-one-quarter; - - @include media(tablet) { - margin-bottom: $gutter-half; - } - } - - &__list { - @include core-19; - padding-left: 0; - list-style-type: none; - } - - &__list-item { - margin-bottom: 0.5em; - } - - &__list-item a { - text-decoration: none; - } -} - - - // When JavaScript is enabled, create accordion -.js-accordion-with-descriptions { - - // Wrapper for 'open all / close all' button - .subsection-controls { - @extend %contain-floats; - - button { - float: right; - - @include core-16; - cursor: pointer; - background: none; - border: none; - color: $link-colour; - padding: 0.5em 0; - } - } - - // Wrapper for subsections - .subsection-wrapper { - @extend %contain-floats; - border-bottom: 1px solid $border-colour; - } - - .subsection { - margin-bottom: 0; - - @include media(tablet) { - margin-bottom: 0; - } - - &__header { - position: relative; - padding-top: 14px; - padding-bottom: 12px; - border-top: 1px solid $border-colour; - - // Change the background of the header on hover - &:hover { - cursor: pointer; - background: $highlight-colour; - } - } - - &__title { - button { - color: $govuk-blue; - cursor: pointer; - - @include bold-24; - background: none; - border: 0; - padding-left: 0; - text-align: left; - } - - margin-bottom: 0; - margin-right: $gutter-half; - - @include media(tablet) { - margin-right: $gutter; - } - } - - &__description { - margin-bottom: 0; - margin-right: $gutter-half; - - @include media(tablet) { - margin-bottom: 0; - margin-right: $gutter; - } - } - - &__icon { - position: absolute; - top: 50%; - right: 0; - - @include media (tablet) { - right: 15px; - } - - height: 16px; - width: 16px; - margin-top: -8px; - - // PNG fallback for SVG - background-image: image-url('icons-plus-minus.png'); - // SVG sprite - background: image-url("icons-plus-minus.svg"), linear-gradient(transparent, transparent); - background-repeat: no-repeat; - background-position: 0 -16px; - } - - &--is-open { - .subsection__icon { - background-position: 0 0; - } - } - - &__content { - padding-top: 5px; - padding-bottom: $gutter-half; - } - - &--is-open { - .subsection__content { - @include media(tablet) { - padding-top: 10px; - padding-bottom: $gutter; - } - } - } - - } -} diff --git a/app/assets/stylesheets/modules/_typography.scss b/app/assets/stylesheets/modules/_typography.scss index a3f8b842..3a547240 100644 --- a/app/assets/stylesheets/modules/_typography.scss +++ b/app/assets/stylesheets/modules/_typography.scss @@ -1,11 +1,16 @@ // Text -p { - margin-top: em(5, 16); - margin-bottom: em(20, 16); +.app-c-body, +.app-c-body-s { + line-height: 1.45; +} - @include media(tablet) { - margin-top: em(5); - margin-bottom: em(20); +.app-link--inverse { + &:link, + &:visited { + color: govuk-colour("white"); } + &:focus { + @include govuk-focused-text; + } } diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index 26b9d15c..53d5b0fb 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -4,9 +4,4 @@ $is-print: true; @import "common"; -// Modules -// We're including a subset of all the modules listed in `application.scss` here -// as not all of them have proper print styling set up. -@import "modules/improve-this-page"; - @import "govuk_publishing_components/all_components_print"; diff --git a/app/presenters/topic_presenter.rb b/app/presenters/topic_presenter.rb index 69621589..b28bdead 100644 --- a/app/presenters/topic_presenter.rb +++ b/app/presenters/topic_presenter.rb @@ -37,10 +37,71 @@ def visually_collapsed? @visually_collapsed end + def visually_expanded? + !visually_collapsed? + end + + def display_as_accordion? + groups.count > 2 && visually_collapsed? + end + + def accordion_content + # Each accordion needs a hash, as shown in the GOV.UK Publishing Components + # guide: https://components.publishing.service.gov.uk/component-guide/accordion + # + # This method returns the content in the required shape from the hash + # supplied by the `groups` method. + + groups.map { |section| + { + heading: { + text: section.name, + }, + summary: { + text: section.description, + }, + content: { + html: accordion_section_links(section.linked_items), + }, + expanded: visually_expanded?, + } + } + end + private - def topic_breadcrumb - { title: title } + def accordion_section_links links + # Expects `links` to be an array of hashes containing `href` and `label` + # for the link. For example: + # + # ```ruby + # [ + # { + # label: 'Link to example', + # href: 'http://example.com' + # } + # ] + # ``` + # + # This will return santitised HTML in a string. The above example would + # return: + # + # ```html + # + # ``` + + links = links.map { |linked_item| + link_html = ActionController::Base.helpers.link_to(linked_item.label, linked_item.href, class: 'govuk-link') + "
  • #{link_html}
    • " + } + + list = "" + + ActionController::Base.helpers.sanitize(list) end def parent_breadcrumbs @@ -51,4 +112,8 @@ def parent_breadcrumbs } ] end + + def topic_breadcrumb + { title: title } + end end diff --git a/app/views/content_items/guide.html.erb b/app/views/content_items/guide.html.erb index cc89d3f8..9edf31b1 100644 --- a/app/views/content_items/guide.html.erb +++ b/app/views/content_items/guide.html.erb @@ -2,116 +2,104 @@ <% content_for :meta_description, @content_item.description %> <% content_for :extra_head do %> - <%= render 'govuk_publishing_components/components/machine_readable_metadata', content_item: @content_item.content_item, schema: :article %> + <%= render "govuk_publishing_components/components/machine_readable_metadata", content_item: @content_item.content_item, schema: :article %> <% end %> <% content_for :phase_message do %> - <%= render 'shared/custom_phase_message', phase: @content_item.phase %> + <%= render "shared/custom_phase_message", phase: @content_item.phase %> <% end %> -<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @content_item.breadcrumbs %> +
    + <%= render "govuk_publishing_components/components/breadcrumbs", breadcrumbs: @content_item.breadcrumbs %> - -
    + +
    -
    -
    -

    <%= @content_item.category_title %>

    -

    - <%= @content_item.title %> -

    - <% if @content_item.show_description? %> -

    - <%= @content_item.description %> -

    - <% end %> -
    -
    +
    +
    -
    + <%= render "govuk_publishing_components/components/title", { + context: @content_item.category_title, + title: @content_item.title, + margin_bottom: 8 + } %> + <% if @content_item.show_description? %> +

    + <%= @content_item.description %> +

    + <% end %> +
    +
    -
    +

    - <%= link_to "Give feedback about this page", "/contact/govuk", class: "feedback" %> + <%= link_to "Give feedback about this page", "/contact/govuk", class: "govuk-link" %>

    -
    - - -
    -
    -
    -
    - <% if @content_item.content_owners.any? %> -
    Published by:
    - <% @content_item.content_owners.each do |content_owner| %> -
    - <%= link_to content_owner.title, content_owner.href %> -
    - <% end %> - <% end %> -
    Last updated:
    -
    - <%= time_ago_in_words(@content_item.visible_updated_at) %> ago -
    -
    + +
    +
    + <%= render "govuk_publishing_components/components/metadata", { + last_updated: "#{time_ago_in_words(@content_item.visible_updated_at)} ago", + from: @content_item.content_owners.map { |content_owner| + link_to(content_owner.title, content_owner.href) + } + } %>
    -
    -
    -
    -
    - - -
    -

    Page contents:

    - -
    - -
    -
    +
    +
    + +
    +

    Page contents:

    +
      + <% @content_item.header_links.each do |header_link| %> +
    • <%= link_to(header_link[:title], header_link[:href], class: 'govuk-link') %>
      • + <% end %> +
    +
    -
    - <%= render 'govuk_publishing_components/components/govspeak', content: @content_item.body.html_safe %>
    +
    +
    + <%= render "govuk_publishing_components/components/govspeak", content: @content_item.body.html_safe %> +
    -
    -
    -
    - <% if @content_item.content_owners.any? %> -
    Published by:
    - <% @content_item.content_owners.each do |content_owner| %> -
    - <%= link_to content_owner.title, content_owner.href %> -
    +
    +
    + <% if @content_item.content_owners.any? %> + <%= render "govuk_publishing_components/components/metadata", { + last_updated: time_ago_in_words(@content_item.visible_updated_at), + from: @content_item.content_owners.map { |content_owner| + link_to(content_owner.title, content_owner.href) + } + } %> <% end %> + <% if @content_item.latest_change.present? %> +
    +
    Last update:
    +
    + <%= render partial: 'shared/change_history', locals: {change: @content_item.latest_change} %> +
    +
    + <% end %> +
    + <% if @content_item.previous_changes.present? %> +

    + +

    +
      + <% @content_item.previous_changes.each do |previous_change| %> +
    1. + <%= render partial: 'shared/change_history', locals: { change: previous_change, compressed: true} %> +
      2. + <% end %> +
    <% end %> - <% if @content_item.latest_change.present? %> -
    Last update:
    -
    - <%= render partial: 'shared/change_history', locals: {change: @content_item.latest_change} %> -
    - <% end %> -
    - <% if @content_item.previous_changes.present? %> -

    -
      - <% @content_item.previous_changes.each do |previous_change| %> -
    1. - <%= render partial: 'shared/change_history', locals: {change: previous_change} %> -
      2. - <% end %> -
    - <% end %>
    -
    diff --git a/app/views/content_items/homepage.html.erb b/app/views/content_items/homepage.html.erb index 2f2df9f2..83ca4368 100644 --- a/app/views/content_items/homepage.html.erb +++ b/app/views/content_items/homepage.html.erb @@ -3,64 +3,66 @@ content_for :phase_message do render 'shared/custom_phase_message_homepage', phase: @content_item.phase end - content_for :body_classes, 'full-width' + content_for :body_classes, 'app-full-width' %> -
    -
    -
    -
    -

    Service Manual

    - -

    - Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard' %>. -

    - -
    +
    +
    +
    +
    +
    +

    Service Manual

    +

    + Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link app-link--inverse' %>. +

    - -
    - -
    - + <%= render "govuk_publishing_components/components/search", { + id: "search", + label_text: "Search the service manual", + name: "q", + on_govuk_blue: true, + type: "search" + } %>
    -
    - -
    - +
    +

    + <%= link_to 'Contact the Service Manual team', '/contact/govuk', class: 'govuk-link app-link--inverse' %> + with any comments or questions. +

    +
    -
    - <% @content_item.topics.each_slice(3) do |row_of_topics| %> -
    - <% row_of_topics.each do |topic| %> -
    -
    -

    <%= link_to topic["title"], topic["base_path"] %>

    -

    <%= topic["description"] %>

    +
    +
    + <% @content_item.topics.each_slice(3) do |row_of_topics| %> +
    + <% row_of_topics.each do |topic| %> +
    +

    <%= link_to topic["title"], topic["base_path"], class: 'govuk-link' %>

    +

    <%= topic["description"] %>

    -
    - <% end %> -
    - <% end %> + <% end %> +
    + <% end %> -
    -
    -
    -

    The Service Standard

    -

    The <%= link_to 'Service Standard', '/service-manual/service-standard' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.

    +
    +
    +
    +

    The Service Standard

    +

    The <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.

    +
    -
    -
    -
    -

    Communities of practice

    -

    You can view the <%= link_to 'communities of practice', '/service-manual/communities' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.

    +
    +
    +

    Communities of practice

    +

    You can view the <%= link_to 'communities of practice', '/service-manual/communities', class: 'govuk-link' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.

    +
    diff --git a/app/views/content_items/service_standard.html.erb b/app/views/content_items/service_standard.html.erb index 4d6446a0..464bf100 100644 --- a/app/views/content_items/service_standard.html.erb +++ b/app/views/content_items/service_standard.html.erb @@ -4,68 +4,57 @@ <% content_for :phase_message do %> <%= render 'shared/custom_phase_message', phase: @content_item.phase %> <% end %> - -<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @content_item.breadcrumbs %> - - -
    - -
    -
    -

    <%= @content_item.title %>

    -

    - <%= @content_item.content_item["description"] %> -

    -
    - <%= @content_item.content_item["details"]["body"].html_safe %> +
    + <%= render "govuk_publishing_components/components/breadcrumbs", breadcrumbs: @content_item.breadcrumbs %> + + +
    +
    +
    + <%= render "govuk_publishing_components/components/title", { + title: @content_item.title, + } %> +

    + <%= @content_item.content_item["description"] %> +

    +
    + <%= @content_item.content_item["details"]["body"].html_safe %> +
    -
    - - -
    - -
    - <% @content_item.points.each do |point| %> - -
    -

    - <%= point.number %>. - <%= point.title_without_number %> -

    -
    -

    <%= point.description %>

    -

    <%= link_to "Read more about point #{ point.number }", point.base_path %>

    + +
    +
    + <% @content_item.points.each do |point| %> +
    +

    + <%= point.number %>. + <%= point.title_without_number %> +

    +
    + <%= "

    #{point.description}

    " if point.description.present? %> +

    <%= link_to "Read more about point #{ point.number }", point.base_path, class: 'govuk-link' %>

    +
    -
    - <% end %> -
    - -
    -
    - <% if @content_item.poster_url.present? %> -
    -

    - Download the poster -

    -

    - <%= link_to "Download and print your own Service Standard poster", @content_item.poster_url %> -

    -
    - <% end %> - +
    + +
    diff --git a/app/views/content_items/topic.html.erb b/app/views/content_items/topic.html.erb index 32d9cbfa..a0a93885 100644 --- a/app/views/content_items/topic.html.erb +++ b/app/views/content_items/topic.html.erb @@ -4,82 +4,73 @@ <% content_for :phase_message do %> <%= render 'shared/custom_phase_message', phase: @content_item.phase %> <% end %> +
    -<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @content_item.breadcrumbs %> + <%= render "govuk_publishing_components/components/breadcrumbs", breadcrumbs: @content_item.breadcrumbs %> -
    -
    -
    -

    <%= @content_item.title %>

    -

    +

    +
    + <%= render "govuk_publishing_components/components/title", { + title: @content_item.title, + margin_bottom: 7 + } %> +

    <%= @content_item.description %>

    -
    -
    -
    - class="js-hidden" data-module="accordion-with-descriptions"<% end %>> -
    - <% @content_item.groups.each_with_index do |link_group, idx| %> -
    - <% if link_group.name.present? %> -
    -

    <%= link_group.name %>

    - <% if link_group.description.present? %> -

    <%= link_group.description %>

    - <% end %> -
    +
    +
    + <% if @content_item.display_as_accordion? %> + <%= render "govuk_publishing_components/components/accordion", { + items: @content_item.accordion_content + } %> + <% else %> + <% @content_item.groups.each_with_index { |link_group| %> + <% if link_group.name.present? %> +
    +

    <%= link_group.name %>

    + <% if link_group.description.present? %> +

    <%= link_group.description %>

    <% end %> -
    -
      - <% link_group.linked_items.each do |linked_item| %> -
    • - <%= link_to linked_item.label, linked_item.href %> -
      • - <% end %> -
    -
    <% end %> -
    -
    -
    - -
    -
    - <% if @content_item.email_alert_signup_link.present? %> -
    -

    - Get notifications -

    -

    When any guidance within this topic is updated - <%= link_to "email", @content_item.email_alert_signup_link, class: 'related-item__email-link' %> -

    -
    - <% end %> - -
    +
    + +
    +
    diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7d82536a..81a3c445 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -8,10 +8,10 @@ <%= stylesheet_link_tag "print", media: "print" %> - <%= javascript_include_tag 'application' %> - <%= javascript_include_tag 'start-modules' if Rails.env.test? %> + <%= javascript_include_tag "application" %> + <%= javascript_include_tag "start-modules" if Rails.env.test? %> <%= csrf_meta_tags %> - <%= render 'govuk_publishing_components/components/meta_tags', content_item: @content_item.content_item %> + <%= render "govuk_publishing_components/components/meta_tags", content_item: @content_item.content_item %> <%= yield(:extra_head) %> <% if content_for(:meta_description).present? %> @@ -22,19 +22,25 @@ <%= content_for(:header_title) || "Service Manual" %>
    -
    +
    -
    - <%= render_phase_label @content_item, content_for(:phase_message) %> +
    +
    +
    + <%= render_phase_label @content_item, content_for(:phase_message) %> +
    +
    <%= yield %>
    - <% if @content_item.use_new_style_feedback_form? %> - <%= render '/shared/improve_this_page' %> - <% else %> - <%= render 'govuk_publishing_components/components/feedback' %> - <% end %> +
    +
    +
    + <%= render "govuk_publishing_components/components/feedback" %> +
    +
    +
    diff --git a/app/views/shared/_change_history.html.erb b/app/views/shared/_change_history.html.erb index b3c8957d..83fb0754 100644 --- a/app/views/shared/_change_history.html.erb +++ b/app/views/shared/_change_history.html.erb @@ -1,5 +1,12 @@ -<% time = change.public_timestamp %> - -

    +<% + time = change.public_timestamp + compressed |= false + time_class = compressed ? 'govuk-heading-s' : 'govuk-heading-m' + time_class << ' govuk-!-margin-bottom-1' +%> + +

    <%= change.note %>

    diff --git a/app/views/shared/_custom_phase_message.html.erb b/app/views/shared/_custom_phase_message.html.erb index 839c76f1..85aeb1e6 100644 --- a/app/views/shared/_custom_phase_message.html.erb +++ b/app/views/shared/_custom_phase_message.html.erb @@ -1 +1 @@ -Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer" %>. +Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer", class: "govuk-link" %>. diff --git a/app/views/shared/_custom_phase_message_homepage.html.erb b/app/views/shared/_custom_phase_message_homepage.html.erb index 839c76f1..85aeb1e6 100644 --- a/app/views/shared/_custom_phase_message_homepage.html.erb +++ b/app/views/shared/_custom_phase_message_homepage.html.erb @@ -1 +1 @@ -Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer" %>. +Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer", class: "govuk-link" %>. diff --git a/app/views/shared/_email_signup.html.erb b/app/views/shared/_email_signup.html.erb new file mode 100644 index 00000000..0c782c57 --- /dev/null +++ b/app/views/shared/_email_signup.html.erb @@ -0,0 +1,8 @@ +
    + +

    When any guidance within this topic is updated + <%= link_to "email", @content_item.email_alert_signup_link, class: 'govuk-link related-item__email-link' %> +

    +
    diff --git a/app/views/shared/_improve_this_page.html.erb b/app/views/shared/_improve_this_page.html.erb deleted file mode 100644 index 9d7fc1ce..00000000 --- a/app/views/shared/_improve_this_page.html.erb +++ /dev/null @@ -1,60 +0,0 @@ -
    -
    -
    -

    Is this page useful?

    - <%= link_to contact_govuk_path, { - class: 'improve-this-page__page-is-useful-button js-page-is-useful', - data: { 'track-category' => 'manualFeedbackForm', 'track-action' => 'ffYesClick' }, - } do %> - Yes - <% end %> - <%= link_to contact_govuk_path, { - class: 'js-page-is-not-useful', - data: { 'track-category' => 'manualFeedbackForm', 'track-action' => 'ffNoClick' }, - 'aria-controls': 'improveThisPageForm', - 'aria-expanded': false - } do %> - No - <% end %> - <%= link_to contact_govuk_path, { - class: 'js-something-is-wrong improve-this-page__anything-wrong', - data: { 'track-category' => 'manualFeedbackForm', 'track-action' => 'ffWrongClick' }, - 'aria-controls': 'improveThisPageForm', - 'aria-expanded': false - } do %> - Is there anything wrong with this page? - <% end %> -
    -
    - Close -
    -
    -
    -
    - -
    - - -
    -
    - - -
    -
    - - -
    -
    - -
    -
    -
    -
    -
    -
    -
    diff --git a/spec/javascripts/accordion-with-descriptions-spec.js b/spec/javascripts/accordion-with-descriptions-spec.js deleted file mode 100644 index 57f50d53..00000000 --- a/spec/javascripts/accordion-with-descriptions-spec.js +++ /dev/null @@ -1,360 +0,0 @@ -describe('An accordion with descriptions module', function () { - "use strict"; - - var $element; - var accordion; - var html = '\ -
    \ -
    \ -
    \ -
    \ -

    Topic Section One

    \ -

    Subsection description in here

    \ -
    \ -
    \ - \ -
    \ -
    \ -
    \ -
    \ -

    Topic Section Two

    \ -

    Subsection description in here

    \ -
    \ -
    \ - \ -
    \ -
    \ -
    \ -
    '; - - beforeEach(function () { - accordion = new GOVUK.Modules.AccordionWithDescriptions(); - $element = $(html); - }); - - afterEach(function() { - $(document).off(); - sessionStorage.clear(); - }); - - it("has a class of js-accordion-with-descriptions to indicate the js has loaded", function () { - accordion.start($element); - - expect($element).toHaveClass("js-accordion-with-descriptions"); - }); - - it("is not hidden", function () { - accordion.start($element); - - expect($element).not.toHaveClass("js-hidden"); - }); - - it("has an open/close all button", function () { - accordion.start($element); - - var $openCloseAllButton = $element.find('.js-subsection-controls button'); - - expect($openCloseAllButton).toExist(); - expect($openCloseAllButton).toHaveText("Open all"); - // It has an aria-expanded false attribute as all subsections are closed - expect($openCloseAllButton).toHaveAttr("aria-expanded", "false"); - // It has an aria-controls attribute that includes all the subsection_content IDs - expect($openCloseAllButton).toHaveAttr('aria-controls','subsection_content_0 subsection_content_1 '); - }); - - it("has no subsections which have an open state", function () { - accordion.start($element); - - var openSubsections = $element.find('.subsection--is-open').length; - - expect(openSubsections).toEqual(0); - }); - - it("inserts a button into each subsection to show/hide content", function () { - accordion.start($element); - - var $subsectionButton = $element.find('.subsection__title button'); - - expect($subsectionButton).toHaveClass('subsection__button'); - // It has an aria-expanded false attribute as it is closed - expect($subsectionButton).toHaveAttr('aria-expanded','false'); - // It has an aria-controls attribute to store the subsection_content ID - expect($subsectionButton).toHaveAttr('aria-controls','subsection_content_0'); - }); - - it("ensures all subsection content is hidden", function () { - accordion.start($element); - - $.each($element.find('.subsection__content'), function(index, content) { - expect(content).toHaveClass('js-hidden'); - }); - }); - - it("adds an open/close icon to each subsection", function () { - accordion.start($element); - - var $subsectionHeader = $element.find('.subsection__header'); - - expect($subsectionHeader).toContainElement('.subsection__icon'); - }); - - describe('Clicking the "Open all" button', function () { - - it('adds a .subsection--is-open class to each subsection to hide the icon', function () { - accordion.start($element); - clickOpenCloseAll(); - - expect($element.find('.subsection--is-open').length).toEqual(2); - }); - - it('adds an aria-expanded attribute to each subsection button', function () { - accordion.start($element); - clickOpenCloseAll(); - - expect($element.find('.js-subsection-button[aria-expanded="true"]').length).toEqual(2); - }); - - it('removes the .js-hidden class from each subsection content to hide the list of links', function () { - accordion.start($element); - clickOpenCloseAll(); - - expect($element.find('.js-subsection-content.js-hidden').length).toEqual(0); - }); - - it('changes the Open/Close all button text to "Close all"', function () { - accordion.start($element); - clickOpenCloseAll(); - - expect($element.find('.js-subsection-controls button')).toContainText("Close all"); - }); - - it("triggers a google analytics custom event", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - clickOpenCloseAll(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionAllOpened', { - label: 'Open All' - }); - }); - - }); - - describe('Clicking the "Close all" button', function () { - it("triggers a google analytics custom event", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - clickOpenCloseAll(); - clickOpenCloseAll(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionAllClosed', { - label: 'Close All' - }); - }); - }); - - describe('Opening a section', function () { - - // When a section is open (testing: toggleSection, openSection) - it("does not have a class of js-hidden", function () { - accordion.start($element); - - var $subsectionButton = $element.find('.subsection__title button:first'); - var $subsectionContent = $element.find('.subsection__content:first'); - $subsectionButton.click(); - expect($subsectionContent).not.toHaveClass("js-hidden"); - }); - - // When a section is open (testing: toggleState, setExpandedState) - it("has a an aria-expanded attribute and the value is true", function () { - accordion.start($element); - - var $subsectionButton = $element.find('.subsection__title button:first'); - $subsectionButton.click(); - expect($subsectionButton).toHaveAttr('aria-expanded','true'); - }); - - it("has its state saved in session storage", function () { - accordion.start($element); - - var GOVUKServiceManualTopic = "GOVUK_service_manual__"; - - var $subsectionButton = $element.find('.subsection__title button'); - $subsectionButton.click(); - - var $openSubsections = $element.find('.subsection--is-open'); - var subsectionOpenContentId = $openSubsections.find('.subsection__content').attr('id'); - - var storedItem = sessionStorage.getItem(GOVUKServiceManualTopic+subsectionOpenContentId); - expect(storedItem).toEqual('Opened'); - }); - - it("triggers a google analytics custom event when clicking on the title", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - var $subsectionButton = $element.find('.subsection__title button:first'); - $subsectionButton.click(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionOpened', { - label: 'Topic Section One - Heading Click' - }); - }); - - it("triggers a google analytics custom event when clicking on the icon", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - var $subsectionIcon = $element.find('.subsection__icon'); - $subsectionIcon.click(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionOpened', { - label: 'Topic Section One - Plus Click' - }); - }); - - it("triggers a google analytics custom event when clicking in space in the header", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - var $subsectionHeader = $element.find('.subsection__header'); - $subsectionHeader.click(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionOpened', { - label: 'Topic Section One - Click Elsewhere' - }); - }); - }); - - describe('Closing a section', function () { - - // When a section is closed (testing: toggleSection, closeSection) - it("has a class of js-hidden", function () { - accordion.start($element); - - var $subsectionButton = $element.find('.subsection__title button:first'); - var $subsectionContent = $element.find('.subsection__content:first'); - $subsectionButton.click(); - expect($subsectionContent).not.toHaveClass("js-hidden"); - $subsectionButton.click(); - expect($subsectionContent).toHaveClass("js-hidden"); - }); - - // When a section is closed (testing: toggleState, setExpandedState) - it("has a an aria-expanded attribute and the value is false", function () { - accordion.start($element); - - var $subsectionButton = $element.find('.subsection__title button:first'); - var $subsectionContent = $element.find('.subsection__content'); - $subsectionButton.click(); - expect($subsectionButton).toHaveAttr('aria-expanded','true'); - $subsectionButton.click(); - expect($subsectionButton).toHaveAttr('aria-expanded','false'); - }); - - it("has its state removed in session storage", function () { - accordion.start($element); - - var GOVUKServiceManualTopic = "GOVUK_service_manual__"; - - var $subsection = $element.find('.subsection'); - var $subsectionButton = $subsection.find('.subsection__title button'); - - // Open and close the subsection - $subsectionButton.click(); - $subsectionButton.click(); - - var subsectionContentId = $subsection.find('.subsection__content').attr('id'); - var storedItem = sessionStorage.getItem(GOVUKServiceManualTopic+subsectionContentId); - expect(storedItem).toBeNull(); - }); - - it("triggers a google analytics custom event when clicking on the title", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - var $subsectionButton = $element.find('.subsection__title button:first'); - $subsectionButton.click(); - $subsectionButton.click(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionClosed', { - label: 'Topic Section One - Heading Click' - }); - }); - - it("triggers a google analytics custom event when clicking on the icon", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - var $subsectionIcon = $element.find('.subsection__icon'); - $subsectionIcon.click(); - $subsectionIcon.click(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionClosed', { - label: 'Topic Section One - Minus Click' - }); - }); - - it("triggers a google analytics custom event when clicking in space in the header", function () { - GOVUK.analytics = {trackEvent: function() {}}; - spyOn(GOVUK.analytics, 'trackEvent'); - - accordion.start($element); - var $subsectionHeader = $element.find('.subsection__header'); - $subsectionHeader.click(); - $subsectionHeader.click(); - - expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionClosed', { - label: 'Topic Section One - Click Elsewhere' - }); - }); - - }); - - describe('When linking to a topic section', function () { - beforeEach(function() { - spyOn(GOVUK, 'getCurrentLocation').and.returnValue({ - hash: '#topic-section-one' - }); - }); - - it("opens the linked to topic section", function () { - accordion.start($element); - - var $subsectionContent = $element.find('#topic-section-one') - .parents('.subsection').find('.subsection__content'); - - expect($subsectionContent).not.toHaveClass('js-hidden'); - }); - - it("leaves other sections closed", function () { - accordion.start($element); - - var $subsectionContent = $element.find('#topic-section-two') - .parents('.subsection').find('.subsection__content'); - - expect($subsectionContent).toHaveClass('js-hidden'); - }); - }); - - function clickOpenCloseAll() { - $element.find('.js-subsection-controls button').click(); - } -}); diff --git a/test/integration/guide_test.rb b/test/integration/guide_test.rb index 55c8c985..65b5039d 100644 --- a/test/integration/guide_test.rb +++ b/test/integration/guide_test.rb @@ -1,4 +1,5 @@ require 'test_helper' +require 'pry' class GuideTest < ActionDispatch::IntegrationTest test "shows the time it was saved if it hasn't been published yet" do @@ -17,7 +18,7 @@ class GuideTest < ActionDispatch::IntegrationTest content_store_has_item(base_path, example) visit base_path - within('.metadata') do + within('.app-c-metadata--heading') do assert page.has_content?('5 minutes ago') end end @@ -27,7 +28,7 @@ class GuideTest < ActionDispatch::IntegrationTest travel_to Time.zone.local(2015, 10, 10, 0, 0, 0) do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.metadata') do + within('.app-c-metadata--heading') do assert page.has_content?('about 16 hours ago') end end @@ -36,7 +37,7 @@ class GuideTest < ActionDispatch::IntegrationTest test "service manual guide shows content owners" do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.metadata') do + within('.app-c-metadata--heading') do assert page.has_link?('Agile delivery community') end end @@ -53,7 +54,7 @@ class GuideTest < ActionDispatch::IntegrationTest test "service manual guide does not show published by" do setup_and_visit_example('service_manual_guide', 'service_manual_guide_community') - within('.metadata') do + within('.gem-c-metadata') do refute page.has_content?('Published by') end end @@ -61,7 +62,7 @@ class GuideTest < ActionDispatch::IntegrationTest test "displays the description for a point" do setup_and_visit_example('service_manual_guide', 'point_page') - within('.page-header__summary') do + within('.app-c-page-header__summary') do assert page.has_content?('Research to develop a deep knowledge of who the service users are') end end @@ -69,7 +70,7 @@ class GuideTest < ActionDispatch::IntegrationTest test "does not display the description for a normal guide" do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - refute page.has_css?('.page-header__summary') + refute page.has_css?('.app-c-page-header__summary') end test "displays a link to give feedback" do @@ -81,7 +82,7 @@ class GuideTest < ActionDispatch::IntegrationTest test 'displays the published date of the most recent change' do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.change-history') do + within('.app-c-change-history') do assert page.has_content? 'Last update: 9 October 2015' end end @@ -89,7 +90,7 @@ class GuideTest < ActionDispatch::IntegrationTest test 'displays the most recent change history for a guide' do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.change-history') do + within('.app-c-change-history') do assert page.has_content? 'This is our latest change' end end @@ -97,7 +98,7 @@ class GuideTest < ActionDispatch::IntegrationTest test 'displays the change history for a guide' do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.change-history__past') do + within('.app-c-change-history__past') do assert page.has_content? 'This is another change' assert page.has_content? 'Guidance first published' end @@ -115,7 +116,7 @@ class GuideTest < ActionDispatch::IntegrationTest }) refute page.has_content? 'Show all page updates' - refute page.has_css? '.change-history__past' + refute page.has_css? '.app-c-change-history__past' end test 'omits the latest change and previous change if the guide has no history' do @@ -126,6 +127,6 @@ class GuideTest < ActionDispatch::IntegrationTest refute page.has_content? 'Last update:' refute page.has_content? 'Show all page updates' - refute page.has_css? '.change-history__past' + refute page.has_css? '.app-c-change-history__past' end end diff --git a/test/integration/improve_this_page_test.rb b/test/integration/improve_this_page_test.rb deleted file mode 100644 index b7cb0028..00000000 --- a/test/integration/improve_this_page_test.rb +++ /dev/null @@ -1,20 +0,0 @@ -require 'test_helper' - -class ImproveThisPageTest < ActionDispatch::IntegrationTest - test "asks the user if the page is useful without javascript enabled" do - setup_and_visit_example('service_manual_guide', 'service_manual_guide') - - within('.improve-this-page') do - assert page.has_link?('Yes', href: '/contact/govuk') - assert page.has_link?('No', href: '/contact/govuk') - end - end - - test "asks the user if there is anything wrong with the page without javascript enabled" do - setup_and_visit_example('service_manual_guide', 'service_manual_guide') - - within('.improve-this-page') do - assert page.has_link?('Is there anything wrong with this page?', href: '/contact/govuk') - end - end -end diff --git a/test/integration/service_standard_test.rb b/test/integration/service_standard_test.rb index 757044d8..f3f75ad4 100644 --- a/test/integration/service_standard_test.rb +++ b/test/integration/service_standard_test.rb @@ -1,4 +1,5 @@ require 'test_helper' +require 'pry' class ServiceStandardTest < ActionDispatch::IntegrationTest test "service standard page has a title, summary and intro" do @@ -12,9 +13,9 @@ class ServiceStandardTest < ActionDispatch::IntegrationTest } ) - assert page.has_css?(".page-header__title", text: "Service Standard"), "No title found" - assert page.has_css?(".page-header__summary", text: "The Service Standard is a set of 14 criteria"), "No description found" - assert page.has_css?(".page-header__intro", text: "All public facing transactional services must meet the standard."), "No body found" + assert page.has_css?(".gem-c-title__text", text: "Service Standard"), "No title found" + assert page.has_css?(".app-c-page-header__summary", text: "The Service Standard is a set of 14 criteria"), "No description found" + assert page.has_css?(".app-c-page-header__intro", text: "All public facing transactional services must meet the standard."), "No body found" end test "service standard page has points" do @@ -65,6 +66,6 @@ class ServiceStandardTest < ActionDispatch::IntegrationTest end def points - find_all('.service-standard-point') + find_all('.app-c-service-standard-point') end end diff --git a/test/integration/topic_test.rb b/test/integration/topic_test.rb index a7babf4b..25ec2183 100644 --- a/test/integration/topic_test.rb +++ b/test/integration/topic_test.rb @@ -46,36 +46,4 @@ class TopicTest < ActionDispatch::IntegrationTest assert page.has_link?("email", href: "/service-manual/test-expanded-topic/email-signup") end - - test "it includes anchors for headings" do - using_javascript_driver do - setup_and_visit_example('service_manual_topic', 'service_manual_topic_collapsed') - - assert page.has_css?("h2#group-1") - end - end - - test "it does not insert the accordion buttons if the topic isn't visually collapsed" do - using_javascript_driver do - setup_and_visit_example('service_manual_topic', 'service_manual_topic') - - refute page.has_css?(".subsection__button") - end - end - - test "it inserts the accordion buttons if the topic is visually collapsed" do - using_javascript_driver do - setup_and_visit_example('service_manual_topic', 'service_manual_topic_collapsed') - - assert page.has_css?(".subsection__button") - end - end - - test "it does not use the accordion or section headings if the topic does not use sections" do - # 'not using sections' == having one section with no title or description - setup_and_visit_example('service_manual_topic', 'service_manual_topic_without_sections') - - refute page.has_css?(".subsection__button") - refute page.has_css?(".subsection__header") - end end From 0e01ec835a88d10d3732c856b5d36faeb50c09bd Mon Sep 17 00:00:00 2001 From: Ian James Date: Wed, 18 Sep 2019 13:37:57 +0100 Subject: [PATCH 2/7] Delete CSS that's not being used. --- app/assets/stylesheets/application.scss | 3 +-- app/assets/stylesheets/modules/_link-unit.scss | 9 --------- app/assets/stylesheets/modules/_main-service-manual.scss | 3 --- 3 files changed, 1 insertion(+), 14 deletions(-) delete mode 100644 app/assets/stylesheets/modules/_link-unit.scss delete mode 100644 app/assets/stylesheets/modules/_main-service-manual.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 2eda776a..93b71ba3 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,6 +1,7 @@ $govuk-compatibility-govuktemplate: true; $govuk-compatibility-govukfrontendtoolkit: true; $govuk-compatibility-govukelements: true; + @import "govuk_publishing_components/all_components"; @import "common"; @@ -15,8 +16,6 @@ $govuk-compatibility-govukelements: true; @import "modules/community-contact"; @import "modules/govspeak-wrapper"; @import "modules/hero"; -@import "modules/link-unit"; -@import "modules/main-service-manual"; @import "modules/notice"; @import "modules/page-contents"; @import "modules/page-header"; diff --git a/app/assets/stylesheets/modules/_link-unit.scss b/app/assets/stylesheets/modules/_link-unit.scss deleted file mode 100644 index ca939830..00000000 --- a/app/assets/stylesheets/modules/_link-unit.scss +++ /dev/null @@ -1,9 +0,0 @@ -.link-unit { - &__title { - @include bold-19; - } - - &__description { - @include core-16($line-height: 1.5); - } -} diff --git a/app/assets/stylesheets/modules/_main-service-manual.scss b/app/assets/stylesheets/modules/_main-service-manual.scss deleted file mode 100644 index 9cd87053..00000000 --- a/app/assets/stylesheets/modules/_main-service-manual.scss +++ /dev/null @@ -1,3 +0,0 @@ -main { - @include gutter-bottom-margin-to-double; -} From b6d1be9b9b7f560d106d6bbcb96c669809e31990 Mon Sep 17 00:00:00 2001 From: Ian James Date: Wed, 18 Sep 2019 13:40:49 +0100 Subject: [PATCH 3/7] Update Service Toolkit template to use GOV.UK Frontend. - Fix selector in Service Toolkit test. --- .../stylesheets/modules/_collection.scss | 26 ++------- .../content_items/service_toolkit.html.erb | 53 ++++++++++--------- test/integration/service_toolkit_test.rb | 2 +- 3 files changed, 34 insertions(+), 47 deletions(-) diff --git a/app/assets/stylesheets/modules/_collection.scss b/app/assets/stylesheets/modules/_collection.scss index 5f451fdc..d3f21f51 100644 --- a/app/assets/stylesheets/modules/_collection.scss +++ b/app/assets/stylesheets/modules/_collection.scss @@ -1,37 +1,19 @@ -.collection { +.app-c-collection { border-bottom: 1px solid $govuk-border-colour; - - padding-bottom: govuk-spacing(3); margin-bottom: govuk-spacing(3); + padding-bottom: govuk-spacing(3); @include media(tablet) { + margin-bottom: govuk-spacing(9); padding-bottom: govuk-spacing(6); - margin-bottom: govuk-spacing(6); } &:last-child { - margin-bottom: 0; border-bottom: none; - } - - &__title { - @include bold-36; - margin-bottom: 5px; - margin-top: 1.25em; + margin-bottom: 0; } &__description { - @include core-24; color: $govuk-secondary-text-colour; - margin-top: 0; - } - - &__link { - @include bold-24; - margin: 0.8333333333em 0; - } - - &__link-description { - @include core-19; } } diff --git a/app/views/content_items/service_toolkit.html.erb b/app/views/content_items/service_toolkit.html.erb index 1ee5365d..8486c118 100644 --- a/app/views/content_items/service_toolkit.html.erb +++ b/app/views/content_items/service_toolkit.html.erb @@ -1,38 +1,43 @@ <% content_for :title, "Service Toolkit" content_for :header_title, "Service Toolkit" - content_for :body_classes, "full-width" + content_for :body_classes, "app-full-width" %> -
    -
    -
    -
    -

    Design and build government services

    +
    +
    +
    +
    +
    +

    Design and build government services

    -

    - All you need to design, build and run services that meet government standards. -

    +

    + All you need to design, build and run services that meet government standards. +

    +
    -
    +
    <% @content_item.collections.each do |collection| %> -
    -

    " class="collection__title"><%= collection["title"] %>

    -

    <%= collection["description"] %>

    - - <% collection["links"].each_slice(2) do |row_of_links| %> -
    - <% row_of_links.each do | link | %> -
    -

    <%= link_to link["title"], link["url"] %>

    -

    <%= link["description"] %>

    -
    - <% end %> +
    +
    +
    +

    " class="app-c-collection__title govuk-heading-l govuk-!-margin-bottom-1"><%= collection["title"] %>

    +

    <%= collection["description"] %>

    +
    - <% end %> -
    + <% collection["links"].each_slice(2) do |row_of_links| %> +
    + <% row_of_links.each do | link | %> +
    +

    <%= link_to link["title"], link["url"], class: "govuk-link" %>

    +

    <%= link["description"] %>

    +
    + <% end %> +
    + <% end %> +
    <% end %>
    diff --git a/test/integration/service_toolkit_test.rb b/test/integration/service_toolkit_test.rb index 9bd5b7b2..bd099be8 100644 --- a/test/integration/service_toolkit_test.rb +++ b/test/integration/service_toolkit_test.rb @@ -99,7 +99,7 @@ class ServiceToolkitTest < ActionDispatch::IntegrationTest private def collections - find_all('.collection') + find_all('.app-c-collection') end def the_first_collection From ea3844087d191e6262dfd5efd63aec3a2136b84e Mon Sep 17 00:00:00 2001 From: Ian James Date: Wed, 18 Sep 2019 14:26:55 +0100 Subject: [PATCH 4/7] Remove nested `lang` attibute that's not needed. --- app/views/layouts/application.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 81a3c445..e8c14d8f 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -23,7 +23,7 @@
    -
    +
    From 0a23441bc2c73f0485fafdd22b60c8bd4ffcfe62 Mon Sep 17 00:00:00 2001 From: Ian James Date: Wed, 18 Sep 2019 16:44:11 +0100 Subject: [PATCH 5/7] Fix page history toggle focus state and erroneous gutter on feedback component. --- app/views/content_items/guide.html.erb | 11 ++++++++++- app/views/layouts/application.html.erb | 9 +-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/app/views/content_items/guide.html.erb b/app/views/content_items/guide.html.erb index 9edf31b1..183f4ad2 100644 --- a/app/views/content_items/guide.html.erb +++ b/app/views/content_items/guide.html.erb @@ -89,7 +89,16 @@
    <% if @content_item.previous_changes.present? %>

    - +

      <% @content_item.previous_changes.each do |previous_change| %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index e8c14d8f..677a1d5a 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -33,14 +33,7 @@
    <%= yield %>
    - -
    -
    -
    - <%= render "govuk_publishing_components/components/feedback" %> -
    -
    -
    + <%= render "govuk_publishing_components/components/feedback" %>
    From 9e805bdad6b595cd4344a3f3cd826456b17720bf Mon Sep 17 00:00:00 2001 From: Ian James Date: Fri, 20 Sep 2019 10:58:19 +0100 Subject: [PATCH 6/7] Rename CSS classes and correct spelling error. --- .../stylesheets/modules/_change-history.scss | 2 +- .../stylesheets/modules/_collection.scss | 2 +- .../modules/_community-contact.scss | 2 +- app/assets/stylesheets/modules/_hero.scss | 8 ++++---- .../stylesheets/modules/_page-contents.scss | 2 +- .../stylesheets/modules/_page-header.scss | 2 +- .../modules/_service-standard-point.scss | 2 +- .../stylesheets/modules/_typography.scss | 4 ++-- app/views/content_items/guide.html.erb | 16 +++++++-------- app/views/content_items/homepage.html.erb | 14 ++++++------- .../content_items/service_standard.html.erb | 16 +++++++-------- .../content_items/service_toolkit.html.erb | 18 ++++++++--------- app/views/shared/_change_history.html.erb | 2 +- test/integration/guide_test.rb | 20 +++++++++---------- test/integration/service_standard_test.rb | 6 +++--- test/integration/service_toolkit_test.rb | 2 +- 16 files changed, 59 insertions(+), 59 deletions(-) diff --git a/app/assets/stylesheets/modules/_change-history.scss b/app/assets/stylesheets/modules/_change-history.scss index fb8c3534..c9ce118c 100644 --- a/app/assets/stylesheets/modules/_change-history.scss +++ b/app/assets/stylesheets/modules/_change-history.scss @@ -1,3 +1,3 @@ -.app-c-change-history__change-note { +.app-change-history__change-note { color: $govuk-secondary-text-colour; } diff --git a/app/assets/stylesheets/modules/_collection.scss b/app/assets/stylesheets/modules/_collection.scss index d3f21f51..03ae5416 100644 --- a/app/assets/stylesheets/modules/_collection.scss +++ b/app/assets/stylesheets/modules/_collection.scss @@ -1,4 +1,4 @@ -.app-c-collection { +.app-collection { border-bottom: 1px solid $govuk-border-colour; margin-bottom: govuk-spacing(3); padding-bottom: govuk-spacing(3); diff --git a/app/assets/stylesheets/modules/_community-contact.scss b/app/assets/stylesheets/modules/_community-contact.scss index cadd5cba..aa3b01b3 100644 --- a/app/assets/stylesheets/modules/_community-contact.scss +++ b/app/assets/stylesheets/modules/_community-contact.scss @@ -1,4 +1,4 @@ -.app-c-community-contact { +.app-community-contact { @include media(tablet) { text-align: right; padding-top: govuk-spacing(8); diff --git a/app/assets/stylesheets/modules/_hero.scss b/app/assets/stylesheets/modules/_hero.scss index 0644458a..64a54bff 100644 --- a/app/assets/stylesheets/modules/_hero.scss +++ b/app/assets/stylesheets/modules/_hero.scss @@ -1,4 +1,4 @@ -.app-c-hero { +.app-hero { background-color: $govuk-brand-colour; color: govuk-colour("white"); margin-bottom: govuk-spacing(3); @@ -15,11 +15,11 @@ } } -.app-c-hero-lead { +.app-hero-lead { line-height: 1.35; } -.app-c-hero__heading--inverse, -.app-c-hero__body--inverse { +.app-hero__heading--inverse, +.app-hero__body--inverse { color: govuk-colour("white"); } diff --git a/app/assets/stylesheets/modules/_page-contents.scss b/app/assets/stylesheets/modules/_page-contents.scss index cb0ea371..c3640489 100644 --- a/app/assets/stylesheets/modules/_page-contents.scss +++ b/app/assets/stylesheets/modules/_page-contents.scss @@ -1,4 +1,4 @@ -.app-c-page-contents { +.app-page-contents { &__list li { margin-left: govuk-spacing(0); padding-right: govuk-spacing(3); diff --git a/app/assets/stylesheets/modules/_page-header.scss b/app/assets/stylesheets/modules/_page-header.scss index 2e0b4e09..6138a491 100644 --- a/app/assets/stylesheets/modules/_page-header.scss +++ b/app/assets/stylesheets/modules/_page-header.scss @@ -1,4 +1,4 @@ -.app-c-page-header { +.app-page-header { &__intro { p { @extend %govuk-body-m; diff --git a/app/assets/stylesheets/modules/_service-standard-point.scss b/app/assets/stylesheets/modules/_service-standard-point.scss index 5c820686..8822aa35 100644 --- a/app/assets/stylesheets/modules/_service-standard-point.scss +++ b/app/assets/stylesheets/modules/_service-standard-point.scss @@ -1,4 +1,4 @@ -.app-c-service-standard-point { +.app-service-standard-point { border-top: 1px solid $govuk-border-colour; margin-top: govuk-spacing(5); padding-top: govuk-spacing(5); diff --git a/app/assets/stylesheets/modules/_typography.scss b/app/assets/stylesheets/modules/_typography.scss index 3a547240..b421c462 100644 --- a/app/assets/stylesheets/modules/_typography.scss +++ b/app/assets/stylesheets/modules/_typography.scss @@ -1,6 +1,6 @@ // Text -.app-c-body, -.app-c-body-s { +.app-body, +.app-body-s { line-height: 1.45; } diff --git a/app/views/content_items/guide.html.erb b/app/views/content_items/guide.html.erb index 183f4ad2..ed7c4b84 100644 --- a/app/views/content_items/guide.html.erb +++ b/app/views/content_items/guide.html.erb @@ -16,7 +16,7 @@
    -
    +
    <%= render "govuk_publishing_components/components/title", { context: @content_item.category_title, @@ -24,14 +24,14 @@ margin_bottom: 8 } %> <% if @content_item.show_description? %> -

    +

    <%= @content_item.description %>

    <% end %>
    -
    +

    <%= link_to "Give feedback about this page", "/contact/govuk", class: "govuk-link" %>

    @@ -40,7 +40,7 @@
    -
    +
    <%= render "govuk_publishing_components/components/metadata", { last_updated: "#{time_ago_in_words(@content_item.visible_updated_at)} ago", from: @content_item.content_owners.map { |content_owner| @@ -55,7 +55,7 @@

    Page contents:

    -
      +
        <% @content_item.header_links.each do |header_link| %>
      • <%= link_to(header_link[:title], header_link[:href], class: 'govuk-link') %>
        • <% end %> @@ -68,8 +68,8 @@ <%= render "govuk_publishing_components/components/govspeak", content: @content_item.body.html_safe %>
    -
    -
    +
    +
    <% if @content_item.content_owners.any? %> <%= render "govuk_publishing_components/components/metadata", { last_updated: time_ago_in_words(@content_item.visible_updated_at), @@ -100,7 +100,7 @@ + Show all page updates (<%= @content_item.previous_changes.length %>)

    -
      +
        <% @content_item.previous_changes.each do |previous_change| %>
      1. <%= render partial: 'shared/change_history', locals: { change: previous_change, compressed: true} %> diff --git a/app/views/content_items/homepage.html.erb b/app/views/content_items/homepage.html.erb index 83ca4368..9a03c5b6 100644 --- a/app/views/content_items/homepage.html.erb +++ b/app/views/content_items/homepage.html.erb @@ -6,13 +6,13 @@ content_for :body_classes, 'app-full-width' %> -
        -
        +
        +
        -

        Service Manual

        -

        +

        Service Manual

        +

        Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link app-link--inverse' %>.

        @@ -27,7 +27,7 @@
        -

        +

        <%= link_to 'Contact the Service Manual team', '/contact/govuk', class: 'govuk-link app-link--inverse' %> with any comments or questions.

        @@ -54,14 +54,14 @@

        The Service Standard

        -

        The <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.

        +

        The <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.

        Communities of practice

        -

        You can view the <%= link_to 'communities of practice', '/service-manual/communities', class: 'govuk-link' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.

        +

        You can view the <%= link_to 'communities of practice', '/service-manual/communities', class: 'govuk-link' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.

        diff --git a/app/views/content_items/service_standard.html.erb b/app/views/content_items/service_standard.html.erb index 464bf100..b0d648df 100644 --- a/app/views/content_items/service_standard.html.erb +++ b/app/views/content_items/service_standard.html.erb @@ -10,14 +10,14 @@
        -
        +
        <%= render "govuk_publishing_components/components/title", { title: @content_item.title, } %> -

        +

        <%= @content_item.content_item["description"] %>

        -
        +
        <%= @content_item.content_item["details"]["body"].html_safe %>
        @@ -28,14 +28,14 @@
        <% @content_item.points.each do |point| %> -
        -

        - <%= point.number %>. +
        +

        + <%= point.number %>. <%= point.title_without_number %>

        -
        +
        <%= "

        #{point.description}

        " if point.description.present? %> -

        <%= link_to "Read more about point #{ point.number }", point.base_path, class: 'govuk-link' %>

        +

        <%= link_to "Read more about point #{ point.number }", point.base_path, class: 'govuk-link' %>

        <% end %> diff --git a/app/views/content_items/service_toolkit.html.erb b/app/views/content_items/service_toolkit.html.erb index 8486c118..8fc73762 100644 --- a/app/views/content_items/service_toolkit.html.erb +++ b/app/views/content_items/service_toolkit.html.erb @@ -3,14 +3,14 @@ content_for :header_title, "Service Toolkit" content_for :body_classes, "app-full-width" %> -
        -
        +
        +
        -

        Design and build government services

        +

        Design and build government services

        -

        +

        All you need to design, build and run services that meet government standards.

        @@ -21,19 +21,19 @@
        <% @content_item.collections.each do |collection| %> -
        +
        -

        " class="app-c-collection__title govuk-heading-l govuk-!-margin-bottom-1"><%= collection["title"] %>

        -

        <%= collection["description"] %>

        +

        " class="app-collection__title govuk-heading-l govuk-!-margin-bottom-1"><%= collection["title"] %>

        +

        <%= collection["description"] %>

        <% collection["links"].each_slice(2) do |row_of_links| %>
        <% row_of_links.each do | link | %>
        -

        <%= link_to link["title"], link["url"], class: "govuk-link" %>

        -

        <%= link["description"] %>

        +

        <%= link_to link["title"], link["url"], class: "govuk-link" %>

        +

        <%= link["description"] %>

        <% end %>
        diff --git a/app/views/shared/_change_history.html.erb b/app/views/shared/_change_history.html.erb index 83fb0754..8ec5d79c 100644 --- a/app/views/shared/_change_history.html.erb +++ b/app/views/shared/_change_history.html.erb @@ -7,6 +7,6 @@ -

        +

        <%= change.note %>

        diff --git a/test/integration/guide_test.rb b/test/integration/guide_test.rb index 65b5039d..abf1c492 100644 --- a/test/integration/guide_test.rb +++ b/test/integration/guide_test.rb @@ -18,7 +18,7 @@ class GuideTest < ActionDispatch::IntegrationTest content_store_has_item(base_path, example) visit base_path - within('.app-c-metadata--heading') do + within('.app-metadata--heading') do assert page.has_content?('5 minutes ago') end end @@ -28,7 +28,7 @@ class GuideTest < ActionDispatch::IntegrationTest travel_to Time.zone.local(2015, 10, 10, 0, 0, 0) do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.app-c-metadata--heading') do + within('.app-metadata--heading') do assert page.has_content?('about 16 hours ago') end end @@ -37,7 +37,7 @@ class GuideTest < ActionDispatch::IntegrationTest test "service manual guide shows content owners" do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.app-c-metadata--heading') do + within('.app-metadata--heading') do assert page.has_link?('Agile delivery community') end end @@ -62,7 +62,7 @@ class GuideTest < ActionDispatch::IntegrationTest test "displays the description for a point" do setup_and_visit_example('service_manual_guide', 'point_page') - within('.app-c-page-header__summary') do + within('.app-page-header__summary') do assert page.has_content?('Research to develop a deep knowledge of who the service users are') end end @@ -70,7 +70,7 @@ class GuideTest < ActionDispatch::IntegrationTest test "does not display the description for a normal guide" do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - refute page.has_css?('.app-c-page-header__summary') + refute page.has_css?('.app-page-header__summary') end test "displays a link to give feedback" do @@ -82,7 +82,7 @@ class GuideTest < ActionDispatch::IntegrationTest test 'displays the published date of the most recent change' do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.app-c-change-history') do + within('.app-change-history') do assert page.has_content? 'Last update: 9 October 2015' end end @@ -90,7 +90,7 @@ class GuideTest < ActionDispatch::IntegrationTest test 'displays the most recent change history for a guide' do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.app-c-change-history') do + within('.app-change-history') do assert page.has_content? 'This is our latest change' end end @@ -98,7 +98,7 @@ class GuideTest < ActionDispatch::IntegrationTest test 'displays the change history for a guide' do setup_and_visit_example('service_manual_guide', 'service_manual_guide') - within('.app-c-change-history__past') do + within('.app-change-history__past') do assert page.has_content? 'This is another change' assert page.has_content? 'Guidance first published' end @@ -116,7 +116,7 @@ class GuideTest < ActionDispatch::IntegrationTest }) refute page.has_content? 'Show all page updates' - refute page.has_css? '.app-c-change-history__past' + refute page.has_css? '.app-change-history__past' end test 'omits the latest change and previous change if the guide has no history' do @@ -127,6 +127,6 @@ class GuideTest < ActionDispatch::IntegrationTest refute page.has_content? 'Last update:' refute page.has_content? 'Show all page updates' - refute page.has_css? '.app-c-change-history__past' + refute page.has_css? '.app-change-history__past' end end diff --git a/test/integration/service_standard_test.rb b/test/integration/service_standard_test.rb index f3f75ad4..71df0c89 100644 --- a/test/integration/service_standard_test.rb +++ b/test/integration/service_standard_test.rb @@ -14,8 +14,8 @@ class ServiceStandardTest < ActionDispatch::IntegrationTest ) assert page.has_css?(".gem-c-title__text", text: "Service Standard"), "No title found" - assert page.has_css?(".app-c-page-header__summary", text: "The Service Standard is a set of 14 criteria"), "No description found" - assert page.has_css?(".app-c-page-header__intro", text: "All public facing transactional services must meet the standard."), "No body found" + assert page.has_css?(".app-page-header__summary", text: "The Service Standard is a set of 14 criteria"), "No description found" + assert page.has_css?(".app-page-header__intro", text: "All public facing transactional services must meet the standard."), "No body found" end test "service standard page has points" do @@ -66,6 +66,6 @@ class ServiceStandardTest < ActionDispatch::IntegrationTest end def points - find_all('.app-c-service-standard-point') + find_all('.app-service-standard-point') end end diff --git a/test/integration/service_toolkit_test.rb b/test/integration/service_toolkit_test.rb index bd099be8..eed6f72c 100644 --- a/test/integration/service_toolkit_test.rb +++ b/test/integration/service_toolkit_test.rb @@ -99,7 +99,7 @@ class ServiceToolkitTest < ActionDispatch::IntegrationTest private def collections - find_all('.app-c-collection') + find_all('.app-collection') end def the_first_collection From a8557171186b2167fb5e40035457a1997cc5dc4f Mon Sep 17 00:00:00 2001 From: Ian James Date: Fri, 20 Sep 2019 11:59:41 +0100 Subject: [PATCH 7/7] Remove Govspeak overrides. --- .../modules/_govspeak-wrapper.scss | 12 -------- app/views/content_items/guide.html.erb | 29 +++++++++---------- 2 files changed, 14 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/modules/_govspeak-wrapper.scss b/app/assets/stylesheets/modules/_govspeak-wrapper.scss index 4880188d..7fe68b9a 100644 --- a/app/assets/stylesheets/modules/_govspeak-wrapper.scss +++ b/app/assets/stylesheets/modules/_govspeak-wrapper.scss @@ -4,16 +4,4 @@ @include media(tablet) { padding-top: 1.875em; } - - .govuk-govspeak p, - .govuk-govspeak ol, - .govuk-govspeak ul { - line-height: 1.45; - // govspeak margin bottom is 20px - margin-bottom: govuk-spacing(3); - } - - .govuk-govspeak h2 { - @extend %govuk-heading-m; - } } diff --git a/app/views/content_items/guide.html.erb b/app/views/content_items/guide.html.erb index ed7c4b84..a793bc36 100644 --- a/app/views/content_items/guide.html.erb +++ b/app/views/content_items/guide.html.erb @@ -14,23 +14,20 @@
        -
        - - <%= render "govuk_publishing_components/components/title", { - context: @content_item.category_title, - title: @content_item.title, - margin_bottom: 8 - } %> - <% if @content_item.show_description? %> -

        - <%= @content_item.description %> -

        - <% end %> + <%= render "govuk_publishing_components/components/title", { + context: @content_item.category_title, + title: @content_item.title, + margin_bottom: 8 + } %> + <% if @content_item.show_description? %> +

        + <%= @content_item.description %> +

        + <% end %>
        -

        <%= link_to "Give feedback about this page", "/contact/govuk", class: "govuk-link" %> @@ -52,12 +49,15 @@

        +

        Page contents:

          <% @content_item.header_links.each do |header_link| %> -
        • <%= link_to(header_link[:title], header_link[:href], class: 'govuk-link') %>
          • +
        • + <%= link_to(header_link[:title], header_link[:href], class: 'govuk-link') %> +
          • <% end %>
        @@ -67,7 +67,6 @@
        <%= render "govuk_publishing_components/components/govspeak", content: @content_item.body.html_safe %>
        -
        <% if @content_item.content_owners.any? %>