govuk_publishing_components 61.4.1 → 62.1.0

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -64,18 +64,18 @@
     } %>
   </div>
 
-  <h2 class="component-doc-h2" id="how-it-looks">
+  <h2 class="govuk-heading-m" id="how-it-looks">
     <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
-    <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
-    <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
+    <small class="govuk-!-font-size-16">(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
+    <small class="govuk-!-font-size-16">(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
-  <h2 class="component-doc-h2" id="how-to-call-this-component">How to call this component</h2>
+  <h2 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
-    <h2 class="component-doc-h2" id="govuk-design-system">GOV.UK Design System</h2>
+    <h2 class="govuk-heading-m" id="govuk-design-system">GOV.UK Design System</h2>
     <div class="component-markdown">
       <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
 
@@ -90,7 +90,7 @@
   <% if @component_doc.accessibility_criteria.present? %>
     <div class="govuk-grid-row component-accessibility-criteria" id="accessibility-acceptance-criteria">
       <div class="govuk-grid-column-two-thirds">
-        <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
+        <h2 class="govuk-heading-m">Accessibility acceptance criteria</h2>
         <div class="component-markdown">
           <%= raw(@component_doc.html_accessibility_criteria) %>
         </div>
@@ -100,7 +100,7 @@
 
   <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>
     <div class="examples">
-      <h2 class="component-doc-h2" id="other-examples">Other examples</h2>
+      <h2 class="govuk-heading-m" id="other-examples">Other examples</h2>
 
       <% if @component_doc.uses_component_wrapper_helper? %>
         <div class="component-example" id="standard-options">

data/app/views/govuk_publishing_components/components/_inverse_header.html.erb

@@ -8,6 +8,7 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-inverse-header")
   component_helper.add_class("gem-c-inverse-header--full-width") if local_assigns[:full_width]
+  component_helper.add_class("gem-c-inverse-header--html-publication-header") if local_assigns[:html_publication_header]
   component_helper.add_class("govuk-!-padding-top-#{padding_top}") if [*0..9].include?(padding_top)
   component_helper.add_class("govuk-!-padding-bottom-#{padding_bottom}") if [*0..9].include?(padding_bottom)
 %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb

@@ -4,31 +4,33 @@
   lang = shared_helper.t_locale("components.related_navigation.ukraine.title")
   data_module = "ga4-link-tracker" unless disable_ga4
 %>
-<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--ukraine", data: { module: data_module } do %>
-  <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
-  <%= tag.ul class: "gem-c-contextual-sidebar__list" do %>
-    <% index_total = t("components.related_navigation.ukraine.links").length %>
-    <% t("components.related_navigation.ukraine.links").each_with_index do |link, index| %>
-      <%= tag.li class: "gem-c-contextual-sidebar__text govuk-body" do %>
-        <%
-          ga4_attributes = {
-            event_name: "navigation",
-            type: "related content",
-            index_section: "#{ga4_tracking_counts.index_section_count}",
-            index_link: "#{index + 1}",
-            index_section_count: "#{ga4_tracking_counts.index_section_count}",
-            index_total: "#{index_total}",
-            section: title,
-          } unless disable_ga4
-        %>
-        <%= link_to link[:label],
-          link[:href],
-          class: "govuk-link",
-          data: {
-            ga4_link: ga4_attributes,
-          },
-          lang: lang %>
+<div class="gem-c-contextual-sidebar__cta-ukraine">
+  <%= tag.div class: "gem-c-contextual-sidebar__cta", data: { module: data_module } do %>
+    <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
+    <%= tag.ul class: "gem-c-contextual-sidebar__list" do %>
+      <% index_total = t("components.related_navigation.ukraine.links").length %>
+      <% t("components.related_navigation.ukraine.links").each_with_index do |link, index| %>
+        <%= tag.li class: "gem-c-contextual-sidebar__text govuk-body" do %>
+          <%
+            ga4_attributes = {
+              event_name: "navigation",
+              type: "related content",
+              index_section: "#{ga4_tracking_counts.index_section_count}",
+              index_link: "#{index + 1}",
+              index_section_count: "#{ga4_tracking_counts.index_section_count}",
+              index_total: "#{index_total}",
+              section: title,
+            } unless disable_ga4
+          %>
+          <%= link_to link[:label],
+            link[:href],
+            class: "govuk-link",
+            data: {
+              ga4_link: ga4_attributes,
+            },
+            lang: lang %>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+</div>

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -874,6 +874,12 @@ examples:
           <li>two</li>
           <li>three</li>
         </ul>
+        <h2>unordered list without bullets:</h2>
+        <ul class="list-no-bullets">
+          <li>one</li>
+          <li>two</li>
+          <li>three</li>
+        </ul>
   legislative_lists:
     description: Example taken from [GOV.UK Immigration rules](https://www.gov.uk/guidance/immigration-rules/immigration-rules-introduction)
     data:

data/app/views/govuk_publishing_components/components/docs/inverse_header.yml

@@ -1,9 +1,9 @@
 name: Inverse header
-description: A wrapper to contain header content in white text
+description: A wrapper to contain header content
 body: |
-  This component can be passed a block of template code and will wrap it in a blue header. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings but unopinionated about its contents.
+  This component can be passed a block of template code and will wrap it in a light blue header. Implemented to accommodate topic and list page headings but unopinionated about its contents.
 
-  If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/links/#links-on-dark-backgrounds).
+  If passing links to the block make sure to add [the inverse link style](#with_paragraph_and_link), or in the case of the html publication header variant, [the inverse modifier](https://design-system.service.gov.uk/styles/links/#links-on-dark-backgrounds).
 uses_component_wrapper_helper: true
 accessibility_criteria: |
   The component must:
@@ -17,7 +17,6 @@ examples:
           <%= render "govuk_publishing_components/components/heading", {
             text: "Education, Training and Skills",
             font_size: "xl",
-            inverse: true,
             padding: true,
           } %>
           <!-- end of example content -->
@@ -30,7 +29,6 @@ examples:
         <!-- example content -->
           <%= render "govuk_publishing_components/components/heading", {
             text: "Education, Training and Skills",
-            inverse: true,
             margin_bottom: 0
           } %>
           <!-- end of example content -->
@@ -43,38 +41,40 @@ examples:
             <%= render "govuk_publishing_components/components/heading", {
               text: "Education, Training and Skills",
               font_size: "xl",
-              inverse: true,
               padding: true,
             } %>
             <!-- end of example content -->
-  with_subtext:
+  html_publication_header:
+    description: "The html publication header with a blue background is used on HTML publications and CSV previews. [See example of a HTML publication on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application), and [an example of a CSV preview on GOV.UK here](https://www.gov.uk/csv-preview/6756eeb07ec19a3516f79a3d/Malpractice_in_VTQ_-_Example_CSV_File.csv)"
     data:
-      subtext: This is some text
+      html_publication_header: true
       block: |
         <!-- example content -->
           <%= render "govuk_publishing_components/components/heading", {
-            text: "Education, Training and Skills",
+            text: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
             inverse: true,
-            margin_bottom: 0
+            context: "Notice",
+            padding: true,
+            font_size: "xl"
           } %>
+          <p class="publication-header__last-changed">Published 22 April 2016</p>
           <!-- end of example content -->
-  html_publication_header:
-    description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
+  html_publication_header_with_subtext:
+    description: "The white subtext can be used with the html publication header variant. We don't currently support black subtext to be used with the default variant as it's not in use on GOV.UK. If you need this please add it as a variant to the component."
     data:
+      subtext: This is some text
+      html_publication_header: true
       block: |
         <!-- example content -->
           <%= render "govuk_publishing_components/components/heading", {
-            text: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
+            text: "Education, Training and Skills",
             inverse: true,
-            context: "Notice",
-            padding: true,
-            font_size: "xl"
+            margin_bottom: 0
           } %>
-          <p class="publication-header__last-changed">Published 22 April 2016</p>
           <!-- end of example content -->
   with_paragraph_and_link:
     data:
       block: |
-        <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
-          Schools and academies, further and higher education, apprenticeships and <a href="#other-skills" class="govuk-link govuk-link--inverse">other skills</a> training, student funding, early years.
+        <p class="gem-c-lead-paragraph">
+          Schools and academies, further and higher education apprenticeships and <a href="#other-skills" class="govuk-link gem-c-inverse-header__link">other skills</a> training, student funding, early years.
         </p>

data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml

@@ -28,6 +28,12 @@ examples:
         name: 'Single Identity'
         url: 'http://www.gov.uk'
         crest: 'single-identity'
+  no_identity:
+    data:
+      organisation:
+        name: 'No Identity'
+        url: 'http://www.gov.uk'
+        crest: 'no-identity'
   attorney_generals_office:
     data:
       organisation:
@@ -139,7 +145,7 @@ examples:
         name: 'Land Registry'
         url: '/government/organisations/land-registry'
         brand: 'department-for-business-innovation-skills'
-        crest: null
+        crest: "custom"
         image:
           url: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/69/HMLR_logo.png'
           alt_text: 'Land Registry'

data/config/routes.rb

@@ -1,5 +1,6 @@
 GovukPublishingComponents::Engine.routes.draw do
   get "/audit" => "audit#show", as: :audit
+  get "/applications" => "applications_page#show", as: :apps
   root to: "component_guide#index", as: :component_guide
   get ":component/preview" => "component_guide#preview", as: :component_preview_all
   get ":component/:example/preview" => "component_guide#preview", as: :component_preview

data/lib/govuk_publishing_components/minitest/component_guide_test.rb

@@ -11,7 +11,7 @@ module GovukPublishingComponents
           assert_equal "function", evaluate_script("typeof window.GOVUK.AccessibilityTest"), "AccessibilityTest JavaScript isn’t available"
           assert_equal "string", evaluate_script("typeof window.axe.version"), "aXe accessibility test library isn’t available"
 
-          all(:css, ".component-list a").map { |el| "#{el[:href]}/preview" }.each do |component|
+          all(:css, ".govuk-list.govuk-list--bullet a").map { |el| "#{el[:href]}/preview" }.each do |component|
             visit component
             assert page.has_css?(".js-test-a11y-finished"), "Accessibility test did not run on #{component}"
             assert page.has_css?(".js-test-a11y-success"), "Accessibility test found violations on #{component}"

data/lib/govuk_publishing_components/presenters/organisation_logo_helper.rb

@@ -30,9 +30,15 @@ module GovukPublishingComponents
         logo_class = "gem-c-organisation-logo__container"
         logo_class = "#{logo_class} gem-c-organisation-logo__link" if url
         logo_class = "#{logo_class} gem-c-organisation-logo__link-hide-underline" if hide_underline
-        logo_class = "#{logo_class} gem-c-organisation-logo__crest gem-c-organisation-logo__crest--#{crest}" if crest
+        logo_class = "#{logo_class} gem-c-organisation-logo__crest gem-c-organisation-logo__crest--#{crest}" if crest_has_visual_identity?
         logo_class
       end
+
+    private
+
+      def crest_has_visual_identity?
+        crest.present? && !%w[no-identity custom].include?(crest)
+      end
     end
   end
 end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "61.4.1".freeze
+  VERSION = "62.1.0".freeze
 end

data/node_modules/govuk-frontend/dist/govuk/all.bundle.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = global.GOVUKFrontend || {}));
 })(this, (function (exports) { 'use strict';
 
-  const version = '5.11.2';
+  const version = '5.13.0';
 
   function getBreakpoint(name) {
     const property = `--govuk-breakpoint-${name}`;
@@ -429,7 +429,7 @@
         return 'other';
       }
       const translation = this.translations[lookupKey];
-      const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : this.selectPluralFormUsingFallbackRules(count);
+      const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : 'other';
       if (isObject(translation)) {
         if (preferredForm in translation) {
           return preferredForm;
@@ -440,132 +440,7 @@
       }
       throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`);
     }
-    selectPluralFormUsingFallbackRules(count) {
-      count = Math.abs(Math.floor(count));
-      const ruleset = this.getPluralRulesForLocale();
-      if (ruleset) {
-        return I18n.pluralRules[ruleset](count);
-      }
-      return 'other';
-    }
-    getPluralRulesForLocale() {
-      const localeShort = this.locale.split('-')[0];
-      for (const pluralRule in I18n.pluralRulesMap) {
-        const languages = I18n.pluralRulesMap[pluralRule];
-        if (languages.includes(this.locale) || languages.includes(localeShort)) {
-          return pluralRule;
-        }
-      }
-    }
   }
-  I18n.pluralRulesMap = {
-    arabic: ['ar'],
-    chinese: ['my', 'zh', 'id', 'ja', 'jv', 'ko', 'ms', 'th', 'vi'],
-    french: ['hy', 'bn', 'fr', 'gu', 'hi', 'fa', 'pa', 'zu'],
-    german: ['af', 'sq', 'az', 'eu', 'bg', 'ca', 'da', 'nl', 'en', 'et', 'fi', 'ka', 'de', 'el', 'hu', 'lb', 'no', 'so', 'sw', 'sv', 'ta', 'te', 'tr', 'ur'],
-    irish: ['ga'],
-    russian: ['ru', 'uk'],
-    scottish: ['gd'],
-    spanish: ['pt-PT', 'it', 'es'],
-    welsh: ['cy']
-  };
-  I18n.pluralRules = {
-    arabic(n) {
-      if (n === 0) {
-        return 'zero';
-      }
-      if (n === 1) {
-        return 'one';
-      }
-      if (n === 2) {
-        return 'two';
-      }
-      if (n % 100 >= 3 && n % 100 <= 10) {
-        return 'few';
-      }
-      if (n % 100 >= 11 && n % 100 <= 99) {
-        return 'many';
-      }
-      return 'other';
-    },
-    chinese() {
-      return 'other';
-    },
-    french(n) {
-      return n === 0 || n === 1 ? 'one' : 'other';
-    },
-    german(n) {
-      return n === 1 ? 'one' : 'other';
-    },
-    irish(n) {
-      if (n === 1) {
-        return 'one';
-      }
-      if (n === 2) {
-        return 'two';
-      }
-      if (n >= 3 && n <= 6) {
-        return 'few';
-      }
-      if (n >= 7 && n <= 10) {
-        return 'many';
-      }
-      return 'other';
-    },
-    russian(n) {
-      const lastTwo = n % 100;
-      const last = lastTwo % 10;
-      if (last === 1 && lastTwo !== 11) {
-        return 'one';
-      }
-      if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
-        return 'few';
-      }
-      if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
-        return 'many';
-      }
-      return 'other';
-    },
-    scottish(n) {
-      if (n === 1 || n === 11) {
-        return 'one';
-      }
-      if (n === 2 || n === 12) {
-        return 'two';
-      }
-      if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
-        return 'few';
-      }
-      return 'other';
-    },
-    spanish(n) {
-      if (n === 1) {
-        return 'one';
-      }
-      if (n % 1000000 === 0 && n !== 0) {
-        return 'many';
-      }
-      return 'other';
-    },
-    welsh(n) {
-      if (n === 0) {
-        return 'zero';
-      }
-      if (n === 1) {
-        return 'one';
-      }
-      if (n === 2) {
-        return 'two';
-      }
-      if (n === 3) {
-        return 'few';
-      }
-      if (n === 6) {
-        return 'many';
-      }
-      return 'other';
-    }
-  };
 
   /**
    * Accordion component
@@ -1801,7 +1676,7 @@
       if (this.$button.disabled) return;
       if (event.target instanceof Node) {
         if (this.$root.contains(event.target)) {
-          if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+          if (event.dataTransfer && this.canDrop(event.dataTransfer)) {
             if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
               this.showDraggingState();
               this.$announcements.innerText = this.i18n.t('enteredDropZone');
@@ -1823,12 +1698,30 @@
     }
     onDrop(event) {
       event.preventDefault();
-      if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+      if (event.dataTransfer && this.canFillInput(event.dataTransfer)) {
         this.$input.files = event.dataTransfer.files;
         this.$input.dispatchEvent(new CustomEvent('change'));
         this.hideDraggingState();
       }
     }
+    canFillInput(dataTransfer) {
+      return this.matchesInputCapacity(dataTransfer.files.length);
+    }
+    canDrop(dataTransfer) {
+      if (dataTransfer.items.length) {
+        return this.matchesInputCapacity(countFileItems(dataTransfer.items));
+      }
+      if (dataTransfer.types.length) {
+        return dataTransfer.types.includes('Files');
+      }
+      return true;
+    }
+    matchesInputCapacity(numberOfFiles) {
+      if (this.$input.multiple) {
+        return numberOfFiles > 0;
+      }
+      return numberOfFiles === 1;
+    }
     onChange() {
       const fileCount = this.$input.files.length;
       if (fileCount === 0) {
@@ -1875,6 +1768,13 @@
       this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
     }
   }
+
+  /**
+   * Counts the number of `DataTransferItem` whose kind is `file`
+   *
+   * @param {DataTransferItemList} list - The list
+   * @returns {number} - The number of items whose kind is `file` in the list
+   */
   FileUpload.moduleName = 'govuk-file-upload';
   FileUpload.defaults = Object.freeze({
     i18n: {
@@ -1896,10 +1796,14 @@
       }
     }
   });
-  function isContainingFiles(dataTransfer) {
-    const hasNoTypesInfo = dataTransfer.types.length === 0;
-    const isDraggingFiles = dataTransfer.types.some(type => type === 'Files');
-    return hasNoTypesInfo || isDraggingFiles;
+  function countFileItems(list) {
+    let result = 0;
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].kind === 'file') {
+        result++;
+      }
+    }
+    return result;
   }
 
   /**