govuk_publishing_components 65.1.0 → 65.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a7948661e4bf8e19ab9c6a5510d300c61079c96f2cac1d573d7ef3ec1a3ddda
-  data.tar.gz: 10d2df108c49d0a839bb897a734d8775deac5a71361e677c3ca937a46c0421f1
+  metadata.gz: b8421678343bb40c9ee8e546ca65299cda8e4bb703979a2c3ca1604e8966b87a
+  data.tar.gz: 6c81db1b7aed47aaca271beaaf0211cbc2565fb136fb2798af621f0465889b79
 SHA512:
-  metadata.gz: 8d374a98c7fd19c17b516a9a8c2a0b3e86dda144a0944e83121196af87b9f4b606f2088b799c873e4cdf2be1d82d552843c790b8094bf5b619c38ad08847e81c
-  data.tar.gz: 0e56f97f572bc11756d4d49894a09a28f52e77b58a714f40b276bb82eaaa04dd843c9a854f24c7e8e6578f781c9b35812cf499c5b9cf2b66f5e879e376bb1ffc
+  metadata.gz: 782d6eb963bf3c7e5495fa6e39ee9959b4078ea23eb908835c74c3950e603bbecae7e9bb0c9bb01351bcae027222bd927a3782b857b0dbdc5fbc8d2e7f33d767
+  data.tar.gz: c5f772f69b48a63341335d40a6722873d0d3fa7bf337693abcef88fdaee5d35e841711f99b71080f3d2b72497786cd63363255703b6ed21c1d6c6df315989431

data/app/assets/stylesheets/component_guide/application.scss

@@ -32,7 +32,7 @@ $gem-guide-border-width: 1px;
 
 .component-call {
   margin-top: -$gem-guide-border-width;
-  margin-bottom: govuk-spacing(3);
+  margin-bottom: govuk-spacing(8);
 
   font-family: Consolas, Monaco, "Andale Mono", monospace;
   font-size: 16px;
@@ -71,6 +71,7 @@ $gem-guide-border-width: 1px;
   padding: govuk-spacing(8) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
   border: $gem-guide-border-width solid $govuk-border-colour;
   position: relative;
+  margin-bottom: govuk-spacing(8);
 
   &.direction-rtl {
     direction: rtl;
@@ -98,6 +99,10 @@ $gem-guide-border-width: 1px;
   }
 }
 
+.component-guide-preview--no-margin {
+  margin-bottom: 0;
+}
+
 .component-guide-preview--simple {
   border: 0;
   padding: 0;
@@ -171,26 +176,19 @@ $gem-guide-border-width: 1px;
   }
 }
 
-.examples {
-  .component-example {
-    margin: 0 0 govuk-spacing(6) * 1.5;
-
-    .example-title {
-      margin: govuk-spacing(3) 0;
-      @include govuk-text-colour;
-      @include govuk-font($size: 24, $weight: bold);
-    }
-
-    .example-title small {
-      @include govuk-font($size: 16, $weight: bold);
-    }
-  }
+.component-example {
+  margin: 0 0 govuk-spacing(6) * 1.5;
 }
 
 .component-markdown {
+  margin-bottom: govuk-spacing(8);
   @include markdown-typography;
 }
 
+.component-markdown--no-margin {
+  margin-bottom: 0;
+}
+
 // Preview Page Styling
 html {
   background: govuk-colour("white");

data/app/assets/stylesheets/govuk_publishing_components/all-components.scss

@@ -6,7 +6,6 @@
 @import "govuk/overrides/index";
 
 @import "govuk_publishing_components/components/helpers/brand-colours";
-@import "govuk_publishing_components/components/helpers/contents-list-helper";
 @import "govuk_publishing_components/lib/link";
 @import "govuk_publishing_components/lib/print_support";
 

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -79,6 +79,31 @@
   }
 }
 
+.gem-c-contents-list__list-item--numbered {
+  .gem-c-contents-list__link {
+    display: table;
+  }
+}
+
+.gem-c-contents-list__number,
+.gem-c-contents-list__numbered-text {
+  display: table-cell;
+}
+
+.gem-c-contents-list__number {
+  min-width: 1.5em;
+}
+
+.gem-c-contents-list__numbered-text {
+  $contents-text-padding: .3em;
+  padding-left: $contents-text-padding;
+
+  .direction-rtl & {
+    padding-left: 0;
+    padding-right: $contents-text-padding;
+  }
+}
+
 @include govuk-media-query($media-type: print) {
   // Override default browser indentation
   .gem-c-contents-list__list,

data/app/assets/stylesheets/govuk_publishing_components/components/_heading.scss

@@ -6,6 +6,7 @@
     // set balance as a fallback for firefox, pretty for other browsers
     text-wrap: balance;
     text-wrap: pretty;
+    @include govuk-text-break-word;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -26,16 +26,19 @@
     margin: 0;
     padding: 0;
     @include govuk-font($size: 19);
+    @include govuk-text-break-word;
   }
 
   h2 {
     margin: 0 0 govuk-spacing(4) 0;
     @include govuk-font($size: 24, $weight: bold);
+    @include govuk-text-break-word;
   }
 
   h3 {
     margin: 0 0 govuk-spacing(4) 0;
     @include govuk-font($size: 19, $weight: bold);
+    @include govuk-text-break-word;
   }
 
   // H4, H5 and H6 are discouraged and thus styled the same
@@ -45,6 +48,7 @@
   h6 {
     margin: 0;
     @include govuk-font($size: 19, $weight: bold);
+    @include govuk-text-break-word;
   }
 
   // Links

data/app/assets/stylesheets/govuk_publishing_components/specific-components.scss

@@ -6,6 +6,5 @@
 @import "govuk/overrides/index";
 
 @import "govuk_publishing_components/components/helpers/brand-colours";
-@import "govuk_publishing_components/components/helpers/contents-list-helper";
 @import "govuk_publishing_components/lib/link";
 @import "govuk_publishing_components/lib/print_support";

data/app/controllers/govuk_publishing_components/applications_page_controller.rb

@@ -4,7 +4,7 @@ module GovukPublishingComponents
       applications = [
         {
           type: "public-facing",
-          apps: %w[collections email-alert-frontend feedback finder-frontend frontend government-frontend smart-answers].sort,
+          apps: %w[collections email-alert-frontend feedback finder-frontend frontend smart-answers].sort,
         },
         {
           type: "publishing",

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -14,7 +14,6 @@ module GovukPublishingComponents
         feedback
         finder-frontend
         frontend
-        government-frontend
         govspeak
         govspeak-preview
         govuk-chat

data/app/models/govuk_publishing_components/component_doc.rb

@@ -34,7 +34,10 @@ module GovukPublishingComponents
 
     def component_wrapper_options
       if uses_component_wrapper_helper?
-        ComponentWrapperHelperOptions.description
+        {
+          intro: ComponentWrapperHelperOptions.intro,
+          description: ComponentWrapperHelperOptions.description,
+        }
       end
     end
 
@@ -74,8 +77,12 @@ module GovukPublishingComponents
       markdown_to_html(accessibility_criteria) if accessibility_criteria.present?
     end
 
-    def html_component_wrapper_options
-      markdown_to_html(component_wrapper_options) if component_wrapper_options.present?
+    def html_component_wrapper_options_intro
+      markdown_to_html(component_wrapper_options[:intro]) if component_wrapper_options.present?
+    end
+
+    def html_component_wrapper_options_description
+      markdown_to_html(component_wrapper_options[:description]) if component_wrapper_options.present?
     end
 
     def partial_path

data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -1,9 +1,11 @@
 module GovukPublishingComponents
   module ComponentWrapperHelperOptions
+    def self.intro
+      "This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the [component wrapper helper documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component-wrapper-helper.md) for more detail."
+    end
+
     def self.description
       "
-This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the [component wrapper helper documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component-wrapper-helper.md) for more detail.
-
 - `id` - accepts a string for the element ID attribute
 - `data_attributes` - accepts a hash of data attributes
 - `aria` - accepts a hash of aria attributes

data/app/views/govuk_publishing_components/component_guide/component_doc/_component.html.erb

@@ -1,4 +1,4 @@
-<div class="component-guide-preview
+<div class="component-guide-preview component-guide-preview--no-margin
             <% if example.right_to_left? %>direction-rtl<% end %>
             <% if example.dark_background? %>dark-background<% end %>
             <% if example.black_background? %>black-background<% end %>

data/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb

@@ -1,8 +1,8 @@
 <% if component_doc.display_preview? %>
   <div data-module="test-a11y" data-excluded-rules="<%= @component_doc.accessibility_excluded_rules %>">
     <%= render "govuk_publishing_components/component_guide/component_doc/component", component_doc: @component_doc, example: example, preview_page: false %>
-    <div class="component-guide-preview component-guide-preview--violation" data-module="test-a11y-violation" data-content="Accessibility Issues"></div>
-    <div class="component-guide-preview component-guide-preview--warning" data-module="test-a11y-warning" data-content="Potential accessibility issues: need manual check"></div>
+    <div class="component-guide-preview component-guide-preview--no-margin component-guide-preview--violation" data-module="test-a11y-violation" data-content="Accessibility Issues"></div>
+    <div class="component-guide-preview component-guide-preview--no-margin component-guide-preview--warning" data-module="test-a11y-warning" data-content="Potential accessibility issues: need manual check"></div>
   </div>
 <% end %>
 

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

@@ -48,10 +48,16 @@
         }
       end)
       content_items = [
-        { href: "#how-it-looks", text: "How it looks" },
-        { href: "#how-to-call-this-component", text: "How to call this component" },
-        ({ href: "#govuk-design-system", text: "GOV.UK Design System" } if @component_doc.govuk_frontend_components.any?),
-        ({ href: "#accessibility-acceptance-criteria", text: "Accessibility acceptance criteria" } if @component_doc.accessibility_criteria.present?),
+        ({
+          href: "#overview",
+          text: "Overview",
+          items: [
+            { href: "#how-it-looks", text: "How it looks" },
+            { href: "#how-to-call-this-component", text: "How to call this component" },
+            ({ href: "#govuk-design-system", text: "GOV.UK Design System" } if @component_doc.govuk_frontend_components.any?),
+            ({ href: "#accessibility-acceptance-criteria", text: "Accessibility acceptance criteria" } if @component_doc.accessibility_criteria.present?),
+          ].compact,
+        }),
         ({
           href: "#other-examples",
           text: "Other examples",
@@ -61,21 +67,23 @@
     %>
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: content_items,
+      margin_bottom: 8,
     } %>
   </div>
 
-  <h2 class="govuk-heading-m" id="how-it-looks">
+  <h2 class="govuk-heading-l" id="overview">Overview</h2>
+  <h3 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 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>
+  </h3>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
-  <h2 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h2>
+  <h3 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h3>
   <%= 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="govuk-heading-m" id="govuk-design-system">GOV.UK Design System</h2>
+    <h3 class="govuk-heading-m" id="govuk-design-system">GOV.UK Design System</h3>
     <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 +98,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="govuk-heading-m">Accessibility acceptance criteria</h2>
+        <h3 class="govuk-heading-m">Accessibility acceptance criteria</h3>
         <div class="component-markdown">
           <%= raw(@component_doc.html_accessibility_criteria) %>
         </div>
@@ -99,34 +107,40 @@
   <% end %>
 
   <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>
-    <div class="examples">
-      <h2 class="govuk-heading-m" id="other-examples">Other examples</h2>
+    <h2 class="govuk-heading-l" id="other-examples">Other examples</h2>
 
-      <% if @component_doc.uses_component_wrapper_helper? %>
-        <div class="component-example" id="standard-options">
-          <h3 class="example-title">Standard options</h3>
-          <div class="component-markdown">
-            <%= raw(@component_doc.html_component_wrapper_options) %>
-          </div>
+    <% if @component_doc.uses_component_wrapper_helper? %>
+      <div class="component-example" id="standard-options">
+        <h3 class="govuk-heading-m">Standard options</h3>
+        <div class="component-markdown">
+          <%= raw(@component_doc.html_component_wrapper_options_intro) %>
+          <%= render "govuk_publishing_components/components/details", {
+            title: "See all standard options",
+            disable_ga4: true,
+          } do %>
+            <%= raw(@component_doc.html_component_wrapper_options_description) %>
+          <% end %>
         </div>
-      <% end %>
+      </div>
+    <% end %>
 
-      <% @component_doc.other_examples.each do |example| %>
-        <div class="component-example" id="<%= example.id %>">
-          <h3 class="example-title">
-            <a href="<%= component_example_path(@component_doc.id, example.id) %>" class="govuk-link"><%= example.name %></a>
-            <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>" class="govuk-link">preview</a>)</small>
-          </h3>
-          <div class="component-markdown">
+    <% @component_doc.other_examples.each do |example| %>
+      <div class="component-example" id="<%= example.id %>">
+        <h3 class="govuk-heading-m">
+          <a href="<%= component_example_path(@component_doc.id, example.id) %>" class="govuk-link"><%= example.name %></a>
+          <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>" class="govuk-link">preview</a>)</small>
+        </h3>
+        <% if example.html_description %>
+          <div class="component-markdown component-markdown--no-margin">
             <%= raw(example.html_description) %>
           </div>
-          <% code_example = capture do %>
-            <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>
-          <% end %>
-          <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: example %>
-          <%= code_example %>
-        </div>
-      <% end %>
-    </div>
+        <% end %>
+        <% code_example = capture do %>
+          <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>
+        <% end %>
+        <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: example %>
+        <%= code_example %>
+      </div>
+    <% end %>
   <% end %>
 </div>

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

@@ -33,8 +33,8 @@
 
     <% if devolved_nations_helper.nations_with_urls.any? %>
       <%= content_tag :ul, class: "govuk-list govuk-!-margin-top-1 govuk-!-margin-bottom-0" do -%>
-        <% devolved_nations_helper.nations_with_urls.each do |k, v| %>
-          <%= content_tag(:li, link_to(devolved_nations_helper.alternative_content_text(k), v[:alternative_url], class: "govuk-link gem-print-force-link-styles")) %>
+        <% devolved_nations_helper.nations_with_urls.each do |alternative_url, nations| %>
+          <%= content_tag(:li, link_to(nations, alternative_url, class: "govuk-link gem-print-force-link-styles")) %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -41,11 +41,11 @@
 
 <%= tag.div(**helper.all_attributes) do %>
   <h3 class="gem-c-option-select__heading js-container-heading">
-    <div class="gem-c-option-select__toggle js-container-toggle">
+    <span class="gem-c-option-select__toggle js-container-toggle">
       <span class="gem-c-option-select__title js-container-button" id="<%= title_id %>"><%= title %></span>
       <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z" /></svg>
       <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z" /></svg>
-    </div>
+    </span>
   </h3>
 
   <%= content_tag(:div, class: options_container_classes, id: options_container_id, tabindex: "-1") do %>

data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb

@@ -33,16 +33,22 @@ module GovukPublishingComponents
       end
 
       def nations_with_urls
-        @national_applicability
-          .select do |_, v|
-            v[:alternative_url]
-            .present?
+        url_to_nation_keys = @national_applicability.each_with_object(Hash.new { |h, k| h[k] = [] }) do |(nation_key, nation_data), hash|
+          if nation_data[:alternative_url].present?
+            hash[nation_data[:alternative_url]] << nation_key
           end
-      end
+        end
+
+        url_to_nation_keys.transform_values do |nation_keys|
+          nations_text = nation_keys.each_with_index.map { |key, index|
+            name_for_position(key, index, nation_keys.count, true)
+          }.join
 
-      def alternative_content_text(name)
-        nation = I18n.t("components.devolved_nations.#{name}.start")
+          alternative_content_text(nations_text)
+        end
+      end
 
+      def alternative_content_text(nation)
         if I18n.exists?("components.devolved_nations.type.#{@content_type}")
           I18n.t("components.devolved_nations.type.#{@content_type}", nation:)
         else

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "65.1.0".freeze
+  VERSION = "65.1.1".freeze
 end