katalyst-govuk-formbuilder 1.19.0 → 1.21.0

data/lib/katalyst/govuk/form_builder/elements/document.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+require "govuk_design_system_formbuilder"
+
+module Katalyst
+  module GOVUK
+    module FormBuilder
+      module Elements
+        class Document < GOVUKDesignSystemFormBuilder::Base
+          include ActionDispatch::Routing::RouteSet::MountedHelpers
+
+          include GOVUKDesignSystemFormBuilder::Traits::Error
+          include GOVUKDesignSystemFormBuilder::Traits::Hint
+          include GOVUKDesignSystemFormBuilder::Traits::Label
+          include GOVUKDesignSystemFormBuilder::Traits::Supplemental
+          include GOVUKDesignSystemFormBuilder::Traits::HTMLAttributes
+          include GOVUKDesignSystemFormBuilder::Traits::HTMLClasses
+
+          include FormBuilder::Traits::File
+
+          def initialize(builder, object_name, attribute_name, hint:, label:, caption:, form_group:, mime_types:,
+                         **kwargs, &)
+            super(builder, object_name, attribute_name, &)
+
+            @mime_types      = mime_types
+            @label           = label
+            @caption         = caption
+            @hint            = hint
+            @html_attributes = kwargs.merge(file_input_options)
+            @form_group      = form_group
+          end
+
+          def html
+            GOVUKDesignSystemFormBuilder::Containers::FormGroup.new(
+              *bound,
+              **default_form_group_options(**@form_group),
+            ).html do
+              safe_join([label_element, preview, hint_element, error_element, file, destroy_element,
+                         supplemental_content])
+            end
+          end
+
+          def preview
+            options = {}
+            add_option(options, :data, "#{stimulus_controller}_target", "preview")
+            add_option(options, :class, "preview-file")
+            options[:hidden] = "" unless preview?
+
+            tag.div(**options) do
+              filename = @builder.object.send(@attribute_name).filename.to_s
+              tag.p(filename, class: "preview-filename") + destroy_element_trigger
+            end
+          end
+
+          private
+
+          def stimulus_controller
+            "govuk-document-field"
+          end
+
+          def form_group_class
+            "govuk-document-field"
+          end
+        end
+      end
+    end
+  end
+end

data/lib/katalyst/govuk/form_builder/elements/image.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module GOVUK
+    module FormBuilder
+      module Elements
+        class Image < GOVUKDesignSystemFormBuilder::Base
+          include ActionDispatch::Routing::RouteSet::MountedHelpers
+
+          include GOVUKDesignSystemFormBuilder::Traits::Error
+          include GOVUKDesignSystemFormBuilder::Traits::Hint
+          include GOVUKDesignSystemFormBuilder::Traits::Label
+          include GOVUKDesignSystemFormBuilder::Traits::Supplemental
+          include GOVUKDesignSystemFormBuilder::Traits::HTMLAttributes
+          include GOVUKDesignSystemFormBuilder::Traits::HTMLClasses
+
+          include FormBuilder::Traits::File
+
+          def initialize(builder, object_name, attribute_name, hint:, label:, caption:, form_group:, mime_types:,
+                         **kwargs, &)
+            super(builder, object_name, attribute_name, &)
+
+            @mime_types      = mime_types
+            @label           = label
+            @caption         = caption
+            @hint            = hint
+            @html_attributes = kwargs.merge(file_input_options)
+            @form_group      = form_group
+          end
+
+          def html
+            GOVUKDesignSystemFormBuilder::Containers::FormGroup.new(
+              *bound,
+              **default_form_group_options(**@form_group),
+            ).html do
+              safe_join([label_element, preview, hint_element, error_element, file, destroy_element,
+                         supplemental_content])
+            end
+          end
+
+          def preview
+            options = {}
+            add_option(options, :data, "#{stimulus_controller}_target", "preview")
+            add_option(options, :class, "preview-image")
+            options[:hidden] = "" unless preview?
+
+            tag.div(**options) do
+              tag.img(src: preview_url, class: "image-thumbnail") + destroy_element_trigger
+            end
+          end
+
+          private
+
+          def stimulus_controller
+            "govuk-image-field"
+          end
+
+          def form_group_class
+            "govuk-image-field"
+          end
+        end
+      end
+    end
+  end
+end

data/lib/katalyst/govuk/{formbuilder → form_builder}/elements/label.rb

@@ -4,7 +4,7 @@ require "govuk_design_system_formbuilder"
 
 module Katalyst
   module GOVUK
-    module Formbuilder
+    module FormBuilder
       module Elements
         # Extend Elements::Label to add support for human_attribute_name as a fallback
         module Label

data/lib/katalyst/govuk/{formbuilder → form_builder}/elements/legend.rb

@@ -4,7 +4,7 @@ require "govuk_design_system_formbuilder"
 
 module Katalyst
   module GOVUK
-    module Formbuilder
+    module FormBuilder
       module Elements
         # Extend Elements::Legend to add support for human_attribute_name as a fallback
         module Legend

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

@@ -4,7 +4,7 @@ require "govuk_design_system_formbuilder"
 
 module Katalyst
   module GOVUK
-    module Formbuilder
+    module FormBuilder
       module Elements
         class RichTextArea < GOVUKDesignSystemFormBuilder::Base
           using GOVUKDesignSystemFormBuilder::PrefixableArray

data/lib/katalyst/govuk/{formbuilder → form_builder}/engine.rb

@@ -6,15 +6,18 @@ require "rails/engine"
 
 module Katalyst
   module GOVUK
-    module Formbuilder
+    module FormBuilder
       class Engine < ::Rails::Engine
         ActiveSupport::Inflector.inflections(:en) do |inflect|
           inflect.acronym "GOVUK"
         end
 
-        config.eager_load_namespaces << Katalyst::GOVUK::Formbuilder
         config.paths.add("lib", autoload_once: true)
 
+        initializer "katalyst-govuk-formbuilder.autoload", before: :setup_once_autoloader do
+          Rails.autoloaders.once.ignore File.expand_path(root.join("lib/katalyst-govuk-formbuilder.rb"))
+        end
+
         initializer "katalyst-govuk-formbuilder.assets" do
           config.after_initialize do |app|
             if app.config.respond_to?(:assets)
@@ -25,7 +28,7 @@ module Katalyst
         end
 
         initializer "katalyst-govuk-formbuilder.extensions" do
-          GOVUKDesignSystemFormBuilder::Builder.include(Formbuilder::Extensions)
+          GOVUKDesignSystemFormBuilder::Builder.include(FormBuilder::Extensions)
         end
 
         initializer "katalyst-govuk-formbuilder.importmap", before: "importmap" do |app|

data/lib/katalyst/govuk/{formbuilder → form_builder}/extensions.rb

@@ -4,11 +4,12 @@ require "govuk_design_system_formbuilder"
 
 module Katalyst
   module GOVUK
-    module Formbuilder
+    module FormBuilder
       module Extensions
         extend ActiveSupport::Concern
 
         included do
+          GOVUKDesignSystemFormBuilder.include(Config)
           GOVUKDesignSystemFormBuilder::Builder.include(Builder)
           GOVUKDesignSystemFormBuilder::Elements::Label.include(Elements::Label)
           GOVUKDesignSystemFormBuilder::Elements::Legend.include(Elements::Legend)

data/lib/katalyst/govuk/{formbuilder → form_builder}/frontend.rb

@@ -2,7 +2,7 @@
 
 module Katalyst
   module GOVUK
-    module Formbuilder
+    module FormBuilder
       module Frontend
         # rubocop:disable Rails/OutputSafety
         def govuk_formbuilder_init

data/lib/katalyst/govuk/form_builder/traits/file.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+require "govuk_design_system_formbuilder"
+
+module Katalyst
+  module GOVUK
+    module FormBuilder
+      module Traits
+        module File
+          extend ActiveSupport::Concern
+
+          protected
+
+          def stimulus_controller_actions
+            <<~ACTIONS.gsub(/\s+/, " ").freeze
+              dragover->#{stimulus_controller}#dragover
+              dragenter->#{stimulus_controller}#dragenter
+              dragleave->#{stimulus_controller}#dragleave
+              drop->#{stimulus_controller}#drop
+            ACTIONS
+          end
+
+          def file
+            previous_input = @builder.hidden_field(@attribute_name, id: nil, value: value.signed_id) if attached?
+            file_input     = @builder.file_field(@attribute_name, attributes(@html_attributes))
+
+            safe_join([previous_input, file_input])
+          end
+
+          def destroy_element
+            return if @html_attributes[:optional].blank?
+
+            @builder.fields_for(:"#{@attribute_name}_attachment") do |form|
+              form.hidden_field :_destroy, value: false, data: { "#{stimulus_controller}_target" => "destroy" }
+            end
+          end
+
+          def destroy_element_trigger
+            return if @html_attributes[:optional].blank?
+
+            content_tag(:button, "", class: "file-destroy", data: { action: "#{stimulus_controller}#setDestroy" })
+          end
+
+          def preview_url
+            preview? ? main_app.polymorphic_path(value, only_path: true) : ""
+          end
+
+          def preview?
+            attached?
+          end
+
+          def attached?
+            value&.attached? && value.blob.persisted?
+          end
+
+          def value
+            @builder.object.send(@attribute_name)
+          end
+
+          def file_input_options
+            default_file_input_options = options
+
+            add_option(default_file_input_options, :accept, @mime_types.join(","))
+            add_option(default_file_input_options, :data, :action, "change->#{stimulus_controller}#onUpload")
+
+            default_file_input_options
+          end
+
+          def options
+            {
+              id:    field_id(link_errors: true),
+              class: classes,
+              aria:  { describedby: combine_references(hint_id, error_id, supplemental_id) },
+            }
+          end
+
+          using GOVUKDesignSystemFormBuilder::PrefixableArray
+
+          def classes
+            build_classes(%(file-upload), %(file-upload--error) => has_errors?).prefix(brand)
+          end
+
+          def default_form_group_options(**form_group_options)
+            add_option(form_group_options, :class, "govuk-form-group #{form_group_class}")
+            add_option(form_group_options, :data, :controller, stimulus_controller)
+            add_option(form_group_options, :data, :action, stimulus_controller_actions)
+            add_option(form_group_options, :data, :"#{stimulus_controller}_mime_types_value",
+                       @mime_types.to_json)
+
+            form_group_options
+          end
+
+          def add_option(options, key, *path)
+            if path.length > 1
+              add_option(options[key] ||= {}, *path)
+            else
+              options[key] = [options[key], *path].compact.join(" ")
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/katalyst/govuk/{formbuilder → form_builder}/traits/label.rb

@@ -4,7 +4,7 @@ require "govuk_design_system_formbuilder"
 
 module Katalyst
   module GOVUK
-    module Formbuilder
+    module FormBuilder
       module Traits
         # Extend GovukDesignSystemFormBuilder::Traits::Label set the default size to small for non-nested labels.
         module Label
@@ -14,7 +14,7 @@ module Katalyst
             private
 
             def label_content
-              default = @builder.fieldset_context.count.positive? ? {} : { size: "s" }
+              default = @builder.fieldset_context.any? ? {} : { size: "s" }
 
               case @label
               when Hash

data/lib/katalyst/govuk/form_builder.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "active_support"
+require "active_support/rails"
+
+module Katalyst
+  module GOVUK
+    module FormBuilder
+    end
+  end
+end
+
+require "katalyst/govuk/form_builder/engine"

data/lib/katalyst/govuk/formbuilder.rb

@@ -1,13 +1,10 @@
 # frozen_string_literal: true
 
-require "active_support"
+require "katalyst-govuk-formbuilder"
 
+# Backwards compatibility for Koi 4
 module Katalyst
   module GOVUK
-    module Formbuilder
-      extend ActiveSupport::Autoload
-    end
+    Formbuilder = FormBuilder
   end
 end
-
-require "katalyst/govuk/formbuilder/engine"

data/lib/katalyst-govuk-formbuilder.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require "katalyst/govuk/form_builder"

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

@@ -42,13 +42,22 @@
     border: 0 solid $govuk-service-navigation-link-colour;
 
     @include govuk-media-query($from: tablet) {
+      // inline-block is used as a fallback for browsers that don't support flexbox
+      display: inline-block;
+
       margin-top: 0;
       margin-bottom: 0;
       padding: govuk-spacing(4) 0;
 
       @include _govuk-rebrand {
         padding: govuk-spacing(3) 0;
-        line-height: 1.5;
+
+        // More magic numbers ahoy:
+        // 29 is the desired height of the element (60), minus top and bottom
+        // padding (2×15), minus bottom border (1); 19 is the font-size at this
+        // point. This gives us the perfect fractional line height to make the
+        // overall component 60px high
+        line-height: (29 / 19);
       }
 
       &:not(:last-child) {
@@ -57,6 +66,17 @@
     }
   }
 
+  // Remove the top margin of the first nav item if there is a service name but
+  // there's no menu button (either because it doesn't exist or it's hidden)
+  .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper {
+    .govuk-service-navigation__list:first-child,
+    .govuk-service-navigation__toggle[hidden] + .govuk-service-navigation__list {
+      .govuk-service-navigation__item:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
   .govuk-service-navigation__item--active {
     @include govuk-media-query($until: tablet) {
       // Negative offset the left margin so we can place a current page indicator
@@ -102,6 +122,13 @@
     @include govuk-link-style-text;
   }
 
+  // Allow navigation section to always take up maximum available space,
+  // rather than sizing to fit the content. This makes it easier to right align
+  // nav items and use slots.
+  .govuk-service-navigation__wrapper {
+    flex-grow: 1;
+  }
+
   //
   // Navigation list specific code
   //
@@ -165,11 +192,10 @@
       // However... IE11 totally trips over flexbox and doesn't wrap anything,
       // making all of the items into a single, horizontally scrolling row,
       // which is no good. This CSS hack removes the flexbox definition for
-      // IE 10 & 11, reverting it to the flawed, but OK, non-flexbox version.
+      // IE 9–11, reverting it to the flawed, but OK, non-flexbox version.
       //
-      // CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
-      // which also includes an explanation of why this works
-      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64
+      @media screen and (min-width: 0\0) {
         display: block;
       }
     }
@@ -182,6 +208,47 @@
   .govuk-service-navigation__active-fallback {
     font-weight: inherit;
   }
+
+  // Inverted colour scheme style intended for product pages
+  .govuk-service-navigation--inverse {
+    @include _govuk-rebrand {
+      // Remove bottom border to add width-container ones
+      border-bottom: none;
+
+      // Set colour here so non-link text (service name, slot content) can
+      // use it too.
+      color: govuk-colour("white");
+
+      background-color: $govuk-brand-colour;
+
+      .govuk-width-container {
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: $_govuk-rebrand-border-colour-on-blue-tint-95;
+      }
+
+      // Subtract 1px of space to account for the extra border-top
+      .govuk-service-navigation__container {
+        margin-top: -1px;
+      }
+
+      // Override the 'active' border colour
+      .govuk-service-navigation__item,
+      .govuk-service-navigation__service-name {
+        border-color: govuk-colour("white");
+      }
+
+      // Override link styles
+      .govuk-service-navigation__link {
+        @include govuk-link-style-inverse;
+      }
+
+      // Override mobile menu toggle colour when not focused
+      .govuk-service-navigation__toggle:not(:focus) {
+        color: currentcolor;
+      }
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */

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

@@ -1,11 +1,14 @@
 :root {
   // This variable is automatically overwritten during builds and releases.
   // It doesn't need to be updated manually.
-  --govuk-frontend-version: "5.10.2";
+  --govuk-frontend-version: "5.11.1";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {
-    --govuk-frontend-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+    --govuk-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+
+    // Deprecated, use `--govuk-breakpoint-[name]` instead
+    --govuk-frontend-breakpoint-#{$name}: var(--govuk-breakpoint-#{$name});
   }
 }
 

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

@@ -121,7 +121,9 @@
 /// @access public
 
 @function govuk-shade($colour, $percentage) {
-  @return mix(#000000, $colour, $percentage);
+  // Ensure the output is a hex string so that Safari <12 can render the colour
+  // without issues from float values in `rgb()`
+  @return _as-hexadecimal(mix(#000000, $colour, $percentage));
 }
 
 /// Make a colour lighter by mixing it with white
@@ -132,7 +134,34 @@
 /// @access public
 
 @function govuk-tint($colour, $percentage) {
-  @return mix(govuk-colour("white"), $colour, $percentage);
+  // Ensure the output is a hex string so that Safari <12 can render the colour
+  // without issues from float values in `rgb()`
+  @return _as-hexadecimal(mix(govuk-colour("white"), $colour, $percentage));
+}
+
+/// Converts a colour with potential float values for its RGB channels
+/// into hexadecimal notation
+///
+/// This ensures the colour is rendered properly by Safari < 12
+///
+/// @param {Colour} $colour - The colour to convert
+/// @return {Colour}
+/// @access private
+@function _as-hexadecimal($colour) {
+  @if not function-exists(change-color) {
+    @return $colour;
+  }
+
+  // `red`,`green` and `blue` functions are limited to 'legacy' colour spaces
+  // ensuring we don't get floating computations on them
+  $parts: (
+    "red": red($colour),
+    "green": green($colour),
+    "blue": blue($colour),
+    "alpha": alpha($colour)
+  );
+
+  @return change-color($colour, $parts...);
 }
 
 /*# sourceMappingURL=_colour.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss

@@ -77,7 +77,10 @@
 
 @mixin govuk-visually-hidden-focusable($important: true) {
   // IE 11 doesn't support the combined `:not(:active, :focus)` syntax.
-  &:not(:active):not(:focus) {
+  // Also allows for ':focus' companion classes from postcss-pseudo-classes
+  // which the plugin unfortunately doesn't handle automatically.
+  // stylelint-disable-next-line selector-class-pattern
+  &:not(:active):not(:focus):not(.\:focus) {
     @include _govuk-visually-hide-content($important: $important);
   }
 }

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

@@ -184,12 +184,12 @@ $govuk-link-active-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access private
-$_govuk-rebrand-template-background-colour: #f4f8fb; // Blue tint 95%
+$_govuk-rebrand-template-background-colour: govuk-tint($govuk-brand-colour, 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%
+$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-tint($govuk-brand-colour, 50%);
 
 /*# sourceMappingURL=_colours-applied.scss.map */

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

@@ -20,4 +20,17 @@
 
 @import "links";
 
+// LibSass evaluates this as a single unquoted string, equivalent to
+// "true == false", whereas Dart Sass evaluates it as "true" == "false".
+// Because a string in Sass is truthy, LibSass will output the warning; Dart
+// Sass will not.
+@if #{true} == #{false} {
+  @include _warning(
+    "libsass",
+    "It looks like you may be using LibSass to compile your Sass. LibSass is " +
+      "deprecated and will not be supported by the next major version of " +
+      "GOV.UK Frontend. See https://sass-lang.com/libsass/ for more information."
+  );
+}
+
 /*# sourceMappingURL=_index.scss.map */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-govuk-formbuilder
 version: !ruby/object:Gem::Version
-  version: 1.19.0
+  version: 1.21.0
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -35,22 +35,29 @@ files:
 - app/assets/builds/katalyst/govuk/formbuilder.css
 - app/assets/builds/katalyst/govuk/formbuilder.js
 - app/assets/builds/katalyst/govuk/formbuilder.min.js
+- app/assets/builds/katalyst/govuk/formbuilder.min.js.map
 - app/assets/config/katalyst-govuk-formbuilder.js
 - app/assets/stylesheets/katalyst/govuk/components/combobox/_index.scss
 - app/assets/stylesheets/katalyst/govuk/components/richtextarea/_index.scss
 - app/assets/stylesheets/katalyst/govuk/formbuilder.scss
 - config/importmap.rb
+- lib/katalyst-govuk-formbuilder.rb
+- lib/katalyst/govuk/form_builder.rb
+- lib/katalyst/govuk/form_builder/builder.rb
+- lib/katalyst/govuk/form_builder/config.rb
+- lib/katalyst/govuk/form_builder/containers/fieldset_context.rb
+- lib/katalyst/govuk/form_builder/elements/combobox.rb
+- lib/katalyst/govuk/form_builder/elements/document.rb
+- 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/engine.rb
+- lib/katalyst/govuk/form_builder/extensions.rb
+- lib/katalyst/govuk/form_builder/frontend.rb
+- lib/katalyst/govuk/form_builder/traits/file.rb
+- lib/katalyst/govuk/form_builder/traits/label.rb
 - lib/katalyst/govuk/formbuilder.rb
-- lib/katalyst/govuk/formbuilder/builder.rb
-- lib/katalyst/govuk/formbuilder/containers/fieldset_context.rb
-- lib/katalyst/govuk/formbuilder/elements/combobox.rb
-- lib/katalyst/govuk/formbuilder/elements/label.rb
-- lib/katalyst/govuk/formbuilder/elements/legend.rb
-- lib/katalyst/govuk/formbuilder/elements/rich_text_area.rb
-- lib/katalyst/govuk/formbuilder/engine.rb
-- lib/katalyst/govuk/formbuilder/extensions.rb
-- lib/katalyst/govuk/formbuilder/frontend.rb
-- lib/katalyst/govuk/formbuilder/traits/label.rb
 - node_modules/govuk-frontend/dist/govuk/_base.scss
 - node_modules/govuk-frontend/dist/govuk/all.scss
 - node_modules/govuk-frontend/dist/govuk/components/_all.scss
@@ -196,6 +203,7 @@ homepage: https://github.com/katalyst/govuk-formbuilder
 licenses:
 - MIT
 metadata:
+  changelog_uri: https://github.com/katalyst/govuk-formbuilder/releases
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: