govuk_publishing_components 17.21.0 → 18.0.0

data/node_modules/govuk-frontend/govuk/components/tag/_tag.scss

@@ -0,0 +1,44 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/tag") {
+  .govuk-tag {
+
+    display: inline-block;
+
+    // When a user customises their colours often the background is removed,
+    // by adding a outline we ensure that the tag component still keeps it's meaning.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+    letter-spacing: 1px;
+
+    text-decoration: none;
+    text-transform: uppercase;
+
+    @if $govuk-use-legacy-font {
+      // Since New Transport sits slightly higher than other common fonts.
+      // We use intentionally uneven padding to make it balanced, this can be
+      // removed using the version of the font that has a more common vertical spacing.
+      @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
+      padding-top: 4px;
+      padding-right: 8px;
+      padding-bottom: 1px;
+      padding-left: 8px;
+    } @else {
+      @include govuk-font($size: 16, $weight: bold, $line-height: 1);
+      padding-top: 5px;
+      padding-right: 8px;
+      padding-bottom: 4px;
+      padding-left: 8px;
+    }
+  }
+
+  .govuk-tag--inactive {
+    background-color: govuk-colour("dark-grey", $legacy: "grey-1");
+  }
+}

data/node_modules/govuk-frontend/govuk/components/textarea/_textarea.scss

@@ -0,0 +1,55 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../hint/hint";
+@import "../label/label";
+
+@include govuk-exports("govuk/component/textarea") {
+  .govuk-textarea {
+    @include govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box; // should this be global?
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: govuk-spacing(1);
+
+    resize: vertical;
+
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      // Double the border by adding its width again. Use `box-shadow` to do
+      // this instead of changing `border-width` (which changes element size) and
+      // since `outline` is already used for the yellow focus state.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+      @include govuk-if-ie8 {
+        // IE8 doesn't support `box-shadow` so double the border with
+        // `border-width`.
+        border-width: $govuk-border-width-form-element * 2;
+      }
+    }
+  }
+
+  .govuk-textarea--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+      // Remove `box-shadow` inherited from `:focus` as `textarea--error`
+      // already has the thicker border.
+      box-shadow: none;
+    }
+
+  }
+}

data/node_modules/govuk-frontend/{components → govuk/components}/textarea/macro-options.json

@@ -23,6 +23,12 @@
         "required": false,
         "description": "Optional initial value of the textarea."
     },
+    {
+        "name": "describedBy",
+        "type": "string",
+        "required": false,
+        "description": "One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users."
+    },
     {
         "name": "label",
         "type": "object",

data/node_modules/govuk-frontend/{components → govuk/components}/textarea/template.njk

@@ -4,7 +4,7 @@
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
-{% set describedBy = "" %}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,

data/node_modules/govuk-frontend/{helpers → govuk/helpers}/_all.scss

@@ -1,7 +1,7 @@
 @import "clearfix";
 @import "colour";
 @import "device-pixels";
-@import "focusable";
+@import "focused";
 @import "font-faces";
 @import "grid";
 @import "links";

data/node_modules/govuk-frontend/{helpers → govuk/helpers}/_colour.scss

@@ -1,3 +1,4 @@
+@import "../settings/compatibility";
 @import "../settings/colours-palette";
 @import "../settings/colours-organisations";
 
@@ -9,11 +10,32 @@
 ///
 /// @param {String} $colour - Name of colour from the colour palette
 ///   (`$govuk-colours`)
+/// @param {String} $legacy - Either the name of colour from the legacy palette
+///   or a colour literal, to return instead when in 'legacy mode' - matching
+///   the palette from GOV.UK Template, Elements or Frontend Toolkit
 /// @return {Colour} Representation of named colour
+///
+/// @example scss - Using legacy colours from the palette
+///  .foo {
+///    background-colour: govuk-colour("mid-grey", $legacy: "grey-2");
+///  }
+///
+/// @example scss - Using legacy colour literals
+///  .foo {
+///    background-colour: govuk-colour("green", $legacy: #BADA55);
+///  }
+///
 /// @throw if `$colour` is not a colour from the colour palette
 /// @access public
 
-@function govuk-colour($colour) {
+@function govuk-colour($colour, $legacy: false) {
+  @if ($govuk-use-legacy-palette and $legacy) {
+    @if (type-of($legacy) == "color") {
+      @return $legacy;
+    }
+    $colour: $legacy;
+  }
+
   $colour: quote($colour);
 
   @if not map-has-key($govuk-colours, $colour) {

data/node_modules/govuk-frontend/govuk/helpers/_focused.scss

@@ -0,0 +1,28 @@
+////
+/// @group helpers
+////
+
+/// Focused text
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Used for interactive text-based elements.
+///
+/// @access public
+
+@mixin govuk-focused-text {
+  // When colours are overridden, for example when users have a dark mode,
+  // backgrounds and box-shadows disappear, so we need to ensure there's a
+  // transparent outline which will be set to a visible colour.
+
+  // Since Internet Explorer 8 does not support box-shadow, we want to force the
+  // user-agent outlines
+  @include govuk-not-ie8 {
+    outline: $govuk-focus-width solid transparent;
+  }
+  color: $govuk-focus-text-colour;
+  background-color: $govuk-focus-colour;
+  box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+  // When link is focussed, hide the default underline since the
+  // box shadow adds the "underline"
+  text-decoration: none;
+}

data/node_modules/govuk-frontend/govuk/helpers/_font-faces.scss

@@ -0,0 +1,41 @@
+////
+/// @group helpers
+////
+
+// Disables linting for this file only
+// sass-lint:disable no-css-comments, no-duplicate-properties, property-sort-order, indentation
+
+@import "../tools/exports";
+
+/// Font Face - GDS Transport
+///
+/// Outputs the font-face declaration for GDS Transport at the root of the CSS document
+/// the first time it is called.
+///
+/// @access private
+
+@mixin _govuk-font-face-gds-transport {
+  @include govuk-exports("govuk/helpers/font-faces") {
+    @at-root {
+      /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
+
+      @font-face {
+        font-family: "GDS Transport";
+        src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
+             govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
+        font-weight: normal;
+        font-style: normal;
+        font-display: fallback;
+      }
+
+      @font-face {
+        font-family: "GDS Transport";
+        src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
+             govuk-font-url("bold-affa96571d-v2.woff") format("woff");
+        font-weight: bold;
+        font-style: normal;
+        font-display: fallback;
+      }
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/helpers/_grid.scss

@@ -0,0 +1,60 @@
+////
+/// @group helpers
+////
+
+/// Grid width percentage
+///
+/// @param {String} $key - Name of grid width (e.g. two-thirds)
+/// @return {Number} Percentage width
+/// @throw if `$key` is not a valid grid width
+/// @access public
+
+@function govuk-grid-width($key) {
+  @if map-has-key($govuk-grid-widths, $key) {
+    @return map-get($govuk-grid-widths, $key);
+  }
+
+  @error "Unknown grid width `#{$key}`";
+}
+
+/// Generate grid column styles
+///
+/// Creates a grid column with standard gutter between the columns.
+///
+/// Grid widths are defined in the `$govuk-grid-widths` map.
+///
+/// By default the column width changes from 100% to specified width at the
+/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
+///
+/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
+/// @param {String} $float [left] left | right
+/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+///
+/// @example scss - Default
+///   .govuk-grid-column-two-thirds {
+///     @include govuk-grid-column(two-thirds)
+///   }
+///
+/// @example scss - Customising the breakpoint where width percentage is applied
+///   .govuk-grid-column-one-half-at-desktop {
+///     @include govuk-grid-column(one-half, $at: desktop);
+///   }
+///
+/// @example scss - Customising the float direction
+///   .govuk-grid-column-one-half-right {
+///     @include govuk-grid-column(two-thirds, $float: right);
+///
+/// @access public
+
+@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {
+  box-sizing: border-box;
+  @if $at != desktop {
+    width: 100%;
+  }
+  padding: 0 $govuk-gutter-half;
+  @include govuk-media-query($from: $at) {
+    width: govuk-grid-width($width);
+    float: $float;
+  }
+}

data/node_modules/govuk-frontend/{helpers → govuk/helpers}/_links.scss

@@ -10,7 +10,10 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
-  @include govuk-focusable-fill;
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 /// Default link style mixin
@@ -50,6 +53,17 @@
   &: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 style link mixin

data/node_modules/govuk-frontend/{helpers → govuk/helpers}/_typography.scss

@@ -17,10 +17,14 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  // If the user is using the default NTA font we need to include the font-face declarations.
-  // We do not need to include the NTA font-face declarations if alphagov/govuk_template is being used since they will already be included.
+  // If the user is using the default GDS Transport font we need to include
+  // the font-face declarations.
+  //
+  // We do not need to include the GDS Transport font-face declarations if
+  // alphagov/govuk_template is being used since nta will already be included by
+  // default.
   @if ($govuk-include-default-font-face) {
-    @include _govuk-font-face-nta;
+    @include _govuk-font-face-gds-transport;
   }
 
   @include govuk-media-query($media-type: print) {
@@ -71,6 +75,7 @@
 /// @return {Number} The line height as either a relative value or unmodified
 ///
 /// @access private
+
 @function _govuk-line-height($line-height, $font-size) {
   @if not unitless($line-height) and unit($line-height) == unit($font-size) {
     $line-height: $line-height / $font-size;
@@ -142,7 +147,7 @@
         font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
       }
       line-height: $line-height;
-    } @elseif $breakpoint == "print" {
+    } @else if $breakpoint == "print" {
       @include govuk-media-query($media-type: print) {
         font-size: $font-size;
         line-height: $line-height;
@@ -171,7 +176,20 @@
 
 @mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
   @if $tabular {
-    @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+    // if govuk-font-family-tabular is set use $govuk-font-family-tabular
+    @if $govuk-font-family-tabular {
+      @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+    } @else {
+      @include govuk-typography-common;
+      -webkit-font-feature-settings: "tnum" 1;
+              font-feature-settings: "tnum" 1;
+
+      @supports(font-variant-numeric: tabular-nums) {
+        -webkit-font-feature-settings: normal;
+                font-feature-settings: normal;
+        font-variant-numeric: tabular-nums;
+      }
+    }
   } @else {
     @include govuk-typography-common;
   }