govuk_publishing_components 46.0.0 → 46.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba6618b411d78aa56cf9abaff10626fd71d4f213b1cdcaeddfafc1d2f77984d2
-  data.tar.gz: b617f868fad8afb6f02497ac19c276fe1150f0e3f6037d2fde4b4b67dd5fa8e9
+  metadata.gz: 9f03b029ded187ef6bc1d3636720d1b32d082a568588faeccb69723311c06360
+  data.tar.gz: 197e40d2e9dbc9ef47e76ae1c72b7d63a7b4255fdbb01f31dcc21bd234bb6099
 SHA512:
-  metadata.gz: ea7037c2089b2d7bb288866930dee22f52780aeb0a19c953e1d1003d3092c8d785b4ec8c1570031c9a410216c257300e55f07d61e813567f1fb6de8041796844
-  data.tar.gz: 8f5d89fca3b5e18852e09ecb3437fcaa20da070a77b7bcdcdba355cb6e08ad3f622c24adc448a24f455279e3d481e14d005d3b2342c19b337619bbce173c0e48
+  metadata.gz: 7eede3b4acf9222bef3047b69fa3fe9c5190fb63277416188ed516990723ae35eec50fdc88594c6199e287500746fadf1181122f8bdbb95608382451a1f1f8ab
+  data.tar.gz: fe53d16fc472cb5dbee4e80b76eb61b5619d16224afdfd7ea751514d30a6604a82aa4c84ed7c8e057268e66be6a500618c37c0e42a6d8db17b17b8a2bc2f60ff

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -38,6 +38,7 @@
 @import "components/feedback";
 @import "components/fieldset";
 @import "components/file-upload";
+@import "components/glance-metric";
 @import "components/govspeak-html-publication";
 @import "components/govspeak";
 @import "components/heading";

data/app/assets/stylesheets/govuk_publishing_components/components/_glance-metric.scss

@@ -0,0 +1,75 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-glance-metric {
+  border-top: 1px solid $govuk-border-colour;
+  border-bottom: 0;
+  @include govuk-responsive-margin(6, "bottom");
+
+  &__heading {
+    min-height: 2.6em;
+    @include govuk-font($size: 24, $weight: bold);
+
+    @include govuk-responsive-margin(3, "top");
+    @include govuk-responsive-margin(1, "bottom");
+    @include govuk-responsive-padding(3, "top");
+
+    @include govuk-media-query($until: tablet) {
+      min-height: 4em;
+    }
+
+    @include govuk-media-query($until: mobile) {
+      min-height: 0;
+    }
+  }
+
+  &__figure {
+    display: flex;
+    @include govuk-font($size: 36, $weight: bold);
+    @include govuk-responsive-margin(1, "bottom");
+
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font($size: 48, $weight: bold);
+    }
+  }
+
+  &__explicit-label {
+    @include govuk-visually-hidden;
+  }
+
+  &__context {
+    min-height: 5em;
+    border-bottom: 1px solid $govuk-border-colour;
+
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font(16);
+      min-height: 0;
+      border-bottom: 0;
+    }
+  }
+
+  &__trend {
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font(24);
+    }
+
+    &-text {
+      @include govuk-visually-hidden;
+    }
+
+    &-icon {
+      color: govuk-colour("dark-grey");
+
+      @include govuk-media-query($until: mobile) {
+        @include govuk-font(19);
+      }
+    }
+  }
+
+  &__period {
+    @include govuk-responsive-margin(6, "bottom");
+
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font(16);
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+<%
+  add_gem_component_stylesheet("glance-metric")
+
+  name ||= false
+  figure ||= nil
+  context ||= ""
+  measurement_display_label ||= ""
+  measurement_explicit_label ||= ""
+
+  local_assigns[:heading_level] ||= 3
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-glance-metric govuk-body")
+%>
+<% if name %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <%= content_tag(shared_helper.get_heading_level, class: "gem-c-glance-metric__heading") do %>
+      <%= name %>
+    <% end %>
+
+    <% if figure.nil? %>
+      <span class="gem-c-glance-metric__figure">No data</span>
+    <% else %>
+      <span class="gem-c-glance-metric__figure">
+        <%= figure %>
+        <% if measurement_display_label.present?  %>
+          <span class="gem-c-glance-metric__display-label" aria-hidden="true"><%= measurement_display_label %></span>
+        <% end %>
+        <% if measurement_explicit_label.present? %>
+          <span class="gem-c-glance-metric__explicit-label"><%= measurement_explicit_label %></span>
+        <% end %>
+    <% end %>
+    </span>
+    <p class="gem-c-glance-metric__context govuk-body-xs"><%= context %></p>
+  <% end %>
+<% end %>

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

@@ -17,16 +17,18 @@
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-metadata)
-  classes << "direction-#{direction}" if local_assigns.include?(:direction)
 
-  if inverse && inverse_compress
-    classes << "gem-c-metadata--inverse"
-  elsif inverse
-    classes << "gem-c-metadata--inverse gem-c-metadata--inverse-padded"
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-metadata")
+  component_helper.add_class("direction-#{direction}") if local_assigns.include?(:direction)
+
+  if inverse
+    component_helper.add_class("gem-c-metadata--inverse")
+    component_helper.add_class("gem-c-metadata--inverse-padded") unless inverse_compress
   end
 
-  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
+  component_helper.add_class(shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
+  component_helper.add_data_attribute({ module: "metadata" })
 
   disable_ga4 ||= false
   ga4_object = {
@@ -35,7 +37,7 @@
     section: "Top",
   }.to_json unless disable_ga4
 %>
-<%= content_tag :div, class: classes, data: { module: "metadata" } do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <% if title.present? %>
     <%= content_tag :div, class: "gem-c-metadata__title" do %>
       <%= render "govuk_publishing_components/components/heading", {

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

@@ -16,13 +16,16 @@
   heading_level = show_banner_title ? "h3" : "h2"
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-notification-banner gem-c-notice")
+  component_helper.add_class(shared_helper.get_margin_bottom)
 
-  css_classes = %w[govuk-notification-banner gem-c-notice]
-  css_classes << shared_helper.get_margin_bottom
+  component_helper.add_aria_attribute({ label: "Notice" })
+  component_helper.add_aria_attribute({ live: "polite" }) if aria_live
+  component_helper.add_aria_attribute({ labelledby: banner_title_id }) if show_banner_title
 
-  aria_attributes = {label: 'Notice'}
-  aria_attributes[:live] = 'polite' if aria_live
-  aria_attributes[:labelledby] = banner_title_id if show_banner_title
+  component_helper.set_lang(lang)
+  component_helper.add_role("region")
 
   description_present = description.present? || description_text.present? || description_govspeak.present?
 
@@ -33,7 +36,7 @@
   end
 %>
 <% if title || description_present %>
-  <%= tag.section class: css_classes, aria: aria_attributes, lang: lang, role: "region" do %>
+  <%= tag.section(**component_helper.all_attributes) do %>
     <%= tag.div class: "govuk-notification-banner__header" do %>
       <%= tag.h2 banner_title, class: "govuk-notification-banner__title", id: banner_title_id %>
     <% end if show_banner_title %>

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

@@ -14,10 +14,10 @@
 
   # Set the wrapping element to be a heading or a `div`:
   wrapping_element = (use_heading ? "h#{heading_level}" : "div").to_sym
-
-  wrapper_classes = %w[gem-c-organisation-logo]
-  wrapper_classes << brand_helper.brand_class
-  wrapper_classes << "gem-c-organisation-logo--inverse" if inverse
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-organisation-logo")
+  component_helper.add_class(brand_helper.brand_class)
+  component_helper.add_class("gem-c-organisation-logo--inverse") if inverse
 
   container_classes = [
     logo_helper.logo_container_class,
@@ -26,9 +26,7 @@
   container_classes << "gem-c-organisation-logo__container--inline" if inline
 %>
 
-<%= content_tag(wrapping_element, {
-    class: wrapper_classes
-  }) do %>
+<%= content_tag(wrapping_element, **component_helper.all_attributes) do %>
   <% if organisation[:url] %>
     <%= link_to organisation[:url], class: container_classes.join(" ") do %>
       <%= logo_helper.logo_content %>

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

@@ -6,8 +6,10 @@
   append ||= false
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-panel govuk-panel govuk-panel--confirmation")
 %>
-<div class="gem-c-panel govuk-panel govuk-panel--confirmation">
+<%= tag.div(**component_helper.all_attributes) do %>
   <%= content_tag(shared_helper.get_heading_level, class: "govuk-panel__title") do %>
     <% if prepend %>
       <span class="gem-c-panel__prepend">
@@ -29,4 +31,4 @@
       <%= description %>
     </div>
   <% end %>
-</div>
+<% end %>

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

@@ -15,26 +15,27 @@ unless message.present?
   end
 end
 
-container_css_classes = %w(gem-c-phase-banner govuk-phase-banner)
-container_css_classes << "gem-c-phase-banner--inverse" if inverse
-
-data_attributes = {}
+component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+component_helper.add_class("gem-c-phase-banner govuk-phase-banner")
+component_helper.add_class("gem-c-phase-banner--inverse") if inverse
 
 unless disable_ga4
-  data_attributes[:ga4_phase_banner] = phase
-  data_attributes[:module] = "ga4-link-tracker"
-  data_attributes[:ga4_track_links_only] = ""
-  data_attributes[:ga4_set_indexes] = ""
-  data_attributes[:ga4_link] = {
-    event_name: "navigation",
-    type: "phase banner",
-    section: Nokogiri::HTML(message).text,
-  }.to_json
+  component_helper.add_data_attribute({
+    ga4_phase_banner: phase,
+    module: "ga4-link-tracker",
+    ga4_track_links_only: "",
+    ga4_set_indexes: "",
+    ga4_link: {
+      event_name: "navigation",
+      type: "phase banner",
+      section: Nokogiri::HTML(message).text,
+    }.to_json
+  })
 end
 
 %>
 
-<%= tag.div class: container_css_classes, data: data_attributes do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <%= tag.p class: "govuk-phase-banner__content" do %>
     <%= tag.strong app_name, class: "govuk-phase-banner__content__app-name" if app_name %>
     <%= tag.strong phase.titleize, class: "govuk-tag govuk-phase-banner__content__tag" if phase %>

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

@@ -0,0 +1,37 @@
+name: "Glance metric"
+description: "The glance metric component is an at-a-glance view of data for a content item. The minimum requirements for it to display are a name and figure. "
+part_of_admin_layout: true
+body: |
+
+accessibility_criteria: |
+  This component must:
+  
+  - include an explicit label when an abbreviated label is also used
+  - communicate number value and label (if present) in a single dictation when read with a screen reader
+  - convey the meaning of the number shown
+  - The component must use the correct heading level for the page (defaults to `<h3>`) 
+
+shared_accessibility_criteria:
+  - link
+
+uses_component_wrapper_helper: true
+examples:
+  default:
+    data:
+      name: "Unique pageviews"
+      figure: "167"
+      measurement_display_label: "m"
+      measurement_explicit_label: "million"
+      context: "This is in your top 10 items"
+  no measurement labels:
+    data:
+      name: "Feedback comments"
+      figure: "35"
+  custom heading level:
+    description: A custom heading level can be specified if necessary. Defaults to a `h3`. The heading level does not change any styling.
+    data:
+      name: "Feedback comments"
+      figure: "35"
+      measurement_display_label: "m"
+      measurement_explicit_label: "million"
+      heading_level: 2

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

@@ -7,6 +7,7 @@ accessibility_criteria: |
   - indicate the initial state of expandable content
   - indicate where the state of expandable content has changed
 
+uses_component_wrapper_helper: true
 shared_accessibility_criteria:
   - link
 accessibility_excluded_rules:

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

@@ -4,6 +4,7 @@ body: |
   The notice component replaces the notice and withdrawal notice patterns on GOV.UK.
 
   The component accepts either a simple string `description_text` parameter that it wraps in a paragraph, or a `description_govspeak` parameter that is rendered through govspeak for more complex HTML layout.
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   The notice must:
 

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

@@ -13,6 +13,7 @@ body: |
 accessibility_criteria: |
   The crest image itself must be presentational and ignored by screen readers.
 
+uses_component_wrapper_helper: true
 shared_accessibility_criteria:
   - link
 examples:

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

@@ -2,6 +2,7 @@ name: Panel
 description: Used on confirmation or results pages to highlight important content.
 govuk_frontend_components:
   - panel
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   - have a text colour contrast ratio of more than 4.5:1 with its background to be visually distinct
 examples:

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

@@ -5,6 +5,7 @@ accessibility_criteria: |
   The label must:
 
   - have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+uses_component_wrapper_helper: true
 shared_accessibility_criteria:
   - link
 examples:
@@ -42,5 +43,4 @@ examples:
     data:
       app_name: Skittles Maker
       phase: beta
-      inverse: true
       disable_ga4: true

data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb

@@ -104,7 +104,7 @@ module GovukPublishingComponents
         return if classes.blank?
 
         class_array = classes.split(" ")
-        unless class_array.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "app-c-", "brand--", "brand__") }
+        unless class_array.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "app-c-", "brand--", "brand__") || c == "direction-rtl" }
           raise(ArgumentError, "Classes (#{classes}) must be prefixed with `js-`")
         end
       end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "46.0.0".freeze
+  VERSION = "46.1.0".freeze
 end

data/node_modules/axe-core/axe.js

@@ -1,4 +1,4 @@
-/*! axe v4.10.1
+/*! axe v4.10.2
  * Copyright (c) 2015 - 2024 Deque Systems, Inc.
  *
  * Your use of this Source Code Form is subject to the terms of the Mozilla Public
@@ -22,7 +22,7 @@
     }, _typeof(o);
   }
   var axe = axe || {};
-  axe.version = '4.10.1';
+  axe.version = '4.10.2';
   if (typeof define === 'function' && define.amd) {
     define('axe-core', [], function() {
       return axe;
@@ -7625,7 +7625,7 @@
       var parentElement = node.parentElement;
       var parentNode = node.parentNode;
       var nthChild = '';
-      if (nodeName2 !== 'head' && nodeName2 !== 'body' && parentNode.children.length > 1) {
+      if (nodeName2 !== 'head' && nodeName2 !== 'body' && (parentNode === null || parentNode === void 0 ? void 0 : parentNode.children.length) > 1) {
         var index = Array.prototype.indexOf.call(parentNode.children, node) + 1;
         nthChild = ':nth-child('.concat(index, ')');
       }