govuk_publishing_components 35.5.0 → 35.7.0

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

@@ -1,13 +1,16 @@
 <%
   add_gem_component_stylesheet("previous-and-next-navigation")
+  ga4_tracking ||= false
 
   if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page)
 %>
-  
   <nav
     class="govuk-pagination govuk-pagination--block"
     role="navigation"
     aria-label="<%= t("components.previous_and_next_navigation.pagination") %>"
+    <% if ga4_tracking %>
+      data-module="ga4-link-tracker"
+    <% end %>
   >
     <% if local_assigns.include?(:previous_page) %>
       <%
@@ -24,6 +27,14 @@
           data-track-label="<%= previous_page[:url] %>"
           data-track-dimension="previous"
           data-track-dimension-index="29"
+          <% if ga4_tracking %>
+            data-ga4-link = "<%= {
+              event_name: "navigation",
+              type: "content",
+              text: previous_page[:label] || title,
+              section: "Previous",
+            }.to_json %>"
+          <% end %>
         >
           <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
             <path 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"></path>
@@ -52,6 +63,14 @@
           data-track-label="<%= next_page[:url] %>"
           data-track-dimension="next"
           data-track-dimension-index="29"
+          <% if ga4_tracking %>
+            data-ga4-link = "<%= {
+              event_name: "navigation",
+              type: "content",
+              text: next_page[:label] || title,
+              section: "Next",
+            }.to_json %>"
+          <% end %>
         >
           <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
             <path d="m8.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"></path>

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

@@ -1,4 +1,5 @@
 <%
+  add_gem_component_stylesheet("label")
   add_gem_component_stylesheet("radio")
 
   local_assigns[:margin_bottom] ||= 6

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

@@ -49,6 +49,7 @@
 
 <div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
   <% if wrap_label_in_a_heading %>
+    <% add_gem_component_stylesheet("label") %>
     <%= content_tag(shared_helper.get_heading_level, class: "govuk-!-margin-0") do %>
       <%= tag_label %>
     <% end %>

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

@@ -17,6 +17,7 @@
 <% if select_helper.options.any? && id && label %>
   <%= content_tag :div, class: select_helper.css_classes do %>
     <% if is_page_heading %>
+      <% add_gem_component_stylesheet("title") %>
       <%= tag.h1 label_tag(id, label, class: select_helper.label_classes), class: "gem-c-title__text" %>
     <% else %>
       <%= label_tag(id, label, class: select_helper.label_classes) %>

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

@@ -61,7 +61,7 @@
                       "index_link": (index + 1).to_s
                     },
                     index_total: (links.length).to_s,
-                    section: "Part of",
+                    section: pretitle,
                   }.to_json
                 %>
                   data-ga4-link="<%= ga4_attributes %>"

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_document.html.erb

@@ -1,3 +1,3 @@
-<svg class="gem-c-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--document" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
   <path d="M12 12h75v27H12zM12 59h9v9h-9zM12 77h9v9h-9zM12 95h9v9h-9zM12 113h9v9h-9zM30 59h57v9H30zM30 77h39v9H30zM30 95h57v9H30zM30 113h48v9H30z" stroke-width="0"/>
 </svg>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_generic.html.erb

@@ -1,4 +1,4 @@
-<svg class="gem-c-attachment__thumbnail-image" version="1.1" viewBox="0 0 84 120" width="84" height="120" aria-hidden="true">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--generic" version="1.1" viewBox="0 0 84 120" width="84" height="120" aria-hidden="true">
   <path d="M74.85 5v106H5" fill="none" stroke-miterlimit="10" stroke-width="2"/>
   <path d="M79.85 10v106H10" fill="none" stroke-miterlimit="10" stroke-width="2"/>
 </svg>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_html.html.erb

@@ -0,0 +1,3 @@
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--html" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
+  <path d="M30,95h57v9H30V95z M30,77v9h39v-9H30z M30,122h48v-9H30V122z M12,68h9v-9h-9V68z M12,104h9v-9h-9V104z M12,86h9v-9h-9V86z M12,122h9v-9h-9V122z M87,12v27H12V12H87z M33,17h-4v8h-6v-8h-4v18h4v-7l6,0v7l4,0V17z M49,17H35l0,3h5v15h4V20l5,0V17z M68,17h-4 l-5,6l-5-6h-4v18h4l0-12l5,6l5-6l0,12h4V17z M81,32h-6V17h-4v18h10V32z M30,68h57v-9H30V68z" stroke-width="0"/>
+</svg>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_spreadsheet.html.erb

@@ -1,4 +1,4 @@
-<svg class="gem-c-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--spreadsheet" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
   <path d="M12 12h75v27H12zm0 47h18.75v63H12zm55 2v59H51V61h16m2-2H49v63h20V59z" stroke-width="0"/>
   <path d="M49 61.05V120H32.8V61.05H49m2-2H30.75v63H51V59zm34 2V120H69.05V61.05H85m2-2H67v63h20V59z" stroke-width="0"/>
   <path d="M30 68.5h56.5M30 77.34h56.5M30 112.7h56.5M30 95.02h56.5M30 86.18h56.5M30 103.86h56.5" fill="none" stroke-miterlimit="10" stroke-width="2"/>

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

@@ -177,3 +177,24 @@ examples:
         content_type: application/pdf
         file_size: 20000
         thumbnail_url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/791567/thumbnail_the_government_financial_reporting_review_web.pdf.png"
+  with_preview_link:
+    data:
+      attachment:
+        title: "Consular data: February 2018"
+        url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/687542/February_2018_Consular_MI.csv
+        filename: February_2018_Consular_MI.csv
+        content_type: text/csv
+        file_size: 51496
+        preview_url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/687542/February_2018_Consular_MI.csv/preview
+  html_attachment:
+    data:
+      attachment:
+        title: "Smart meters: unlocking the future"
+        url: https://www.gov.uk/government/publications/smart-meters-unlocking-the-future/smart-meters-unlocking-the-future
+        type: html
+  external_attachment:
+    data:
+      attachment:
+        title: "Architects Registration Board annual report 2021"
+        url: https://arb.org.uk/wp-content/uploads/ARB-Annual-Report-and-Financial-Statement-2021-published.pdf
+        type: external

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

@@ -192,3 +192,22 @@ examples:
             text: 2. Numbers not parsed
           - href: "#third-thing"
             text: 3. Numbers are just text
+  with_ga4_tracking:
+    description: Enables the GA4 link tracker on the list.
+    data:
+      ga4_tracking: true
+      contents:
+        - href: "#first-thing"
+          text: 1. First thing
+          items:
+          - href: "#second-thing"
+            text: 1. Nested Item
+          - href: "#third-thing"
+            text: 2. Nested Item
+        - href: "#first-thing"
+          text: 2. Second thing
+          items:
+          - href: "#second-thing"
+            text: 1. Nested Item
+          - href: "#third-thing"
+            text: 2. Nested Item

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

@@ -23,7 +23,14 @@ examples:
       content: |
         <p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
       block: |
-        <div class="govuk-form-group">
-          <label class="gem-c-label govuk-label" for="news-title">News title</label>
-          <input id="news-title" type="text" class="gem-c-input govuk-input" aria-describedby="news-title-guidance">
-        </div>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/input", { 
+              label: {
+                text: "News title"
+              },
+              name: "news-title",
+              id: "news-title",
+              describedby: "news-title-guidance"
+            } 
+          %>
+          <!-- end of example content -->

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

@@ -11,23 +11,41 @@ examples:
     data:
       legend_text: 'Do you have a passport?'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="default-yes" name="default">
-          <label for="default-yes">Yes</label>
-
-          <input type="radio" id="default-no" name="default">
-          <label for="default-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "default",
+            items: [
+              {
+                value: "default-yes",
+                text: "Yes"
+              },
+              {
+                value: "default-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_id_attribute:
     data:
       legend_text: 'Do you have a passport?'
       id: passports
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="passport-yes" name="default">
-          <label for="passport-yes">Yes</label>
-
-          <input type="radio" id="passport-no" name="default">
-          <label for="passport-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "passport",
+            items: [
+              {
+                value: "passport-yes",
+                text: "Yes"
+              },
+              {
+                value: "passport-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_heading:
     description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
     data:
@@ -35,33 +53,60 @@ examples:
       heading_level: 2
       heading_size: 'm'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="level-yes" name="default">
-          <label for="level-yes">Yes</label>
-
-          <input type="radio" id="level-no" name="default">
-          <label for="level-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "level",
+            items: [
+              {
+                value: "level-yes",
+                text: "Yes"
+              },
+              {
+                value: "level-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_custom_legend_size:
     description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
     data:
       legend_text: 'Do you have a driving license?'
       heading_size: 'l'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="size-yes" name="default">
-          <label for="size-yes">Yes</label>
-
-          <input type="radio" id="size-no" name="default">
-          <label for="size-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "size",
+            items: [
+              {
+                value: "size-yes",
+                text: "Yes"
+              },
+              {
+                value: "size-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_error_message:
     description: The component also accepts an `error_id`, or generates one automatically.
     data:
       legend_text: 'Do you have a passport?'
       error_message: 'Please choose an option'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="default2-yes" name="default2">
-          <label for="default2-yes">Yes</label>
-
-          <input type="radio" id="default2-no" name="default2">
-          <label for="default2-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "default2",
+            items: [
+              {
+                value: "default2-yes",
+                text: "Yes"
+              },
+              {
+                value: "default2-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->

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

@@ -80,6 +80,49 @@ examples:
           </li>
           <li>three</li>
         </ul>
+  ordered_lists_types:
+    description: |
+      Govspeak/markdown does not generate HTML with type and start attributes,
+      however we still provide support for them as some advanced users write
+      HTML directly to achieve the list formatting.
+    data:
+      block: |
+        <h2>Lowercase alphabetical list</h2>
+        <ol type="a">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Uppercase alphabetical list</h2>
+        <ol type="A">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Lowercase Roman numeral list</h2>
+        <ol type="i">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Uppercase Roman numberal list</h2>
+        <ol type="I">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Numerical list starting at 3</h2>
+        <ol start="3">
+          <li>three</li>
+          <li>four</li>
+        </ol>
+
+        <h2>Lowercase alphabetical list, starting at 3</h2>
+        <ol type="a" start="3">
+          <li>three</li>
+          <li>four</li>
+        </ol>
+
   legislative_lists:
     data:
       block: |

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

@@ -16,49 +16,59 @@ examples:
   default:
     data:
       block: |
-        <div class="gem-c-title gem-c-title--inverse">
-          <h1 class="gem-c-title__text govuk-heading-l">
-            Education, Training and Skills
-          </h1>
-        </div>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/title", {
+            title: "Education, Training and Skills",
+            inverse: true
+          } %>
+          <!-- end of example content -->
   for_full_page_width:
     description: "Used when the header covers the full width of the page, but it's content is in the grid layout. The left-right padding is removed to make the contents line up with the other items on the page."
     data:
-      full_width: true
-      block: |
-        <div class="gem-c-title gem-c-title--inverse">
-          <h1 class="gem-c-title__text govuk-heading-l">
-            Education, Training and Skills
-          </h1>
-        </div>
+        full_width: true
+        block: |
+          <!-- example content -->
+            <%= render "govuk_publishing_components/components/title", {
+              title: "Education, Training and Skills",
+              inverse: true
+            } %>
+            <!-- end of example content -->
   html_publication_header:
     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="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">
-          <p class="gem-c-title__context govuk-caption-m">Notice</p>
-          <h1 class="gem-c-title__text govuk-heading-l">
-            LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
-          </h1>
-        </div>
-        <p class="publication-header__last-changed">Published 22 April 2016</p>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/title", {
+            title: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
+            inverse: true,
+            context: "Notice",
+          } %>
+          <p class="publication-header__last-changed">Published 22 April 2016</p>
+          <!-- end of example content -->
   with_breadcrumbs_and_paragraph:
     data:
       padding_top: false
       block: |
-        <div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--inverse">
-          <ol class="govuk-breadcrumbs__list">
-            <li class="govuk-breadcrumbs__list-item">
-              <a href="/section" class="govuk-breadcrumbs__link">Section</a>
-            </li>
-            <li class="govuk-breadcrumbs__list-item">
-              <a href="/section/sub-section" class="govuk-breadcrumbs__link">Education of disadvantaged children</a>
-            </li>
-          </ol>
-        </div>
-        <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 years.
-        </p>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/breadcrumbs", {
+            collapse_on_mobile: true,
+            breadcrumbs: [
+              {
+                title: "Section",
+                url: "/section"
+              },
+              {
+                title: "Education of disadvantaged children",
+                url: "/section/sub-section"
+              }
+            ],
+            inverse: true
+          } %>
+          <%= render "govuk_publishing_components/components/lead_paragraph", {
+            text: "Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.",
+            inverse: true
+          } %>
+          <!-- end of example content -->
   with_link:
     data:
       block: |

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

@@ -362,3 +362,10 @@ examples:
       first_published: 14 June 2014
       last_updated: 10 September 2015
       margin_bottom: 2
+  with_ga4_tracking:
+    description: |
+      Enables the GA4 link tracker on the 'See all updates' link.
+    data:
+      last_updated: 10 September 2015
+      see_updates_link: true
+      ga4_tracking: true

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

@@ -27,7 +27,13 @@ display_preview: false
 examples:
   default:
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-default">Open modal</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-default"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-default
@@ -38,7 +44,13 @@ examples:
     description: |
       A wide version of the modal dialogue will provide the same width with the main container
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-wide">Open wide modal</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open wide modal",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-wide"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-wide
@@ -50,7 +62,13 @@ examples:
     description: |
       Modal dialogue with form elements inside to show how it prevents tabbing to outside the dialogue when open while preserving the tabindex on focusable elements
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-with-form">Open modal with form</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal with form",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-with-form"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-with-form
@@ -65,7 +83,13 @@ examples:
     description: |
       Modal dialogue with a large block content to show how the modal scrolls withing the page and how it prevents scrolling the page while the dialogue is open
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-with-large-content">Open modal with large content</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal with large content",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-with-large-content"
+          }
+        } %>
       <%= component %>
     data:
       id: modal-with-large-content
@@ -78,7 +102,13 @@ examples:
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
   with_data_attributes:
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-with-data-attributes">Open modal with data attributes</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal with data attributes",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-with-data-attributes"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-with-data-attributes

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

@@ -64,3 +64,15 @@ examples:
         url: next-page
         title: Next
         label: 'Driver CPC part 1 test: theory'
+  with_ga4_tracking:
+    description: Enables the GA4 link tracker on the links.
+    data:
+      ga4_tracking: true
+      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'

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

@@ -94,9 +94,15 @@ examples:
   with_aria_attributes:
     description: Use `describedby` when the textarea is described by an element outside the component; for example, when used in conjunction with a [contextual guidance](/component-guide/contextual_guidance).
     embed: |
-      <%= component %>
-      <p class="govuk-body" id="contextual-guidance">The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
+      <%= render "govuk_publishing_components/components/contextual_guidance", {
+          html_for: "contextual-guidance-id",
+          guidance_id: "contextual-guidance",
+          content: sanitize("<p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>")
+        } do %>
+        <%= component %>
+      <% end %>
     data:
+      id: "contextual-guidance-id"
       label:
         text: "Title"
         bold: true

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -1,3 +1,25 @@
+<% content_for :body do %>
+  <% if @preview %>
+    <main id="wrapper" class="govuk-width-container">
+      <%= yield %>
+    </main>
+  <% else %>
+    <%= render "govuk_publishing_components/components/layout_header", {
+      environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
+      product_name: GovukPublishingComponents::Config.component_guide_title,
+      href: component_guide_path
+    } %>
+    <div class="govuk-width-container app-width-container--wide">
+      <% if @guide_breadcrumbs %>
+        <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs  %>
+      <% end %>
+      <main id="wrapper" class="govuk-main-wrapper">
+        <%= yield %>
+      </main>
+    </div>
+    <%= render "govuk_publishing_components/components/layout_footer" %>
+  <% end %>
+<% end %>
 <!DOCTYPE html>
 <html lang="en" class="<%= "govuk-template" unless @preview %>">
   <head>
@@ -27,26 +49,7 @@
     <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
     <% end -%>
-    <% if @preview %>
-      <main id="wrapper" class="govuk-width-container">
-        <%= yield %>
-      </main>
-    <% else %>
-      <%= render "govuk_publishing_components/components/layout_header", {
-        environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
-        product_name: GovukPublishingComponents::Config.component_guide_title,
-        href: component_guide_path
-      } %>
-      <div class="govuk-width-container app-width-container--wide">
-        <% if @guide_breadcrumbs %>
-          <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs  %>
-        <% end %>
-        <main id="wrapper" class="govuk-main-wrapper">
-          <%= yield %>
-        </main>
-      </div>
-      <%= render "govuk_publishing_components/components/layout_footer" %>
-    <% end %>
+    <%= yield :body %>
 
     <%= javascript_include_tag "component_guide/application" %>
     <%= javascript_include_tag "#{GovukPublishingComponents::Config.application_javascript}" %>

data/config/locales/ar.yml

@@ -23,6 +23,7 @@ ar:
         other: "%{count} صفحات"
         two:
         zero:
+      preview_link:
       reference: 'مرجع: %{reference}'
       request_format_cta: طلب تنسيق يمكن الاطلاع عليه.
       request_format_details_html: إذا كنت تستخدم تكنولوجيا مساعِدة (مثل قارئ للشاشة) وتحتاج إلى إصدار من هذا المستند بتنسيق يسهل الاطلاع عليه، فيُرجى التواصل عبر البريد الإلكتروني <a href='mailto:%{alternative_format_contact_email}' target='_blank' class='govuk-link'>%{alternative_format_contact_email}</a>. من فضلك أخبرنا بالتنسيق الذي تحتاجه. إذا أخبرتنا بالتكنولوجيا المساعدة التي تستخدمها، فهذا سيساعدنا.