govuk_publishing_components 35.11.0 → 35.13.0

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

@@ -29,35 +29,37 @@
           <p class='gem-c-document-list__highlight-text'><%= item[:highlight_text] %></p>
         <% end %>
 
-        <%=
-          item_classes = "gem-c-document-list__item-title #{brand_helper.color_class} #{title_with_context_class if item[:link][:context]}"
+        <%= content_tag :div, class: "gem-c-document-list__item-title" do -%>
+          <%=
+            item_classes = "#{brand_helper.color_class} #{title_with_context_class if item[:link][:context]}"
 
-          if item[:link][:path]
-            rel = [
-              "external",
-              "nofollow",
-              "noopener",
-              "noreferrer",
-              "opener",
-            ].include?(item[:link][:rel]) ? item[:link][:rel] : nil
+            if item[:link][:path]
+              rel = [
+                "external",
+                "nofollow",
+                "noopener",
+                "noreferrer",
+                "opener",
+              ].include?(item[:link][:rel]) ? item[:link][:rel] : nil
 
-            link_to(
-              item[:link][:text],
-              item[:link][:path],
-              data: item[:link][:data_attributes],
-              class: "#{item_classes} govuk-link",
-              lang: item[:link][:locale].presence,
-              rel: rel,
-            )
-          else
-            content_tag(
-              "span",
-              item[:link][:text],
-              data: item[:link][:data_attributes],
-              class: item_classes,
-            )
-          end
-        %>
+              link_to(
+                item[:link][:text],
+                item[:link][:path],
+                data: item[:link][:data_attributes],
+                class: "#{item_classes} govuk-link",
+                lang: item[:link][:locale].presence,
+                rel: rel,
+              )
+            else
+              content_tag(
+                "span",
+                item[:link][:text],
+                data: item[:link][:data_attributes],
+                class: item_classes,
+              )
+            end
+          %>
+        <% end %>
 
         <% if item[:link][:context] %>
           <span class="gem-c-document-list__item-context"><%= item[:link][:context] %></span>

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

@@ -7,15 +7,18 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
 
   classes = %w(gem-c-heading)
   classes << heading_helper.classes
   classes << brand_helper.brand_class
   classes << brand_helper.border_color_class
   classes << shared_helper.get_margin_bottom if [*0..9].include?(local_assigns[:margin_bottom])
+
+  component_helper.add_class(classes.join(" "))
+  component_helper.set_id(heading_helper.id)
+  element = shared_helper.get_heading_level
 %>
-<%= content_tag(shared_helper.get_heading_level, text,
-  class: classes,
-  id: heading_helper.id,
-  lang: lang
-) %>
+<%= content_tag(element, component_helper.all_attributes) do %>
+  <%= text %>
+<% end %>

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

@@ -7,22 +7,30 @@
   panel_css_classes << "gem-c-tabs__panel--no-border" if panel_border == false
   panel_css_classes = panel_css_classes.join(" ")
 
+  as_links ||= false
   ga4_tracking ||= false
-  data_module = "govuk-tabs"
-  data_module << " ga4-event-tracker" if ga4_tracking
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-tabs gem-c-tabs")
+  component_helper.add_data_attribute({ module: "govuk-tabs" }) unless as_links
+
+  if ga4_tracking
+    component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless as_links
+    component_helper.add_data_attribute({ module: "ga4-link-tracker" }) if as_links
+  end
 %>
 <% if tabs.count > 1 %>
-  <div class="govuk-tabs gem-c-tabs" data-module="<%= data_module %>">
+  <%= tag.div(**component_helper.all_attributes) do %>
     <h2 class="govuk-tabs__title">
       <%= t("components.tabs.contents") %>
     </h2>
     <ul class="govuk-tabs__list">
       <% tabs.each_with_index do |tab, index| %>
-      <li class="govuk-tabs__list-item">
+      <li class="govuk-tabs__list-item <%= "govuk-tabs__list-item--selected" if tab[:active] %>">
         <%
           tab[:tab_data_attributes] ||= {}
           if ga4_tracking
-            tab[:tab_data_attributes][:ga4_event] = {
+            ga4_attributes = {
               event_name: "select_content",
               type: "tabs",
               text: tab[:label],
@@ -31,24 +39,32 @@
                 index_section_count: tabs.length,
               },
             }
+            ga4_attributes[:event_name] = "navigation" if as_links
+            tab[:tab_data_attributes][:ga4_link] = ga4_attributes if as_links
+            tab[:tab_data_attributes][:ga4_event] = ga4_attributes unless as_links
           end
+
+          tab_link = "##{tab[:id]}"
+          tab_link = tab[:href] if as_links
         %>
         <%= link_to(tab[:label],
-                    "##{tab[:id]}",
+                    tab_link,
                     class: "govuk-tabs__tab",
                     data: tab[:tab_data_attributes]) %>
       </li>
       <% end %>
     </ul>
-    <% tabs.each do |tab| %>
-      <section class="<%= panel_css_classes %>" id="<%= tab[:id] %>">
-        <% if tab[:title] %>
-          <h2 class="govuk-heading-l"><%= tab[:title] %></h2>
-        <% end %>
-        <%= tab[:content] %>
-      </section>
+    <% unless as_links %>
+      <% tabs.each do |tab| %>
+        <section class="<%= panel_css_classes %>" id="<%= tab[:id] %>">
+          <% if tab[:title] %>
+            <h2 class="govuk-heading-l"><%= tab[:title] %></h2>
+          <% end %>
+          <%= tab[:content] %>
+        </section>
+      <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
 <% if tabs.count == 1 %>
     <section id="<%= tabs[0][:id] %>">

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

@@ -15,6 +15,7 @@ accessibility_criteria: |
   - be part of a correct heading structure for a page
   - be semantically represented as a heading
   - convey the heading level
+uses_component_wrapper_helper: true  
 examples:
   default:
     data:
@@ -31,10 +32,6 @@ examples:
     data:
       text: 'One big heading'
       font_size: "xl"
-  with_id_attribute:
-    data:
-      text: 'Detail of outcome'
-      id: 'detail_of_outcome'
   right_to_left:
     data:
       text: 'مستندات'

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

@@ -9,6 +9,7 @@ body: |
   When the button is clicked, the `base_path` is submitted to an endpoint which proceeds to check the user's authentication status and whether they are already subscribed to the page or not. Depending on these factors, they will be routed accordingly.
 accessibility_criteria: |
   - The bell icon must be presentational and ignored by screen readers.
+uses_component_wrapper_helper: true  
 examples:
   default:
     description: By default this component prompts the user to subscribe to email notifications to this page.
@@ -19,12 +20,6 @@ examples:
     data:
       base_path: '/current-page-path'
       already_subscribed: true
-  with_data_attributes:
-    description: The component accepts data attributes (for example, for analytics)
-    data:
-      base_path: '/current-page-path'
-      data_attributes:
-        test_attribute: "testing"
   with_ga4_tracking:
     description: To add GA4 tracking, pass a `ga4_data_attributes` object with the necessary properties to the component. For example:-
     data:

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

@@ -17,7 +17,7 @@ accessibility_criteria: |
     * be usable with touch
     * be usable with voice commands
     * have visible text
-
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -30,6 +30,17 @@ examples:
           label: "Second section"
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+  as_links:
+    description: With this option the tabs operate as links, rather than switching between elements within a single page.
+    data:
+      as_links: true
+      tabs:
+        - href: "link1"
+          label: "Page one"
+          active: true
+        - href: "link2"
+          label: "Page two"
+          active: false
   without_panel_border:
     data:
       panel_border: false
@@ -84,8 +95,8 @@ examples:
             tracking: GTM-123AB
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
-  with_ga4_tracking:
-    description: Enables GA4 tracking. This will add the required data module and data attributes to the tabs. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
+  with_ga4_tracking_on_tabs:
+    description: Enables GA4 tracking by adding the event tracker and required data attributes to the tabs. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
     data:
       ga4_tracking: true
       tabs:
@@ -99,3 +110,15 @@ examples:
           title: "Second section"
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+  with_ga4_tracking_on_tabs_as_links:
+    description: Enables GA4 tracking by adding the link tracker and required data attributes to the tabs. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      as_links: true
+      ga4_tracking: true
+      tabs:
+        - href: "/page1"
+          label: "Link 1"
+          active: true
+        - href: "/page2"
+          label: "Link 2"
+          active: false

data/lib/govuk_publishing_components/config.rb

@@ -9,6 +9,9 @@ module GovukPublishingComponents
     mattr_accessor :component_guide_title
     self.component_guide_title = "Component Guide"
 
+    mattr_accessor :application_dir
+    self.application_dir = ""
+
     mattr_accessor :application_stylesheet
     self.application_stylesheet = "application"
 

data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb

@@ -9,6 +9,7 @@ module GovukPublishingComponents
         check_classes_are_valid(@options[:classes]) if @options.include?(:classes)
         check_aria_is_valid(@options[:aria]) if @options.include?(:aria)
         check_role_is_valid(@options[:role]) if @options.include?(:role)
+        check_lang_is_valid(@options[:lang]) if @options.include?(:lang)
       end
 
       def all_attributes
@@ -19,6 +20,7 @@ module GovukPublishingComponents
         attributes[:aria] = @options[:aria] unless @options[:aria].blank?
         attributes[:class] = @options[:classes] unless @options[:classes].blank?
         attributes[:role] = @options[:role] unless @options[:role].blank?
+        attributes[:lang] = @options[:lang] unless @options[:lang].blank?
 
         attributes
       end
@@ -48,6 +50,11 @@ module GovukPublishingComponents
         extend_string(:role, role)
       end
 
+      def set_lang(lang)
+        check_lang_is_valid(lang)
+        @options[:lang] = lang
+      end
+
     private
 
       def check_id_is_valid(id)
@@ -69,7 +76,7 @@ module GovukPublishingComponents
         return if classes.blank?
 
         class_array = classes.split(" ")
-        unless class_array.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "brand--") }
+        unless class_array.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "brand--", "brand__") }
           raise(ArgumentError, "Classes (#{classes}) must be prefixed with `js-`")
         end
       end
@@ -98,6 +105,15 @@ module GovukPublishingComponents
         end
       end
 
+      def check_lang_is_valid(lang)
+        return if lang.blank?
+
+        langs = %w[ab aa af ak sq am ar an hy as av ae ay az bm ba eu be bn bh bi bs br bg my ca ch ce ny zh zh-Hans zh-Hant cv kw co cr hr cs da dv nl dz en eo et ee fo fj fi fr ff gl gd gv ka de el kl gn gu ht ha he hz hi ho hu is io ig id in ia ie iu ik ga it ja jv kl kn kr ks kk km ki rw rn ky kv kg ko ku kj lo la lv li ln lt lu lg lb gv mk mg ms ml mt mi mr mh mo mn na nv ng nd ne no nb nn ii oc oj cu or om os pi ps fa pl pt pa qu rm ro ru se sm sg sa sr sh st tn sn ii sd si ss sk sl so nr es su sw ss sv tl ty tg ta tt te th bo ti to ts tr tk tw ug uk ur uz ve vi vo wa cy wo fy xh yi ji yo za zu]
+        unless langs.include? lang
+          raise(ArgumentError, "lang attribute (#{lang}) is not recognised")
+        end
+      end
+
       def extend_string(option, string)
         ((@options[option] ||= "") << " #{string}").strip!
       end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.11.0".freeze
+  VERSION = "35.13.0".freeze
 end