diff --git a/CHANGELOG.md b/CHANGELOG.md index 9cbe7d7dc2..56b9ad4c08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,16 @@ of the commit log. ## Unreleased + +* BREAKING: Update to [govuk-frontend 3.0.0](https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0) (PR #1010) + + You must make the following changes when you migrate to this release: + - Check application's dependencies on deprecated projects (`govuk_frontend_toolkit`, `govuk_elements_rails` and `govuk_template`) and set [compatibility flags](https://govuk-frontend-review.herokuapp.com/docs/#settings/compatibility) appropriately before importing `govuk_publishing_components`. Note that all applications that rely on a layout from static depend indirectly on `govuk_template` and most frontend applications rely on `govuk_frontend_toolkit`. [Example commit](https://github.com/alphagov/calendars/commit/edd649e6c2c7732d4a2e44713dd9463feeaf990b) + - Update [`govuk-colour` mixins](https://govuk-frontend-review.herokuapp.com/docs/#helpers/colour-function-govuk-colour) to support legacy colours. [Example commit](https://github.com/alphagov/calendars/commit/ccd2b25873ee026858958d4732d42071bea57255) + - Check [govuk-frontend 3.0 changelog](https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0) to see if and how the breaking release affects your application. + +* Update feedback component to use govuk-frontend layout classes (PR #1010) +* Fix focus and hover states for breadcrumbs, contents-list, highlight-boxes, modal-dialogue, step-by-step-nav, previous-and-next-navigation and title component (PR #1010) * Normalise falsey values to nil for subscription links component (PR #1021) ## 17.21.0 diff --git a/app/assets/javascripts/govuk_publishing_components/all_components.js b/app/assets/javascripts/govuk_publishing_components/all_components.js index 1ebd1dbf8d..0351d88f06 100644 --- a/app/assets/javascripts/govuk_publishing_components/all_components.js +++ b/app/assets/javascripts/govuk_publishing_components/all_components.js @@ -1,6 +1,6 @@ // = require_tree ./lib // = require_tree ./components -// = require govuk-frontend/all.js +// = require govuk/all.js // Initialise all GOVUKFrontend components window.GOVUKFrontend.initAll() diff --git a/app/assets/javascripts/govuk_publishing_components/components/accordion.js b/app/assets/javascripts/govuk_publishing_components/components/accordion.js index 5af5570c5a..4bfc836ba9 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/accordion.js +++ b/app/assets/javascripts/govuk_publishing_components/components/accordion.js @@ -1,2 +1,2 @@ // This component relies on JavaScript from GOV.UK Frontend -// = require govuk-frontend/components/accordion/accordion.js +// = require govuk/components/accordion/accordion.js diff --git a/app/assets/javascripts/govuk_publishing_components/components/character-count.js b/app/assets/javascripts/govuk_publishing_components/components/character-count.js index 08a81a1987..6f7315a069 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/character-count.js +++ b/app/assets/javascripts/govuk_publishing_components/components/character-count.js @@ -1,2 +1,2 @@ // This component relies on JavaScript from GOV.UK Frontend -// = require govuk-frontend/components/character-count/character-count.js +// = require govuk/components/character-count/character-count.js diff --git a/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js b/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js index cfbb26797c..7a956d56ba 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js +++ b/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js @@ -1,5 +1,5 @@ /* eslint-env jquery */ -// = require govuk-frontend/components/checkboxes/checkboxes.js +// = require govuk/components/checkboxes/checkboxes.js window.GOVUK = window.GOVUK || {} window.GOVUK.Modules = window.GOVUK.Modules || {}; diff --git a/app/assets/javascripts/govuk_publishing_components/components/error-summary.js b/app/assets/javascripts/govuk_publishing_components/components/error-summary.js index 238daf9a9b..e59cbc91bc 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/error-summary.js +++ b/app/assets/javascripts/govuk_publishing_components/components/error-summary.js @@ -1,2 +1,2 @@ // This component relies on JavaScript from GOV.UK Frontend -// = require govuk-frontend/components/error-summary/error-summary.js +// = require govuk/components/error-summary/error-summary.js diff --git a/app/assets/javascripts/govuk_publishing_components/components/radio.js b/app/assets/javascripts/govuk_publishing_components/components/radio.js index 88f0eab62d..960cef74ce 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/radio.js +++ b/app/assets/javascripts/govuk_publishing_components/components/radio.js @@ -1,2 +1,2 @@ // This component relies on JavaScript from GOV.UK Frontend -// = require govuk-frontend/components/radios/radios.js +// = require govuk/components/radios/radios.js diff --git a/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js b/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js index b4e14246bb..dcf130cffe 100644 --- a/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +++ b/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js @@ -4,7 +4,7 @@ 'use strict' if (document.querySelectorAll && document.addEventListener) { - var els = document.querySelectorAll('a.js-header-toggle') + var els = document.querySelectorAll('.js-header-toggle') var i var _i for (i = 0, _i = els.length; i < _i; i++) { diff --git a/app/assets/stylesheets/component_guide/application.scss b/app/assets/stylesheets/component_guide/application.scss index 790c5f4e30..e81b27f5d8 100644 --- a/app/assets/stylesheets/component_guide/application.scss +++ b/app/assets/stylesheets/component_guide/application.scss @@ -2,12 +2,10 @@ @import "govuk_publishing_components/components/helpers/govuk-frontend-settings"; @import "govuk_publishing_components/components/helpers/markdown-typography"; -@import "govuk-frontend/settings/all"; -@import "govuk-frontend/tools/all"; -@import "govuk-frontend/helpers/all"; -@import "govuk-frontend/core/all"; - -@include _govuk-font-face-nta; +@import "govuk/settings/all"; +@import "govuk/tools/all"; +@import "govuk/helpers/all"; +@import "govuk/core/all"; .component-guide-wrapper { padding-bottom: $govuk-gutter * 1.5; @@ -286,7 +284,7 @@ html { // Rouge syntax highlighting // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss -$code-00: scale-color(govuk-colour("grey-4"), $lightness: 50%); // Default Background +$code-00: scale-color(govuk-colour("light-grey", $legacy: "grey-4"), $lightness: 50%); // Default Background $code-01: #f5f5f5; // Lighter Background (Unused) $code-02: #bfc1c3; // Selection Background $code-03: darken($govuk-secondary-text-colour, 2%); // Comments, Invisibles, Line Highlighting diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss index 0e258e4f60..d88feeaaf1 100644 --- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss @@ -6,7 +6,7 @@ @import "components/helpers/govuk-frontend-settings"; // Include common imports used by many components -@import "govuk-frontend/all"; +@import "govuk/all"; // `govuk_frontend_toolkit` @import "measurements"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss b/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss index d856ed27a9..d11ebeece4 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/accordion/accordion"; +@import "govuk/components/accordion/accordion"; .govuk-accordion--condensed { .govuk-accordion__section-button { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss index 2d9ad409a9..957b12dd8e 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss @@ -5,7 +5,7 @@ $thumbnail-background: govuk-colour("white"); $thumbnail-border-colour: rgba(11, 12, 12, .1); $thumbnail-shadow-colour: rgba(11, 12, 12, .4); $thumbnail-shadow-width: 0 2px 2px; -$thumbnail-icon-border-colour: govuk-colour("grey-3"); +$thumbnail-icon-border-colour: govuk-colour("mid-grey", $legacy: "grey-3"); .gem-c-attachment { @include govuk-font(19); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss index bf4a14365e..02fc7b99da 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss @@ -1 +1 @@ -@import "govuk-frontend/components/back-link/back-link"; +@import "govuk/components/back-link/back-link"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss b/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss index fae0095e14..5b2b322a6e 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/breadcrumbs/breadcrumbs"; +@import "govuk/components/breadcrumbs/breadcrumbs"; .gem-c-breadcrumbs--inverse .govuk-breadcrumbs__list-item .govuk-breadcrumbs__link { &:link, @@ -7,6 +7,10 @@ &:active { color: govuk-colour("white"); } + + &:focus { + color: $govuk-focus-text-colour; + } } .gem-c-breadcrumbs--inverse .govuk-breadcrumbs__list-item { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/_button.scss index 1e980ad293..99a506f02a 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_button.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_button.scss @@ -1,11 +1,11 @@ -@import "govuk-frontend/components/button/button"; +@import "govuk/components/button/button"; $gem-secondary-button-colour: #00823b; $gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%); $gem-secondary-button-background-colour: govuk-colour("white"); -$gem-secondary-button-hover-background-colour: govuk-colour("grey-4"); +$gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4"); -$gem-quiet-button-colour: govuk-colour("grey-1"); +$gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1"); $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%); // Because govuk-frontend adds a responsive bottom margin by default for each component @@ -107,15 +107,3 @@ $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%); content: none; } } - -// Begin adjustments for font baseline offset -// These should be removed when the font is updated with the correct baseline -// For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428 - -$offset: 2; - -.gem-c-button--secondary, -.gem-c-button--secondary-quiet { - padding-top: (govuk-spacing(2) - $govuk-border-width-form-element + $offset); // s1 - padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - $offset + 1); // s1 -} diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss b/app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss index 531bc4551c..a01f8d3ccf 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss @@ -1 +1 @@ -@import "govuk-frontend/components/character-count/character-count"; +@import "govuk/components/character-count/character-count"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss b/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss index aabced4432..86993bfb4d 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss @@ -1,11 +1,11 @@ -@import "govuk-frontend/components/checkboxes/checkboxes"; +@import "govuk/components/checkboxes/checkboxes"; .govuk-checkboxes--nested { margin-left: -(govuk-spacing(4) + 2px); //22px box-sizing: border-box; border-left-style: solid; border-left-width: 4px; - border-color: govuk-colour("grey-2"); + border-color: govuk-colour("mid-grey", $legacy: "grey-2"); margin-top: govuk-spacing(2); margin-bottom: govuk-spacing(2); padding: govuk-spacing(2) govuk-spacing(4); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss index 5bb53e3b03..bd1e4b7952 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss @@ -35,7 +35,6 @@ text-decoration: none; &:hover, - &:focus, &:active { text-decoration: underline; } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss b/app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss index 68249f2c38..a1dead0849 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/date-input/date-input"; +@import "govuk/components/date-input/date-input"; // Add spacing between input items on narrow containers when they collapse under each other .govuk-date-input { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_details.scss b/app/assets/stylesheets/govuk_publishing_components/components/_details.scss index caddf4f03d..3a5c4b4f23 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_details.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_details.scss @@ -1 +1 @@ -@import "govuk-frontend/components/details/details"; +@import "govuk/components/details/details"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss index d0df6b1a53..617182dd6c 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss @@ -40,7 +40,7 @@ } .gem-c-document-list__item-context { - color: govuk-colour("grey-1"); + color: govuk-colour("dark-grey", $legacy: "grey-1"); } .gem-c-document-list__item-description { @@ -88,7 +88,7 @@ } .gem-c-document-list__item--highlight { - border: 1px solid govuk-colour("grey-2"); + border: 1px solid govuk-colour("mid-grey", $legacy: "grey-2"); padding: govuk-spacing(6); margin-bottom: govuk-spacing(6); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss b/app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss index a27d67d696..5988838340 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss @@ -1 +1 @@ -@import "govuk-frontend/components/error-message/error-message"; +@import "govuk/components/error-message/error-message"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss b/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss index 5a0f81d0cb..68b9d9c6de 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/error-summary/error-summary"; +@import "govuk/components/error-summary/error-summary"; .gem-c-error-summary__list-item { @include govuk-font($size: 19, $weight: bold); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss b/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss index 9a229b2871..96e41b61a4 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss @@ -33,12 +33,6 @@ } } -@include govuk-grid-row($class: "gem-c-feedback__grid-row"); - -.gem-c-feedback__column-two-thirds { - @include govuk-grid-column(two-thirds, $class: false) -} - .gem-c-feedback__prompt { @include govuk-clearfix; background-color: govuk-colour("blue"); @@ -103,7 +97,7 @@ .gem-c-feedback__error-summary { margin-bottom: govuk-spacing(3); padding: govuk-spacing(3); - border: solid $govuk-border-width-mobile $govuk-error-colour; + border: solid $govuk-border-width-narrow $govuk-error-colour; clear: both; &:focus { @@ -140,12 +134,6 @@ color: $govuk-error-colour; } -.gem-c-feedback__survey-container { - @include govuk-media-query($until: tablet) { - padding: govuk-spacing(4); - } -} - .gem-c-feedback__form { margin: govuk-spacing(3) govuk-spacing(2) 0 govuk-spacing(2); padding: govuk-spacing(3) 0; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss b/app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss index 6e44d6cedd..0fb0708d40 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss @@ -1 +1 @@ -@import "govuk-frontend/components/fieldset/fieldset"; +@import "govuk/components/fieldset/fieldset"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss b/app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss index 34f97e4773..19958142df 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss @@ -1 +1 @@ -@import "govuk-frontend/components/file-upload/file-upload"; +@import "govuk/components/file-upload/file-upload"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss b/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss index b93887192b..b01b3cb846 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss @@ -75,7 +75,7 @@ // and make all of thead and tfoot stand out thead, tfoot { - background-color: govuk-colour("grey-3"); + background-color: govuk-colour("light-grey", $legacy: "grey-3"); } thead th, @@ -120,7 +120,7 @@ // total and subtotal rows tr.subtotal > *, tr.total > * { - border-top: 3px solid govuk-colour("grey-2"); + border-top: 3px solid govuk-colour("mid-grey", $legacy: "grey-2"); } tr.total > *, @@ -131,7 +131,7 @@ // the total is usually in the tfoot, so already has that background colour // but when it's used inside the tbody, it should also be highlighted tr.total { - background-color: govuk-colour("grey-3"); + background-color: govuk-colour("light-grey", $legacy: "grey-3"); } } // sass-lint:enable no-qualifying-elements diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss b/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss index 057cf52876..7dc98be6b0 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss @@ -37,10 +37,10 @@ .gem-c-highlight-boxes__item { box-sizing: border-box; - border: 1px solid govuk-colour("grey-2"); + border: 1px solid govuk-colour("mid-grey", $legacy: "grey-2"); padding: govuk-spacing(3) * 1.5; height: 100%; - box-shadow: 7px 7px 0 govuk-colour("white"), 8px 8px 0 govuk-colour("grey-2"); + box-shadow: 7px 7px 0 govuk-colour("white"), 8px 8px 0 govuk-colour("mid-grey", $legacy: "grey-2"); } .gem-c-highlight-boxes--inverse { @@ -66,7 +66,7 @@ &:active, &:focus { - color: $govuk-link-colour; + color: $govuk-focus-text-colour; } } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_hint.scss b/app/assets/stylesheets/govuk_publishing_components/components/_hint.scss index 84c26f503f..97b2dad377 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_hint.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_hint.scss @@ -1 +1 @@ -@import "govuk-frontend/components/hint/hint"; +@import "govuk/components/hint/hint"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss b/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss index a1082388c4..975096bfee 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss @@ -7,8 +7,8 @@ } .gem-c-image-card__image-wrapper { - @include govuk-grid-column(one-third, $class: false, $at: mobile); - @include govuk-grid-column(full, $class: false, $at: tablet); + @include govuk-grid-column($width: one-third, $at: mobile); + @include govuk-grid-column($width: full, $at: tablet); margin: 0; @@ -29,8 +29,8 @@ } .gem-c-image-card__text-wrapper { - @include govuk-grid-column(two-thirds, $class: false, $at: mobile); - @include govuk-grid-column(full, $class: false, $at: tablet); + @include govuk-grid-column($width: two-thirds, $at: mobile); + @include govuk-grid-column($width: full, $at: tablet); } .gem-c-image-card__title { @@ -46,6 +46,10 @@ text-decoration: underline; } + &:focus { + text-decoration: none; + } + // the after element extends the link to cover the image, removing the // need for a duplicate link. Other elements apart from the image are given // position relative and a higher z-index to put them above the after element @@ -73,7 +77,7 @@ .gem-c-image-card__metadata { @include govuk-font(14); margin: 0 0 (govuk-spacing(3) / 2); - color: govuk-colour("grey-1"); + color: govuk-colour("dark-grey", $legacy: "grey-1"); @include govuk-media-query($from: tablet) { margin-bottom: 0; @@ -119,7 +123,7 @@ .gem-c-image-card--large { .gem-c-image-card__image-wrapper { - @include govuk-grid-column(two-thirds, $class: false, $at: tablet); + @include govuk-grid-column($width: two-thirds, $at: tablet); margin-bottom: govuk-spacing(2); float: none; @@ -134,7 +138,7 @@ } .gem-c-image-card__text-wrapper { - @include govuk-grid-column(one-third, $class: false, $at: tablet); + @include govuk-grid-column($width: one-third, $at: tablet); padding: 0; overflow: hidden; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss index 7e932b543c..9bbef3122b 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/input/input"; +@import "govuk/components/input/input"; .gem-c-input--search-icon { background: govuk-colour("white") url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") no-repeat -5px -3px; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss b/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss index 57f05b355f..000d817447 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss @@ -1 +1 @@ -@import "govuk-frontend/components/inset-text/inset-text"; +@import "govuk/components/inset-text/inset-text"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_label.scss b/app/assets/stylesheets/govuk_publishing_components/components/_label.scss index 1003734a0e..c3094139f0 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_label.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_label.scss @@ -1 +1 @@ -@import "govuk-frontend/components/label/label"; +@import "govuk/components/label/label"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss index 747f5ed85f..b2fabd583b 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss @@ -1 +1 @@ -@import "govuk-frontend/components/footer/footer"; +@import "govuk/components/footer/footer"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-admin.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-admin.scss index d49d82607e..af753c5ab5 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-admin.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-admin.scss @@ -1 +1 @@ -// uses govuk-frontend/all +// uses govuk/all diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss index 28afd63ce3..3f700f169c 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss @@ -1,8 +1,8 @@ -@import "govuk-frontend/components/header/header"; -@import "govuk-frontend/components/tag/tag"; +@import "govuk/components/header/header"; +@import "govuk/components/tag/tag"; .gem-c-layout-header--production .govuk-header__container { - border-bottom-color: govuk-colour("bright-red"); + border-bottom-color: govuk-colour("red", $legacy: "bright-red"); } .gem-c-layout-header--integration .govuk-header__container, @@ -15,7 +15,7 @@ } .gem-c-layout-header--development .govuk-header__container { - border-bottom-color: govuk-colour("grey-1"); + border-bottom-color: govuk-colour("dark-grey", $legacy: "grey-1"); } .govuk-header__logo { @@ -38,7 +38,7 @@ } .gem-c-environment-tag--production { - background-color: govuk-colour("bright-red"); + background-color: govuk-colour("red", $legacy: "bright-red"); } .gem-c-environment-tag--example { @@ -46,7 +46,7 @@ } .gem-c-environment-tag--development { - background-color: govuk-colour("grey-1"); + background-color: govuk-colour("dark-grey", $legacy: "grey-1"); } .gem-c-environment-tag--staging, diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss b/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss index 0531eedfa8..f46eb8ba4b 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss @@ -31,9 +31,12 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov overflow-y: auto; border: 0; + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + } + @include govuk-font($size: 19); @include govuk-text-colour; - @include govuk-focusable; @include govuk-media-query($from: tablet) { position: relative; top: inherit; @@ -94,7 +97,7 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov } .gem-c-modal-dialogue__header { - padding: 8px govuk-spacing(3) 10px; + padding: 9px govuk-spacing(3) 10px; color: govuk-colour("white"); background: govuk-colour("black"); } @@ -127,7 +130,6 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov background: none; cursor: pointer; - @include govuk-focusable-fill; @include govuk-font($size: 36, $weight: bold, $line-height: 1.3); @include govuk-media-query($until: tablet) { font-size: 36px; @@ -136,7 +138,10 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov &:focus, &:hover { + @include govuk-focused-text; + outline: none; + box-shadow: none; color: govuk-colour("black"); background: $govuk-focus-colour; } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_panel.scss b/app/assets/stylesheets/govuk_publishing_components/components/_panel.scss index 56a8c8d509..c8302d8da0 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_panel.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_panel.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/panel/panel"; +@import "govuk/components/panel/panel"; .gem-c-panel__prepend { @include govuk-font($size: 24, $weight: bold); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss index 2323cd7884..2e461693a9 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/phase-banner/phase-banner"; +@import "govuk/components/phase-banner/phase-banner"; .gem-c-phase-banner { .govuk-phase-banner__content__app-name { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss index d22cd50d25..90aa096ffd 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss @@ -21,14 +21,17 @@ &:hover, &:active, - &:visited, - &:focus { + &:visited { color: $govuk-link-colour; } &:hover, &:active { - background-color: govuk-colour("grey-4"); + background-color: govuk-colour("light-grey", $legacy: "grey-4"); + } + + &:focus { + @include govuk-focused-text; } } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_radio.scss b/app/assets/stylesheets/govuk_publishing_components/components/_radio.scss index 13d60ad50d..91aaa27f68 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_radio.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_radio.scss @@ -1 +1 @@ -@import "govuk-frontend/components/radios/radios"; +@import "govuk/components/radios/radios"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss index 0bc0a17c66..afff453f54 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss @@ -11,7 +11,7 @@ .gem-c-related-navigation__sub-heading { @include govuk-font(16); - border-top: 1px solid govuk-colour("grey-2"); + border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2"); margin: 0; padding-top: govuk-spacing(3); } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_search.scss b/app/assets/stylesheets/govuk_publishing_components/components/_search.scss index 6fd5e82d38..fb97ea2bff 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_search.scss @@ -17,7 +17,6 @@ $large-input-size: 50px; .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside @include govuk-font($size: 19, $line-height: (28 / 19)); - @include govuk-focusable; padding: 6px; margin: .5em 0; @@ -30,14 +29,22 @@ $large-input-size: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: inherit; + } } .gem-c-search__submit { - @include govuk-focusable; padding: 6px; border: 0; cursor: pointer; border-radius: 0; + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + } } .js-enabled { @@ -132,7 +139,7 @@ $large-input-size: 50px; } .gem-c-search__input[type="search"] { - border: solid 1px govuk-colour("grey-2"); + border: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); } .gem-c-search__submit { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_select.scss b/app/assets/stylesheets/govuk_publishing_components/components/_select.scss index df2cf07fc8..3c70195cb7 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_select.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_select.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/select/select"; +@import "govuk/components/select/select"; .gem-c-select__select--full-width { width: 100%; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss index ca5a70559d..bb5b2712bb 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss @@ -1 +1 @@ -@import "govuk-frontend/components/skip-link/skip-link"; +@import "govuk/components/skip-link/skip-link"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss index 772ebfd31e..9080971d42 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss @@ -2,9 +2,9 @@ @include govuk-text-colour; position: relative; padding: 10px; - background: govuk-colour("grey-4"); - border-top: solid 1px govuk-colour("grey-2"); - border-bottom: solid 1px govuk-colour("grey-2"); + background: govuk-colour("light-grey", $legacy: "grey-4"); + border-top: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); + border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); @include govuk-media-query($from: tablet) { padding: govuk-spacing(3); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss index 829626fa0e..a2ba1f000d 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss @@ -50,6 +50,10 @@ $top-border: solid 2px $grey-3; background: none; border: 0; margin: 0; + + &:focus { + @include govuk-focused-text; + } } // removes extra dotted outline from buttons in Firefox @@ -237,7 +241,13 @@ $top-border: solid 2px $grey-3; } .gem-c-step-nav__button { - @include govuk-focusable; + &:focus { + @include govuk-focused-text; + + .gem-c-step-nav__toggle-link { + @include govuk-focused-text; + } + } } &:hover { @@ -251,6 +261,12 @@ $top-border: solid 2px $grey-3; } } + &:focus { + .gem-c-step-nav__button { + color: $govuk-focus-text-colour; + } + } + .gem-c-step-nav--large & { @include media(tablet) { padding: $gutter 0; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss index 2a02430372..8ad4791f09 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss @@ -55,7 +55,7 @@ .gem-c-subscription-links__feed-box { padding: govuk-spacing(3); margin-bottom: govuk-spacing(3); - background: govuk-colour("grey-3"); + background: govuk-colour("light-grey", $legacy: "grey-3"); .js-enabled &.js-hidden { display: none; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_table.scss b/app/assets/stylesheets/govuk_publishing_components/components/_table.scss index 3bf6a323f9..145f3000e6 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_table.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_table.scss @@ -1,15 +1,15 @@ -@import "govuk-frontend/components/table/table"; +@import "govuk/components/table/table"; $table-border-width: 1px; -$table-border-colour: govuk-colour("grey-2"); +$table-border-colour: govuk-colour("mid-grey", $legacy: "grey-2"); $table-header-border-width: 2px; -$table-header-background-colour: govuk-colour("grey-3"); +$table-header-background-colour: govuk-colour("light-grey", $legacy: "grey-3"); $sort-link-active-colour: govuk-colour("white"); $sort-link-arrow-size: 14px; $sort-link-arrow-size-small: 8px; $sort-link-arrow-spacing: $sort-link-arrow-size / 2; $table-row-hover-background-colour: rgba(43, 140, 196, .2); -$table-row-even-background-colour: govuk-colour("grey-4"); +$table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4"); .govuk-table__cell:empty, .govuk-table__cell--empty { @@ -33,12 +33,15 @@ $table-row-even-background-colour: govuk-colour("grey-4"); .app-table__sort-link { @include govuk-link-style-no-visited-state; - @include govuk-focusable-fill; position: relative; padding-right: $sort-link-arrow-size; color: $govuk-link-colour; text-decoration: none; + &:focus { + @include govuk-focused-text; + } + &::after { content: ""; position: absolute; @@ -124,4 +127,3 @@ $table-row-even-background-colour: govuk-colour("grey-4"); border: 0; } } - diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss b/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss index cabddd3888..622741f426 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/tabs/tabs"; +@import "govuk/components/tabs/tabs"; .js-enabled { .gem-c-tabs__panel--no-border { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss b/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss index 7c7c9d99ef..1dc0f83e64 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/textarea/textarea"; +@import "govuk/components/textarea/textarea"; .gem-c-textarea .govuk-textarea { margin-bottom: 0; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_title.scss b/app/assets/stylesheets/govuk_publishing_components/components/_title.scss index dd25282555..5edbfa38bf 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_title.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_title.scss @@ -21,7 +21,7 @@ color: inherit; &:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss b/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss index 1bb2948048..70cb06cc58 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/warning-text/warning-text"; +@import "govuk/components/warning-text/warning-text"; .gem-c-warning-text__text--no-indent { padding-left: 0; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss index 9346ed4704..0c54db8527 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss @@ -24,7 +24,7 @@ $high-alert-border: #cc0000; } &.high-alert { - background-color: govuk-colour("grey-3"); + background-color: govuk-colour("light-grey", $legacy: "grey-3"); border-color: $high-alert-border; } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss index 7c090d7b38..840be2f576 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss @@ -49,7 +49,7 @@ // width above. // http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/ max-width: none; - border: $govuk-border-width solid govuk-colour("grey-3"); + border: $govuk-border-width solid govuk-colour("mid-grey", $legacy: "grey-3"); } box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss index f7d7945646..dc95041044 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss @@ -1,4 +1,4 @@ -@import "govuk-frontend/components/button/button"; +@import "govuk/components/button/button"; // scss-lint:disable PlaceholderInExtend // sass-lint:disable placeholder-in-extend diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss index c5dfdfef91..c78a477cd9 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss @@ -9,7 +9,7 @@ .gem-c-govspeak { .call-to-action { margin: 2em 0; - background-color: govuk-colour("grey-3"); + background-color: govuk-colour("light-grey", $legacy: "grey-3"); padding: 2em; &:first-child { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss index 4ffbadae63..029f575181 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss @@ -26,7 +26,7 @@ $chart-border: govuk-colour("white"); // Chart border colour $key-border: govuk-colour("white"); // Key border colour - $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-red"); + $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-purple", $legacy: "bright-red"); $bar-cell-colour: #ebebeb; $bar-outdented-colour: #111111; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss index 49a0f2184d..20373e8e39 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss @@ -9,7 +9,7 @@ // .address is used by the `$A` markdown pattern .address, .contact { - border-left: 1px solid govuk-colour("grey-2"); + border-left: 1px solid govuk-colour("mid-grey", $legacy: "grey-2"); padding-left: govuk-spacing(3); margin-bottom: govuk-spacing(6); margin-top: govuk-spacing(6); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss index 99de99fdc7..e717b35664 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss @@ -7,7 +7,7 @@ .gem-c-govspeak { .example { - border-left: 1em solid govuk-colour("grey-3"); + border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3"); padding: 1em 0 1em 1em; margin: 2em 0; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss index 05ac1770de..a84c9520dc 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss @@ -11,7 +11,7 @@ .gem-c-govspeak { .footnotes { - border-top: 1px solid govuk-colour("grey-2"); + border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2"); margin-top: govuk-spacing(6); padding-top: govuk-spacing(2); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss index 0270a57e1b..9f8bcc74c2 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss @@ -1,5 +1,5 @@ -$highlight-answer-bg-color: #28a197; -$highlight-answer-color: #ffffff; +$highlight-answer-bg-color: govuk-colour("green"); +$highlight-answer-color: govuk-colour("white"); .gem-c-govspeak .highlight-answer { background-color: $highlight-answer-bg-color; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss index bdb031658e..9b972ad699 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss @@ -8,7 +8,7 @@ .gem-c-govspeak { .info-notice { - border-left: 1em solid govuk-colour("grey-3"); + border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3"); padding: 1em 0 1em 1em; margin: 2em 0; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss index 007b622f63..d7884653a4 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss @@ -1,6 +1,6 @@ .gem-c-govspeak .place { margin: 1.5em 0; - border-bottom: solid 1px govuk-colour("grey-2"); + border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); padding-bottom: 1.5em; .address { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss index 2e2384a0e5..91c6bcc181 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss @@ -22,7 +22,7 @@ td { vertical-align: top; padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0; - border-bottom: solid 1px govuk-colour("grey-2"); + border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); } th { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss index 5480dbdfdd..e2092dbb19 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss @@ -1,5 +1,5 @@ -@import "govuk-frontend/settings/colours-organisations"; -@import "govuk-frontend/helpers/colour"; +@import "govuk/settings/colours-organisations"; +@import "govuk/helpers/colour"; @mixin organisation-brand-colour { @each $organisation in map-keys($govuk-colours-organisations) { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss index f56aa96812..99fee637f9 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss @@ -1,6 +1,2 @@ $govuk-image-url-function: "image-url"; $govuk-font-url-function: "font-url"; -$govuk-compatibility-govukfrontendtoolkit: true; -$govuk-compatibility-govuktemplate: true; -$govuk-compatibility-govukelements: true; -$govuk-typography-use-rem: false; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss index 038ba46cbc..b3adbc78e4 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss @@ -76,7 +76,10 @@ a { @include govuk-link-style-default; - @include govuk-focusable-fill; + + &:focus { + @include govuk-focused-text; + } } // Lists diff --git a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss index 69b1c50e1c..98744cccc5 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss @@ -11,7 +11,7 @@ $gem-spacing-scale-7: 50px; $gem-spacing-scale-8: 60px; $gem-text-colour: $text-colour; -$gem-secondary-text-colour: $grey-1; +$gem-secondary-text-colour: $govuk-secondary-text-colour; // Border widths $gem-border-width-mobile: 4px; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss b/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss index aaa0579318..fa1f8f7182 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss @@ -8,7 +8,7 @@ .call-to-action { margin: govuk-spacing(3) 0; padding: 0 govuk-spacing(3); - border: 1pt solid govuk-colour("grey-2"); + border: 1pt solid $govuk-border-colour; } .help-notice p { diff --git a/app/views/govuk_publishing_components/components/_accordion.html.erb b/app/views/govuk_publishing_components/components/_accordion.html.erb index 8dc551d2a4..0fec29fed9 100644 --- a/app/views/govuk_publishing_components/components/_accordion.html.erb +++ b/app/views/govuk_publishing_components/components/_accordion.html.erb @@ -8,7 +8,7 @@ accordion_classes << 'govuk-accordion--condensed' if condensed data_attributes ||= {} - data_attributes[:module] = 'accordion' + data_attributes[:module] = 'govuk-accordion' %> <% if items.any? %> <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %> diff --git a/app/views/govuk_publishing_components/components/_button.html.erb b/app/views/govuk_publishing_components/components/_button.html.erb index 8dd93c7145..e27a753694 100644 --- a/app/views/govuk_publishing_components/components/_button.html.erb +++ b/app/views/govuk_publishing_components/components/_button.html.erb @@ -1,9 +1,23 @@ <% button = GovukPublishingComponents::Presenters::ButtonHelper.new(local_assigns) %> +<% start_icon = capture do %> + + + +<% end %> + +<% + if button.start + button_text = button.text + start_icon + else + button_text = button.text + end +%> + <% if button.link? %> - <%= link_to button.text, button.href, button.html_options %> + <%= link_to button_text, button.href, button.html_options %> <% else %> - <%= content_tag :button, button.text, button.html_options %> + <%= content_tag :button, button_text, button.html_options %> <% end %> <% if button.info_text %> diff --git a/app/views/govuk_publishing_components/components/_character_count.html.erb b/app/views/govuk_publishing_components/components/_character_count.html.erb index 346323de0b..65b9e97426 100644 --- a/app/views/govuk_publishing_components/components/_character_count.html.erb +++ b/app/views/govuk_publishing_components/components/_character_count.html.erb @@ -9,7 +9,7 @@ <%= content_tag :div, class: "gem-c-character-count govuk-character-count", data: { - module: "character-count", + module: "govuk-character-count", maxlength: maxlength, maxwords: maxwords, threshold: threshold diff --git a/app/views/govuk_publishing_components/components/_checkboxes.html.erb b/app/views/govuk_publishing_components/components/_checkboxes.html.erb index fa2490fdf8..11b54d3ba9 100644 --- a/app/views/govuk_publishing_components/components/_checkboxes.html.erb +++ b/app/views/govuk_publishing_components/components/_checkboxes.html.erb @@ -4,7 +4,7 @@ id = cb_helper.id %> -<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "checkboxes" } do %> +<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "govuk-checkboxes" } do %> <% if cb_helper.should_have_fieldset %> <% if cb_helper.heading_markup %> <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %> diff --git a/app/views/govuk_publishing_components/components/_details.html.erb b/app/views/govuk_publishing_components/components/_details.html.erb index 44e5340c49..0c5081ed5f 100644 --- a/app/views/govuk_publishing_components/components/_details.html.erb +++ b/app/views/govuk_publishing_components/components/_details.html.erb @@ -1,11 +1,13 @@ <% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) - data_attributes ||= nil open ||= nil margin_bottom ||= 3 css_classes = %w(gem-c-details govuk-details) css_classes << (shared_helper.get_margin_bottom) + + data_attributes ||= {} + data_attributes[:module] = 'govuk-details' %> <%= tag.details class: css_classes, data: data_attributes, open: open do %> diff --git a/app/views/govuk_publishing_components/components/_error_summary.html.erb b/app/views/govuk_publishing_components/components/_error_summary.html.erb index 88a778fca2..1de1c2f229 100644 --- a/app/views/govuk_publishing_components/components/_error_summary.html.erb +++ b/app/views/govuk_publishing_components/components/_error_summary.html.erb @@ -11,7 +11,7 @@ %> <%= tag.div( class: "gem-c-error-summary govuk-error-summary", - data: { module: "error-summary" }.merge(data_attributes), + data: { module: "govuk-error-summary" }.merge(data_attributes), aria: { labelledby: title_id }, role: "alert", tabindex: -1, diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb index e5c964cded..0f86abdc42 100644 --- a/app/views/govuk_publishing_components/components/_layout_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_header.html.erb @@ -8,7 +8,7 @@ width_class = "govuk-width-container" end %> -