katalyst-govuk-formbuilder 1.27.0 → 1.28.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dfb2cbe250e87159a13e8e7e5a034bf8874f3f0b3e7f11420b0da4613f18bf50
-  data.tar.gz: 6f2ab67eb3cc1b24b519c401d647f7e6be65e00e73736d47834838bf72b566d0
+  metadata.gz: '088f97f2c42cd5766eaa77fd9e85f60a2a02ea9b988aa3c6fb4924f107f1ac52'
+  data.tar.gz: bfc23680580b356b1a4eff07a82cc5770c36740a76819e84fd6cd4a9adf3a239
 SHA512:
-  metadata.gz: 9a5fd246ff1ede995f1897e9b1feb0dd08c9a9aac71495317b0a59b56f49e3440695e8fcd7e536e02888c5089ae443fadac055f6aeb9356f47e47505367e96b3
-  data.tar.gz: 245ddd162c6a15a028324889dfdac533849bfc690f98d9550719faaf93d3a7d2bbf888591f217b94515d4d05a89b60db0acb69581061778b7f09d151632db6af
+  metadata.gz: a9c4758793c31b396fa8e75620f20ada27970b4da30f885b18acb5d7e62514fa8565bd5cff4965f76f6dddc4baf6ed28e72a102cd23e67e77bf339b947fe7eed
+  data.tar.gz: 371302ba7c537c19bb0ec1ab31610b96f05dd1e999abef60aed649123bc96199b63a42667e54109df2b01475eb644414d2bdca0afa015ef170616667654aebc7

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

@@ -6,7 +6,7 @@
 }
 
 :root {
-  --govuk-frontend-version: "6.2.0";
+  --govuk-frontend-version: "6.3.0";
 }
 
 :root {
@@ -1516,6 +1516,7 @@
   margin-left: -10px;
 }
 .govuk-checkboxes--small .govuk-checkboxes__label {
+  max-width: calc(100% - 50px);
   padding-left: 1px;
 }
 .govuk-checkboxes--small .govuk-checkboxes__label::before {
@@ -1807,6 +1808,7 @@
   padding: 5px;
   border: 2px solid;
   border-color: var(--govuk-input-border-colour, #0b0c0c);
+  color: var(--govuk-text-colour, #0b0c0c);
   background-color: #f3f3f3;
   text-align: center;
   white-space: nowrap;
@@ -2614,6 +2616,7 @@
   margin-left: -10px;
 }
 .govuk-radios--small .govuk-radios__label {
+  max-width: calc(100% - 50px);
   padding-left: 1px;
 }
 .govuk-radios--small .govuk-radios__label::before {
@@ -2660,39 +2663,39 @@
   }
 }
 
-.govuk-richtextarea {
+.govuk-rich-textarea {
   font-family: "Open Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 @media print {
-  .govuk-richtextarea {
+  .govuk-rich-textarea {
     font-family: sans-serif;
   }
 }
-.govuk-richtextarea {
+.govuk-rich-textarea {
   font-weight: 400;
   font-size: 1.1875rem;
   line-height: 1.25;
 }
 @media print {
-  .govuk-richtextarea {
+  .govuk-rich-textarea {
     font-size: 14pt;
     line-height: 1.25;
   }
 }
-.govuk-richtextarea {
+.govuk-rich-textarea {
   box-sizing: border-box;
   display: block;
   width: 100%;
   margin-bottom: 20px;
 }
 @media (min-width: 40.0625em) {
-  .govuk-richtextarea {
+  .govuk-rich-textarea {
     margin-bottom: 30px;
   }
 }
-.govuk-richtextarea {
+.govuk-rich-textarea {
   padding: 5px;
   resize: vertical;
   background-color: #ffffff;
@@ -2702,23 +2705,23 @@
   border-color: var(--govuk-input-border-colour, #0b0c0c);
   -webkit-appearance: none;
 }
-.govuk-richtextarea:focus {
+.govuk-rich-textarea:focus {
   outline: 3px solid;
   outline-color: var(--govuk-focus-colour, #ffdd00);
   outline-offset: 0;
   box-shadow: inset 0 0 0 2px var(--govuk-input-border-colour, #0b0c0c);
 }
-.govuk-richtextarea:disabled {
+.govuk-rich-textarea:disabled {
   opacity: 0.5;
   color: inherit;
   background-color: transparent;
   cursor: not-allowed;
 }
 
-.govuk-richtextarea--error {
+.govuk-rich-textarea--error {
   border-color: var(--govuk-error-colour, #ca3535);
 }
-.govuk-richtextarea--error:focus {
+.govuk-rich-textarea--error:focus {
   border-color: var(--govuk-input-border-colour, #0b0c0c);
 }
 

data/app/assets/stylesheets/katalyst/govuk/components/richtextarea/_mixin.scss

@@ -2,7 +2,7 @@
 
 /// @access private
 @mixin styles {
-  .govuk-richtextarea {
+  .govuk-rich-textarea {
     @include base.govuk-font($size: 19, $line-height: 1.25);
 
     box-sizing: border-box;
@@ -35,7 +35,7 @@
     }
   }
 
-  .govuk-richtextarea--error {
+  .govuk-rich-textarea--error {
     border-color: base.govuk-functional-colour(error);
 
     &:focus {

data/lib/katalyst/govuk/form_builder/builder.rb

@@ -194,20 +194,13 @@ module Katalyst
         #   = f.govuk_rich_text_area :instructions,
         #     label: -> { tag.h3("How do you set it up?") }
         #
-        # @example A rich text area with a custom direct upload url and a custom stimulus controller
-        #   = f.govuk_rich_text_area :description,
-        #     data: {
-        #             direct_upload_url: direct_uploads_url,
-        #             controller:        "content--editor--trix",
-        #             action:            "trix-initialize->content--editor--trix#trixInitialize",
-        #           }
-        #
-        def govuk_rich_text_area(attribute_name, hint: {}, label: {}, caption: {}, form_group: {}, **, &)
-          Elements::RichTextArea.new(
+        def govuk_rich_textarea(attribute_name, hint: {}, label: {}, caption: {}, form_group: {}, **, &)
+          Elements::RichTextarea.new(
             self, object_name, attribute_name,
             hint:, label:, caption:, form_group:, **, &
           ).html
         end
+        alias_method :govuk_rich_text_area, :govuk_rich_textarea
 
         # Generates a +combobox+ element that uses Hotwire Combobox to generate a combobox selection element.
         # @see https://hotwirecombobox.com

data/lib/katalyst/govuk/form_builder/elements/{rich_text_area.rb → rich_textarea.rb}

@@ -6,7 +6,7 @@ module Katalyst
   module GOVUK
     module FormBuilder
       module Elements
-        class RichTextArea < GOVUKDesignSystemFormBuilder::Base
+        class RichTextarea < GOVUKDesignSystemFormBuilder::Base
           using GOVUKDesignSystemFormBuilder::PrefixableArray
 
           include GOVUKDesignSystemFormBuilder::Traits::Error
@@ -38,18 +38,18 @@ module Katalyst
 
           def html
             GOVUKDesignSystemFormBuilder::Containers::FormGroup.new(*bound, **@form_group).html do
-              safe_join([label_element, supplemental_content, hint_element, error_element, rich_text_area])
+              safe_join([label_element, supplemental_content, hint_element, error_element, rich_textarea])
             end
           end
 
           private
 
-          def rich_text_area
-            @builder.rich_text_area(@attribute_name, **attributes(@html_attributes))
+          def rich_textarea
+            @builder.rich_textarea(@attribute_name, **attributes(@html_attributes))
           end
 
           def classes
-            build_classes(%(richtextarea), %(richtextarea--error) => has_errors?).prefix(brand)
+            build_classes(%(rich-textarea), %(rich-textarea--error) => has_errors?).prefix(brand)
           end
 
           def options

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

@@ -13,6 +13,7 @@
 @import "fieldset";
 @import "file-upload";
 @import "footer";
+@import "generic-header";
 @import "header";
 @import "hint";
 @import "input";

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

@@ -13,6 +13,7 @@
 @use "fieldset";
 @use "file-upload";
 @use "footer";
+@use "generic-header";
 @use "header";
 @use "hint";
 @use "input";

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/_mixin.scss

@@ -41,7 +41,7 @@
     // __item using flex-wrap because we want hints on a separate line.
     max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});
     margin-bottom: 0;
-    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) base.govuk-spacing(3);
+    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) $govuk-checkboxes-label-padding-left-right;
     cursor: pointer;
     // remove 300ms pause on mobile
     touch-action: manipulation;
@@ -206,6 +206,12 @@
     }
 
     .govuk-checkboxes__label {
+      // Recalculate max-width to account for the smaller checkbox size
+      // 1px comes from padding-left (defined below)
+      max-width: calc(
+        100% - #{($govuk-touch-target-size - $input-offset) + $govuk-checkboxes-label-padding-left-right + 1px}
+      );
+
       // Create a tiny space between the small checkbox hover state so that it
       // doesn't clash with the label
       padding-left: 1px;

data/node_modules/govuk-frontend/dist/govuk/components/generic-header/_generic-header.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("generic-header");
+
+@import "index";
+

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

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/generic-header") {
+  @include mixin.styles;
+}
+

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

@@ -0,0 +1,5 @@
+@use "../../custom-properties";
+@use "mixin";
+
+@include mixin.styles;
+

data/node_modules/govuk-frontend/dist/govuk/components/generic-header/_mixin.scss

@@ -0,0 +1,136 @@
+////
+/// @group components/generic-header
+////
+
+@use "../../base";
+
+/// Width of transparent bottom border of header.
+/// Set to provide a visual border in forced colour modes
+///
+/// @type Number
+/// @access private
+$header-forced-colour-border-width: 1px;
+
+/// Shared block header styles, with automatic background setting
+///
+/// @param {String} $background - background colour of header
+/// @access private
+@mixin block-styles($background: base.govuk-colour("black")) {
+  @include base.govuk-font($size: 16, $line-height: 1);
+
+  // Add a transparent bottom border for forced-colour modes
+  border-bottom: $header-forced-colour-border-width solid transparent;
+  color: base.govuk-colour("white");
+  background: $background;
+
+  @media print {
+    border-bottom-width: 0;
+    color: base.govuk-functional-colour(text);
+    background: transparent;
+  }
+}
+
+/// Shared header full width container styles
+///
+/// @access private
+@mixin full-width-container-styles() {
+  padding: 0 base.$govuk-gutter-half;
+}
+
+/// Shared header logo container element styles, with automating padding setting
+///
+/// @param {String} $padding-top - top padding of logo container
+/// @param {String} $padding-bottom - bottom padding of logo container
+/// @access private
+@mixin logo-styles(
+  $padding-top: (
+    base.govuk-spacing(3)
+  ),
+  $padding-bottom: (
+    base.govuk-spacing(3)
+  )
+) {
+  padding-top: $padding-top;
+  padding-bottom: $padding-bottom;
+}
+
+/// Shared header logo link element styles
+///
+/// @access private
+@mixin link-styles {
+  // Avoid using the `base.govuk-link-common` mixin because the links in the
+  // header get a special treatment, because:
+  //
+  // - underlines are only visible on hover
+  // - all links get a 3px underline regardless of text size, as there are
+  //   multiple grouped elements close to one another and having slightly
+  //   different underline widths looks unbalanced
+  //
+  // Font size needs to be set on the link so that the box sizing is correct
+  // in Firefox
+  display: inline;
+  margin-right: base.govuk-spacing(2);
+  font-size: 30px; // We don't have a mixin that produces 30px font size
+  text-decoration: none;
+
+  @include base.govuk-link-style-inverse;
+
+  &:link,
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:active {
+    // Negate the added border
+    $link-underline-thickness: 3px;
+    margin-bottom: $link-underline-thickness * -1;
+    border-bottom: $link-underline-thickness solid;
+  }
+
+  &:focus {
+    // Remove any borders that show when focused and hovered.
+    margin-bottom: 0;
+    border-bottom: 0;
+
+    @include base.govuk-focused-text;
+  }
+
+  @media print {
+    &:link,
+    &:visited {
+      color: base.govuk-functional-colour(text);
+    }
+
+    // Do not append link href to GOV.UK link when printing (e.g. '(/)')
+    &::after {
+      content: "";
+    }
+  }
+}
+
+/// @access private
+@mixin styles {
+  .govuk-generic-header {
+    @include block-styles;
+  }
+
+  .govuk-generic-header__container--full-width {
+    @include full-width-container-styles;
+  }
+
+  .govuk-generic-header__logo {
+    @include logo-styles;
+  }
+
+  .govuk-generic-header__homepage-link {
+    @include link-styles;
+
+    // Automatically centre align direct child elements to help users with
+    // positioning their logo assets eg: as `svg`s or `img`s
+    > * {
+      vertical-align: top;
+    }
+  }
+}
+

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

@@ -1,45 +1,26 @@
 @use "../../base";
+@use "../generic-header/mixin" as genericHeader;
 
 /// @access private
 @mixin styles {
   $logo-bottom-margin: 2px;
 
   .govuk-header {
-    @include base.govuk-font($size: 16, $line-height: 1);
-
-    // Add a transparent bottom border for forced-colour modes
-    border-bottom: 1px solid transparent;
-    color: base.govuk-colour("white");
-    background: base.govuk-functional-colour(brand);
+    @include genericHeader.block-styles($background: base.govuk-functional-colour("brand"));
   }
 
   .govuk-header__container--full-width {
-    padding: 0 base.govuk-spacing(3);
+    @include genericHeader.full-width-container-styles;
   }
 
   .govuk-header__logo {
-    box-sizing: border-box;
-
     // Magic numbers, set padding to vertically centre align the logo
-    padding-top: 16px;
-    padding-bottom: 14px - $logo-bottom-margin;
+    @include genericHeader.logo-styles($padding-top: 16px, $padding-bottom: 14px - $logo-bottom-margin);
   }
 
   .govuk-header__homepage-link {
-    // Avoid using the `base.govuk-link-common` mixin because the links in the
-    // header get a special treatment, because:
-    //
-    // - underlines are only visible on hover
-    // - all links get a 3px underline regardless of text size, as there are
-    //   multiple grouped elements close to one another and having slightly
-    //   different underline widths looks unbalanced
-    //
-    // Font size needs to be set on the link so that the box sizing is correct
-    // in Firefox
-    display: inline;
-    margin-right: base.govuk-spacing(2);
-    font-size: 30px; // We don't have a mixin that produces 30px font size
-    text-decoration: none;
+    @include genericHeader.link-styles;
+
     // Remove word-spacing from within the logo so we can ignore
     // whitespace characters in the HTML
     word-spacing: base.govuk-px-to-rem(-6px);
@@ -47,28 +28,6 @@
     > * {
       word-spacing: 0;
     }
-    @include base.govuk-link-style-inverse;
-
-    &:link,
-    &:visited {
-      text-decoration: none;
-    }
-
-    &:hover,
-    &:active {
-      // Negate the added border
-      $link-underline-thickness: 3px;
-      margin-bottom: $link-underline-thickness * -1;
-      border-bottom: $link-underline-thickness solid;
-    }
-
-    &:focus {
-      // Remove any borders that show when focused and hovered.
-      margin-bottom: 0;
-      border-bottom: 0;
-
-      @include base.govuk-focused-text;
-    }
   }
 
   .govuk-header__logotype {
@@ -146,24 +105,6 @@
   }
 
   @media print {
-    .govuk-header {
-      border-bottom-width: 0;
-      color: base.govuk-colour("black");
-      background: transparent;
-    }
-
-    .govuk-header__homepage-link {
-      &:link,
-      &:visited {
-        color: base.govuk-colour("black");
-      }
-
-      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
-      &::after {
-        display: none;
-      }
-    }
-
     .govuk-header__product-name {
       // Fix product name alignment in Firefox when printing
       @-moz-document url-prefix() {

data/node_modules/govuk-frontend/dist/govuk/components/input/_mixin.scss

@@ -125,6 +125,7 @@
     padding: base.govuk-spacing(1);
     border: base.$govuk-border-width-form-element solid;
     border-color: base.govuk-functional-colour(input-border);
+    color: base.govuk-functional-colour(text);
     background-color: base.govuk-colour("black", $variant: "tint-95");
     text-align: center;
     white-space: nowrap;

data/node_modules/govuk-frontend/dist/govuk/components/radios/_mixin.scss

@@ -46,7 +46,7 @@
       100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + base.govuk-spacing(3))}
     );
     margin-bottom: 0;
-    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) base.govuk-spacing(3);
+    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) $govuk-radios-label-padding-left-right;
     cursor: pointer;
     // remove 300ms pause on mobile
     touch-action: manipulation;
@@ -227,6 +227,12 @@
     }
 
     .govuk-radios__label {
+      // Recalculate max-width to account for the smaller radio size
+      // 1px comes from padding-left (defined below)
+      max-width: calc(
+        100% - #{($govuk-touch-target-size - $input-offset) + $govuk-radios-label-padding-left-right + 1px}
+      );
+
       // Create a tiny space between the small radio hover state so that it
       // doesn't clash with the label
       padding-left: 1px;

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_frontend-version.mixin.scss

@@ -7,7 +7,7 @@
   // `$govuk-output-custom-properties` is true or not to help with checking if
   // multiple stylesheets are outputting the same version
   :root {
-    --govuk-frontend-version: "6.2.0";
+    --govuk-frontend-version: "6.3.0";
   }
 }
 

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

@@ -24,7 +24,7 @@ $govuk-imported-modules: () !default;
 ///
 /// @param {String} $name - Name of module - must be unique within the codebase
 /// @content The passed content will only be outputted if a module of the same
-///   $name has not already been outputted
+///   $name has not already been outputted. Use only with `@import`, not `@use`.
 /// @access public
 
 @mixin govuk-exports($name) {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-govuk-formbuilder
 version: !ruby/object:Gem::Version
-  version: 1.27.0
+  version: 1.28.0
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -54,7 +54,7 @@ files:
 - lib/katalyst/govuk/form_builder/elements/image.rb
 - 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/rich_textarea.rb
 - lib/katalyst/govuk/form_builder/engine.rb
 - lib/katalyst/govuk/form_builder/extensions.rb
 - lib/katalyst/govuk/form_builder/frontend.rb
@@ -127,6 +127,10 @@ files:
 - node_modules/govuk-frontend/dist/govuk/components/footer/_index.import.scss
 - node_modules/govuk-frontend/dist/govuk/components/footer/_index.scss
 - node_modules/govuk-frontend/dist/govuk/components/footer/_mixin.scss
+- node_modules/govuk-frontend/dist/govuk/components/generic-header/_generic-header.import.scss
+- node_modules/govuk-frontend/dist/govuk/components/generic-header/_index.import.scss
+- node_modules/govuk-frontend/dist/govuk/components/generic-header/_index.scss
+- node_modules/govuk-frontend/dist/govuk/components/generic-header/_mixin.scss
 - node_modules/govuk-frontend/dist/govuk/components/header/_header.import.scss
 - node_modules/govuk-frontend/dist/govuk/components/header/_index.import.scss
 - node_modules/govuk-frontend/dist/govuk/components/header/_index.scss