govuk_publishing_components 11.2.0 → 12.0.0

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

@@ -2,6 +2,7 @@
 @import "typography";
 
 .gem-c-document-list {
+  @include govuk-text-colour;
   @include core-19;
   margin: 0;
   padding: 0;
@@ -20,6 +21,8 @@
 }
 
 .gem-c-document-list__item-title {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
   @include bold-19;
   display: inline-block;
 }
@@ -38,7 +41,9 @@
 }
 
 .gem-c-document-list__item-description {
-  margin-bottom: 5px;
+  @include govuk-text-colour;
+  @include govuk-font($size: 16, $line-height: 1.5);
+  margin: 0 0 5px 0;
 }
 
 .gem-c-document-list__item-metadata {
@@ -46,6 +51,7 @@
 }
 
 .gem-c-document-list__attribute {
+  @include govuk-text-colour;
   @include core-14;
   display: inline-block;
   list-style: none;

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

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

data/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss

@@ -58,6 +58,7 @@
 }
 
 .gem-c-error-summary__link {
+  @include govuk-link-common;
   &:link,
   &:link:focus,
   &:focus,

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

@@ -4,6 +4,10 @@
 .gem-c-feedback {
   max-width: 960px;
   margin: 0 auto;
+
+  .visually-hidden {
+    @include govuk-visually-hidden;
+  }
 }
 
 .gem-c-feedback--top-margin {
@@ -16,7 +20,11 @@
 
 // hide without js
 // show with js, unless also has the js-hidden class
-.gem-c-feedback__js-show {
+.gem-c-feedback__js-show,
+.gem-c-feedback__form,
+.gem-c-feedback__prompt-success,
+.gem-c-feedback__js-prompt-questions,
+.gem-c-feedback__error-summary {
   display: none;
 
   .js-enabled & {
@@ -50,7 +58,7 @@
   display: inline-block;
 
   // There's a global h3 rule in some layouts that interferes with this component
-  margin-top: 0;
+  margin: 0;
 
   &:focus {
     outline: 0;
@@ -63,6 +71,7 @@
 }
 
 .gem-c-feedback__prompt-link {
+  @include govuk-link-common;
   @include core-19;
   margin-left: $gutter-half;
 
@@ -113,14 +122,20 @@
   // this comes from the backend so we can't put a class on it
   h2,
   .gem-c-feedback__heading {
+    @include govuk-text-colour;
     @include bold-24;
     margin: 0;
   }
 
   p {
+    @include govuk-text-colour;
     @include core-19;
     margin: $gutter-one-third 0;
   }
+
+  a {
+    @extend %govuk-link;
+  }
 }
 
 .gem-c-feedback__error-message {
@@ -141,13 +156,15 @@
 }
 
 .gem-c-feedback__form-heading {
+  @include govuk-text-colour;
   @include bold-24;
-  margin-bottom: $gutter-half;
+  margin: 0 0 $gutter-half 0;
 }
 
 .gem-c-feedback__form-paragraph {
+  @include govuk-text-colour;
   @include core-19;
-  margin-bottom: $gutter;
+  margin: 0 0 $gutter 0;
 }
 
 .gem-c-feedback__form-label {
@@ -157,9 +174,11 @@
 }
 
 .gem-c-feedback__close {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
   @include core-19;
   float: right;
-  margin-bottom: $gutter-one-third;
+  margin: 0 0 $gutter-one-third 0;
 
   @include media(tablet) {
     padding-top: 0;

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

@@ -1,5 +1,7 @@
 .gem-c-heading {
+  @include govuk-text-colour;
   @include bold-27;
+  margin: 0;
 }
 
 .gem-c-heading--font-size-24 {

data/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss

@@ -1,7 +1,9 @@
 .gem-c-highlight-boxes {
+  @include govuk-text-colour;
   display: flex;
   flex-wrap: wrap;
-  margin-top: $gutter-half;
+  margin: $gutter-half 0 0 0;
+  padding: 0;
 
   @include media(tablet) {
     margin-right: -25px;
@@ -47,27 +49,37 @@
   color: $white;
 }
 
-.gem-c-highlight-boxes--inverse .gem-c-highlight-boxes__title {
-  color: $white;
-}
-
 .gem-c-highlight-boxes__title {
+  @extend %govuk-link;
   @include bold-19;
   display: block;
   text-decoration: underline;
   margin-bottom: 5px;
 }
 
+.gem-c-highlight-boxes--inverse .gem-c-highlight-boxes__title {
+  &:link,
+  &:visited,
+  &:hover {
+    color: $white;
+  }
+
+  &:active,
+  &:focus {
+    color: $govuk-link-colour;
+  }
+}
+
 .gem-c-highlight-boxes__title--featured {
   @include bold-24;
 }
 
 .gem-c-highlight-boxes__description {
-  margin-bottom: $gutter-one-third;
+  margin: 0 0 $gutter-one-third 0;
 }
 
 .gem-c-highlight-boxes__metadata {
+  margin: 0 $gutter-half 0 0;
   @include core-16;
   display: inline-block;
-  margin-right: $gutter-half;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -6,10 +6,12 @@
   @extend %contain-floats;
   margin: 0 (-$gutter-half) $gutter (-$gutter-half);
   position: relative;
+  @include govuk-text-colour;
 }
 
 .gem-c-image-card__image-wrapper {
   @include grid-column( 1 / 3, mobile );
+  margin: 0;
 
   @include media(tablet) {
     margin-bottom: $gutter-one-third;
@@ -33,9 +35,11 @@
 
 .gem-c-image-card__title {
   @include bold-19;
+  margin: 0;
 }
 
 .gem-c-image-card__title-link {
+  @extend %govuk-link;
   text-decoration: none;
 
   &:hover {
@@ -68,7 +72,7 @@
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
   @include core-14;
-  margin-bottom: $gutter-one-quarter;
+  margin: 0 0 $gutter-one-quarter;
   color: $grey-1;
 
   @include media(tablet) {
@@ -77,17 +81,23 @@
 }
 
 .gem-c-image-card__description {
+  @include govuk-font($size: 16, $line-height: 1.5);
   padding-top: $gutter-one-quarter;
   word-wrap: break-word;
 }
 
 .gem-c-image-card__list {
+  @include govuk-font($size: 16, $line-height: 1.5);
   position: relative;
   z-index: 2;
   padding: $gutter-one-quarter 0 0 0;
   margin: 0;
   list-style: none;
 
+  .gem-c-image-card__list-item-link {
+    @extend %govuk-link;
+  }
+
   &.gem-c-image-card__list--indented {
     padding-left: $gutter-half;
 

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -11,6 +11,18 @@
   color: $white;
 }
 
+
+.gem-c-inverse-header {
+  // This publication-header class is injected on publication pages, really
+  // it should be a component class or be a component in it's own right.
+  .gem-c-inverse-header__supplement,
+  .publication-header__last-changed {
+    @include govuk-font($size: 16, $line-height: 1.5);
+    color: $white;
+    margin: 0;
+  }
+}
+
 .gem-c-inverse-header--full-width {
   padding-left: 0;
   padding-right: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -10,8 +10,11 @@
   border-bottom-color: govuk-colour("yellow");
 }
 
-.gem-c-layout-header--development .govuk-header__container,
-.gem-c-layout-header--test .govuk-header__container {
+.gem-c-layout-header--example .govuk-header__container {
+  border-bottom-color: govuk-colour("bright-purple");
+}
+
+.gem-c-layout-header--development .govuk-header__container {
   border-bottom-color: govuk-colour("grey-1");
 }
 
@@ -38,6 +41,10 @@
   background-color: govuk-colour("bright-red");
 }
 
+.gem-c-environment-tag--example {
+  background-color: govuk-colour("bright-purple");
+}
+
 .gem-c-environment-tag--development {
   background-color: govuk-colour("grey-1");
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_lead-paragraph.scss

@@ -1,7 +1,9 @@
 @import "mixins/margins";
 
 .gem-c-lead-paragraph {
+  @include govuk-text-colour;
   @include core-24;
+  margin-top: 0;
   @include responsive-bottom-margin;
   // Ensure the text has a line-length of around 60 characters
   max-width: 30em;

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

@@ -1,4 +1,5 @@
 .gem-c-metadata {
+  @include govuk-text-colour;
   @include core-16;
   @include responsive-bottom-margin;
   @extend %contain-floats;
@@ -35,15 +36,21 @@
 }
 
 .gem-c-metadata__definition {
+  margin: 0;
   line-height: normal;
 
   @include media(tablet) {
     float: left;
     width: 70%;
   }
+
+  a {
+    @extend %govuk-link;
+  }
 }
 
 .gem-c-metadata__definition-link {
+  @extend %govuk-link;
   text-decoration: none;
 }
 
@@ -64,3 +71,7 @@
 .js-enabled .gem-c-metadata__toggle-wrap {
   display: block;
 }
+
+.js-enabled .gem-c-metadata__toggle-items.js-hidden {
+  display: none;
+}

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

@@ -1,4 +1,5 @@
 .gem-c-notice {
+  @include govuk-text-colour;
   clear: both;
   padding: $gutter-two-thirds;
   border: 2px solid $govuk-blue;
@@ -20,14 +21,18 @@
 
 .gem-c-notice__title {
   @include bold-27;
-  margin-bottom: $gutter-one-third;
+  margin: 0 0 $gutter-one-third 0;
 
   &:last-child {
     margin-bottom: 0;
   }
+
+  a {
+    @extend %govuk-link;
+  }
 }
 
 .gem-c-notice__description {
   @include core-19;
-  margin-bottom: 0;
+  margin: 0;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -1,6 +1,5 @@
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .gem-c-organisation-logo {
-  font-family: $helvetica-regular;
   font-size: 13px;
   line-height: (15 / 13);
   font-weight: 400;
@@ -49,16 +48,18 @@
 .gem-c-organisation-logo__name {
   position: relative;
   top: 3px;
+  font-family: $helvetica-regular;
 }
 
-.gem-c-organisation-logo__link:link,
-.gem-c-organisation-logo__link:visited {
-  color: $black;
-}
+.gem-c-organisation-logo__link {
+  @include govuk-link-common;
+  @include govuk-link-style-text;
+  font-family: $helvetica-regular;
 
-.gem-c-organisation-logo__link:hover,
-.gem-c-organisation-logo__link:focus {
-  text-decoration: underline;
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
 }
 
 // all crest images are currently in whitehall

data/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss

@@ -1,7 +1,9 @@
-@import "mixins/touch-friendly-links";
 @import "design-patterns/alpha-beta";
 
 .gem-c-phase-banner {
   @include phase-banner;
-  @include touch-friendly-links;
+
+  a {
+    @extend %govuk-link;
+  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -6,19 +6,26 @@
   margin-right: -$gutter-half;
 }
 
+.gem-c-pagination__list {
+  margin: 0;
+  padding: 0;
+}
+
 .gem-c-pagination__item {
   @include core-16($line-height: (20 / 16));
   list-style: none;
 }
 
 .gem-c-pagination__link {
+  @extend %govuk-link;
   display: block;
   padding: $gutter-half;
   text-decoration: none;
 
   &:hover,
   &:active,
-  &:visited {
+  &:visited,
+  &:focus {
     color: $link-colour;
   }
 
@@ -32,6 +39,10 @@
   display: block;
 }
 
+.gem-c-pagination__link-divider {
+  @include govuk-visually-hidden;
+}
+
 .gem-c-pagination__link-text {
   @include bold-19;
   margin-left: $gutter / 3;