govuk_publishing_components 11.2.0 → 12.0.0

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

@@ -1,3 +1,9 @@
 @import "helpers/govuk-frontend-settings";
 @import "govuk-frontend/components/radios/radios";
 @import "govuk-frontend/objects/form-group";
+
+// This is here as it seems to have been missed from govuk-frontend
+// @FIXME if a colour has been added to govuk-radios__divider remove this
+.gem-c-radios__divider {
+  @include govuk-text-colour;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss

@@ -1,4 +1,5 @@
 .gem-c-related-navigation {
+  @include govuk-text-colour;
   border-top: 2px solid $govuk-blue;
 }
 
@@ -11,6 +12,7 @@
 .gem-c-related-navigation__sub-heading {
   @include core-16;
   border-top: 1px solid $border-colour;
+  margin: 0;
   padding-top: $gutter-half;
 }
 
@@ -21,6 +23,8 @@
 
 .gem-c-related-navigation__sub-heading--other {
   @include bold-19;
+  border-top: 0;
+  padding-top: 0;
 }
 
 .gem-c-related-navigation__nav-section {
@@ -30,6 +34,7 @@
 .gem-c-related-navigation__link {
   list-style-type: none;
   margin-top: $gutter-half;
+  @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
 
   @include media(tablet) {
     margin-top: 5px;
@@ -37,6 +42,8 @@
 }
 
 .gem-c-related-navigation__toggle {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
   display: none;
 
   .js-enabled & {
@@ -45,11 +52,12 @@
 }
 
 .gem-c-related-navigation__section-link {
-  @include bold-16;
+  @extend %govuk-link;
+  font-weight: bold;
 }
 
 .gem-c-related-navigation__section-link--other {
-  @include core-16;
+  font-weight: normal;
 }
 
 // reset the default browser styles
@@ -59,3 +67,9 @@
   list-style: none;
   margin-bottom: 1.25em;
 }
+
+.gem-c-related-navigation__toggle-more.js-hidden {
+  .js-enabled & {
+    display: none;
+  }
+}

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

@@ -8,12 +8,18 @@ $large-input-size: 50px;
 
 .gem-c-search__label {
   display: block;
+
+  h1 {
+    @include core-19($line-height: $input-size, $line-height-640: $input-size);
+    margin: 0;
+  }
 }
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include box-sizing(border-box);
   @include core-19($line-height: (28 / 19), $line-height-640: (28 / 16));
   @include appearance(none);
+  @include govuk-focusable;
 
   padding: 6px;
   margin: 0.5em 0;
@@ -25,6 +31,7 @@ $large-input-size: 50px;
 }
 
 .gem-c-search__submit {
+  @include govuk-focusable;
   padding: 6px;
   border: 0;
   cursor: pointer;

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -3,6 +3,8 @@ $share-button-height: 32px;
 
 .gem-c-share-links__list {
   list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .gem-c-share-links__list-item {
@@ -10,19 +12,23 @@ $share-button-height: 32px;
   position: relative;
   display: inline-block;
   min-height: $share-button-height;
-  padding-top: $share-button-height / 8;
   padding-left: ($share-button-width + $gutter-one-third);
   margin-bottom: $gutter-one-third;
+  font-size: $share-button-height / 2;
+  line-height: $share-button-height;
 }
 
 .gem-c-share-links__link {
+  @extend %govuk-link;
   @include bold-16;
   margin-right: $gutter;
   text-decoration: none;
 }
 
 .gem-c-share-links__title {
-  margin-bottom: $gutter-one-third;
+  @include govuk-text-colour;
+  @include govuk-font($size: 16, $line-height: 1.5);
+  margin: 0 0 $gutter-one-third 0;
 }
 
 .gem-c-share-links__link-icon {

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss

@@ -1,4 +1,5 @@
 .gem-c-step-nav-header {
+  @include govuk-text-colour;
   position: relative;
   padding: 10px;
   background: $grey-4;
@@ -20,6 +21,7 @@
 }
 
 .gem-c-step-nav-header__title {
+  @extend %govuk-link;
   @include bold-24;
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss

@@ -1,4 +1,5 @@
 .gem-c-step-nav-related {
+  @include govuk-text-colour;
   border-top: 2px solid $govuk-blue;
   margin-bottom: $gutter;
 }
@@ -48,3 +49,7 @@
     margin-top: 5px;
   }
 }
+
+.gem-c-step-nav-related__link {
+  @extend %govuk-link;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -37,6 +37,10 @@ $top-border: solid 2px $grey-3;
       margin-bottom: $gutter * 2;
     }
   }
+
+  .js-enabled &.js-hidden {
+    display: none;
+  }
 }
 
 .gem-c-step-nav__controls {
@@ -224,6 +228,11 @@ $top-border: solid 2px $grey-3;
               -#{$shadow-offset} 0 0 $shadow-colour;
 }
 
+.gem-c-step-nav__circle-step-label,
+.gem-c-step-nav__circle-step-colon {
+  @include govuk-visually-hidden;
+}
+
 .gem-c-step-nav__header {
   padding: $gutter-half 0;
   border-top: $top-border;
@@ -232,6 +241,10 @@ $top-border: solid 2px $grey-3;
     cursor: pointer;
   }
 
+  .gem-c-step-nav__button {
+    @include govuk-focusable;
+  }
+
   &:hover {
     .gem-c-step-nav__button,
     .gem-c-step-nav__circle {
@@ -251,6 +264,7 @@ $top-border: solid 2px $grey-3;
 }
 
 .gem-c-step-nav__title {
+  @include govuk-text-colour;
   @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
   margin: 0;
 
@@ -272,11 +286,16 @@ $top-border: solid 2px $grey-3;
 }
 
 .gem-c-step-nav__panel {
+  @include govuk-text-colour;
   @include _core-font-generator(16px, 16px, 16px);
 
   .gem-c-step-nav--large & {
     @include _core-font-generator(19px, 16px, 19px);
   }
+
+  .js-enabled &.js-hidden {
+    display: none;
+  }
 }
 
 // contents of the steps, such as paragraphs and links
@@ -306,6 +325,7 @@ $top-border: solid 2px $grey-3;
 .gem-c-step-nav__list {
   padding: 0;
   padding-bottom: 10px;
+  list-style: none;
 
   .gem-c-step-nav--large & {
     @include media(tablet) {
@@ -337,6 +357,15 @@ $top-border: solid 2px $grey-3;
   margin-bottom: 10px;
 }
 
+.gem-c-step-nav__link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+}
+
+.gem-c-step-nav__link-active-context {
+  @include govuk-visually-hidden;
+}
+
 .gem-c-step-nav__list-item--active {
   position: relative;
 
@@ -366,14 +395,8 @@ $top-border: solid 2px $grey-3;
   }
 
   .gem-c-step-nav__link {
-    color: $black;
+    @include govuk-link-style-text;
     text-decoration: none;
-
-    &:visited,
-    &:active,
-    &:link {
-      color: $black;
-    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -1,10 +1,15 @@
 .gem-c-subscription-links {
+  @include govuk-text-colour;
   @include bold-19;
 
+  .gem-c-subscription-links__hidden-header {
+    @include govuk-visually-hidden;
+  }
+
   .gem-c-subscription-links__list {
     list-style: none;
-    margin-left: -$gutter-half / 2;
-    margin-right: -$gutter-half / 2;
+    margin: 0 (-$gutter-half / 2);
+    padding: 0;
   }
 
   .gem-c-subscription-links__list-item {
@@ -15,6 +20,7 @@
   }
 
   .gem-c-subscription-links__link {
+    @extend %govuk-link;
     text-decoration: none;
     padding-left: 28px;
     background-repeat: no-repeat;
@@ -51,10 +57,14 @@
     padding: $gutter-half;
     margin-bottom: $gutter-half;
     background: $grey-3;
+
+    .js-enabled &.js-hidden {
+      display: none;
+    }
   }
 
-  .gem-c-subscription-links__feed-description {
-    font-weight: bold;
+  .gem-c-subscription-links__feed-hidden-description {
+    @include govuk-visually-hidden;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -11,6 +11,7 @@
 
 .gem-c-success-alert__message {
   @include bold-19;
+  margin: 0;
 }
 
 .gem-c-success-summary__title {
@@ -26,6 +27,7 @@
 
 .gem-c-success-summary__body {
   @include core-19;
+  margin: 0;
 }
 
 .gem-c-success-alert:focus {

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

@@ -1,7 +1,8 @@
 .gem-c-taxonomy-list {
   display: flex;
   flex-wrap: wrap;
-  margin-top: $gutter-half;
+  margin: $gutter-half 0 0 0;
+  padding: 0;
 
   @include media(tablet) {
     margin-right: -25px;

data/app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-navigation.scss

@@ -1,4 +1,5 @@
 .gem-c-taxonomy-navigation {
+  @include govuk-text-colour;
   @include core-16;
   border-top: 2px solid $govuk-blue;
   padding-top: $gutter-half;
@@ -59,10 +60,12 @@
 }
 
 .gem-c-taxonomy-navigation__link {
+  @extend %govuk-link;
   text-decoration: none;
 }
 
 .gem-c-taxonomy-navigation__toggle {
+  @extend %govuk-link;
   display: none;
 
   .js-enabled & {
@@ -70,8 +73,14 @@
    }
 }
 
+.gem-c-taxonomy-navigation__toggle-more.js-hidden {
+  .js-enabled & {
+    display: none;
+  }
+}
 
 .gem-c-taxonomy-navigation__section-heading {
+  @include core-16;
   border-top: 1px solid $border-colour;
   margin-bottom: $gutter-half;
   margin-top: $gutter;
@@ -79,6 +88,7 @@
 }
 
 .gem-c-taxonomy-navigation__section-link {
+  @extend %govuk-link;
   @include bold-19;
   text-decoration: none;
 }

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

@@ -19,6 +19,7 @@
 .gem-c-title--inverse {
   color: $white;
 
+  .gem-c-title__text,
   .gem-c-title__context {
     color: inherit;
   }
@@ -27,6 +28,7 @@
 .gem-c-title__context {
   @include core-24;
   color: $secondary-text-colour;
+  margin: 0;
 }
 
 .gem-c-title__context-link {
@@ -48,7 +50,9 @@
 }
 
 .gem-c-title__text {
+  @include govuk-text-colour;
   @include bold-48;
+  margin: 0;
 }
 
 .gem-c-title__text--long {

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss

@@ -2,6 +2,7 @@
 
 .gem-c-translation-nav {
   @include responsive-top-margin;
+  @include govuk-text-colour;
   @include core-16;
   margin-bottom: $gutter;
   border-bottom: 1px solid $border-colour;
@@ -10,8 +11,8 @@
 .gem-c-translation-nav__list {
   @extend %contain-floats;
   list-style: none;
-  margin-left: -$gutter-one-third;
-  margin-right: -$gutter-one-third;
+  margin: 0 (-$gutter-one-third);
+  padding: 0;
 }
 
 .gem-c-translation-nav__list-item {
@@ -31,6 +32,10 @@
   }
 }
 
+.gem-c-translation-nav__link {
+  @extend %govuk-link;
+}
+
 .gem-c-translation-nav__list-item:last-child {
   border-right: 0;
   border-left: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss

@@ -96,6 +96,10 @@
           margin: 0;
         }
       }
+
+      .js-hidden {
+        display: none;
+      }
     }
   }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -9,6 +9,8 @@
 // - alphagov/govspeak: ✔︎
 
 .gem-c-govspeak {
+  @include govuk-text-colour;
+
   ol,
   ul,
   p {
@@ -24,35 +26,47 @@
 
   // Headings
 
+  // H1's are not allowed and thus are styled bare
+  h1 {
+    @include core-19;
+    margin: 0;
+    padding: 0;
+  }
+
   h2 {
     @include bold-27;
     margin-top: $gutter;
+    margin-bottom: 0;
 
     @include media(desktop) {
       margin-top: $gutter * 1.5;
+      margin-bottom: 0;
     }
   }
 
   h3 {
     @include bold-19;
     margin-top: $gutter + 5px;
-  }
-
-  h4 {
-    @include bold-19;
-    margin-top: $gutter + 5px;
+    margin-bottom: 0;
   }
 
   h4,
   h5,
   h6 {
     @include bold-19;
+    margin-top: $gutter + 5px;
+    margin-bottom: 0;
 
     + p {
       margin-top: 5px;
     }
   }
 
+  h5,
+  h6 {
+    margin: 0;
+  }
+
   h2:first-child,
   h3:first-child,
   h4:first-child,
@@ -61,9 +75,8 @@
   }
 
   // Links
-
   a {
-    text-decoration: underline;
+    @extend %govuk-link;
   }
 
   // Lists
@@ -73,6 +86,7 @@
     list-style: decimal;
     list-style-position: outside;
     margin-left: $gutter-two-thirds;
+    padding: 0;
 
     ul,
     ol {
@@ -94,7 +108,8 @@
   }
 
   li {
-    margin-bottom: 5px;
+    margin: 0 0 5px 0;
+    padding: 0;
 
     p {
       margin: 0;
@@ -200,6 +215,7 @@
 
   abbr {
     cursor: help;
+    text-decoration: none;
   }
 
   // Horizontal Rule