govuk_publishing_components 21.56.2 → 21.60.0

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

@@ -0,0 +1,229 @@
+<% content_for :title, "Component audit" %>
+
+<%= render 'govuk_publishing_components/components/title', title: "Components audit", margin_top: 0; %>
+
+<% if ENV["MAIN_COMPONENT_GUIDE"] %>
+  <div class="govuk-tabs" data-module="govuk-tabs">
+    <h2 class="govuk-tabs__title">
+      Contents
+    </h2>
+    <ul class="govuk-tabs__list">
+      <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
+        <a class="govuk-tabs__tab" href="#applications">
+          Applications
+        </a>
+      </li>
+      <li class="govuk-tabs__list-item">
+        <a class="govuk-tabs__tab" href="#components-gem">
+          Components
+        </a>
+      </li>
+    </ul>
+    <div class="govuk-tabs__panel" id="applications">
+      <h2 class="govuk-heading-l">Applications</h2>
+
+      <% if @applications.any? %>
+        <details class="govuk-details" data-module="govuk-details">
+          <summary class="govuk-details__summary">
+            <span class="govuk-details__summary-text">
+              How to use this information
+            </span>
+          </summary>
+          <div class="govuk-details__text">
+            <p class="govuk-body">This page shows information about component use on GOV.UK. This information has been cross referenced with the components in the gem to produce warnings where e.g. a print stylesheet for a component exists but has not been included in an application.</p>
+            <p class="govuk-body">Warnings should be investigated, although there may be a reason why the application has been configured as it is. Note that 'code' can refer to templates or ruby code.</p>
+          </div>
+        </details>
+
+        <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-with-summary-sections">
+          <% @applications.each_with_index do |application, index| %>
+            <div class="govuk-accordion__section ">
+              <div class="govuk-accordion__section-header">
+                <h2 class="govuk-accordion__section-heading">
+                  <span class="govuk-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
+                    <%= application[:name] %>
+                  </span>
+                </h2>
+                <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
+                  <% if application[:application_found] %>
+                    Warnings:
+                    <% if application[:warning_count] > 0 %>
+                      <strong class="govuk-tag govuk-tag--red"><%= application[:warning_count] %></strong>
+                    <% else %>
+                      <%= application[:warning_count] %>
+                    <% end %>
+                  <% else %>
+                    <strong class="govuk-tag govuk-tag--red">Application not found</strong>
+                  <% end %>
+                </div>
+              </div>
+              <div id="accordion-with-summary-sections-content-<%= index %>" class="govuk-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
+                <% if application[:application_found] %>
+                  <% application[:warnings].each do |warning| %>
+                    <p class="govuk-body">
+                      <strong class="govuk-tag">Warn</strong>
+                      <strong><%= warning[:component] %></strong> - <%= warning[:message] %>
+                    </p>
+                  <% end %>
+
+                  <h3 class="govuk-heading-m">Components used</h3>
+
+                  <dl class="govuk-summary-list">
+                    <% application[:summary].each do |item| %>
+                      <div class="govuk-summary-list__row">
+                        <dt class="govuk-summary-list__key">
+                          <%= item[:name] %>
+                        </dt>
+                        <dd class="govuk-summary-list__value">
+                          <% if item[:value].length > 0 %>
+                            <%= item[:value] %>
+                          <% else %>
+                            None
+                          <% end %>
+                        </dd>
+                      </div>
+                    <% end %>
+                  </dl>
+                <% else %>
+                  <p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <p class="govuk-body">No applications found.</p>
+      <% end %>
+    </div>
+
+    <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="components-gem">
+      <h2 class="govuk-heading-l">Components</h2>
+
+      <% if @components.any? %>
+        <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
+          <div class="govuk-accordion__section ">
+            <div class="govuk-accordion__section-header">
+              <h2 class="govuk-accordion__section-heading">
+                <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
+                  Component files
+                </span>
+              </h2>
+              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
+                Lists what files each component has
+              </div>
+            </div>
+            <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
+              <table class="govuk-table">
+                <thead class="govuk-table__head">
+                  <tr class="govuk-table__row">
+                    <th scope="col" class="govuk-table__header sticky-table-header">Component</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">Stylesheet</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">Print stylesheet</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">JS</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">Test</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">JS test</th>
+                  </tr>
+                </thead>
+                <tbody class="govuk-table__body">
+                  <% @components[:component_listing].each do |component| %>
+                    <tr class="govuk-table__row">
+                      <th scope="row" class="govuk-table__header">
+                        <a href="<%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
+                      </th>
+                      <td class="govuk-table__cell">
+                        <% if component[:stylesheet] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:print_stylesheet] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:javascript] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:tests] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:js_tests] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                    </tr>
+                  <% end %>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div class="govuk-accordion__section ">
+            <div class="govuk-accordion__section-header">
+              <h2 class="govuk-accordion__section-heading">
+                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
+                  Components containing components
+                </span>
+              </h2>
+              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
+                Shows which components contain other components
+              </div>
+            </div>
+            <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
+              <dl class="govuk-summary-list">
+                <% @components[:components_containing_components].each do |component| %>
+                  <div class="govuk-summary-list__row">
+                    <dt class="govuk-summary-list__key">
+                      <a href="<%= component[:link] %>" class="govuk-link"><%= component[:component] %></a>
+                    </dt>
+                    <dd class="govuk-summary-list__value">
+                      <%= component[:sub_components].join(', ') %>
+                    </dd>
+                  </div>
+                <% end %>
+              </dl>
+            </div>
+          </div>
+          <div class="govuk-accordion__section ">
+            <div class="govuk-accordion__section-header">
+              <h2 class="govuk-accordion__section-heading">
+                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
+                  Components by application
+                </span>
+              </h2>
+              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
+                Shows which applications use each component
+              </div>
+            </div>
+            <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
+              <% if @components[:components_by_application].any? %>
+                <dl class="govuk-summary-list">
+                  <% @components[:components_by_application].each do |component| %>
+                    <div class="govuk-summary-list__row">
+                      <dt class="govuk-summary-list__key">
+                        <%= component[:component] %> (<%= component[:count] %>)
+                      </dt>
+                      <dd class="govuk-summary-list__value">
+                        <%= component[:list] %>
+                      </dd>
+                    </div>
+                  <% end %>
+                </dl>
+              <% else %>
+                <p class="govuk-body">Sorry, no applications found.</p>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% else %>
+        <p class="govuk-body">No components found.</p>
+      <% end %>
+    </div>
+  </div>
+<% else %>
+  <p class="govuk-body">Component auditing is only available when the component guide is running locally as a standalone app.</p>
+<% end %>

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

@@ -2,12 +2,13 @@
 
 <div class="component-markdown">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
-  <p>A component must:</p>
+  <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
   <ul>
-    <li><a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_principles.md">meet the component principles</a></li>
-    <li><a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_conventions.md">follow component conventions</a></li>
+    <li>Read about how to <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/publishing-to-rubygems.md">release a new version of the gem</a></li>
+    <% if ENV["MAIN_COMPONENT_GUIDE"] %>
+      <li><a href="/component-guide/audit">View component audits</a></li>
+    <% end %>
   </ul>
-  <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
 </div>
 
 <form role="search" data-module="filter-components" class="component-search">
@@ -86,3 +87,7 @@
     </li>
   <% end %>
 </ul>
+
+<div class="component-markdown">
+  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/develop-component.md">creating a new one</a>.</p>
+</div>

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

@@ -11,6 +11,7 @@
   light_text ||= false
   simple ||= false
   dark_icon ||= false
+  small_icon ||= false
   nhs_icon ||= false
   data ||= nil
   classes ||= nil
@@ -18,6 +19,7 @@
   css_classes = %w(gem-c-action-link)
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
+  css_classes << "gem-c-action-link--small-icon" if small_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext

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

@@ -10,7 +10,7 @@
 %>
 
 <script type="application/ld+json">
-  <%= raw breadcrumb_presenter.structured_data.to_json %>
+  <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
 </script>
 
 <div class="<%= classes %>" data-module="track-click">

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

@@ -5,9 +5,11 @@
   cookie_preferences_href ||= "/help/cookies"
   confirmation_message ||= raw("You’ve accepted all cookies. You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
   services_cookies ||= nil
+  css_classes = %w(gem-c-cookie-banner govuk-clearfix)
+  css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
 
-<div id="<%= id %>" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
   <div class="gem-c-cookie-banner__wrapper govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">

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

@@ -0,0 +1,26 @@
+<%
+  id ||= nil
+  extra_spacing ||= nil
+  list_type ||= "unordered"
+  visible_counters ||= nil
+  items ||= []
+  aria_label ||= nil
+
+  classes = %w(gem-c-list govuk-list)
+  classes << "govuk-list--bullet" if visible_counters && list_type === "unordered"
+  classes << "govuk-list--number" if visible_counters && list_type === "number"
+  classes << "govuk-list--spaced" if extra_spacing
+
+  # Default list type is unordered list.
+  list_tag = "ul"
+
+  # Set to ordered list to override default.
+  list_tag = "ol" if list_type === "number"
+%>
+<% if items.any? %>
+  <%= content_tag list_tag, class: classes, id: id, "aria-label": aria_label do %>
+    <% items.each do |item| %>
+      <li><%= sanitize(item) %></li>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -9,7 +9,7 @@
 <% structured_data = GovukPublishingComponents::Presenters::SchemaOrg.new(page).structured_data %>
 
 <script type="application/ld+json">
-  <%= raw structured_data.to_json %>
+  <%= raw JSON.pretty_generate(structured_data) %>
 </script>
 
 <link rel="canonical" href="<%= page.canonical_url %>" />

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

@@ -0,0 +1,27 @@
+<%
+  text ||= t('components.print_link.text')
+  href ||= nil
+  data_attributes ||= {}
+
+  require_js ||= href.nil?
+  data_attributes[:module] = 'print-link' if require_js
+%>
+
+<% if require_js %>
+  <div class="gem-c-print-link" >
+    <%= content_tag(:button, text, {
+        class: %w(gem-c-print-link__button govuk-link),
+        data: data_attributes
+    }) %>
+  </div>
+<% else %>
+  <div class="gem-c-print-link gem-c-print-link--show-without-js">
+    <%= link_to(
+      text,
+      href,
+      class: %w(gem-c-print-link__link govuk-link),
+      rel: "alternate",
+      data: data_attributes
+    ) %>
+  </div>
+<% end %>

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

@@ -6,10 +6,18 @@
   label ||= nil
   heading ||= nil
   heading_caption ||= nil
+  heading_size ||= nil
   small ||= false
   inline ||= false
   is_page_heading ||= false
-  heading_size = 'm' unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+
+  if ['s', 'm', 'l', 'xl'].include?(heading_size)
+    size = heading_size
+  elsif is_page_heading
+    size = 'xl'
+  else
+    size = 'm'
+  end
 
   description ||= nil
   hint ||= nil
@@ -28,7 +36,7 @@
   radio_classes << "govuk-radios--inline" if inline
 
   legend_classes = %w(govuk-fieldset__legend)
-  legend_classes << "govuk-fieldset__legend--#{heading_size}"
+  legend_classes << "govuk-fieldset__legend--#{size}"
 
   aria = "#{hint_id} #{"#{error_id}" if has_error}".strip if hint or has_error
 
@@ -40,9 +48,9 @@
 
     <% if heading.present? %>
       <% if is_page_heading %>
-        <%= tag.legend class: "govuk-fieldset__legend govuk-fieldset__legend--xl gem-c-title" do %>
-          <%= tag.span(heading_caption, class: "govuk-caption-xl") if heading_caption.present? %>
-          <%= tag.h1 heading, class: "gem-c-title__text" %>
+        <%= tag.legend class: legend_classes do %>
+          <%= tag.span(heading_caption, class: "govuk-caption-#{size}") if heading_caption.present? %>
+          <%= tag.h1 heading, class: "gem-c-radio__heading-text govuk-fieldset__heading" %>
         <% end %>
       <% else %>
         <%= tag.legend heading, class: legend_classes %>

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

@@ -25,14 +25,14 @@
 %>
 <% if title %>
   <script type="application/ld+json">
-    <%= raw breadcrumb_presenter.structured_data.to_json %>
+    <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
   <div class="<%= classes %>" data-module="track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"
-        class="gem-c-step-nav-header__title"
+        class="gem-c-step-nav-header__title govuk-link"
         data-track-category="<%= tracking_category %>"
         data-track-action="<%= tracking_action %>"
         data-track-label="<%= tracking_label %>"

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

@@ -75,6 +75,11 @@ examples:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
+  with_small_icon:
+    data:
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
+      small_icon: true
   with_dark_icon:
     data:
       text: Coronavirus (COVID-19)

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

@@ -184,6 +184,10 @@ examples:
         - label: "Blue"
           value: "blue"
   with_custom_heading_size:
+    description: |
+      This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed. 
+
+      If the is_page_heading option is true and heading_size is not set, the text size will be xl.
     data:
       name: "favourite_colour"
       heading: "What is your favourite colour?"

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

@@ -24,10 +24,13 @@ examples:
       text: 'Original consultation'
       heading_level: 3
   different_font_sizes:
-    description: Choose a different font size. Valid options are 24 (24px) and 19 (19px), with the component defaulting to 27px, appropriate for a H1. This option is not tied to the heading_level option in order to give flexibility.
+    description: |
+      Set a different font size for the heading. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 27px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
+
+      This option is not tied to the heading_level option in order to give flexibility.
     data:
-      text: 'Heading 3'
-      font_size: 19
+      text: 'One big heading'
+      font_size: "xl"
   with_id_attribute:
     data:
       text: 'Detail of outcome'