govuk_publishing_components 8.1.0 → 8.2.0

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

@@ -3,3 +3,10 @@
   <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>
+
+<% if component_doc.display_html? %>
+  <div class="component-guide-preview component-call component-highlight component-output" data-content="HTML OUTPUT">
+    <% html_output = render "govuk_publishing_components/component_guide/component_doc/component_output", example: example, component_doc: component_doc %>
+    <pre><code><%= raw example.highlight_code(html_output.strip) %></code></pre>
+  </div>
+<% end %>

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

@@ -1,5 +1,5 @@
 <% content_for :title, "#{@component_example.name} example - #{@component_doc.name} component" %>
-<%= render 'govuk_component/title', title: @component_example.name, context: "#{@component_doc.name} example" %>
+<%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example" %>
 
 <div class="component-show">
   <div class="component-doc">

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

@@ -1,4 +1,4 @@
-<%= render 'govuk_component/title', title: GovukPublishingComponents::Config.component_guide_title %>
+<%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title %>
 
 <div class="govuk-govspeak">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>

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

@@ -1,5 +1,5 @@
 <% content_for :title, "#{@component_doc.name} component" %>
-<%= render 'govuk_component/title', title: @component_doc.name, context: "Component" %>
+<%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component" %>
 
 <div class="component-show">
   <div class="grid-row">
@@ -10,7 +10,7 @@
           <p><a class="component-violation__link" href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/accessibility_acceptance_criteria.md">Please define accessibility acceptance criteria for this component.</a></p>
         </div>
       <% end %>
-      <%= render 'govuk_component/lead_paragraph', text: @component_doc.description %>
+      <%= render 'govuk_publishing_components/components/lead_paragraph', text: @component_doc.description %>
       <% if @component_doc.body.present? %>
         <div class="component-body">
           <%= render 'govuk_component/govspeak', content: @component_doc.html_body %>

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

@@ -0,0 +1,53 @@
+<%
+  active ||= nil
+%>
+
+<nav id="proposition-menu" class="no-proposition-name">
+  <ul id="proposition-links">
+    <li>
+      <a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">
+        <%= t("govuk_component.government_navigation.departments", default: "Departments") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'worldwide' %>" href="/government/world">
+        <%= t("govuk_component.government_navigation.worldwide", default: "Worldwide") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'how-government-works' %>" href="/government/how-government-works">
+        <%= t("govuk_component.government_navigation.how-government-works", default: "How government works") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'get-involved' %>" href="/government/get-involved">
+        <%= t("govuk_component.government_navigation.get-involved", default: "Get involved") %>
+      </a>
+    </li>
+    <li class="clear-child">
+      <a class="<%= 'active' if active == 'policies' %>" href="/government/policies">
+        <%= t("govuk_component.government_navigation.policies", default: "Policies") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'publications' %>" href="/government/publications">
+        <%= t("govuk_component.government_navigation.publications", default: "Publications") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'consultations' %>" href="/government/publications?publication_filter_option=consultations">
+        <%= t("govuk_component.government_navigation.consultations", default: "Consultations") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'statistics' %>" href="/government/statistics">
+        <%= t("govuk_component.government_navigation.statistics", default: "Statistics") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'announcements' %>" href="/government/announcements">
+        <%= t("govuk_component.government_navigation.announcements", default: "Announcements") %>
+      </a>
+    </li>
+  </ul>
+</nav>

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

@@ -0,0 +1,13 @@
+<%
+  text ||= ""
+  inverse ||= false
+  # Replace the space between the last 2 words with a non-breaking space, so
+  # we'll never have a dangling word in a paragraph. 
+  text = GovukPublishingComponents::Presenters::Sanitisation.sub_safely(text, /\s([\w\.\?\!\:]+)$/, '&nbsp;\1')
+%>
+
+<% if text.present? %>
+  <p class="gem-c-lead-paragraph <% if inverse %>gem-c-lead-paragraph--inverse<% end %>">
+    <%= text %>
+  </p>
+<% end %>

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

@@ -1,5 +1,25 @@
-<% structured_data = GovukPublishingComponents::Presenters::SchemaOrg.new(local_assigns).structured_data %>
+<% page = GovukPublishingComponents::Presenters::Page.new(local_assigns) %>
+<% structured_data = GovukPublishingComponents::Presenters::SchemaOrg.new(page).structured_data %>
 
 <script type="application/ld+json">
   <%= raw structured_data.to_json %>
 </script>
+
+<link rel="canonical" href="<%= page.canonical_url %>" />
+
+<meta property="og:site_name" content="GOV.UK" />
+<meta property="og:type" content="article" />
+<meta property="og:url" content="<%= page.canonical_url %>" />
+<meta property="og:title" content="<%= page.title %>" />
+<meta property="og:description" content="<%= strip_tags(page.description) %>" />
+
+<% if page.has_image? %>
+  <meta property="og:image" content="<%= page.image_url %>" />
+  <meta property="og:image:alt" content="<%= page.image_alt_text %>" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="<%= page.image_url %>" />
+  <meta name="twitter:image:alt" content="<%= page.image_alt_text %>" />
+<% else %>
+  <meta name="twitter:card" content="summary" />
+<% end %>

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

@@ -0,0 +1,22 @@
+<%
+phase ||= nil
+
+unless phase.in?(%w[alpha beta])
+  raise ArgumentError, "The phase banner component expects a `phase` (`beta` or `alpha`), #{phase.inspect} given"
+end
+%>
+
+<div class="gem-c-phase-banner">
+  <p>
+    <strong class="phase-tag"><%= phase %></strong>
+    <span>
+      <% if local_assigns[:message] %>
+        <%= local_assigns[:message] %>
+      <% elsif phase == "beta" %>
+        This part of GOV.UK is being rebuilt &ndash; <a href="/help/beta">find out what beta means</a>
+      <% elsif phase == "alpha" %>
+        This part of GOV.UK is being built &ndash; <a href="/service-manual/phases/ideal-alphas">find out what alpha means</a>
+      <% end %>
+    </span>
+  </p>
+</div>

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

@@ -0,0 +1,58 @@
+<% if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page) %>
+<nav
+  class="gem-c-pagination"
+  role="navigation"
+  aria-label="<%= t("govuk_component.previous_and_next_navigation.pagination", default: "Pagination") %>"
+>
+  <ul class="gem-c-pagination__list" data-module="track-click">
+    <% if local_assigns.include?(:previous_page) %>
+      <li class="gem-c-pagination__item gem-c-pagination__item--previous">
+        <a href="<%= previous_page[:url] %>"
+          class="gem-c-pagination__link"
+          rel="prev"
+          data-track-category="contentsClicked"
+          data-track-action="previous"
+          data-track-label="<%= previous_page[:url] %>"
+          data-track-dimension="previous"
+          data-track-dimension-index="29"
+        >
+          <span class="gem-c-pagination__link-title">
+            <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
+              <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
+            </svg>
+            <%= previous_page[:title] %>
+          </span>
+          <% if previous_page[:label].present? %>
+            <span class="visually-hidden">:</span>
+            <span class="gem-c-pagination__link-label"><%= previous_page[:label] %></span>
+          <% end %>
+        </a>
+      </li>
+    <% end %>
+    <% if local_assigns.include?(:next_page) %>
+      <li class="gem-c-pagination__item gem-c-pagination__item--next">
+        <a href="<%= next_page[:url] %>"
+          class="gem-c-pagination__link"
+          rel="next"
+          data-track-category="contentsClicked"
+          data-track-action="next"
+          data-track-label="<%= next_page[:url] %>"
+          data-track-dimension="next"
+          data-track-dimension-index="29"
+        >
+          <span class="gem-c-pagination__link-title">
+            <%= next_page[:title] %>
+            <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
+              <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
+            </svg>
+          </span>
+          <% if next_page[:label].present? %>
+            <span class="visually-hidden">:</span>
+            <span class="gem-c-pagination__link-label"><%= next_page[:label] %></span>
+          <% end %>
+        </a>
+      </li>
+    <% end %>
+  </ul>
+</nav>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%
+  average_title_length ||= false
+  context ||= false
+  context_text = context.is_a?(Hash) ? context[:text] : context
+  context_href = context.is_a?(Hash) ? context[:href] : false
+  context_data = context.is_a?(Hash) ? context[:data] : false
+
+  inverse ||= false
+  margin_bottom ||= 1
+  margin_bottom_class = "gem-c-title--bottom-margin" if margin_bottom == 1
+%>
+<div class="gem-c-title
+  <% if inverse %>gem-c-title--inverse<% end %>
+  <%= margin_bottom_class %>">
+  <% if context %>
+    <p class="gem-c-title__context">
+      <%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link', data: context_data) : context_text %>
+    </p>
+  <% end %>
+  <h1 class="gem-c-title__text <% if average_title_length %>gem-c-title__text--<%= average_title_length %><% end %>">
+    <%= title %>
+  </h1>
+</div>

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

@@ -7,6 +7,7 @@ shared_accessibility_criteria:
 accessibility_criteria:
   The breadcrumb links must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
   (this especially applies when [using the inverse flag](/component-guide/breadcrumbs/inverse)).
+display_html: true
 examples:
   default:
     data:

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

@@ -0,0 +1,18 @@
+name: Government navigation
+description: Navigation placed in the header by Slimmer and used by pages which sit
+  under the /government path. This is a markup only component and is not available
+  for preview here. It can be passed a string to mark a link as being active.
+accessibility_criteria: |
+  The government navigation component must:
+
+  - Be identified as a [navigation landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_navigation)
+shared_accessibility_criteria:
+  - link
+accessibility_excluded_rules:
+  - 'duplicate-id' # ids used in this component are for slimmer to use when moving this component into the header
+examples:
+  default:
+    data: {}
+  with_active_item:
+    data:
+      active: departments

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

@@ -13,8 +13,8 @@ examples:
   default:
     data:
       block: |
-        <div class="pub-c-title pub-c-title--inverse">
-          <h1 class="pub-c-title__text ">
+        <div class="gem-c-title gem-c-title--inverse">
+          <h1 class="gem-c-title__text ">
             Education, Training and Skills
           </h1>
         </div>
@@ -23,8 +23,8 @@ examples:
     data:
       full_width: true
       block: |
-        <div class="pub-c-title pub-c-title--inverse">
-          <h1 class="pub-c-title__text ">
+        <div class="gem-c-title gem-c-title--inverse">
+          <h1 class="gem-c-title__text ">
             Education, Training and Skills
           </h1>
         </div>
@@ -32,9 +32,9 @@ examples:
     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)"
     data:
       block: |
-        <div class="pub-c-title pub-c-title--inverse pub-c-title--bottom-margin">
-          <p class="pub-c-title__context">Notice</p>
-          <h1 class="pub-c-title__text">
+        <div class="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">
+          <p class="gem-c-title__context">Notice</p>
+          <h1 class="gem-c-title__text">
             LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
           </h1>
         </div>
@@ -53,11 +53,11 @@ examples:
             </li>
           </ol>
         </div>
-        <div class="pub-c-title pub-c-title--inverse">
-          <h1 class="pub-c-title__text ">
+        <div class="gem-c-title gem-c-title--inverse">
+          <h1 class="gem-c-title__text ">
             Education, Training and Skills
           </h1>
         </div>
-        <p class="pub-c-lead-paragraph pub-c-lead-paragraph--inverse">
+        <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
           Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early&nbsp;years.
         </p>

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

@@ -0,0 +1,22 @@
+name: Lead paragraph
+description: The opening paragraph of content. Typically a content item’s description field.
+accessibility_criteria: |
+  The lead paragraph must be visually distinct from other paragraphs.
+
+  The lead paragraph must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA (this especially applies when [placed on a darker background](/component-guide/lead_paragraph/on_topic_page)).
+examples:
+  default:
+    data:
+      text: 'UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.'
+  right_to_left:
+    data:
+      text: 'قرارات تحقيقات وزارة الدفاع في الانتهاكات المزعومة للمادة ٢ والمادة ٣ من المعاهدة الاوروبية لحقوق الانسان خلال العمليات العسكرية في العراق.'
+    context:
+      right_to_left: true
+  on_topic_page:
+    description: Lead paragraphs need to support being placed on a blue background to work with the new taxonomy topic page designs
+    data:
+      text: Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
+      inverse: true
+    context:
+      dark_background: true

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

@@ -7,6 +7,7 @@ body: |
   The code which reads the meta tags can be found <a href="https://github.com/alphagov/static/blob/master/app/assets/javascripts/analytics/static-analytics.js#L76-L96">in static-analytics.js</a>.
 accessibility_criteria: |
   The analytics meta tags component should not be visible to any users.
+display_html: true
 examples:
   with_organisations:
     data:

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

@@ -0,0 +1,21 @@
+name: Phase (alpha & beta) banner
+description: |
+  A banner that indicates content is in a alpha or beta phase, with an optional explanation
+accessibility_criteria: |
+  The label must:
+
+  - have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      phase: alpha
+  beta_banner:
+    data:
+      phase: beta
+  with_message:
+    data:
+      phase: beta
+      message: This is an optional different message to explain what the state means in this
+        context which can take <a href='https://www.gov.uk'>HTML</a>

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

@@ -0,0 +1,64 @@
+name: Previous and next navigation
+description: Navigational links that allow users to navigate within a series of pages
+  or elements.
+body: |
+  This component accepts 2 optional parameters, previous and next.
+
+  Each optional parameter accepts:
+
+  - an URL for the link
+  - a title for the URL
+  - a label that can add extra info (ie page number) that will be displayed under the title
+
+  If one of the 2 parameters is nil, no link will appear.
+accessibility_criteria: |
+  Icons in the component must not be announced by screen readers.
+
+  The component must:
+
+  - identify itself as pagination navigation
+  - provide a distinction between the navigation text and label text of the links both visually and for screenreaders
+
+shared_accessibility_criteria:
+  - link
+examples:
+  only_previous:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous page
+        label: 1 of 3
+  only_next:
+    data:
+      next_page:
+        url: next-page
+        title: Next page
+        label: Tax disc
+  both_previous_and_next:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous page
+        label: 1 of 3
+      next_page:
+        url: next-page
+        title: Next page
+        label: 3 of 3
+  both_previous_and_next_no_labels:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous page
+      next_page:
+        url: next-page
+        title: Next page
+  become_a_lorry_bus_driver_example:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous
+        label: Applying for a provisional lorry or bus licence
+      next_page:
+        url: next-page
+        title: Next
+        label: 'Driver CPC part 1 test: theory'