govuk_publishing_components 32.1.0 → 35.0.0

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "helpers/contents-list-helper";
 
 .gem-c-contents-list {
@@ -74,3 +75,23 @@
     vertical-align: top;
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  // Override default browser indentation
+  .gem-c-contents-list__list,
+  .gem-c-contents-list__nested-list {
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  // Put indentation back where we use list style types
+  .gem-c-contents-list__list-item--dashed {
+    margin-left: govuk-spacing(3);
+    list-style-type: disc;
+  }
+
+  .gem-c-contents-list__list-item--numbered,
+  .gem-c-contents-list__list-item--parent {
+    list-style-type: none;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-guidance.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-contextual-guidance {
   .govuk-grid-column-one-third {
     position: relative;

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-contextual-sidebar__related-links {
   border-top: 2px solid $govuk-brand-colour;
 }

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
@@ -77,3 +78,9 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     margin-bottom: - govuk-spacing(2);
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-cookie-banner {
+    display: none !important; // stylelint-disable-line declaration-no-important
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/date-input/date-input";
 
 // Add spacing between input items on narrow containers when they collapse under each other

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

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/details/details";

data/app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-devolved-nations {
   background: govuk-colour("light-grey");
   margin-bottom: govuk-spacing(3);

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-document-list {
   @include govuk-text-colour;
   @include govuk-font(19);
@@ -29,6 +31,12 @@
   }
 }
 
+.gem-c-document-list--no-top-border-first-child {
+  .gem-c-document-list__item:first-child {
+    border-top: none;
+  }
+}
+
 .gem-c-document-list__item-title--context {
   margin-right: govuk-spacing(2);
 

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-emergency-banner {
   @include govuk-font(19);
   background-color: govuk-colour("mid-grey");
@@ -74,3 +76,9 @@
   // the contrast was too low with white text
   background-color: #00847d;
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-emergency-banner {
+    display: none;
+  }
+}

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-error-alert {
   color: $govuk-text-colour;
   padding: govuk-spacing(3);

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

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/error-message/error-message";

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/error-summary/error-summary";
 
 .gem-c-error-summary__list-item {

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-feedback {
   background: govuk-colour("white");
   margin-top: govuk-spacing(6);
@@ -95,32 +97,24 @@
   margin-bottom: 0;
   width: 100%;
 
-  &:hover {
-    // backup style for browsers that don't support rgba
-    background: govuk-colour("mid-grey");
-    background: rgba(govuk-colour("black"), .2);
-    color: govuk-colour("black");
-  }
-
-  &:active:focus:not(:hover) {
-    background: govuk-colour("yellow");
-  }
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
   }
-}
-
-.gem-c-feedback__email-link,
-.gem-c-feedback__prompt-link {
-  position: relative;
 
+  &:focus,
   &:focus:not(:active):not(:hover) {
+    background: govuk-colour("yellow");
     border-color: govuk-colour("black");
+    box-shadow: 0 5px  0 govuk-colour("black");
   }
 
-  &:focus,
   &:active {
-    color: $govuk-focus-text-colour;
+    color: govuk-colour("black");
+  }
+
+  &:hover {
+    background: govuk-colour("mid-grey");
+    color: govuk-colour("black");
   }
 }
 
@@ -231,13 +225,17 @@
 }
 
 .gem-c-feedback__email-link {
-  display: block;
+  display: inline-block;
   margin-top: govuk-spacing(4);
 
   @include govuk-media-query($from: desktop) {
-    display: inline-block;
     margin-top: govuk-spacing(2);
   }
+
+  &:focus,
+  &:active {
+    color: $govuk-focus-text-colour;
+  }
 }
 
 // static.css on GOV.UK overwrites the component styles using input[type="text"]

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

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/fieldset/fieldset";

data/app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/file-upload/file-upload";

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 // stylelint-disable max-nesting-depth
 
 // Override govspeak styles with HTML publication specific ones
@@ -137,3 +139,11 @@
     // stylelint-enable selector-no-qualifying-type
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-govspeak-html-publication {
+    .govuk-sticky-element {
+      display: none;
+    }
+  }
+}

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 @import "govspeak/advisory";
 @import "govspeak/attachment";
 @import "govspeak/button";
@@ -27,3 +29,86 @@
     text-align: start;
   }
 }
+
+@include govuk-media-query($media-type: print) {
+  // stylelint-disable max-nesting-depth
+
+  .gem-c-govspeak {
+    .media-player {
+      display: none;
+    }
+
+    .info-notice,
+    .help-notice,
+    .call-to-action {
+      margin: govuk-spacing(3) 0;
+    }
+
+    .call-to-action {
+      background: none;
+      border: 1pt solid $govuk-border-colour;
+      padding: govuk-spacing(3);
+    }
+
+    .help-notice p {
+      font-weight: 700;
+    }
+
+    .fraction {
+      img {
+        display: inline-block;
+        margin-bottom: -7px;
+      }
+    }
+
+    .attachment {
+      margin: govuk-spacing(6) 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      .attachment-thumb {
+        display: none;
+      }
+
+      .attachment-details {
+        .download {
+          display: block;
+        }
+      }
+
+      .accessibility-warning {
+        h2 {
+          @include govuk-font(14);
+        }
+
+        .toggler {
+          display: none;
+        }
+      }
+    }
+
+    .footnotes {
+      border-top: 1px solid $govuk-text-colour;
+
+      a[role="doc-backlink"] {
+        display: none;
+      }
+    }
+
+    .legislative-list {
+      padding-left: 0;
+
+      &,
+      ol {
+        list-style: none;
+      }
+    }
+
+    .mc-toggle-button,
+    .mc-chart-container {
+      display: none;
+    }
+  }
+}

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-heading {
   margin: 0;
 }

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

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/hint/hint";

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-image-card {
   @include govuk-clearfix;
   @include govuk-text-colour;
@@ -107,11 +109,7 @@
 .gem-c-image-card__metadata {
   @include govuk-font($size: false);
   font-size: 16px;
-
-  @if $govuk-typography-use-rem {
-    font-size: govuk-px-to-rem(16px);
-  }
-
+  font-size: govuk-px-to-rem(16px);
   margin: 0 0 (govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
@@ -135,7 +133,7 @@
   list-style: none;
 
   .gem-c-image-card__list-item {
-    margin-bottom: govuk-spacing(1);
+    margin-bottom: govuk-spacing(2);
   }
 
   .gem-c-image-card__list-item--text {
@@ -212,6 +210,87 @@
   }
 }
 
+// The following two rules are used to 'trick' the
+// Youtube embed into using the desktop styles. Without
+// this, the Youtube embed will use mobile styles in
+// desktop viewports. The Youtube mobile styles are more
+// challenging to use with a keyboard as they are designed
+// for a touch screen interface. There is seemingly no way
+// to make an iframe request the desktop version of a site
+// and there is no parameter in the Youtube embed that would
+// force the desktop styles. Hence this workaround.
+
+// In the first rule, we are adding an arbitrarly large
+// enough px to the width of the Youtube iframe so that
+// it will use the desktop styling. Unfortunately, this width
+// would result in the Youtube embed overlapping into the
+// text content. To stop this happening, we scale the size of
+// the embed down.
+
+.gem-c-image-card__youtube-video-embed iframe {
+  @include govuk-media-query($from: tablet) {
+    transform: scale(.7);
+    width: calc(100% + 45px);
+  }
+  z-index: 1;
+}
+
+// In the second rule, we scale the container of the embed
+// up by the amount that we scaled the Youtube embed down.
+// This results in the embed being the correct size and the
+// desktop styles being used.
+
+.gem-c-image-card__youtube-video-embed {
+  @include govuk-media-query($from: tablet) {
+    transform: scale(1.3);
+  }
+  margin: 0;
+  padding-bottom: 68%;
+}
+
+// This rule is to reposition the embed to the correct
+// place in the image card. As the embed has been scaled
+// down and then scaled up again, it is misaligned and
+// here we correct that misalignment.
+
+.gem-c-image-card__youtube-video-embed.gem-c-govspeak__youtube-video iframe {
+  @include govuk-media-query($from: tablet) {
+    left: -22px;
+    top: -10px;
+  }
+}
+
+.gem-c-image-card__youtube-thumbnail-image-container {
+  position: relative;
+
+  &:before {
+    background: url("govuk_publishing_components/youtube-play-icon.png");
+    background: url("govuk_publishing_components/youtube-play-icon.svg"), linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 75px auto;
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+.gem-c-image-card__youtube-thumbnail-image {
+  filter: brightness(.9);
+}
+
+.gem-c-image-card__youtube-thumbnail-container-text {
+  margin-top: 10px;
+}
+
+.gem-c-image-card__youtube-thumbnail-container:focus .gem-c-image-card__youtube-thumbnail-container-text {
+  @include govuk-focused-text;
+}
+
 .gem-c-image-card--no-image {
   .gem-c-image-card__text-wrapper {
     @include govuk-media-query($from: mobile, $until: tablet) {

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

@@ -1,18 +1,18 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/input/input";
+
 $search-icon-size: 40px;
 
 .gem-c-input__search-icon {
   display: block;
   position: relative;
-  margin-bottom: -$search-icon-size;
   z-index: 1;
+  margin-bottom: -$search-icon-size;
+  margin-bottom: -(govuk-px-to-rem($search-icon-size));
   width: $search-icon-size;
   height: $search-icon-size;
-  @if $govuk-typography-use-rem {
-    margin-bottom: -(govuk-px-to-rem($search-icon-size));
-    height: govuk-px-to-rem($search-icon-size);
-  }
-  background: 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 -3px center;
+  height: govuk-px-to-rem($search-icon-size);
+  background: image-url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;
 }
 
 // this overrides styles from static that break the look of the component

data/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/inset-text/inset-text";

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-intervention {
   @include govuk-text-colour;
   @include govuk-responsive-padding(3);

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-inverse-header {
   width: 100%;
   background-color: govuk-colour("blue");

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

@@ -1 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/label/label";

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

@@ -1,3 +1,4 @@
+@import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/footer/footer";
 
 .gem-c-layout-footer--border {

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .gem-c-layout-for-public {
   font-family: $govuk-font-family;
 }