govuk_publishing_components 60.0.0 → 60.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19ec497573718b8b4a1109fdfa230923222ab8dc09f030301e4b9749f4d1a711
-  data.tar.gz: 65be7c1ae928f0af8e21678ca5a2af266e76cc41e7d5329f147a97f68b5c5dd4
+  metadata.gz: d4823d17fd795d6334e13665c4973b75279aa5c233bc230250616aa1978c3b9b
+  data.tar.gz: cc0c87bcf4346ad84d1b0637a2b0a3fa6e8ef0af59e91bc0565cf7cfebb0b044
 SHA512:
-  metadata.gz: c80b9e458723516973ad8ea2ecad144012fca098a4d2b3786f31b2c28eef8290b077419f8df0e851d3857092a30bee3bb5cee9e65dcb13a7acb930f22a3a1360
-  data.tar.gz: 29828aebcc85908593f5e133329cf8af50208f43c92452d1688e8b7e1abc5680aaf6c81b1bac2a139555d4b2968d76f92789814e242e4f8479e35a145db0c762
+  metadata.gz: b03243d92cb8c2d40322a48d91c099db3d3bbb04606fea73087d9cb9d3f0a3238f145f322a57c064c0b737c26a68cda8836edc7738a93333489a181dc1d4bcc6
+  data.tar.gz: f23cff517c4d13428ae7a7df05b23cb9d486c2f38812ca918391ffd89ac3a874881c51c52829add3a17c2f6ac14fa264b83743cda05d27d147d4bb5eed575e5e

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

@@ -121,10 +121,12 @@ $gem-guide-border-width: 1px;
 
   &.dark-background {
     background-color: govuk-colour("blue");
+    padding: govuk-spacing(3);
   }
 
   &.black-background {
     background-color: govuk-colour("black");
+    padding: govuk-spacing(3);
   }
 
   &.component-output {
@@ -140,7 +142,7 @@ $gem-guide-border-width: 1px;
 
 .component-guide-preview--simple {
   border: 0;
-  padding: govuk-spacing(2);
+  padding: 0;
 
   &::before {
     display: none;
@@ -237,25 +239,14 @@ html {
   font-family: $govuk-font-family;
 }
 
-.hide-header-and-footer {
-  // stylelint-disable selector-max-id
-  #global-header,
-  #global-header-bar,
-  #global-breadcrumb,
-  #footer {
-    display: none;
-  }
-  // stylelint-enable selector-max-id
-}
-
+// wraps each component variation on the preview page
 .component-guide-preview-page {
-  padding: (govuk-spacing(6) * 1.5) 0;
-  position: relative;
+  margin-bottom: govuk-spacing(9);
 
   .preview-title {
     margin-top: 0;
-    margin-bottom: 1em;
-    @include govuk-font($size: 16, $weight: bold);
+    margin-bottom: govuk-spacing(4);
+    @include govuk-font($size: 19, $weight: bold);
 
     a {
       @include govuk-link-common;
@@ -264,6 +255,14 @@ html {
   }
 }
 
+// Add spacing to the left of the component title on the preview page
+// when using the full screen width
+.govuk-full-width-container {
+  .preview-title {
+    padding-left: govuk-spacing(3);
+  }
+}
+
 // Rouge syntax highlighting
 // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
 

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

@@ -61,18 +61,6 @@
       right: 0;
     }
   }
-
-  // Focus styles on IE8 and older include the
-  // left margin, creating an odd white box with
-  // orange border around the em dash.
-  // Use inline-block and vertical alignment to
-  // fix focus styles
-  //
-  // https://github.com/alphagov/government-frontend/pull/420#issuecomment-320632386
-  .lte-ie8 & .gem-c-contents-list__link {
-    display: inline-block;
-    vertical-align: top;
-  }
 }
 
 .gem-c-contents-list--alternative-line-style {

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

@@ -32,17 +32,17 @@
 }
 
 .gem-c-metadata--inverse-padded {
-  padding: govuk-spacing(2);
+  padding: govuk-spacing(2) govuk-spacing(4);
 
-  .gem-c-metadata__title {
-    padding: 0 govuk-spacing(3);
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(2) govuk-spacing(5);
   }
 
   .gem-c-metadata__list {
-    margin: govuk-spacing(2);
+    margin: govuk-spacing(2) 0;
 
     @include govuk-media-query($from: tablet) {
-      margin: govuk-spacing(3);
+      margin: govuk-spacing(3) 0;
     }
   }
 }

data/app/models/govuk_publishing_components/component_doc.rb

@@ -54,10 +54,18 @@ module GovukPublishingComponents
       component[:display_preview].nil? || component[:display_preview]
     end
 
+    def capture_full_width_screenshot?
+      component[:capture_full_width_screenshot]
+    end
+
     def uses_component_wrapper_helper?
       component[:uses_component_wrapper_helper]
     end
 
+    def get_govuk_container_class
+      capture_full_width_screenshot? ? "govuk-full-width-container" : "govuk-width-container"
+    end
+
     def html_body
       markdown_to_html(body) if body.present?
     end

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

@@ -55,8 +55,7 @@
   blue_bar_wrapper_classes << "gem-c-layout-for-public__blue-bar-wrapper--#{blue_bar_background_colour}" if blue_bar_background_colour
 -%>
 <!DOCTYPE html>
-  <!--[if lt IE 9]><html class="lte-ie8 govuk-template govuk-template--rebranded" lang="<%= html_lang %>"><![endif]-->
-  <!--[if gt IE 8]><!--><html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>"><!--<![endif]-->
+<html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>">
   <head>
     <meta charset="utf-8" />
     <title><%= title %></title>

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

@@ -33,14 +33,12 @@
 %>
 <%= tag.div(**component_helper.all_attributes) do %>
   <% if title.present? %>
-    <%= content_tag :div, class: "gem-c-metadata__title" do %>
-      <%= render "govuk_publishing_components/components/heading", {
-        text: sanitize(title),
-        font_size: "m",
-        inverse:,
-        margin_bottom: 0,
-      } %>
-    <% end %>
+    <%= render "govuk_publishing_components/components/heading", {
+      text: sanitize(title),
+      font_size: "m",
+      inverse:,
+      margin_bottom: 0,
+    } %>
   <% end %>
   <dl class="gem-c-metadata__list">
     <% if from.any? %>

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

@@ -18,6 +18,7 @@ body: |
   The header has space to optionally add links to different parts of your service, just as the current ‘service header’ component from the Design System does. Follow the same patterns for internal service navigation links as you do with the Design System service header.
 
   Please refer to the [One Login Service Header GitHub repo](https://github.com/govuk-one-login/service-header) for further information
+capture_full_width_screenshot: true
 shared_accessibility_criteria:
   - link
 accessibility_criteria:

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

@@ -3,6 +3,7 @@ description: The footer provides copyright, licensing and other information
 govuk_frontend_components:
   - footer
 uses_component_wrapper_helper: true
+capture_full_width_screenshot: true
 accessibility_criteria: |
   Text and links in the Footer must:
 

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

@@ -3,6 +3,7 @@ description: A layout to be used by public-facing applications
 body: |
   Because it is an entire HTML document, this component can only be [previewed on a separate page](/public).
 
+capture_full_width_screenshot: true
 display_preview: false
 display_html: true
 accessibility_criteria: |

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

@@ -6,6 +6,7 @@ body: |
 govuk_frontend_components:
   - header
 uses_component_wrapper_helper: true
+capture_full_width_screenshot: true
 accessibility_excluded_rules:
   - landmark-banner-is-top-level # The header element can not be top level in the examples
   - duplicate-id # IDs will be duplicated in component examples list
@@ -85,8 +86,6 @@ examples:
       - text: Worldwide
         href: "item-2"
   full_width:
-    description: |
-      This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.
     data:
       environment: production
       full_width: true

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

@@ -27,6 +27,7 @@ accessibility_excluded_rules:
   - landmark-no-duplicate-banner
   - landmark-unique
 uses_component_wrapper_helper: true
+capture_full_width_screenshot: true
 examples:
   default:
   with_custom_logo_link:

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

@@ -348,8 +348,14 @@ examples:
       first_published: 14 June 2014
       other:
         Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
+  with_title:
+    data:
+      last_updated: 10 September 2015
+      see_updates_link: true
+      title: Title
   on_a_dark_background:
     data:
+      title: This is a title
       inverse: true
       from: [
         "<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>",
@@ -371,6 +377,7 @@ examples:
   on_a_dark_background_without_padding:
     description: By default the inverse option includes extra spacing around the component. This option removes this padding. Note that both the `inverse` and `inverse_compress` options must be supplied.
     data:
+      title: This is a title
       inverse: true
       inverse_compress: true
       from: [
@@ -404,17 +411,3 @@ examples:
       last_updated: 10 September 2015
       see_updates_link: true
       disable_ga4: true
-  with_title:
-    data:
-      last_updated: 10 September 2015
-      see_updates_link: true
-      title: Title
-  on_a_dark_background_with_title:
-    data:
-      inverse: true
-      other:
-        Release date: 23 August 2018 9:30am
-        Reason for change: Date of release brought forward from 23 August 2018 to 21 August 2018 as data in its final form is now available to be published on this new date.
-      title: The release date has been changed
-    context:
-      dark_background: true

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

@@ -8,6 +8,7 @@ accessibility_excluded_rules:
   - duplicate-id-aria
   - landmark-unique
 uses_component_wrapper_helper: true
+capture_full_width_screenshot: true
 govuk_frontend_components:
   - service-navigation
 shared_accessibility_criteria:
@@ -65,7 +66,6 @@ examples:
         href: "#"
       navigation_aria_label: "Custom label"
   full_width:
-    description: This is difficult to preview because the preview windows are constrained, but nav will stretch to the size of its container. Padding left is added to prevent the first menu item from colliding with the edge of the screen. Right spacing is already provided by the menu items.
     data:
       navigation_items:
       - text: Navigation item 1

data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb

@@ -10,7 +10,7 @@
 
       <input type="hidden" name="url" value="<%= url_without_pii %>">
 
-      <h3 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h3>
+      <h2 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h2>
       <p id="feedback_explanation" class="gem-c-feedback__form-paragraph"><%= t("components.feedback.dont_include_personal_info") %></p>
 
       <% # Added for spam bots only %>

data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb

@@ -3,7 +3,7 @@
     <div class="govuk-grid-column-two-thirds" id="survey-wrapper">
       <div class="gem-c-feedback__error-summary js-errors" tabindex="-1" hidden></div>
 
-      <h3 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h3>
+      <h2 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h2>
       <p id="survey_explanation" class="gem-c-feedback__form-paragraph">
         <%= t("components.feedback.more_about_visit") %>
         <a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=no-js" class="govuk-link" target="_blank" rel="noopener noreferrer external">Please fill in this survey (opens in a new tab<noscript> and requires JavaScript</noscript>)</a>.

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

@@ -1,19 +1,21 @@
 <% content_for :body do %>
   <% if @preview %>
-    <main id="wrapper" class="govuk-width-container">
-      <%= yield %>
-    </main>
+    <%= tag.div id: "wrapper", class: @component_doc.get_govuk_container_class do %>
+      <main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing">
+        <%= yield %>
+      </main>
+    <% end %>
   <% else %>
     <%= render "govuk_publishing_components/components/layout_header", {
       environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
       product_name: "#{GovukPublishingComponents::Config.component_guide_title} #{GovukPublishingComponents::VERSION}",
       href: component_guide_path
     } %>
-    <div class="govuk-width-container app-width-container--wide">
+    <div id="wrapper" class="govuk-width-container">
       <% if @guide_breadcrumbs %>
         <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs  %>
       <% end %>
-      <main id="wrapper" class="govuk-main-wrapper">
+      <main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing">
         <%= yield %>
       </main>
     </div>
@@ -43,7 +45,7 @@
     <%= render_component_stylesheets %>
     <%= yield :extra_headers %>
   </head>
-  <body class="gem-c-layout-for-admin govuk-template__body <%= 'hide-header-and-footer' if @preview %>">
+  <body class="gem-c-layout-for-admin govuk-template__body">
     <%= javascript_tag nonce: true do -%>
       document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
     <% end -%>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "60.0.0".freeze
+  VERSION = "60.0.1".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 60.0.0
+  version: 60.0.1
 platform: ruby
 authors:
 - GOV.UK Dev