govuk_publishing_components 17.21.0 → 18.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1032f24e05536ec9cc1ad6c774d9f5b6dd9dd05c86bcd9c3650a5adacb76e35
-  data.tar.gz: f5b6085f2fdd900a3f1fd6f917844f6939b72d51037ab9686abc0ddfaf6c2037
+  metadata.gz: f02b44da1a4f14f9d2133f677aba1df6122184b507ce2a83b7f6a3ed430bf30b
+  data.tar.gz: 24a48d3eefb911ee63919a3dbf9bd281e3f342cb1b1cca71201bb6a68a213065
 SHA512:
-  metadata.gz: e970106156e026f49a5b2fb6bd2ec36782f2a6dd0574e811b0976a91fd381c621daba3f9a2d8a14556236e9cb7b63d7122dae2cd814f5872be353eac43fd4d73
-  data.tar.gz: 646defcf886271c5b2b33d6103f350a90453bebb43c2f50bb5be60fde35806a9ff1efe404fd2f864ee108a1e498ad6d424a40ad2654c7074f5d54addc27222ba
+  metadata.gz: '08a7f2462658b4318e4583614beab7d3789232c76b65860d75b3aa4e128a337ae287beabf7b195eec847f88dacaffd948cd1e8e48f5c78b32560c78e6789bec4'
+  data.tar.gz: f6444b00998255250cbfa341a2db812fd38fb522c5e2b289a2429b4a56a9b71d9ad9d277fafd1b8251deb18d442af03c67b43cddef4bd3ac494544769ea74c8e

data/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()

data/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

data/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

data/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 || {};
 

data/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

data/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

data/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++) {

data/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

data/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";
@@ -23,7 +23,6 @@
 @import "components/mixins/css3";
 
 // components
-@import "components/accessible-autocomplete";
 @import "components/accordion";
 @import "components/attachment";
 @import "components/attachment-link";

data/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 {

data/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);

data/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";

data/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 {

data/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
-}

data/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";

data/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);

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -10,12 +10,27 @@
   box-shadow: 0 20px 15px -10px govuk-colour("white");
 }
 
+.gem-c-contents-list--inverse {
+  background: transparent;
+  box-shadow: none;
+}
+
 .gem-c-contents-list__title {
   @include govuk-text-colour;
   @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
   margin: 0;
 }
 
+.gem-c-contents-list--inverse .gem-c-contents-list__title,
+.gem-c-contents-list--inverse .gem-c-contents-list__link:link,
+.gem-c-contents-list--inverse .gem-c-contents-list__link:visited {
+  color: govuk-colour("white");
+}
+
+.gem-c-contents-list--inverse .gem-c-contents-list__link:focus {
+  color: $govuk-focus-text-colour;
+}
+
 .gem-c-contents-list__list,
 .gem-c-contents-list__nested-list {
   @include govuk-text-colour;
@@ -35,7 +50,6 @@
     text-decoration: none;
 
     &:hover,
-    &:focus,
     &:active {
       text-decoration: underline;
     }
@@ -60,22 +74,27 @@
 
 .gem-c-contents-list__list-item--dashed {
   $contents-spacing: govuk-spacing(5);
-  margin-left: $contents-spacing;
+  position: relative;
+  padding-left: $contents-spacing;
   padding-right: $contents-spacing;
 
   &:before {
-    content: "— ";
-    margin-left: -$contents-spacing;
-    padding-right: 5px;
+    content: "—";
+    position: absolute;
+    left: 0;
+    width: govuk-spacing(4);
+    overflow: hidden;
 
     .direction-rtl & {
-      margin-left: 0;
-      margin-right: -$contents-spacing;
-      padding-right: 0;
-      padding-left: 5px;
+      left: auto;
+      right: 0;
     }
   }
 
+  .gem-c-contents-list--inverse &:before {
+    color: govuk-colour("white");
+  }
+
   // Focus styles on IE8 and older include the
   // left margin, creating an odd white box with
   // orange border around the em dash.

data/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 {

data/app/assets/stylesheets/govuk_publishing_components/components/_details.scss

@@ -1 +1 @@
-@import "govuk-frontend/components/details/details";
+@import "govuk/components/details/details";

data/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);
 

data/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";

data/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);

data/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;

data/app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss

@@ -1 +1 @@
-@import "govuk-frontend/components/fieldset/fieldset";
+@import "govuk/components/fieldset/fieldset";

data/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";

data/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

data/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;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_hint.scss

@@ -1 +1 @@
-@import "govuk-frontend/components/hint/hint";
+@import "govuk/components/hint/hint";

data/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;
@@ -150,6 +154,13 @@
     padding-bottom: govuk-spacing(2);
   }
 
+  .gem-c-image-card__title-link {
+    &:after {
+      left: 0;
+      right: 0;
+    }
+  }
+
   .gem-c-image-card__description {
     @include govuk-font(19);
   }