katalyst-govuk-formbuilder 1.17.1 → 1.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f533b02ace5d03ada9bc15c4948ef6e0beea18ab3c8220fb477764d1a10ef9d
-  data.tar.gz: db67628ba4fc937998a6e6578a90e29623e648eb18f32df4d96308559c31f43c
+  metadata.gz: b21416c3b2f36907d08ea36d0ba31104c2b47475d03541ce2af406d398f09c7c
+  data.tar.gz: 950078f71d4de5c2fa36cf2f487b2e8aceee639d79dbebd7a64f276976fa1c08
 SHA512:
-  metadata.gz: a1030240f63d0c1c00b4380f6e866830d630c476f88832b20cebf4a82c9bcfd240a2ecf8c857d29d7a17f3ac36233d24acff7190426910fb10e0cd91b5e75abd
-  data.tar.gz: f0166f1c7f2ce2c447a24989ad654abedcb6acc23ecc3d58519e55a9765bbda5b8393663c9ec6dba3e09f1b47b70165afc82b23382de1d3d01d3c3b091460ccd
+  metadata.gz: 3fb032aed594b3b8e8e8f8e512b55b5d1ab14f0aa4e0555cbbcce107010eae98327bfde224ed3d94d477c7708d45667025a78ed33c76d2521f131cc529d3f679
+  data.tar.gz: a9cb7a049ca07325e72df9bccca2c1caedd99c85831182c331defebb15f99c905876b1d358ccad841bb0f8eb7093e56b3198515768c0af89e4c099025a6d2c13

data/app/assets/builds/katalyst/govuk/formbuilder.css

@@ -43,10 +43,11 @@
 
 
 
+
 
 
 :root {
-  --govuk-frontend-version: "5.9.0";
+  --govuk-frontend-version: "5.10.0";
   --govuk-frontend-breakpoint-mobile: 20rem;
   --govuk-frontend-breakpoint-tablet: 40.0625rem;
   --govuk-frontend-breakpoint-desktop: 48.0625rem;
@@ -809,6 +810,7 @@
 
 
 
+
 
 
 .govuk-button-group {
@@ -916,6 +918,7 @@
 
 
 
+
 
 
 .govuk-form-group {
@@ -989,6 +992,7 @@
 
 
 
+
 
 
 .govuk-grid-row {
@@ -1184,6 +1188,7 @@
 
 
 
+
 
 
 .govuk-main-wrapper {
@@ -1254,6 +1259,7 @@
 
 
 
+
 
 
 .govuk-template {
@@ -1262,6 +1268,10 @@
   -moz-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
+.govuk-template--rebranded {
+  background-color: #f4f8fb;
+}
+
 @supports (position: -webkit-sticky) or (position: sticky) {
   .govuk-template {
     scroll-padding-top: 60px;
@@ -1326,6 +1336,7 @@
 
 
 
+
 
 
 .govuk-width-container {
@@ -2064,6 +2075,7 @@
 
 
 
+
 .govuk-date-input {
   font-size: 0;
 }

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss

@@ -1,3 +1,5 @@
+@import "../button/index";
+
 @include govuk-exports("govuk/component/cookie-banner") {
   // This needs to be kept in sync with the header component's styles
   $border-bottom-width: govuk-spacing(2);
@@ -11,7 +13,11 @@
     // changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    background-color: $govuk-canvas-background-colour;
+    @include _govuk-rebrand(
+      "background-color",
+      $govuk-template-background-colour,
+      $_govuk-rebrand-template-background-colour
+    );
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute

data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss

@@ -2,6 +2,7 @@
 @import "../input/index";
 @import "../hint/index";
 @import "../label/index";
+@import "../fieldset/index";
 
 @include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {

data/node_modules/govuk-frontend/dist/govuk/components/footer/_index.scss

@@ -1,7 +1,7 @@
 @include govuk-exports("govuk/component/footer") {
-  $govuk-footer-background: $govuk-canvas-background-colour;
-  $govuk-footer-border: $govuk-border-colour;
+  $govuk-footer-background: $govuk-template-background-colour;
   $govuk-footer-text: $govuk-text-colour;
+  $govuk-footer-content-border: $govuk-border-colour;
 
   // Royal Arms image dimensions
   $govuk-footer-crest-image-width: 125px;
@@ -12,9 +12,17 @@
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
-    border-top: 1px solid $govuk-footer-border;
+    border-top: 10px solid $govuk-brand-colour;
     color: $govuk-footer-text;
-    background: $govuk-footer-background;
+    @include _govuk-rebrand(
+      "background",
+      $from: $govuk-footer-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
+  }
+
+  .govuk-footer__crown {
+    margin-bottom: govuk-spacing(5);
   }
 
   .govuk-footer__link {
@@ -26,7 +34,12 @@
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");
     border: 0; // Reset `<hr>` default borders
-    border-bottom: 1px solid $govuk-footer-border;
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__meta {
@@ -71,9 +84,10 @@
     text-wrap: balance;
   }
 
-  .govuk-footer__copyright-logo {
-    display: inline-block;
-    min-width: $govuk-footer-crest-image-width;
+  .govuk-footer__copyright-logo::before {
+    content: "";
+    display: block;
+    width: 100%;
     padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
     background-image: govuk-image-url("govuk-crest.svg");
     background-repeat: no-repeat;
@@ -81,6 +95,30 @@
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
     text-align: center;
     white-space: nowrap;
+
+    // Where possible use the crest as a mask instead. This lets us use
+    // currentColor, increasing the contrast of the image and matching the
+    // user's prefered foreground colour in e.g. forced colors mode.
+    // We test for `mask-position` rather than `mask-image` because of a false
+    // positive in Edge 17.
+    @supports ((-webkit-mask-position: initial) or (mask-position: initial)) {
+      background: currentcolor;
+      -webkit-mask-image: govuk-image-url("govuk-crest.svg");
+              mask-image: govuk-image-url("govuk-crest.svg");
+      -webkit-mask-repeat: no-repeat;
+              mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 0%;
+              mask-position: 50% 0%;
+      -webkit-mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+              mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+
+      // currentcolor doesn't seem to be computed correctly in forced colors
+      // mode so force the background color to match the system link color
+      // (matching the text in the link)
+      @media screen and (forced-colors: active) {
+        background: linktext;
+      }
+    }
   }
 
   .govuk-footer__inline-list {
@@ -106,7 +144,13 @@
     @include govuk-media-query($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
-    border-bottom: 1px solid $govuk-footer-border;
+
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__navigation {

data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss

@@ -13,12 +13,21 @@
   $govuk-header-menu-button-height: 24px;
   $govuk-header-menu-button-width: 80px;
 
+  $govuk-header-rebrand-background: $govuk-brand-colour;
+  $govuk-header-rebrand-logo-bottom-margin: 2px;
+
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
 
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    // Add a transparent bottom border for forced-colour modes
+    @include _govuk-rebrand(
+      "border-bottom",
+      $from: govuk-spacing(2) solid govuk-colour("white"),
+      $to: 1px solid transparent
+    );
+    @include _govuk-rebrand("background", $from: $govuk-header-background, $to: $govuk-header-rebrand-background);
+
     color: $govuk-header-text;
-    background: $govuk-header-background;
   }
 
   .govuk-header__container--full-width {
@@ -36,8 +45,20 @@
     margin-bottom: -$govuk-header-border-width;
     padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
+
+    @include _govuk-rebrand {
+      // Remove the space allocated to the blue bar
+      margin-bottom: 0;
+
+      // Remove padding as the child elements are now responsible for spacing
+      padding-top: 0;
+
+      // Remove the blue bar
+      border-bottom: none;
+    }
   }
 
+  // TODO: Remove this when _govuk-rebrand becomes the default
   .govuk-header--full-width-border {
     border-bottom-color: $govuk-header-border-color;
 
@@ -69,6 +90,31 @@
     &:last-child {
       margin-right: 0;
     }
+
+    @include _govuk-rebrand {
+      margin-right: govuk-px-to-rem(7px); // 1 'dot'
+      margin-bottom: $govuk-header-rebrand-logo-bottom-margin;
+    }
+  }
+
+  // Colour in the Dot
+  .govuk-logo-dot {
+    fill: #11e0f1;
+
+    // Override Dot colour when printing
+    @include govuk-media-query($media-type: print) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on forced colours mode
+    @media (forced-colors: active) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on focus
+    :focus & {
+      fill: currentcolor;
+    }
   }
 
   .govuk-header__product-name {
@@ -97,6 +143,40 @@
         margin-top: $product-name-offset-tablet - 0.5px;
       }
     }
+
+    @include _govuk-rebrand {
+      // Remove top margin
+      margin-top: 0;
+
+      // Remove 1px from the bottom to account for the font-size being 1px
+      // larger than the logo height.
+      margin-bottom: govuk-px-to-rem(-1px);
+
+      // Magic number font-size that visually aligns with GOV.UK logo.
+      // Also stops reducing the product name size on narrow screens
+      font-size: govuk-px-to-rem(31px);
+
+      // Reduce letter spacing
+      letter-spacing: -0.015em;
+
+      // Prevent forced colour modes from applying a background colour behind
+      // the product name, which cuts off the underline that appears on hover.
+      forced-color-adjust: none;
+
+      @media screen and (forced-colors: active) {
+        color: LinkText;
+        background: transparent;
+      }
+
+      // Remove top margin on the breakpoints too
+      @include govuk-media-query($from: tablet) {
+        margin-top: 0;
+      }
+
+      @include govuk-media-query($from: desktop) {
+        margin-top: 0;
+      }
+    }
   }
 
   .govuk-header__link {
@@ -134,12 +214,6 @@
 
     @include govuk-media-query($from: desktop) {
       display: inline;
-
-      &:focus {
-        // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
-        // This is to stop the logo getting cut off by the box shadow when focused on above a product name
-        box-shadow: 0 0 $govuk-focus-colour;
-      }
     }
 
     &:link,
@@ -159,6 +233,23 @@
       margin-bottom: 0;
       border-bottom: 0;
     }
+
+    @include _govuk-rebrand {
+      display: inline;
+
+      // Remove word-spacing from within the logo so we can ignore
+      // whitespace characters in the HTML
+      word-spacing: govuk-px-to-rem(-6px);
+
+      // Reset word-spacing for child elements
+      > * {
+        word-spacing: 0;
+      }
+
+      &:not(:focus) {
+        background-color: $govuk-header-rebrand-background;
+      }
+    }
   }
 
   .govuk-header__service-name {
@@ -166,6 +257,18 @@
     margin-bottom: govuk-spacing(2);
     @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: govuk-spacing(3);
+
+      @include govuk-media-query($from: desktop) {
+        // Magic number to align service name baseline with the GOV.UK logo
+        $service-name-offset: 4px;
+
+        margin: (govuk-spacing(3) + $service-name-offset) 0 (govuk-spacing(3) - $service-name-offset);
+      }
+    }
   }
 
   .govuk-header__logo,
@@ -175,6 +278,7 @@
 
   .govuk-header__logo {
     @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
+
     // Protect the absolute positioned menu button from overlapping with the
     // logo with right padding using the button's width
     padding-right: $govuk-header-menu-button-width;
@@ -192,6 +296,15 @@
         float: none;
       }
     }
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: 0;
+
+      // Magic numbers, set padding to vertically centre align the logo
+      padding-top: 16px;
+      padding-bottom: 14px - $govuk-header-rebrand-logo-bottom-margin;
+    }
   }
 
   .govuk-header__content {
@@ -265,8 +378,37 @@
   }
 
   .govuk-header__navigation {
+    @include govuk-media-query($until: mobile) {
+      @include _govuk-rebrand {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
+
     @include govuk-media-query($from: desktop) {
       margin-bottom: govuk-spacing(2);
+
+      @include _govuk-rebrand {
+        // Magic number so that the bottom of the nav links aligns with the
+        // baseline of the GOV.UK logo
+        $navigation-offset: 7px;
+
+        // Apply margins to internal elements to emulate padding
+        margin-bottom: 0;
+        padding: (govuk-spacing(3) + $navigation-offset) 0 (govuk-spacing(3) - $navigation-offset);
+      }
+    }
+  }
+
+  .govuk-header__service-name + .govuk-header__navigation {
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: desktop) {
+        // If there's both a service name and navigation,
+        // remove the extra padding between them on desktop
+        padding-top: 0;
+
+        // Restore the full bottom padding as the navigation isn't standalone
+        padding-bottom: govuk-spacing(3);
+      }
     }
   }
 
@@ -279,6 +421,12 @@
     &[hidden] {
       display: none;
     }
+
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: mobile, $until: desktop) {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
   }
 
   .govuk-header__navigation--end {
@@ -305,14 +453,41 @@
       @include govuk-typography-weight-bold;
       white-space: nowrap;
     }
+
+    @include _govuk-rebrand {
+      // Increase top padding of nav items...
+      padding-top: govuk-spacing(3);
+
+      // ...except on desktop
+      @include govuk-media-query($from: desktop) {
+        padding-top: govuk-spacing(1);
+      }
+
+      // Change the dividing line colour between mobile nav items
+      border-bottom-color: govuk-colour("white");
+
+      // Reduce default weight of links so that we can use bold for active ones
+      a {
+        @include govuk-typography-weight-regular;
+      }
+    }
   }
 
   .govuk-header__navigation-item--active {
     a {
+      @include _govuk-rebrand {
+        // Change active links to use bold text instead of changing colour
+        @include govuk-typography-weight-bold;
+      }
+
       &:link,
       &:hover,
       &:visited {
         color: $govuk-header-link-active;
+
+        @include _govuk-rebrand {
+          color: inherit;
+        }
       }
 
       // When printing, use the normal blue as this contrasts better with the
@@ -325,6 +500,10 @@
       // contrast is still acceptable
       &:focus {
         color: $govuk-focus-text-colour;
+
+        @include _govuk-rebrand {
+          color: $govuk-focus-text-colour;
+        }
       }
     }
   }

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss

@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/service-navigation") {
   $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-background: $govuk-canvas-background-colour;
+  $govuk-service-navigation-background: govuk-colour("light-grey");
   $govuk-service-navigation-border-colour: $govuk-border-colour;
 
   // We make the link colour a little darker than normal here so that it has
@@ -8,8 +8,18 @@
   $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
 
   .govuk-service-navigation {
-    border-bottom: 1px solid $govuk-service-navigation-border-colour;
-    background-color: $govuk-service-navigation-background;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-service-navigation-border-colour,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
+    @include _govuk-rebrand(
+      "background-color",
+      $from: $govuk-service-navigation-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
   }
 
   .govuk-service-navigation__container {
@@ -36,6 +46,11 @@
       margin-bottom: 0;
       padding: govuk-spacing(4) 0;
 
+      @include _govuk-rebrand {
+        padding: govuk-spacing(3) 0;
+        line-height: 1.5;
+      }
+
       &:not(:last-child) {
         @include govuk-responsive-margin(6, $direction: right);
       }
@@ -52,7 +67,11 @@
     }
 
     @include govuk-media-query($from: tablet) {
-      padding-bottom: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width;
+      @include _govuk-rebrand(
+        "padding-bottom",
+        $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,
+        $to: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width
+      );
       border-bottom-width: $govuk-service-navigation-active-link-border-width;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss

@@ -1,7 +1,7 @@
 :root {
   // This variable is automatically overwritten during builds and releases.
   // It doesn't need to be updated manually.
-  --govuk-frontend-version: "5.9.0";
+  --govuk-frontend-version: "5.10.0";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {

data/node_modules/govuk-frontend/dist/govuk/objects/_template.scss

@@ -5,7 +5,11 @@
   .govuk-template {
     // Set the overall page background colour to the same colour as used by the
     // footer to give the illusion of a long footer.
-    background-color: $govuk-canvas-background-colour;
+    @include _govuk-rebrand(
+      background-color,
+      $from: $govuk-template-background-colour,
+      $to: $_govuk-rebrand-template-background-colour
+    );
 
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.

data/node_modules/govuk-frontend/dist/govuk/settings/_colours-applied.scss

@@ -29,9 +29,31 @@ $govuk-text-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access public
-
+/// @deprecated "$govuk-canvas-background-colour has been deprecated and will be removed in the next major
+/// version. Use `$govuk-template-background-colour` if you want to change the background of
+/// the `<html>` element and background colour of elements that need to match for visual
+/// continuity.
 $govuk-canvas-background-colour: govuk-colour("light-grey") !default;
 
+// Output a deprecation warning if $govuk-canvas-background-colour is being overridden
+// Remove in next major version.
+@if $govuk-canvas-background-colour != govuk-colour("light-grey") {
+  @include _warning(
+    "$govuk-canvas-background-colour",
+    "$govuk-canvas-background-colour has been deprecated and will be removed in the next major version."
+  );
+}
+
+/// Template background colour
+///
+/// Used by components that want to give the illusion of extending
+/// the template background (such as the footer and cookie banner).
+///
+/// @type Colour
+/// @access public
+
+$govuk-template-background-colour: govuk-colour("light-grey") !default;
+
 /// Body background colour
 ///
 /// @type Colour
@@ -154,4 +176,20 @@ $govuk-link-hover-colour: govuk-colour("dark-blue") !default;
 
 $govuk-link-active-colour: govuk-colour("black") !default;
 
+// =============================================================================
+// Brand refresh
+// =============================================================================
+
+/// Updated template background colour
+///
+/// @type Colour
+/// @access private
+$_govuk-rebrand-template-background-colour: #f4f8fb; // Blue tint 95%
+
+/// Border colour for areas on a light-blue background
+///
+/// @type Colour
+/// @access private
+$_govuk-rebrand-border-colour-on-blue-tint-95: #8eb8dc; // Blue tint 50%
+
 /*# sourceMappingURL=_colours-applied.scss.map */

data/node_modules/govuk-frontend/dist/govuk/tools/_index.scss

@@ -3,5 +3,6 @@
 @import "image-url";
 @import "px-to-em";
 @import "px-to-rem";
+@import "rebrand";
 
 /*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/tools/_rebrand.scss

@@ -0,0 +1,65 @@
+////
+/// @group tools
+////
+
+/// Wraps rebranded properties in the feature flag selector
+///
+/// @example scss - Wrap a block of multiple properties
+///   .foo {
+///     border-width: 1px;
+///     border-colour: #fff;
+///
+///     @include _govuk-rebrand() {
+///       border-width: 10px;
+///       border-colour: #000;
+///     }
+///   }
+///
+/// @example scss - Wrap a single property
+///   .foo {
+///     @include _govuk-rebrand("background-color", $from: #fff, $to: #000)
+///   }
+///
+///
+/// @param {String} [$property] - The name of the property being rebranded
+/// @param {String} [$from] - The original value of the property
+/// @param {String} [$to] - The rebranded value of the property
+/// @throw if `$property` is set but `$from` or `$to` are missing
+/// @access private
+@mixin _govuk-rebrand($property: null, $from: null, $to: null) {
+  @if $property {
+    @if not $from {
+      @error "`_govuk-rebrand` needs the original value, `$from`";
+    }
+
+    @if not $to {
+      @error "`_govuk-rebrand` needs the rebranded value, `$to`";
+    }
+
+    #{$property}: #{$from};
+
+    @include _govuk-rebrand-wrapper {
+      #{$property}: #{$to};
+    }
+  } @else {
+    @include _govuk-rebrand-wrapper {
+      @content;
+    }
+  }
+}
+
+@mixin _govuk-rebrand-wrapper() {
+  $selector: "#{&}";
+
+  @if $selector == ".govuk-template" {
+    @at-root .govuk-template--rebranded {
+      @content;
+    }
+  } @else {
+    .govuk-template--rebranded & {
+      @content;
+    }
+  }
+}
+
+/*# sourceMappingURL=_rebrand.scss.map */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-govuk-formbuilder
 version: !ruby/object:Gem::Version
-  version: 1.17.1
+  version: 1.18.0
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -186,6 +186,7 @@ files:
 - node_modules/govuk-frontend/dist/govuk/tools/_index.scss
 - node_modules/govuk-frontend/dist/govuk/tools/_px-to-em.scss
 - node_modules/govuk-frontend/dist/govuk/tools/_px-to-rem.scss
+- node_modules/govuk-frontend/dist/govuk/tools/_rebrand.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_all.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_clearfix.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_index.scss