govuk_publishing_components 24.11.1 → 24.13.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c60eaa696257b6a3bc80e9f004c07f02b42f748ede671940f3a1222dcb1f1b89
-  data.tar.gz: 88b4053cc90488b1e7330f52e38c321b8e9bb091b7f3db4bb5e7d3ee7c58850a
+  metadata.gz: 8a35a738afbd13284b90e5ca985cb1be689e1a4fec384d36cf3618c3c9b6562c
+  data.tar.gz: f330967e05f6c5c5d41f47fb7b5205685197e483b67b0db08d27ad4efd60a796
 SHA512:
-  metadata.gz: 23dba26a8354b8375b34185c471d5b49e17e298dc9fb80cbb2438d04958660b84cbae7f680fee5305c71e032e8e952ab3ecc45a8570aed28d1e9f5333984b39c
-  data.tar.gz: '09a94bbb2a4fb93959172c80e12284f93b08ffb61da1657276e26cd743ce4cad6531f0461a2f3f63d3c15a5a4bc6bbf91c51b9cba7ac7992163406ba8f4a4fe3'
+  metadata.gz: 3a3c2ab786bc602c21b2ecd225c9fe297e6dca33a146c0a135ae7f3bca839a8aecc988d061cf83d2ae607ed904c2827921fc7ecbe72a53c1a83f9660af6f1762
+  data.tar.gz: 925f4e55851084894c74b27bfd58a502e411bdbb552f0a44567724c4789bc05691d15b9c0dfd72878b62465f52dffcd0582664b844cd2c56fdae2a9d135e4de6

data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js

@@ -6,7 +6,7 @@
   window.GOVUK = window.GOVUK || {}
 
   var CONFIG = {
-    '/transition': [
+    '/brexit': [
       ['Percent', 20],
       ['Percent', 40],
       ['Percent', 60],

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -21,8 +21,14 @@
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
+          if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+            window.GOVUK.analytics.trackEvent('headerClicked', 'searchClosed', { label: 'none' })
+          }
         } else {
           target.setAttribute('class', targetClass + ' js-visible')
+          if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+            window.GOVUK.analytics.trackEvent('headerClicked', 'searchOpened', { label: 'none' })
+          }
         }
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -1,6 +1,9 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
+// feature flag for accessible link styles
+$govuk-new-link-styles: true;
+
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 

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

@@ -40,6 +40,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-font($size: 16);
     @include govuk-link-common;
     @include govuk-link-style-default;
+
     // Remove default button focus outline in Firefox
     &::-moz-focus-inner {
       padding: 0;
@@ -47,21 +48,6 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__open-all:hover,
-  .gem-c-accordion__open-all-text:hover {
-    text-decoration: underline;
-    color: $govuk-link-colour;
-  }
-
-  // Focus state, also to change chervon icon to black
-  .gem-c-accordion__open-all:focus {
-    .gem-c-accordion__open-all-text,
-    .gem-c-accordion-nav__chevron {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
-  }
-
   // Create Chervon icon align with text
   .gem-c-accordion-nav__chevron {
     vertical-align: text-top;
@@ -73,6 +59,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     margin-left: govuk-em(5, 14);
     border: govuk-em(1, 14) solid;
     border-radius: govuk-em(100, 14);
+
     // Main icon size across views, yet keep responsive for zoom
     @include govuk-media-query($from: tablet) {
       width: govuk-em(20, 16);
@@ -94,6 +81,7 @@ $gem-c-accordion-bottom-border-width: 1px;
       transform: rotate(-45deg);
       left: govuk-em(6, 14);
       bottom: govuk-em(5, 14);
+
       @include govuk-media-query($from: tablet) {
         width: govuk-em(6, 16);
         height: govuk-em(6, 16);
@@ -105,6 +93,22 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
+  .gem-c-accordion__open-all:hover,
+  .gem-c-accordion__section-button:hover {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-link-hover-colour;
+      text-decoration: none;
+    }
+  }
+
+  // Focus state, also to change chervon icon to black
+  .gem-c-accordion__open-all:focus {
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
+    }
+  }
+
   // Rotate icon to create "Down" version
   .gem-c-accordion-nav__chevron--down {
     transform: rotate(180deg);
@@ -150,6 +154,10 @@ $gem-c-accordion-bottom-border-width: 1px;
     @include govuk-typography-common;
     width: 100%;
 
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
     &:active {
       z-index: 1;
       color: $govuk-link-active-colour;
@@ -163,26 +171,12 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  .gem-c-accordion__section-button:hover {
-    color: $govuk-link-colour;
-    // On hover, add underline to toggle link
-    .gem-c-accordion__toggle-text {
-      text-decoration: underline;
-      color: $govuk-link-colour;
-    }
-  }
-
   .gem-c-accordion__section-button:focus {
     @include govuk-focused-text;
     // Overwrite focus border to top
     box-shadow: 0 0, 0 -4px;
     border-top: 1px solid transparent;
 
-    // Focus state to change the toggle link within individual sections
-    .gem-c-accordion__toggle-text {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
     // Focus state to change chervon icon colour within individual sections
     .gem-c-accordion-nav__chevron {
       color: $govuk-text-colour;
@@ -225,10 +219,24 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
   }
 
-  // Setting width of the text, so the icon doesn't shift (left / right) when toggled
   .gem-c-accordion__toggle-text {
-    min-width: govuk-em(40, 16);
     display: inline-block;
+    // Setting width of the text so the icon doesn't shift left or right when
+    // toggled:
+    min-width: govuk-em(40, 16);
+  }
+
+  // On hover add underline to toggle link only:
+  .gem-c-accordion__section-button:hover .gem-c-accordion__toggle-text {
+    color: $govuk-link-hover-colour;
+    @include govuk-link-decoration;
+    @include govuk-link-hover-decoration;
+  }
+
+  // Ensure the correct focus sstate text colour and no underline:
+  .gem-c-accordion__section-button:focus .gem-c-accordion__toggle-text {
+    color: $govuk-focus-text-colour;
+    text-decoration: none;
   }
 
   .gem-c-accordion__open-all-text {
@@ -237,6 +245,17 @@ $gem-c-accordion-bottom-border-width: 1px;
     text-align: left;
   }
 
+  .gem-c-accordion__open-all:hover {
+    .gem-c-accordion__open-all-text {
+      @include govuk-link-decoration;
+      @include govuk-link-hover-decoration;
+    }
+  }
+
+  .gem-c-accordion__open-all:focus .gem-c-accordion__open-all-text {
+    text-decoration: none;
+  }
+
   // Change the summary subheading size.
   .gem-c-accordion__section-summary {
     @include govuk-responsive-margin(1, "top");

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -32,10 +32,6 @@
 .gem-c-action-link__link {
   color: inherit;
 
-  &:hover {
-    text-decoration: underline;
-  }
-
   &:focus {
     text-decoration: none;
     color: $govuk-focus-text-colour;
@@ -106,10 +102,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--simple-light {
@@ -122,10 +114,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--dark-icon {
@@ -150,10 +138,6 @@
     background-size: 25px auto;
     background-position: 0 2px;
   }
-
-  .gem-c-action-link__link {
-    text-decoration: none;
-  }
 }
 
 .gem-c-action-link--transparent-icon {
@@ -177,25 +161,6 @@
 .gem-c-action-link--light-text {
   color: govuk-colour("white");
 
-  .gem-c-action-link__link,
-  .gem-c-action-link__subtext-link {
-    text-decoration: underline;
-
-    &:link,
-    &:visited {
-      color: govuk-colour("white");
-    }
-
-    &:hover {
-      color: $gem-hover-dark-background;
-    }
-
-    &:focus {
-      text-decoration: none;
-      color: $govuk-focus-text-colour;
-    }
-  }
-
   .gem-c-action-link__subtext {
     &:before {
       border-color: govuk-colour("white");

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

@@ -25,19 +25,6 @@
   list-style-type: none;
 }
 
-.gem-c-contents-list--no-underline {
-  .gem-c-contents-list__link {
-    text-decoration: none;
-
-    &:hover,
-    &:active {
-      text-decoration: underline;
-    }
-
-    @include govuk-template-link-focus-override;
-  }
-}
-
 .gem-c-contents-list__link {
   .gem-c-contents-list__list-item--parent > & {
     font-weight: bold;

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

@@ -63,12 +63,6 @@
 }
 
 .gem-c-image-card__title-link {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
   &:focus {
     text-decoration: none;
   }

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

@@ -7,10 +7,6 @@
   box-sizing: border-box;
 }
 
-.gem-c-inverse-header a {
-  color: govuk-colour("white");
-}
-
 .gem-c-inverse-header .gem-c-inverse-header__supplement,
 .gem-c-inverse-header .publication-header__last-changed {
   // This publication-header class is injected on publication pages, really

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

@@ -1,12 +1,14 @@
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .gem-c-organisation-logo {
   font-size: 13px;
-  line-height: (15 / 13);
   font-weight: 400;
+  line-height: 1.35;
+  // When this is a heading the margin needs to be set to stop it from
+  // inheriting the browser's default margin:
+  margin: 0;
 
   @include govuk-media-query($from: tablet) {
     font-size: 18px;
-    line-height: 20px;
   }
 }
 
@@ -62,7 +64,12 @@
   font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 
   &:hover {
-    text-decoration: underline;
+    color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    color: govuk-colour("black");
+    @include govuk-link-hover-decoration;
   }
 
   &:focus {

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

@@ -31,6 +31,16 @@
   &:hover,
   &:active {
     background-color: govuk-colour("light-grey", $legacy: "grey-4");
+
+    // Add govuk-link hover decoration to title if no label present
+    .gem-c-pagination__link-text--decorated {
+      @include govuk-link-decoration;
+    }
+
+    .gem-c-pagination__link-label,
+    .gem-c-pagination__link-text--decorated {
+      @include govuk-link-hover-decoration;
+    }
   }
 
   &:focus {
@@ -73,8 +83,8 @@
 .gem-c-pagination__link-label {
   display: inline-block;
   margin-top: .1em;
-  text-decoration: underline;
   margin-left: govuk-spacing(5);
+  @include govuk-link-decoration;
 
   @include govuk-media-query($from: tablet) {
     margin-left: govuk-spacing(6);

data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss

@@ -20,6 +20,7 @@ $gem-c-print-link-background-height: 18px;
   background: image-url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%;
   background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height;
   padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width);
+  text-decoration: none;
 
   @include govuk-device-pixel-ratio($ratio: 2) {
     background-image: image-url("govuk_publishing_components/icon-print-2x.png");
@@ -32,7 +33,6 @@ $gem-c-print-link-background-height: 18px;
 
 .gem-c-print-link__link {
   box-shadow: inset 0 0 0 1px $govuk-border-colour;
-  text-decoration: none;
 
   &:focus {
     border: 0;

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

@@ -22,7 +22,6 @@ $share-button-height: 32px;
 .gem-c-share-links__link {
   @include govuk-font(16, $weight: bold);
   margin-right: govuk-spacing(6);
-  text-decoration: none;
 
   @include govuk-template-link-focus-override;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss

@@ -49,6 +49,7 @@
 
   &:hover {
     color: $govuk-link-hover-colour;
+    @include govuk-link-hover-decoration;
   }
 
   &:focus {

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

@@ -116,7 +116,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   padding: 0 0 govuk-spacing(1);
 
   &:hover .gem-c-step-nav__button-text {
-    text-decoration: underline;
+    @include govuk-link-decoration;
+    @include govuk-link-hover-decoration;
   }
 
   .gem-c-step-nav--large & {
@@ -125,6 +126,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
   &:focus {
     @include step-nav-chevron-focus-state;
+
+    .gem-c-step-nav__button-text {
+      text-decoration: none;
+    }
   }
 }
 
@@ -338,7 +343,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     }
 
     .gem-c-step-nav__button-text {
-      text-decoration: underline;
+      @include govuk-link-decoration;
+      @include govuk-link-hover-decoration;
     }
   }
 }

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

@@ -45,7 +45,6 @@
 
 .gem-c-subscription-links__item {
   display: inline-block;
-  text-decoration: none;
   background-repeat: no-repeat;
   background-position: 0 20%;
 
@@ -55,6 +54,7 @@
 }
 
 .gem-c-subscription-links__item--button {
+  cursor: pointer;
   display: none;
   font-size: inherit;
   font-weight: inherit;
@@ -71,6 +71,10 @@
     color: $govuk-link-colour;
   }
 
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
   &:visited,
   &:active,
   &:focus {
@@ -106,7 +110,7 @@
 }
 
 .gem-c-subscription-links__icon {
-  margin-right: .1em;
+  margin-right: govuk-spacing(1);
   color: govuk-colour("black");
 }