katalyst-govuk-formbuilder 1.7.1 → 1.8.0

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/header/_index.scss

@@ -6,6 +6,12 @@
   $govuk-header-link-active: #1d8feb;
   $govuk-header-nav-item-border-color: #2e3133;
   $govuk-header-link-underline-thickness: 3px;
+  $govuk-header-vertical-spacing-value: 2;
+  // This crown height is only used to calculate top offset of mobile menu button
+  // as the crown svg height is the only thing that controls the height of the header
+  $govuk-header-crown-height: 30px;
+  $govuk-header-menu-button-height: 24px;
+  $govuk-header-menu-button-width: 80px;
 
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
@@ -28,7 +34,7 @@
     @include govuk-clearfix;
     position: relative;
     margin-bottom: -$govuk-header-border-width;
-    padding-top: govuk-spacing(2);
+    padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
   }
 
@@ -61,7 +67,7 @@
     $product-name-offset: 10px;
     $product-name-offset-tablet: 5px;
 
-    @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+    @include govuk-font-size($size: 24, $line-height: 1);
     @include govuk-typography-weight-regular;
     display: inline-table;
 
@@ -150,7 +156,7 @@
   .govuk-header__service-name {
     display: inline-block;
     margin-bottom: govuk-spacing(2);
-    @include govuk-typography-responsive($size: 24);
+    @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
   }
 
@@ -160,8 +166,10 @@
   }
 
   .govuk-header__logo {
-    @include govuk-responsive-margin(2, "bottom");
-    padding-right: govuk-spacing(8);
+    @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;
 
     @include govuk-media-query($from: desktop) {
       width: 33.33%;
@@ -189,13 +197,22 @@
   .govuk-header__menu-button {
     @include govuk-font($size: 16);
     position: absolute;
-    top: govuk-spacing(4);
+    // calculate top offset by:
+    // - getting the vertical spacing for the top and the bottom of the header
+    // - adding that to the crown height
+    // - dividing it by 2 so you have the vertical centre of the header
+    // - subtracting half the height of the menu button
+    top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -
+      ($govuk-header-menu-button-height / 2);
     right: 0;
+    max-width: $govuk-header-menu-button-width;
+    min-height: $govuk-header-menu-button-height;
     margin: 0;
     padding: 0;
     border: 0;
     color: govuk-colour("white");
     background: none;
+    word-break: break-all;
     cursor: pointer;
 
     &:hover {
@@ -272,7 +289,7 @@
     }
 
     a {
-      @include govuk-typography-responsive($size: 16);
+      @include govuk-font-size($size: 16);
       @include govuk-typography-weight-bold;
       white-space: nowrap;
     }

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/input/_index.scss

@@ -58,7 +58,7 @@
   }
 
   .govuk-input--extra-letter-spacing {
-    @include govuk-font(false, $tabular: true);
+    @include govuk-font-tabular-numbers;
     letter-spacing: 0.05em;
   }
 
@@ -119,26 +119,21 @@
   .govuk-input__prefix,
   .govuk-input__suffix {
     @include govuk-font($size: 19);
-
     box-sizing: border-box;
-    display: inline-block;
+    // Use flexbox to align text within the prefix and suffix
+    display: flex;
+    align-items: center;
+    justify-content: center;
     min-width: govuk-px-to-rem(40px);
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     background-color: govuk-colour("light-grey");
-
     text-align: center;
-    @include govuk-media-query($until: tablet) {
-      line-height: 1.6;
-    }
     white-space: nowrap;
-
     // Emphasise non-editable status of prefixes and suffixes
     cursor: default;
-
     flex: 0 0 auto;
-
     // Split prefix/suffix onto separate lines on narrow screens
     @include govuk-media-query($until: mobile) {
       display: block;

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/label/_index.scss

@@ -17,15 +17,15 @@
   }
 
   .govuk-label--xl {
-    @include govuk-typography-responsive($size: 48);
+    @include govuk-font-size($size: 48);
   }
 
   .govuk-label--l {
-    @include govuk-typography-responsive($size: 36);
+    @include govuk-font-size($size: 36);
   }
 
   .govuk-label--m {
-    @include govuk-typography-responsive($size: 24);
+    @include govuk-font-size($size: 24);
   }
 
   .govuk-label--s {

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/notification-banner/_index.scss

@@ -26,7 +26,7 @@
   .govuk-notification-banner__title {
     // Set the size again because this element is a heading and the user agent
     // font size overrides the inherited font size
-    @include govuk-typography-responsive($size: 19);
+    @include govuk-font-size($size: 19);
     @include govuk-typography-weight-bold;
     margin: 0;
     padding: 0;
@@ -65,7 +65,7 @@
   }
 
   .govuk-notification-banner__heading {
-    @include govuk-typography-responsive($size: 24);
+    @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
 
     margin: 0 0 govuk-spacing(3) 0;

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/panel/_index.scss

@@ -12,7 +12,7 @@
     text-align: center;
 
     @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(3) - $govuk-border-width;
+      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
 
       // This is an if-all-else-fails attempt to stop long words from overflowing the container
       // on very narrow viewports by forcing them to break and wrap instead. This
@@ -40,7 +40,7 @@
   }
 
   .govuk-panel__title {
-    @include govuk-typography-responsive($size: 48);
+    @include govuk-font-size($size: 48);
     @include govuk-typography-weight-bold;
     margin-top: 0;
     margin-bottom: govuk-spacing(6);

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/phase-banner/_index.scss

@@ -17,8 +17,14 @@
   }
 
   .govuk-phase-banner__content__tag {
-    @include govuk-typography-responsive($size: 16);
-    margin-right: govuk-spacing(2);
+    @include govuk-font-size($size: 16);
+    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
+
+    @if $govuk-new-typography-scale {
+      @include govuk-media-query($from: tablet) {
+        margin-right: govuk-spacing(2);
+      }
+    }
 
     // When forced colour mode is active, for example to provide high contrast,
     // the background colour of the tag is the same as the rest of the page. To ensure

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/radios/_index.scss

@@ -4,8 +4,9 @@
 @import "../label/index";
 
 @include govuk-exports("govuk/component/radios") {
-  $govuk-touch-target-size: 44px;
+  $govuk-touch-target-gutter: 4px;
   $govuk-radios-size: 40px;
+  $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);
   $govuk-small-radios-size: 24px;
   $govuk-radios-label-padding-left-right: govuk-spacing(3);
   // When the default focus width is used on a curved edge it looks visually smaller.
@@ -13,15 +14,10 @@
   $govuk-radios-focus-width: $govuk-focus-width + 1px;
 
   .govuk-radios__item {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
     position: relative;
-
-    min-height: $govuk-radios-size;
-
     margin-bottom: govuk-spacing(2);
-    padding-left: $govuk-radios-size;
-
-    clear: left;
   }
 
   .govuk-radios__item:last-child,
@@ -30,27 +26,26 @@
   }
 
   .govuk-radios__input {
-    $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2;
-
-    position: absolute;
-
+    // Allow the input to sit above the label, enabling its proper detection
+    // when exploring by touch or using automation tools like Selenium
     z-index: 1;
-    top: $input-offset * -1;
-    left: $input-offset * -1;
-
     width: $govuk-touch-target-size;
     height: $govuk-touch-target-size;
     margin: 0;
-
     opacity: 0;
-
     cursor: pointer;
   }
 
   .govuk-radios__label {
-    display: inline-block;
+    align-self: center;
+
+    // Ensure that the width of the label is never more than the width of the
+    // container minus the input width minus the padding on either side of
+    // the label. This prevents the label from going onto the next line due to
+    // __item using flex-wrap because we want hints on a separate line
+    max-width: calc(100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3))});
     margin-bottom: 0;
-    padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
+    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
     cursor: pointer;
     // remove 300ms pause on mobile
     touch-action: manipulation;
@@ -61,12 +56,10 @@
     content: "";
     box-sizing: border-box;
     position: absolute;
-    top: 0;
-    left: 0;
-
+    top: ($govuk-touch-target-gutter / 2);
+    left: ($govuk-touch-target-gutter / 2);
     width: $govuk-radios-size;
     height: $govuk-radios-size;
-
     border: $govuk-border-width-form-element solid currentcolor;
     border-radius: 50%;
     background: transparent;
@@ -77,16 +70,19 @@
   // We create the 'button' entirely out of 'border' so that they remain
   // 'filled' even when colours are overridden in the browser.
   .govuk-radios__label::after {
-    content: "";
+    $radio-button-size: govuk-spacing(2);
 
+    content: "";
     position: absolute;
-    top: govuk-spacing(2);
-    left: govuk-spacing(2);
 
+    // Positioned by getting half the touch target, so we have the centre of the
+    // input, and then moving back by the button's border width, thus positioning
+    // the centre of the button in the centre of the input.
+    top: (($govuk-touch-target-size / 2) - $radio-button-size);
+    left: (($govuk-touch-target-size / 2) - $radio-button-size);
     width: 0;
     height: 0;
-
-    border: govuk-spacing(2) solid currentcolor;
+    border: $radio-button-size solid currentcolor;
     border-radius: 50%;
     opacity: 0;
     background: currentcolor;
@@ -94,8 +90,17 @@
 
   .govuk-radios__hint {
     display: block;
+    width: 100%;
+    margin-top: govuk-spacing(-1);
     padding-right: $govuk-radios-label-padding-left-right;
-    padding-left: $govuk-radios-label-padding-left-right;
+    padding-left: ($govuk-radios-label-padding-left-right + $govuk-touch-target-size);
+  }
+
+  // This is to bypass govuk-hint's specificity on hints following labels having
+  // a margin bottom of 10px (govuk-spacing(2)). Because radios are flexbox,
+  // the margin doesn't collapse so we have to do this manually.
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {
+    margin-bottom: 0;
   }
 
   // Focused state
@@ -140,12 +145,12 @@
 
   .govuk-radios--inline {
     @include govuk-media-query($from: tablet) {
-      @include govuk-clearfix;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
 
       .govuk-radios__item {
         margin-right: govuk-spacing(4);
-        float: left;
-        clear: none;
       }
     }
   }
@@ -198,14 +203,9 @@
 
   .govuk-radios--small {
     $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
-    $label-offset: $govuk-touch-target-size - $input-offset;
 
     .govuk-radios__item {
-      @include govuk-clearfix;
-      min-height: 0;
       margin-bottom: 0;
-      padding-left: $label-offset;
-      float: left;
     }
 
     // Shift the touch target into the left margin so that the visible edge of
@@ -218,30 +218,23 @@
     //  ▲┆└─ Radio pseudo element, aligned with margin
     //  └─── Touch target (invisible input), shifted into the margin
     .govuk-radios__input {
-      left: $input-offset * -1;
+      margin-left: $input-offset * -1;
     }
 
-    // Adjust the size and position of the label.
-    //
-    // Unlike larger radios, we also have to float the label in order to
-    // 'shrink' it, preventing the hover state from kicking in across the full
-    // width of the parent element.
     .govuk-radios__label {
-      margin-top: -2px;
-      padding: 13px govuk-spacing(3) 13px 1px;
-      float: left;
-
-      @include govuk-media-query($from: tablet) {
-        padding: 11px govuk-spacing(3) 10px 1px;
-      }
+      // Create a tiny space between the small radio hover state so that it
+      // doesn't clash with the label
+      padding-left: 1px;
     }
 
     // ( ) Radio ring
     //
     // Reduce the size of the control [1], vertically centering it within the
     // touch target [2]
+    // Left here is 0 because we've shifted the input into the left margin
     .govuk-radios__label::before {
-      top: $input-offset - $govuk-border-width-form-element; // 2
+      top: $input-offset; // 2
+      left: 0;
       width: $govuk-small-radios-size; // 1
       height: $govuk-small-radios-size; // 1
     }
@@ -250,9 +243,12 @@
     //
     // Reduce the size of the 'button' and center it within the ring
     .govuk-radios__label::after {
-      top: 15px;
-      left: 7px;
-      border-width: 5px;
+      $radio-button-size: govuk-spacing(1);
+
+      // The same calculation as normal radio buttons but reduce the border width
+      top: (($govuk-touch-target-size / 2) - $radio-button-size);
+      left: ((($govuk-touch-target-size / 2) - $radio-button-size) - $input-offset);
+      border-width: $radio-button-size;
     }
 
     // Fix position of hint with small radios
@@ -264,17 +260,14 @@
     // (If you do use them, they won't look completely broken... but seriously,
     // don't use them)
     .govuk-radios__hint {
-      padding: 0;
-      clear: both;
-      pointer-events: none;
+      padding-left: ($govuk-small-radios-size + $input-offset);
     }
 
     // Align conditional reveals with small radios
     .govuk-radios__conditional {
       $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
       margin-left: $margin-left;
-      padding-left: $label-offset - ($margin-left + $conditional-border-width);
-      clear: both;
+      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
     .govuk-radios__divider {

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/skip-link/_index.scss

@@ -4,7 +4,7 @@
     @include govuk-typography-common;
     @include govuk-link-decoration;
     @include govuk-link-style-text;
-    @include govuk-typography-responsive($size: 16);
+    @include govuk-font-size($size: 16);
 
     display: block;
     padding: govuk-spacing(2) govuk-spacing(3);

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/summary-list/_index.scss

@@ -202,7 +202,7 @@
   }
 
   .govuk-summary-card__actions {
-    @include govuk-typography-responsive($size: 19);
+    @include govuk-font-size($size: 19);
     @include govuk-typography-weight-bold;
     display: flex;
     flex-wrap: wrap;

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/table/_index.scss

@@ -9,6 +9,16 @@
     border-collapse: collapse;
   }
 
+  @if $govuk-new-typography-scale {
+    // Modifier for tables with a lot of data. Tables with lots of data benefit
+    // from a smaller font size on small screens.
+    .govuk-table--small-text-until-tablet {
+      @include govuk-media-query($until: tablet) {
+        @include govuk-font-size($size: 16);
+      }
+    }
+  }
+
   .govuk-table__header {
     @include govuk-typography-weight-bold;
   }
@@ -22,7 +32,7 @@
   }
 
   .govuk-table__cell--numeric {
-    @include govuk-font($size: false, $tabular: true);
+    @include govuk-font-tabular-numbers;
   }
 
   .govuk-table__header--numeric,
@@ -50,15 +60,15 @@
   }
 
   .govuk-table__caption--xl {
-    @include govuk-typography-responsive($size: 48);
+    @include govuk-font-size($size: 48);
   }
 
   .govuk-table__caption--l {
-    @include govuk-typography-responsive($size: 36);
+    @include govuk-font-size($size: 36);
   }
 
   .govuk-table__caption--m {
-    @include govuk-typography-responsive($size: 24);
+    @include govuk-font-size($size: 24);
   }
 }
 

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/components/tabs/_index.scss

@@ -8,7 +8,7 @@
   .govuk-tabs__title {
     // Set the size and weight again because this element is a heading and the
     // user agent font size overrides the inherited font size
-    @include govuk-typography-responsive($size: 19);
+    @include govuk-font-size($size: 19);
     @include govuk-typography-weight-regular;
     @include govuk-text-colour;
     margin-bottom: govuk-spacing(2);

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/core/_all.scss

@@ -1,4 +1,4 @@
-@import "govuk-frontend-version";
+@import "govuk-frontend-properties";
 @import "links";
 @import "lists";
 @import "typography";

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss

@@ -0,0 +1,12 @@
+:root {
+  // This variable is automatically overwritten during builds and releases.
+  // It doesn't need to be updated manually.
+  --govuk-frontend-version: "5.2.0";
+
+  // CSS custom property for each breakpoint
+  @each $name, $value in $govuk-breakpoints {
+    --govuk-frontend-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+  }
+}
+
+/*# sourceMappingURL=_govuk-frontend-properties.scss.map */

data/vendor/assets/stylesheets/govuk-frontend/dist/govuk/core/_typography.scss

@@ -128,14 +128,16 @@
     @extend %govuk-body-s;
   }
 
+  // @deprecated
   %govuk-body-xs {
     @include govuk-text-colour;
-    @include govuk-font($size: 14);
+    @include govuk-font($size: _14);
 
     margin-top: 0;
     @include govuk-responsive-margin(4, "bottom");
   }
 
+  // @deprecated
   .govuk-body-xs {
     @extend %govuk-body-xs;
   }