dxw_govuk_frontend_rails 3.8.0 → 3.12.0

data/vendor/assets/stylesheets/helpers/_links.scss

@@ -2,7 +2,7 @@
 /// @group helpers/links
 ////
 
-/// Common link mixin
+/// Common link styles
 ///
 /// Provides the typography and focus state, regardless of link style.
 ///
@@ -10,18 +10,57 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
+  @include govuk-link-decoration;
+
+  &:hover {
+    @include govuk-link-hover-decoration;
+  }
 
   &:focus {
     @include govuk-focused-text;
   }
 }
 
-/// Default link style mixin
+/// Link decoration
+///
+/// Provides the text decoration for links, including thickness and underline
+/// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.
+///
+/// @access public
+@mixin govuk-link-decoration {
+  text-decoration: underline;
+
+  @if ($govuk-new-link-styles) {
+    @if ($govuk-link-underline-thickness) {
+      text-decoration-thickness: $govuk-link-underline-thickness;
+    }
+
+    @if ($govuk-link-underline-offset) {
+      text-underline-offset: $govuk-link-underline-offset;
+    }
+  }
+}
+
+/// Link hover decoration
+///
+/// Provides the text decoration for links in their hover state, for you to use
+/// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the
+/// `govuk-link-common` mixin.
+///
+/// @access public
+
+@mixin govuk-link-hover-decoration {
+  @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
+    text-decoration-thickness: $govuk-link-hover-underline-thickness;
+  }
+}
+
+/// Default link styles
 ///
-/// Provides the default unvisited, visited, hover and active states for links.
+/// Makes links use the default unvisited, visited, hover and active colours.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -66,13 +105,109 @@
   }
 }
 
-/// Muted style link mixin
+/// Error link styles
+///
+/// Makes links use the error colour. The link will darken if it's active or a
+/// user hovers their cursor over it.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-error;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-error {
+  &:link,
+  &:visited {
+    color: $govuk-error-colour;
+  }
+
+  &:hover {
+    color: scale-color($govuk-error-colour, $lightness: -30%);
+  }
+
+  &:active {
+    color: $govuk-error-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s a slightly darker blue when focussed, so
+  // we need to override the text colour for that combination of selectors so
+  // so that unvisited links styled as buttons do not end up with dark blue
+  // text when focussed.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+/// Success link styles
+///
+/// Makes links use the success colour. The link will darken if it's active or a
+/// user hovers their cursor over it.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-success;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-success {
+  &:link,
+  &:visited {
+    color: $govuk-success-colour;
+  }
+
+  &:hover {
+    color: scale-color($govuk-success-colour, $lightness: -30%);
+  }
+
+  &:active {
+    color: $govuk-success-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s a slightly darker blue when focussed, so
+  // we need to override the text colour for that combination of selectors so
+  // so that unvisited links styled as buttons do not end up with dark blue
+  // text when focussed.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+/// Muted link styles
 ///
-/// Used for secondary links on a page - the link will appear in muted colours
-/// regardless of visited state.
+/// Makes links use the secondary text colour. The link will darken if it's
+/// active or a user hovers their cursor over it.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -84,10 +219,13 @@
 
 @mixin govuk-link-style-muted {
   &:link,
-  &:visited,
+  &:visited {
+    color: $govuk-secondary-text-colour;
+  }
+
   &:hover,
   &:active {
-    color: $govuk-secondary-text-colour;
+    color: $govuk-text-colour;
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
@@ -106,13 +244,13 @@
   }
 }
 
-/// Text style link mixin
+/// Text link styles
 ///
-/// Overrides the colour of links to match the text colour. Generally used by
+/// Makes links use the primary text colour, in all states. Use this mixin for
 /// navigation components, such as breadcrumbs or the back link.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -123,10 +261,17 @@
 /// @access public
 
 @mixin govuk-link-style-text {
-  // Override link colour to use text colour
   &:link,
-  &:visited,
-  &:hover,
+  &:visited {
+    @include govuk-text-colour;
+  }
+
+  // Force a colour change on hover to work around a bug in Safari
+  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  &:hover {
+    color: rgba($govuk-text-colour, .99);
+  }
+
   &:active,
   &:focus {
     @include govuk-text-colour;
@@ -142,18 +287,60 @@
   }
 }
 
+/// Inverse link styles
+///
+/// Makes links white, in all states. Use this mixin if you're displaying links
+/// against a dark background.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-inverse;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-inverse {
+  &:link,
+  &:visited {
+    color: govuk-colour("white");
+  }
+
+  // Force a colour change on hover to work around a bug in Safari
+  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  &:hover,
+  &:active {
+    color: rgba(govuk-colour("white"), .99);
+  }
+
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector designed
+  // to make unvisited links a slightly darker blue when focussed, so we need to
+  // override the text colour for that combination of selectors.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
 
-/// No visited state link mixin
+/// Default link styles, without a visited state
 ///
-/// Used in cases where it is not helpful to distinguish between visited and
-/// non-visited links.
+/// Makes links use the default unvisited, hover and active colours, with no
+/// distinct visited state.
 ///
-/// For example, navigation links to pages with dynamic content like admin
-/// dashboards. The content on the page is changing all the time, so the fact
-/// that you’ve visited it before is not important.
+/// Use this mixin when it's not helpful to distinguish between visited and
+/// non-visited links. For example, when you link to pages with
+/// frequently-changing content, such as the dashboard for an admin interface.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -187,20 +374,40 @@
   }
 }
 
-/// Print friendly link mixin
+/// Remove underline from links
 ///
-/// When printing, append the the destination URL to the link text, as long
-/// as the URL starts with either `/`, `http://` or `https://`.
+/// Remove underlines from links unless the link is active or a user hovers
+/// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
+/// because IE8 does not support `:not`.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-default;
+///     @include govuk-link-style-no-underline;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-no-underline {
+  &:not(:hover):not(:active) {
+    text-decoration: none;
+  }
+}
+
+/// Include link destination when printing the page
+///
+/// If the user prints the page, add the destination URL after the link text, if
+/// the URL starts with `/`, `http://` or `https://`.
 ///
 /// @access public
 
 @mixin govuk-link-print-friendly {
   @include govuk-media-query($media-type: print) {
-
     &[href^="/"],
     &[href^="http://"],
     &[href^="https://"] {
-      &::after {
+      &:after {
         content: " (" attr(href) ")";
         font-size: 90%;
 

data/vendor/assets/stylesheets/helpers/_media-queries.scss

@@ -2,8 +2,6 @@
 /// @group helpers/layout
 ////
 
-
-
 // =========================================================
 // Wrangle sass-mq config...
 // =========================================================
@@ -41,8 +39,6 @@ $sass-mq-already-included: false !default;
 
 $sass-mq-already-included: true;
 
-
-
 // =========================================================
 // Helpers
 // =========================================================
@@ -91,5 +87,5 @@ $sass-mq-already-included: true;
 @mixin govuk-media-query($args...) {
   @include mq($args...) {
     @content;
-  };
+  }
 }

data/vendor/assets/stylesheets/helpers/_spacing.scss

@@ -2,6 +2,8 @@
 /// @group helpers/spacing
 ////
 
+// stylelint-disable indentation
+
 /// Single point spacing
 ///
 /// Returns measurement corresponding to the spacing point requested.
@@ -146,7 +148,6 @@
 ///
 /// @access public
 
-
 @mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
   @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
 }

data/vendor/assets/stylesheets/helpers/_typography.scss

@@ -127,7 +127,8 @@
     $font-size-rem: govuk-px-to-rem($font-size);
 
     $line-height: _govuk-line-height(
-      $line-height: if($override-line-height,
+      $line-height: if(
+        $override-line-height,
         $override-line-height,
         map-get($breakpoint-map, "line-height")
       ),
@@ -142,9 +143,9 @@
     $line-height: $line-height if($important, !important, null);
 
     @if $breakpoint == null {
-      font-size: $font-size; // sass-lint:disable no-duplicate-properties
+      font-size: $font-size;
       @if $govuk-typography-use-rem {
-        font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
+        font-size: $font-size-rem;
       }
       line-height: $line-height;
     } @else if $breakpoint == "print" {
@@ -154,9 +155,9 @@
       }
     } @else {
       @include govuk-media-query($from: $breakpoint) {
-        font-size: $font-size; // sass-lint:disable no-duplicate-properties
+        font-size: $font-size;
         @if $govuk-typography-use-rem {
-          font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
+          font-size: $font-size-rem;
         }
         line-height: $line-height;
       }
@@ -184,7 +185,7 @@
       -webkit-font-feature-settings: "tnum" 1;
               font-feature-settings: "tnum" 1;
 
-      @supports(font-variant-numeric: tabular-nums) {
+      @supports (font-variant-numeric: tabular-nums) {
         -webkit-font-feature-settings: normal;
                 font-feature-settings: normal;
         font-variant-numeric: tabular-nums;

data/vendor/assets/stylesheets/objects/_all.scss

@@ -1,3 +1,4 @@
+@import "button-group";
 @import "form-group";
 @import "grid";
 @import "main-wrapper";

data/vendor/assets/stylesheets/objects/_button-group.scss

@@ -0,0 +1,94 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/button-group") {
+  // Button groups can be used to group buttons and links together as a group.
+  //
+  // Within a button group:
+  //
+  // - links are styled to line up visually with the buttons, including being
+  //   centre-aligned on mobile
+  // - spacing between the buttons and links is handled automatically, including
+  //   when they wrap across multiple lines
+  .govuk-button-group {
+    $horizontal-gap: govuk-spacing(3);
+    $vertical-gap: govuk-spacing(3);
+
+    // These need to be kept in sync with the button component's styles
+    $button-padding: govuk-spacing(2);
+    $button-shadow-size: $govuk-border-width-form-element;
+
+    $link-spacing: govuk-spacing(1);
+
+    @include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
+
+    // Flexbox is used to center-align links on mobile, align everything along
+    // the baseline on tablet and above, and to removes extra whitespace that
+    // we'd get between the buttons and links because they're inline-blocks.
+    //
+    // Ideally we'd use `gap` with flexbox rather than having to do it all with
+    // margins, but unfortunately the support isn't there (yet) and @supports
+    // doesn't play nicely with it
+    // (https://github.com/w3c/csswg-drafts/issues/3559)
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+
+    // Give links within the button group the same font-size and line-height
+    // as buttons.
+    //
+    // Because we want the focus state to be tight around the link text, we use
+    // margins where the buttons would use padding.
+    .govuk-link {
+      @include govuk-font($size: 19, $line-height: 19px);
+      display: inline-block;
+      // Prevent links overflowing their container in IE10/11 because of bug
+      // with align-items: center
+      max-width: 100%;
+      margin-top: $link-spacing;
+      margin-bottom: $link-spacing + $vertical-gap;
+      text-align: center;
+    }
+
+    // Reduce the bottom margin to the size of the vertical gap (accommodating
+    // the button shadow) – the 'lost' margin is moved to the button-group.
+    .govuk-button {
+      margin-bottom: $vertical-gap + $button-shadow-size;
+    }
+
+    // On tablet and above, we also introduce a 'column gap' between the
+    // buttons and links in each row and left align links
+    @include govuk-media-query($from: tablet) {
+      // Cancel out the column gap for the last item in each row
+      margin-right: ($horizontal-gap * -1);
+
+      -webkit-box-orient: horizontal;
+
+      -webkit-box-direction: normal;
+
+          -ms-flex-direction: row;
+
+              flex-direction: row;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+      -webkit-box-align: baseline;
+          -ms-flex-align: baseline;
+              align-items: baseline;
+
+      .govuk-button,
+      .govuk-link {
+        margin-right: $horizontal-gap;
+      }
+
+      .govuk-link {
+        text-align: left;
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/objects/_form-group.scss

@@ -1,7 +1,6 @@
 @import "../base";
 
 @include govuk-exports("govuk/objects/form-group") {
-
   .govuk-form-group {
     @include govuk-clearfix;
     @include govuk-responsive-margin(6, "bottom");

data/vendor/assets/stylesheets/objects/_grid.scss

@@ -1,7 +1,6 @@
 @import "../base";
 
 @include govuk-exports("govuk/objects/grid") {
-
   .govuk-grid-row {
     @include govuk-clearfix;
     margin-right: - ($govuk-gutter-half);
@@ -10,7 +9,7 @@
 
   @each $width in map-keys($govuk-grid-widths) {
     .govuk-grid-column-#{$width} {
-      @include govuk-grid-column($width)
+      @include govuk-grid-column($width);
     }
   }
 
@@ -19,7 +18,7 @@
   // them in the outputted CSS
   @each $width in map-keys($govuk-grid-widths) {
     .govuk-grid-column-#{$width}-from-desktop {
-      @include govuk-grid-column($width, $at: desktop)
+      @include govuk-grid-column($width, $at: desktop);
     }
   }
 }

data/vendor/assets/stylesheets/objects/_main-wrapper.scss

@@ -21,7 +21,6 @@
 //   </div>
 // </div>
 
-
 /// @deprecated Replace this mixin with more direct references to the [spacing
 /// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
 @mixin govuk-main-wrapper {

data/vendor/assets/stylesheets/overrides/_display.scss

@@ -4,8 +4,8 @@
 
 @import "../base";
 
+// stylelint-disable declaration-no-important
 @include govuk-exports("govuk/overrides/display") {
-
   .govuk-\!-display-inline {
     display: inline !important;
   }

data/vendor/assets/stylesheets/overrides/_width.scss

@@ -4,6 +4,7 @@
 
 @import "../base";
 
+// stylelint-disable declaration-no-important
 @include govuk-exports("govuk/overrides/width") {
   .govuk-\!-width-full {
     width: 100% !important;

data/vendor/assets/stylesheets/settings/_all.scss

@@ -19,3 +19,5 @@
 @import "typography-font-families";
 @import "typography-font";
 @import "typography-responsive";
+
+@import "links";

data/vendor/assets/stylesheets/settings/_colours-applied.scss

@@ -4,8 +4,6 @@
 
 @import "../helpers/colour";
 
-
-
 // =========================================================
 // Generic
 // =========================================================
@@ -88,6 +86,15 @@ $govuk-focus-text-colour: govuk-colour("black") !default;
 
 $govuk-error-colour: govuk-colour("red") !default;
 
+/// Success colour
+///
+/// Used to highlight success messages and banners
+///
+/// @type Colour
+/// @access public
+
+$govuk-success-colour: govuk-colour("green") !default;
+
 /// Border colour
 ///
 /// Used in for example borders, separators, rules and keylines.
@@ -115,7 +122,6 @@ $govuk-input-border-colour: govuk-colour("black") !default;
 
 $govuk-hover-colour: govuk-colour("mid-grey", $legacy: "grey-3");
 
-
 // =============================================================================
 // Links
 // =============================================================================

data/vendor/assets/stylesheets/settings/_colours-organisations.scss

@@ -70,6 +70,9 @@ $govuk-colours-organisations: (
     colour: #00ad93,
     colour-websafe: #39836e
   ),
+  "foreign-commonwealth-development-office": (
+    colour: #012169
+  ),
   "foreign-commonwealth-office": (
     colour: #003e74,
     colour-websafe: #406e97