govuk_tech_docs 3.2.1 → 3.3.0

data/node_modules/govuk-frontend/govuk/components/pagination/_index.scss

@@ -0,0 +1,247 @@
+@include govuk-exports("govuk/component/pagination") {
+  // Flexbox enhancement for small screen visual design
+  // Falls back to a float: left layout on non-flex browsers
+  .govuk-pagination {
+    @include govuk-responsive-margin(6, "bottom");
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+        flex-direction: column;
+    -ms-flex-align: center;
+        align-items: center;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+
+    @include govuk-media-query($from: tablet) {
+      -ms-flex-direction: row;
+          flex-direction: row;
+      -ms-flex-align: start;
+          align-items: flex-start;
+    }
+  }
+
+  .govuk-pagination__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .govuk-pagination__item,
+  .govuk-pagination__next,
+  .govuk-pagination__prev {
+    @include govuk-font(19);
+    box-sizing: border-box;
+    position: relative;
+    min-width: 45px;
+    min-height: 45px;
+    padding: govuk-spacing(2) govuk-spacing(3);
+    float: left; // Float is ignored if flex is active for prev/next links
+
+    &:hover {
+      background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    }
+  }
+
+  .govuk-pagination__item {
+    // Hide items on small screens except the prev/next items,
+    // non-link items and the first and last items
+    display: none;
+
+    // Center align pagination links in their parent list item so that they
+    // visually sit in the middle of their touch area
+    text-align: center;
+
+    @include govuk-media-query($from: tablet) {
+      display: block;
+    }
+  }
+
+  .govuk-pagination__prev,
+  .govuk-pagination__next {
+    @include govuk-typography-weight-bold;
+
+    // Use flex to get around a whitespace issue between the arrow svg and the link text
+    // without having to rely on whitespace control from backend tooling
+    .govuk-pagination__link {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+          align-items: center;
+    }
+  }
+
+  .govuk-pagination__prev {
+    padding-left: 0;
+  }
+
+  .govuk-pagination__next {
+    padding-right: 0;
+  }
+
+  // Only show first, last and non-link items on mobile
+  .govuk-pagination__item--current,
+  .govuk-pagination__item--ellipses,
+  .govuk-pagination__item:first-child,
+  .govuk-pagination__item:last-child {
+    display: block;
+  }
+
+  .govuk-pagination__item--current {
+    @include govuk-typography-weight-bold;
+    outline: 1px solid transparent;
+    background-color: $govuk-link-colour;
+
+    &:hover {
+      background-color: $govuk-link-colour;
+    }
+
+    .govuk-pagination__link {
+      @include govuk-link-style-inverse;
+    }
+  }
+
+  .govuk-pagination__item--ellipses {
+    @include govuk-typography-weight-bold;
+    color: $govuk-secondary-text-colour;
+
+    // Remove hover state for ellipsis items as they don't have links within them
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .govuk-pagination__link {
+    display: block;
+    min-width: govuk-spacing(3);
+
+    // Increase the touch area for the link to the parent element.
+    @media screen {
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    // Add link hover decoration to prev/next text if no label present on prev/next only mode
+    // We do this so that we have a hover state in all possible instances
+    &:hover,
+    &:active {
+      .govuk-pagination__link-title--decorated {
+        @include govuk-link-decoration;
+      }
+
+      .govuk-pagination__link-label,
+      .govuk-pagination__link-title--decorated {
+        @include govuk-link-hover-decoration;
+      }
+    }
+
+    &:focus {
+      .govuk-pagination__icon {
+        color: $govuk-focus-text-colour;
+      }
+
+      .govuk-pagination__link-label {
+        text-decoration: none;
+      }
+
+      .govuk-pagination__link-title--decorated {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .govuk-pagination__link-label {
+    @include govuk-font($size: 19, $weight: "regular");
+    @include govuk-link-decoration;
+    display: inline-block;
+    padding-left: govuk-spacing(6);
+  }
+
+  .govuk-pagination__icon {
+    // Set size using rems to make the icon scale with text if user resizes text in their browser
+    width: govuk-px-to-rem(15px);
+    height: govuk-px-to-rem(13px);
+    color: $govuk-secondary-text-colour;
+    fill: currentcolor;
+    forced-color-adjust: auto;
+  }
+
+  .govuk-pagination__icon--prev {
+    margin-right: govuk-spacing(3);
+  }
+
+  .govuk-pagination__icon--next {
+    margin-left: govuk-spacing(3);
+  }
+
+  // Block mode - position previous and next links above and below numbers
+  .govuk-pagination--block {
+    display: block;
+
+    .govuk-pagination__item {
+      padding: govuk-spacing(3);
+      float: none;
+    }
+
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+      padding-left: 0;
+      float: none;
+    }
+
+    .govuk-pagination__next {
+      padding-right: govuk-spacing(3);
+
+      .govuk-pagination__icon {
+        margin-left: 0;
+      }
+    }
+
+    // Only apply a border between prev and next if both are present
+    .govuk-pagination__prev + .govuk-pagination__next {
+      border-top: 1px solid $govuk-border-colour;
+    }
+
+    // Reset both these elements to their inline default, both to ensure that the focus state
+    // for block mode "shrink wraps" text as expected
+    .govuk-pagination__link,
+    .govuk-pagination__link-title {
+      display: inline;
+    }
+
+    // Set the after pseudo element to a block which makes the title visually display
+    // as block level whilst programmatically being inline
+    // We do this to get around an NVDA quirk where adjacent block level
+    // elements are always read out separately
+    .govuk-pagination__link-title:after {
+      content: "";
+      display: block;
+    }
+
+    .govuk-pagination__link {
+      text-align: left;
+
+      &:focus {
+        // apply focus styling to the label within the link as if it were being focused
+        // to get around a display issue with a focusable inline element containing a mixture
+        // of inline and inline-block level elements
+        .govuk-pagination__link-label {
+          @include govuk-focused-text;
+        }
+      }
+
+      &:not(:focus) {
+        text-decoration: none;
+      }
+    }
+
+    .govuk-pagination__icon {
+      margin-right: govuk-spacing(2);
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/pagination/_pagination.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/panel/_index.scss

@@ -33,7 +33,7 @@
     background: govuk-colour("green", $legacy: "turquoise");
 
     @include govuk-media-query($media-type: print) {
-      border-color: currentColor;
+      border-color: currentcolor;
       color: $govuk-print-text-colour;
       background: none;
     }

data/node_modules/govuk-frontend/govuk/components/radios/_index.scss

@@ -87,7 +87,7 @@
     width: $govuk-radios-size;
     height: $govuk-radios-size;
 
-    border: $govuk-border-width-form-element solid currentColor;
+    border: $govuk-border-width-form-element solid currentcolor;
     border-radius: 50%;
     background: transparent;
   }
@@ -106,10 +106,10 @@
     width: 0;
     height: 0;
 
-    border: govuk-spacing(2) solid currentColor;
+    border: govuk-spacing(2) solid currentcolor;
     border-radius: 50%;
     opacity: 0;
-    background: currentColor;
+    background: currentcolor;
   }
 
   .govuk-radios__hint {
@@ -149,7 +149,8 @@
     cursor: default;
   }
 
-  .govuk-radios__input:disabled + .govuk-radios__label {
+  .govuk-radios__input:disabled + .govuk-radios__label,
+  .govuk-radios__input:disabled ~ .govuk-hint {
     opacity: .5;
   }
 
@@ -167,14 +168,6 @@
         clear: none;
       }
     }
-
-    // Prevent inline modifier being used with conditional reveals
-    &.govuk-radios--conditional {
-      .govuk-radios__item {
-        margin-right: 0;
-        float: none;
-      }
-    }
   }
 
   // =========================================================

data/node_modules/govuk-frontend/govuk/components/radios/radios.js

@@ -1014,10 +1014,24 @@ if (detect) return
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+/**
+ * Common helpers which do not require polyfill.
+ *
+ * IMPORTANT: If a helper require a polyfill, please isolate it in its own module
+ * so that the polyfill can be properly tree-shaken and does not burden
+ * the components that do not need that helper
+ *
+ * @module common/index
+ */
+
 /**
  * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
  * This seems to fail in IE8, requires more investigation.
  * See: https://github.com/imagitama/nodelist-foreach-polyfill
+ *
+ * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+ * @param {nodeListIterator} callback - Callback function to run for each node
+ * @returns {undefined}
  */
 function nodeListForEach (nodes, callback) {
   if (window.NodeList.prototype.forEach) {
@@ -1028,6 +1042,20 @@ function nodeListForEach (nodes, callback) {
   }
 }
 
+/**
+ * @callback nodeListIterator
+ * @param {Element} value - The current node being iterated on
+ * @param {number} index - The current index in the iteration
+ * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+ * @returns {undefined}
+ */
+
+/**
+ * Radios component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for radios
+ */
 function Radios ($module) {
   this.$module = $module;
   this.$inputs = $module.querySelectorAll('input[type="radio"]');
@@ -1098,7 +1126,7 @@ Radios.prototype.syncAllConditionalReveals = function () {
  * Synchronise the visibility of the conditional reveal, and its accessible
  * state, with the input's checked state.
  *
- * @param {HTMLInputElement} $input Radio input
+ * @param {HTMLInputElement} $input - Radio input
  */
 Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
   var $target = document.getElementById($input.getAttribute('aria-controls'));
@@ -1119,7 +1147,7 @@ Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
  * with the same name (because checking one radio could have un-checked a radio
  * in another $module)
  *
- * @param {MouseEvent} event Click event
+ * @param {MouseEvent} event - Click event
  */
 Radios.prototype.handleClick = function (event) {
   var $clickedInput = event.target;

data/node_modules/govuk-frontend/govuk/components/select/_index.scss

@@ -7,6 +7,12 @@
     @include govuk-font($size: 19, $line-height: 1.25);
 
     box-sizing: border-box; // should this be global?
+
+    // This min-width was chosen because:
+    // - it makes the Select noticeably wider than it is taller (which is what users expect)
+    // - 11.5em matches the 'length-10' variant of the input component
+    // - it fits comfortably on screens as narrow as 240px wide
+    min-width: 11.5em;
     max-width: 100%;
     height: 40px;
     @if $govuk-typography-use-rem {
@@ -15,6 +21,11 @@
     padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (#2435)
+    color: $govuk-text-colour;
+    background-color: govuk-colour("white");
+
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Ensure outline appears outside of the element

data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss

@@ -11,9 +11,7 @@
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (padding: unquote("max(calc(0px))")) {
-      $padding-safe-area-right: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
       $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
-      $padding-safe-area-left: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
       $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
 
       // Use max() to pick largest padding, default or with safe area
@@ -28,7 +26,7 @@
       background-color: $govuk-focus-colour;
 
       // Undo unwanted changes when global styles are enabled
-      @if ($govuk-global-styles) {
+      @if $govuk-global-styles {
         box-shadow: none;
       }
     }

data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js

@@ -1014,6 +1014,12 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+/**
+ * Skip link component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for skip link
+ */
 function SkipLink ($module) {
   this.$module = $module;
   this.$linkedElement = null;
@@ -1039,10 +1045,10 @@ SkipLink.prototype.init = function () {
 };
 
 /**
-* Get linked element
-*
-* @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
-*/
+ * Get linked element
+ *
+ * @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
+ */
 SkipLink.prototype.getLinkedElement = function () {
   var linkedElementId = this.getFragmentFromUrl();
 

data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss

@@ -23,11 +23,21 @@
     }
   }
 
+  // Remove right padding from the last column in the row
+  .govuk-summary-list__row:not(.govuk-summary-list__row--no-actions) > :last-child {
+    padding-right: 0;
+  }
+
   // Provide an empty 'cell' for rows that don't have actions – otherwise the
   // bottom border is not drawn for that part of the row in some browsers.
-  .govuk-summary-list__row--no-actions:after {
-    content: "";
-    display: table-cell;
+  .govuk-summary-list__row--no-actions {
+    @include govuk-media-query($from: tablet) {
+      &:after {
+        content: "";
+        display: table-cell;
+        width: 20%;
+      }
+    }
   }
 
   .govuk-summary-list__key,
@@ -47,7 +57,7 @@
     margin-bottom: govuk-spacing(3);
     @include govuk-media-query($from: tablet) {
       width: 20%;
-      padding-right: 0;
+      padding-right: 0; // Needed for IE8
       text-align: right;
     }
   }
@@ -88,21 +98,43 @@
   }
 
   .govuk-summary-list__actions-list-item {
-    display: inline;
-    margin-right: govuk-spacing(2);
-    padding-right: govuk-spacing(2);
+    display: inline-block;
   }
 
   // In older browsers such as IE8, :last-child is not available,
   // so only show the border divider where it is available.
-  .govuk-summary-list__actions-list-item:not(:last-child) {
-    border-right: 1px solid $govuk-border-colour;
+  @include govuk-media-query($until: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-right: govuk-spacing(2);
+      padding-right: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:last-child) {
+      border-right: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:last-child {
+      margin-right: 0;
+      padding-right: 0;
+      border: 0;
+    }
   }
 
-  .govuk-summary-list__actions-list-item:last-child {
-    margin-right: 0;
-    padding-right: 0;
-    border: 0;
+  @include govuk-media-query($from: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-left: govuk-spacing(2);
+      padding-left: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:first-child) {
+      border-left: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:first-child {
+      margin-left: 0;
+      padding-left: 0;
+      border: 0;
+    }
   }
 
   // No border on entire summary list

data/node_modules/govuk-frontend/govuk/components/table/_index.scss

@@ -21,7 +21,7 @@
     vertical-align: top;
     // GOV.UK Elements sets the font-size and line-height for all headers and cells
     // in tables.
-    @include govuk-compatibility(govuk_elements) {
+    @include _govuk-compatibility(govuk_elements) {
       font-size: inherit;
       line-height: inherit;
     }

data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js

@@ -1054,10 +1054,24 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+/**
+ * Common helpers which do not require polyfill.
+ *
+ * IMPORTANT: If a helper require a polyfill, please isolate it in its own module
+ * so that the polyfill can be properly tree-shaken and does not burden
+ * the components that do not need that helper
+ *
+ * @module common/index
+ */
+
 /**
  * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
  * This seems to fail in IE8, requires more investigation.
  * See: https://github.com/imagitama/nodelist-foreach-polyfill
+ *
+ * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+ * @param {nodeListIterator} callback - Callback function to run for each node
+ * @returns {undefined}
  */
 function nodeListForEach (nodes, callback) {
   if (window.NodeList.prototype.forEach) {
@@ -1068,6 +1082,20 @@ function nodeListForEach (nodes, callback) {
   }
 }
 
+/**
+ * @callback nodeListIterator
+ * @param {Element} value - The current node being iterated on
+ * @param {number} index - The current index in the iteration
+ * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+ * @returns {undefined}
+ */
+
+/**
+ * Tabs component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for tabs
+ */
 function Tabs ($module) {
   this.$module = $module;
   this.$tabs = $module.querySelectorAll('.govuk-tabs__tab');

data/node_modules/govuk-frontend/govuk/core/_section-break.scss

@@ -6,7 +6,7 @@
 
     // fix double-width section break and forced visible section break
     // when combined with styles from alphagov/elements
-    @include govuk-compatibility(govuk_elements) {
+    @include _govuk-compatibility(govuk_elements) {
       height: 0;
     }
   }

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

@@ -29,8 +29,8 @@
 /// @access public
 
 @function govuk-colour($colour, $legacy: false) {
-  @if ($govuk-use-legacy-palette and $legacy) {
-    @if (type-of($legacy) == "color") {
+  @if $govuk-use-legacy-palette and $legacy {
+    @if type-of($legacy) == "color" {
       @return $legacy;
     }
     $colour: $legacy;
@@ -65,7 +65,7 @@
 
   $org-colour: map-get($govuk-colours-organisations, $organisation);
 
-  @if ($websafe and map-has-key($org-colour, colour-websafe)) {
+  @if $websafe and map-has-key($org-colour, colour-websafe) {
     @return map-get($org-colour, colour-websafe);
   } @else {
     @return map-get($org-colour, colour);
@@ -75,7 +75,7 @@
 /// Make a colour darker by mixing it with black
 ///
 /// @param {Colour} $colour - colour to shade
-/// @param {Number} $percentage - percentage of `$colour` in returned colour
+/// @param {Number} $percentage - percentage of black to mix with $colour
 /// @return {Colour}
 /// @access public
 
@@ -86,7 +86,7 @@
 /// Make a colour lighter by mixing it with white
 ///
 /// @param {Colour} $colour - colour to tint
-/// @param {Number} $percentage - percentage of `$colour` in returned colour
+/// @param {Number} $percentage - percentage of white to mix with $colour
 /// @return {Colour}
 /// @access public
 

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

@@ -25,4 +25,9 @@
   // When link is focussed, hide the default underline since the
   // box shadow adds the "underline"
   text-decoration: none;
+
+  // When a focused box is broken by e.g. a line break, ensure that the
+  // box-shadow is applied to each fragment independently.
+  -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
 }