katalyst-govuk-formbuilder 1.21.1 → 1.23.0

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

@@ -46,7 +46,7 @@
 
   // GOV.UK Frontend JavaScript enabled
   .govuk-frontend-supported {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-tabs__list {
         @include govuk-clearfix;
         margin-bottom: 0;

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

@@ -21,13 +21,7 @@
     -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-focused-form-input;
     }
 
     &:disabled {

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss

@@ -19,7 +19,7 @@
     min-height: 35px;
     margin-top: -7px;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-top: -5px;
     }
 

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.11.2";
+  --govuk-frontend-version: "5.13.0";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {

data/node_modules/govuk-frontend/dist/govuk/core/_lists.scss

@@ -38,7 +38,7 @@
   %govuk-list--number > li {
     margin-bottom: 0;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);
     }
   }
@@ -46,7 +46,7 @@
   %govuk-list--spaced > li {
     margin-bottom: govuk-spacing(2);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
   }

data/node_modules/govuk-frontend/dist/govuk/core/_typography.scss

@@ -77,7 +77,7 @@
     margin-bottom: govuk-spacing(1);
     color: $govuk-secondary-text-colour;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: 0;
     }
   }
@@ -161,7 +161,7 @@
   %govuk-body-l + %govuk-heading-l {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }
@@ -180,7 +180,7 @@
   %govuk-list + %govuk-heading-s {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }

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

@@ -7,6 +7,11 @@
 /// Provides an outline to clearly indicate when the target element is focused.
 /// Used for interactive text-based elements.
 ///
+/// @example scss - Styling the focus state for a link
+///   .govuk-link:focus {
+///     @include govuk-focused-text;
+///   }
+///
 /// @access public
 
 @mixin govuk-focused-text {
@@ -47,6 +52,11 @@
 /// govuk-focused-box draws an outline around all sides of the element.
 /// Best used for non-text content contained within links.
 ///
+/// @example scss - Styling the focus state for a linked image
+///   .govuk-link-image:focus {
+///     @include govuk-focused-box;
+///   }
+///
 /// @access public
 
 @mixin govuk-focused-box {
@@ -56,4 +66,28 @@
     0 0 0 8px $govuk-focus-text-colour;
 }
 
+/// Focused form input
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Used for form inputs.
+///
+/// @example scss - Styling the focus state for a form input
+///   .govuk-input:focus {
+///     @include govuk-focused-form-input;
+///   }
+///
+/// @access public
+
+@mixin govuk-focused-form-input {
+  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` for this
+  // instead of changing `border-width` - this is for consistency with
+  // components such as textarea where we avoid changing `border-width` as
+  // it will change the element size. Also, `outline` cannot be utilised
+  // here as it is already used for the yellow focus state.
+  box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+}
+
 /*# sourceMappingURL=_focused.scss.map */

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

@@ -54,7 +54,7 @@
     width: 100%;
   }
   padding: 0 $govuk-gutter-half;
-  @include govuk-media-query($from: $at) {
+  @media #{govuk-from-breakpoint($at)} {
     width: govuk-grid-width($width);
     float: $float;
   }

data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss

@@ -348,7 +348,7 @@
 /// @access public
 
 @mixin govuk-link-print-friendly {
-  @include govuk-media-query($media-type: print) {
+  @media print {
     &[href^="/"],
     &[href^="http://"],
     &[href^="https://"]

data/node_modules/govuk-frontend/dist/govuk/helpers/_media-queries.scss

@@ -2,52 +2,168 @@
 /// @group helpers/layout
 ////
 
+@import "../settings/media-queries";
+@import "../tools/px-to-em";
+
 // =========================================================
-// Wrangle sass-mq config...
+// Helpers
 // =========================================================
 
-// Pass our breakpoint definitions through to sass-mq.
-$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
+/// Get the value of a breakpoint by name.
+///
+/// @param {String | Number} $value - If a string, the name of a breakpoint
+///   in $breakpoints. If a number without units, it will convert to px. If a
+///   number with units, it will return the value unaltered.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $value.
+/// @returns {Number} - The set (minimum) value of the breakpoint
+///
+/// @example scss
+///  .element {
+///    width: govuk-breakpoint-value(tablet);
+///    @media (min-width: #{govuk-breakpoint-value(desktop)}) {
+///      color: red;
+///    }
+///    @media (min-width: #{govuk-breakpoint-value(400px)}) {
+///      color: green;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media (orientation: landscape) and (min-width: #{govuk-breakpoint-value(extra-large, $custom-breakpoint-map)}) {
+///      color: blue;
+///    }
+///  }
+///
+/// @access public
 
-$mq-show-breakpoints: ();
+@function govuk-breakpoint-value($value, $breakpoints: $govuk-breakpoints) {
+  // If $value is a number
+  @if type-of($value) == "number" {
+    // If the number is unitless, coerce it into a pixel value
+    @if unitless($value) {
+      $value: $value * 1px;
+    }
 
-@if variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints {
-  $mq-show-breakpoints: map-keys($govuk-breakpoints);
-}
+    @return $value;
+  }
 
-// This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
-// the current breakpoint from being included multiple times.
-//
-// We can't use the `exports` mixin for this because import directives cannot be
-// used within control directives 😠
-$sass-mq-already-included: false !default;
+  // If $value is a string and exists as a key in in $breakpoints,
+  // look up and use the value of it
+  @if type-of($value) == "string" and map-has-key($breakpoints, $value) {
+    @return map-get($breakpoints, $value);
+  }
 
-@if $sass-mq-already-included {
-  $mq-show-breakpoints: ();
+  // If we get this far, we can't use the value, so return an error
+  @error "Could not find a breakpoint given `#{$value}`.";
 }
 
-@import "../vendor/sass-mq";
+/// Generate the `min-width` segment of a media query given a breakpoint key
+///
+/// Pixel values are converted to ems for backwards compatibility with
+/// sass-mq. Unlike sass-mq, non-px and em values can be used as well.
+///
+/// @param {String | Number} $from - If a string, expects the name of a
+///   breakpoint in $breakpoints. If a number, it will use that number.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $from.
+/// @returns {String} - A `min-width` media query segment
+///
+/// @example scss
+///  .example {
+///    @media #{govuk-from-breakpoint(tablet)} {
+///      color: red;
+///    }
+///    @media #{govuk-from-breakpoint(30em)} {
+///      color: green;
+///    }
+///    @media #{govuk-from-breakpoint(tablet)} and (orientation: landscape) {
+///      color: blue;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media #{govuk-from-breakpoint(extra-large, $custom-breakpoint-map)} {
+///      color: cyan;
+///    }
+///  }
+///
+/// @access public
 
-$sass-mq-already-included: true;
+@function govuk-from-breakpoint($from, $breakpoints: $govuk-breakpoints) {
+  $value: govuk-breakpoint-value($from, $breakpoints);
 
-// =========================================================
-// Helpers
-// =========================================================
+  @if type-of($value) == "number" and unit($value) == "px" {
+    $value: govuk-em($value);
+  }
+
+  @return "(min-width: #{$value})";
+}
 
-/// Media Query
+/// Generate the `max-width` segment of a media query given a breakpoint key
 ///
-/// This is a currently a wrapper for sass-mq - abstracted so that we can
-/// replace it in the future if we so choose.
+/// sass-mq converted pixel values to ems, and only performed subtractions on
+/// named breakpoints. These have been retained for backwards compatibility,
+/// though unlike sass-mq, this also supports using non-px and em values.
 ///
-/// @param {String | Boolean} $from [false] - One of $govuk-breakpoints
-/// @param {String | Boolean} $until [false] - One of $govuk-breakpoints
-/// @param {String | Boolean} $and [false] - Additional media query parameters
-/// @param {String} $media-type [all] - Media type: screen, print…
+/// @param {String | Number} $until - If a string, expects the name of a
+///   breakpoint in $breakpoints. If a number, it will use that number.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $until.
+/// @returns {String} - A `max-width` media query segment
+///
+/// @example scss
+///  .example {
+///    @media #{govuk-until-breakpoint(desktop)} {
+///      color: red;
+///    }
+///    @media #{govuk-until-breakpoint(40em)} {
+///      color: green;
+///    }
+///    @media #{govuk-until-breakpoint(tablet)} and (orientation: landscape) {
+///      color: blue;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media #{govuk-until-breakpoint(extra-large, $custom-breakpoint-map)} {
+///      color: cyan;
+///    }
+///  }
+///
+/// @access public
+
+@function govuk-until-breakpoint($until, $breakpoints: $govuk-breakpoints) {
+  $value: govuk-breakpoint-value($until, $breakpoints);
+
+  @if type-of($value) == "number" and unit($value) == "px" {
+    // If it's a pixel value, convert it to ems.
+    $value: govuk-em($value);
+  }
+
+  // If $value derives from a named breakpoint, additionally subtract .01em
+  @if type-of($until) != "number" and unit($value) == "em" {
+    $value: $value - 0.01em;
+  }
+
+  @return "(max-width: #{$value})";
+}
+
+/// Media query
 ///
-/// @ignore Undocumented mq API, for advanced use only:
-/// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
+/// @param {String | Boolean} $from [false] - One of $breakpoints
+/// @param {String | Boolean} $until [false] - One of $breakpoints
+/// @param {String | Boolean} $and [false] - Additional media query parameters
+/// @param {String} $media-type [all] - Override media type: screen, print…
+/// @param {Map} $breakpoints [$govuk-breakpoints] - Map of breakpoints to use
 ///
-/// @content styling rules, wrapped into a @media query when $responsive is true
+/// @content styling rules to use for the given media query range
 ///
 /// @example scss
 ///  .element {
@@ -67,14 +183,37 @@ $sass-mq-already-included: true;
 ///      color: hotpink;
 ///    }
 ///    @include govuk-media-query(tablet, $media-type: screen) {
-///      color: hotpink;
+///      color: rebeccapurple;
 ///    }
 ///  }
 ///
 /// @access public
 
-@mixin govuk-media-query($args...) {
-  @include mq($args...) {
+@mixin govuk-media-query($from: null, $until: null, $and: null, $media-type: "all", $breakpoints: $govuk-breakpoints) {
+  $media-query: "";
+  $min-width: if($from, govuk-from-breakpoint($from, $breakpoints), null);
+  $max-width: if($until, govuk-until-breakpoint($until, $breakpoints), null);
+
+  // Assemble the media query string
+  @if $media-type != "all" {
+    $media-query: "#{$media-type}";
+  }
+  @if $min-width {
+    $media-query: "#{$media-query} and #{$min-width}";
+  }
+  @if $max-width {
+    $media-query: "#{$media-query} and #{$max-width}";
+  }
+  @if $and {
+    $media-query: "#{$media-query} and #{$and}";
+  }
+
+  // If $media-query currently begins with an orphaned ' and ', remove it.
+  @if str-index($media-query, " and ") == 1 {
+    $media-query: str-slice($media-query, 6);
+  }
+
+  @media #{$media-query} {
     @content;
   }
 }

data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss

@@ -107,7 +107,7 @@
         #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @media #{govuk-from-breakpoint($breakpoint)} {
         @if $direction == all {
           #{$property}: $breakpoint-value if($important, !important, null);
         } @else {

data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss

@@ -23,7 +23,7 @@
     @include _govuk-font-face-gds-transport;
   }
 
-  @include govuk-media-query($media-type: print) {
+  @media print {
     font-family: $govuk-font-family-print;
   }
 }
@@ -37,7 +37,7 @@
 @mixin govuk-text-colour {
   color: $govuk-text-colour;
 
-  @include govuk-media-query($media-type: print) {
+  @media print {
     color: $govuk-print-text-colour;
   }
 }
@@ -240,12 +240,12 @@
       font-size: $font-size-rem;
       line-height: $calculated-line-height;
     } @else if $breakpoint == "print" {
-      @include govuk-media-query($media-type: print) {
+      @media print {
         font-size: $font-size;
         line-height: $calculated-line-height;
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @media #{govuk-from-breakpoint($breakpoint)} {
         font-size: $font-size-rem;
         line-height: $calculated-line-height;
       }

data/node_modules/govuk-frontend/dist/govuk/objects/_button-group.scss

@@ -57,7 +57,7 @@
 
     // 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) {
+    @media #{govuk-from-breakpoint(tablet)} {
       // Cancel out the column gap for the last item in each row
       margin-right: ($horizontal-gap * -1);
 

data/node_modules/govuk-frontend/dist/govuk/objects/_main-wrapper.scss

@@ -30,7 +30,7 @@
     padding-top: govuk-spacing(4);
     padding-bottom: govuk-spacing(4);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       // This spacing is manually adjusted to replicate the margin of
       // govuk-heading-xl (50px) minus the spacing of back link and
       // breadcrumbs (10px)

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

@@ -39,7 +39,7 @@
 
     // Force the scrollbar to always display in IE, to prevent horizontal page
     // jumps as content height changes (e.g. autocomplete results open).
-    @include govuk-media-query($media-type: screen) {
+    @media screen {
       overflow-y: scroll;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/objects/_width-container.scss

@@ -37,7 +37,7 @@
   }
 
   // On tablet, add full width gutters
-  @include govuk-media-query($from: tablet) {
+  @media #{govuk-from-breakpoint(tablet)} {
     margin-right: $govuk-gutter;
     margin-left: $govuk-gutter;
 
@@ -55,7 +55,7 @@
 
   // As soon as the viewport is greater than the width of the page plus the
   // gutters, just centre the content instead of adding gutters.
-  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
+  @media (min-width: #{($width + $govuk-gutter * 2)}) {
     margin-right: auto;
     margin-left: auto;
 

data/node_modules/govuk-frontend/dist/govuk/overrides/_display.scss

@@ -16,7 +16,7 @@
     display: none !important;
   }
 
-  @include govuk-media-query($media-type: print) {
+  @media print {
     .govuk-\!-display-none-print {
       display: none !important;
     }

data/node_modules/govuk-frontend/dist/govuk/overrides/_width.scss

@@ -7,7 +7,7 @@
   .govuk-\!-width-three-quarters {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 75% !important;
     }
   }
@@ -15,7 +15,7 @@
   .govuk-\!-width-two-thirds {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 66.66% !important;
     }
   }
@@ -23,7 +23,7 @@
   .govuk-\!-width-one-half {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 50% !important;
     }
   }
@@ -31,7 +31,7 @@
   .govuk-\!-width-one-third {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 33.33% !important;
     }
   }
@@ -39,7 +39,7 @@
   .govuk-\!-width-one-quarter {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 25% !important;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/settings/_media-queries.scss

@@ -2,6 +2,8 @@
 /// @group settings/layout
 ////
 
+@import "../settings/warnings";
+
 /// Breakpoint definitions
 ///
 /// @type Map
@@ -19,7 +21,12 @@ $govuk-breakpoints: (
 ///
 /// @type Boolean
 /// @access public
+/// @deprecated The variable is non-operational and will be removed in Frontend v6.0.
 
 $govuk-show-breakpoints: false !default;
 
+@if $govuk-show-breakpoints and _should-warn("govuk-show-breakpoints") {
+  @warn _warning-text("govuk-show-breakpoints", "The `$govuk-show-breakpoints` variable is deprecated and is non-operational. It will be removed in the next major version.");
+}
+
 /*# sourceMappingURL=_media-queries.scss.map */

data/node_modules/govuk-frontend/dist/govuk/tools/_px-to-em.scss

@@ -2,14 +2,16 @@
 /// @group tools/unit-conversion
 ////
 
+@import "../settings/typography-responsive";
+
 /// Convert pixels to em
 ///
 /// @param {Number} $value - Length in pixels
-/// @param {Number} $context-font-size - Font size of element
+/// @param {Number} $context-font-size [$govuk-root-font-size] - Font size of element
 /// @return {Number} Length in ems
 /// @access public
 
-@function govuk-em($value, $context-font-size) {
+@function govuk-em($value, $context-font-size: $govuk-root-font-size) {
   @if unitless($value) {
     $value: $value * 1px;
   }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-govuk-formbuilder
 version: !ruby/object:Gem::Version
-  version: 1.21.1
+  version: 1.23.0
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -52,6 +52,7 @@ files:
 - lib/katalyst/govuk/form_builder/elements/label.rb
 - lib/katalyst/govuk/form_builder/elements/legend.rb
 - lib/katalyst/govuk/form_builder/elements/rich_text_area.rb
+- lib/katalyst/govuk/form_builder/elements/time.rb
 - lib/katalyst/govuk/form_builder/engine.rb
 - lib/katalyst/govuk/form_builder/extensions.rb
 - lib/katalyst/govuk/form_builder/frontend.rb
@@ -198,7 +199,6 @@ files:
 - node_modules/govuk-frontend/dist/govuk/utilities/_clearfix.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_index.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_visually-hidden.scss
-- node_modules/govuk-frontend/dist/govuk/vendor/_sass-mq.scss
 homepage: https://github.com/katalyst/govuk-formbuilder
 licenses:
 - MIT