govuk_publishing_components 35.11.0 → 35.12.0

data/node_modules/govuk-frontend/govuk/common/govuk-frontend-version.js

@@ -9,7 +9,7 @@
 	 * It doesn't need to be updated manually.
 	 */
 
-	var version = '4.6.0';
+	var version = '4.7.0';
 
 	exports.version = version;
 

data/node_modules/govuk-frontend/govuk/components/_all.scss

@@ -11,11 +11,12 @@
 @import "details/index";
 @import "error-message/index";
 @import "error-summary/index";
+@import "exit-this-page/index";
 @import "fieldset/index";
 @import "file-upload/index";
 @import "footer/index";
-@import "hint/index";
 @import "header/index";
+@import "hint/index";
 @import "input/index";
 @import "inset-text/index";
 @import "label/index";

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

@@ -96,4 +96,12 @@
     bottom: -14px;
     left: 0;
   }
+
+  .govuk-back-link--inverse {
+    @include govuk-link-style-inverse;
+
+    &:before {
+      border-color: currentcolor;
+    }
+  }
 }

data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json

@@ -18,6 +18,15 @@
             "hidden": false,
             "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>"
         },
+        {
+            "name": "with inverted colours",
+            "options": {
+                "classes": "govuk-back-link--inverse",
+                "href": "#"
+            },
+            "hidden": false,
+            "html": "<a href=\"#\" class=\"govuk-back-link govuk-back-link--inverse\">Back</a>"
+        },
         {
             "name": "classes",
             "options": {

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

@@ -144,4 +144,16 @@
       }
     }
   }
+
+  .govuk-breadcrumbs--inverse {
+    color: govuk-colour("white");
+
+    .govuk-breadcrumbs__link {
+      @include govuk-link-style-inverse;
+    }
+
+    .govuk-breadcrumbs__list-item:before {
+      border-color: currentcolor;
+    }
+  }
 }

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json

@@ -115,6 +115,27 @@
             "hidden": false,
             "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n  </ol>\n</div>"
         },
+        {
+            "name": "with inverted colours",
+            "options": {
+                "classes": "govuk-breadcrumbs--inverse",
+                "items": [
+                    {
+                        "text": "Home",
+                        "href": "/"
+                    },
+                    {
+                        "text": "Passports, travel and living abroad",
+                        "href": "/browse/abroad"
+                    },
+                    {
+                        "text": "Travel abroad"
+                    }
+                ]
+            },
+            "hidden": false,
+            "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--inverse\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</div>"
+        },
         {
             "name": "classes",
             "options": {

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

@@ -18,21 +18,27 @@ $govuk-button-text-colour: govuk-colour("white") !default;
 
 @include govuk-exports("govuk/component/button") {
   $govuk-button-colour: $govuk-button-background-colour;
+  $govuk-button-text-colour: $govuk-button-text-colour;
   $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
-  $govuk-button-text-colour: $govuk-button-text-colour;
 
   // Secondary button variables
   $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $govuk-secondary-button-text-colour: govuk-colour("black");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
-  $govuk-secondary-button-text-colour: govuk-colour("black");
 
   // Warning button variables
   $govuk-warning-button-colour: govuk-colour("red");
+  $govuk-warning-button-text-colour: govuk-colour("white");
   $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
   $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
-  $govuk-warning-button-text-colour: govuk-colour("white");
+
+  // Inverse button variables
+  $govuk-inverse-button-colour: govuk-colour("white");
+  $govuk-inverse-button-text-colour: govuk-colour("blue");
+  $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
+  $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);
 
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
@@ -251,6 +257,38 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     }
   }
 
+  .govuk-button--inverse {
+    background-color: $govuk-inverse-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-inverse-button-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 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-inverse-button-text-colour;
+      }
+    }
+
+    &:hover {
+      background-color: $govuk-inverse-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-inverse-button-colour;
+      }
+    }
+  }
+
   .govuk-button--start {
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);

data/node_modules/govuk-frontend/govuk/components/button/fixtures.json

@@ -179,6 +179,50 @@
             "hidden": false,
             "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n  Warning button\n</a>"
         },
+        {
+            "name": "Inverse",
+            "options": {
+                "name": "Inverse",
+                "text": "Inverse button",
+                "classes": "govuk-button--inverse"
+            },
+            "hidden": false,
+            "html": "<button name=\"Inverse\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n  Inverse button\n</button>"
+        },
+        {
+            "name": "Inverse disabled",
+            "options": {
+                "name": "Inverse",
+                "text": "Inverse button disabled",
+                "classes": "govuk-button--inverse",
+                "disabled": true
+            },
+            "hidden": false,
+            "html": "<button name=\"Inverse\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--inverse govuk-button--disabled\" data-module=\"govuk-button\">\n  Inverse button disabled\n</button>"
+        },
+        {
+            "name": "Inverse link",
+            "options": {
+                "name": "Inverse",
+                "text": "Inverse button",
+                "href": "/",
+                "classes": "govuk-button--inverse"
+            },
+            "hidden": false,
+            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n  Inverse button\n</a>"
+        },
+        {
+            "name": "Inverse start button",
+            "options": {
+                "name": "Inverse",
+                "text": "Inverse start button",
+                "href": "/",
+                "classes": "govuk-button--inverse",
+                "isStartButton": true
+            },
+            "hidden": false,
+            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--inverse govuk-button--start\" data-module=\"govuk-button\">\n  Inverse start button\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg></a>"
+        },
         {
             "name": "attributes",
             "options": {

data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json

@@ -116,15 +116,16 @@
             },
             {
                 "name": "conditional",
-                "type": "boolean",
-                "required": false,
-                "description": "If `true`, content provided will be revealed when the item is checked."
-            },
-            {
-                "name": "conditional.html",
-                "type": "string",
+                "type": "object",
                 "required": false,
-                "description": "Provide content for the conditional reveal."
+                "description": "Provide additional content to reveal when the checkbox is checked.",
+                "params": [
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "description": "The HTML to reveal when the checkbox is checked"
+                    }
+                ]
             },
             {
                 "name": "behaviour",

data/node_modules/govuk-frontend/govuk/components/exit-this-page/README.md

@@ -0,0 +1,15 @@
+# Exit this page
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the exit this page component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/exit-this-page).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/exit-this-page/#options-exit-this-page-example) for details.

data/node_modules/govuk-frontend/govuk/components/exit-this-page/_exit-this-page.scss

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

data/node_modules/govuk-frontend/govuk/components/exit-this-page/_index.scss

@@ -0,0 +1,97 @@
+@import "../button/index";
+
+@include govuk-exports("govuk/component/exit-this-page") {
+  $indicator-size: .75em;
+
+  .govuk-exit-this-page {
+    @include govuk-responsive-margin(8, "bottom");
+    position: -webkit-sticky;
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    @include govuk-media-query($from: tablet) {
+      display: inline-block;
+      right: 0;
+      left: auto;
+      width: auto;
+      float: right;
+    }
+  }
+
+  .govuk-exit-this-page__button {
+    margin-bottom: 0;
+  }
+
+  .govuk-exit-this-page__indicator {
+    @include govuk-responsive-padding(2);
+    display: none;
+    padding-bottom: 0;
+    color: inherit;
+    line-height: 0; // removes extra negative space below the indicators
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .govuk-exit-this-page__indicator--visible {
+    display: block;
+  }
+
+  .govuk-exit-this-page__indicator-light {
+    box-sizing: border-box;
+    display: inline-block;
+    width: $indicator-size;
+    height: $indicator-size;
+    margin: 0 .125em;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+
+    @include _govuk-not-ie8 {
+      border-color: currentcolor;
+    }
+
+    @include _govuk-if-ie8 {
+      border-color: govuk-colour("white");
+    }
+  }
+
+  .govuk-exit-this-page__indicator-light--on {
+    border-width: $indicator-size / 2;
+  }
+
+  @media only print {
+    .govuk-exit-this-page {
+      display: none;
+    }
+  }
+
+  .govuk-exit-this-page-overlay {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: govuk-colour("white");
+  }
+
+  // This class is added to the body when the Exit This Page button is activated
+  // in addition to the overlay to both block the entire screen and hide everything
+  // underneath it.
+  //
+  // We do this to ensure that users don't risk interacting with the page underneath
+  // the overlay between activating the button and navigating to the next page.
+  .govuk-exit-this-page-hide-content {
+    // stylelint-disable declaration-no-important
+    * {
+      display: none !important;
+    }
+
+    .govuk-exit-this-page-overlay {
+      display: block !important;
+    }
+  }
+}