govuk_publishing_components 21.28.1 → 21.29.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb39c272f242ed85724733a75e9962ffe39f663c0dafdc93a2c73ec8a1a2f6c0
-  data.tar.gz: 5456bd891a73db706520a67d7ed64448aa1e40ad8167e215315161d80e7019f2
+  metadata.gz: a256eac9caf32b692c6f58976b3a6a824711a50eea322abd1e6d9950dc29dd13
+  data.tar.gz: 9c351d236c2d523d67e850b4ea9d31245287a25d587faecc8ebf2533887905b5
 SHA512:
-  metadata.gz: 1f98f68e866d30a79bbabda167ed664574fd977e3ea77658ddd50ed1d15efc630457e9c2d9bc8f7d9fbe113334bcde4258e0260561b34dae851e0d496385b3af
-  data.tar.gz: b50793ed75f751492811d9dfa46f791d4d1fd35a6ea656e4a45bb6950224d311d93de7be4cf1b222c0dab8a898c6d025693fc499628fee5b03cbf251f34cf29d
+  metadata.gz: d12cf7e41be2495431cf8fa9c8d749f31cf1d956c78645e75a354e2a98dc33e51f99552c7273469070abf0a3dfb930fddbbac42fe7bb14a035c677a655fd0967
+  data.tar.gz: 24a840a78f35eb7eb6932312b691be33d4b5ce431b2d08af832d1c97fedb91af8f2d9ba3ea74f8060eb8419a397b56d5f829ebcffda3bd8cf97728be02ba90fa

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

@@ -103,5 +103,68 @@
 .gem-c-document-list__highlight-text {
   @include govuk-font(16, bold);
   margin: 0 0 govuk-spacing(3) 0;
+}
+
+.gem-c-document-list__children {
+  margin-bottom: 0;
+
+  @include govuk-media-query($from: desktop) {
+    margin-left: govuk-spacing(4);
+    margin-top: govuk-spacing(4);
+
+    @supports (display: grid) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      column-gap: govuk-spacing(3);
+    }
+  }
+}
+
+.gem-c-document-list-child {
+  @include govuk-font($size: 16);
+  position: relative;
+  padding-left: govuk-spacing(5);
+  padding-top: govuk-spacing(2);
+
+  &:before {
+    content: "—";
+    position: absolute;
+    left: 0;
+    overflow: hidden;
+  }
+
+  @include govuk-media-query($from: desktop) {
+    padding: 0;
+    padding-bottom: govuk-spacing(2);
+
+    &:before {
+      display: none;
+    }
+  }
+}
 
+.gem-c-document-list-child__heading {
+  @include govuk-media-query($from: tablet) {
+    @include govuk-typography-weight-bold;
+  }
+}
+
+.gem-c-document-list-child__link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.gem-c-document-list-child__description {
+  @include govuk-text-colour;
+  margin-top: 0;
+  margin-bottom: govuk-spacing(1);
+
+  @include govuk-media-query($until: tablet) {
+    display: none;
+  }
 }

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

@@ -1,19 +1,12 @@
 .gem-c-feedback {
   background: govuk-colour("white");
-  margin: 0 auto;
+  margin: govuk-spacing(6) auto 0 auto;
   max-width: $govuk-page-width;
   position: relative;
 
-  .visually-hidden {
-    @include govuk-visually-hidden;
-  }
-}
-
-.gem-c-feedback--top-margin {
-  margin-top: govuk-spacing(6);
-
   @include govuk-media-query($from: tablet) {
     margin-top: govuk-spacing(9);
+    border-bottom: 1px solid govuk-colour("white");
   }
 }
 
@@ -22,7 +15,7 @@
 .gem-c-feedback__js-show,
 .gem-c-feedback__form,
 .gem-c-feedback__prompt-success,
-.gem-c-feedback__js-prompt-questions,
+.gem-c-feedback__prompt-questions,
 .gem-c-feedback__error-summary {
   display: none;
 
@@ -35,39 +28,83 @@
   }
 }
 
+.gem-c-feedback__prompt-questions {
+  text-align: center;
+  border-bottom: 1px solid govuk-colour("white");
+  padding: govuk-spacing(5) govuk-spacing(5) govuk-spacing(5) govuk-spacing(5);
+  box-sizing: border-box;
+
+  @include govuk-media-query($from: tablet) {
+    width: 50%;
+    float: left;
+    text-align: left;
+    border-bottom: 0;
+  }
+}
+
+.gem-c-feedback__prompt-questions--something-is-wrong {
+  text-align: center;
+
+  @include govuk-media-query($from: tablet) {
+    text-align: right;
+  }
+}
+
 .gem-c-feedback__prompt {
   @include govuk-clearfix;
   background-color: govuk-colour("blue");
   color: govuk-colour("white");
-  padding: govuk-spacing(2) govuk-spacing(3) 0;
   outline: 0;
 }
 
 .gem-c-feedback__prompt-question,
 .gem-c-feedback__prompt-success {
   @include govuk-font(19, $weight: bold);
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font(16, $weight: bold);
+  }
+}
+
+.gem-c-feedback__prompt-question {
   display: inline-block;
 
   // There's a global h3 rule in some layouts that interferes with this component
   margin: 0;
 
+  margin-left: govuk-spacing(4);
+  margin-right: govuk-spacing(4);
+
   &:focus {
     outline: 0;
   }
 
   @include govuk-media-query($from: tablet) {
-    @include govuk-font(16, $weight: bold);
-    float: left;
+    margin-left: 0;
   }
 }
 
 .gem-c-feedback__prompt-link {
   @include govuk-link-common;
   @include govuk-font(19);
+  display: inline-block;
 
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
-    margin-left: govuk-spacing(2);
+  }
+}
+
+.gem-c-feedback__email-link,
+.gem-c-feedback__prompt-link {
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: -14px;
+    right: -14px;
+    left: -14px;
+    bottom: -14px;
   }
 }
 
@@ -80,6 +117,29 @@
   }
 }
 
+.gem-c-feedback__option-list {
+  display: inline-block;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  margin-right: govuk-spacing(2);
+  margin-top: govuk-spacing(2);
+
+  @include govuk-media-query($from: tablet) {
+    margin-top: 0;
+  }
+}
+
+.gem-c-feedback__option-list-item {
+  display: inline-block;
+}
+
+.gem-c-feedback__option-list-item:first-child {
+  margin-right: govuk-spacing(7);
+}
+
+
+// Feedback form styles
 .gem-c-feedback__error-summary {
   margin-bottom: govuk-spacing(3);
   padding: govuk-spacing(3);
@@ -163,7 +223,7 @@
 
 .gem-c-feedback__email-link {
   display: block;
-  margin-top: govuk-spacing(3);
+  margin-top: govuk-spacing(4);
 
   @include govuk-media-query($from: desktop) {
     display: inline-block;
@@ -184,81 +244,3 @@
     outline: $govuk-focus-width solid $govuk-focus-colour;
   }
 }
-
-.gem-c-feedback__option-list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-
-.js-enabled {
-  .gem-c-feedback__js-prompt-questions {
-    @include govuk-media-query($until: tablet) {
-      display: grid;
-    }
-  }
-
-  .gem-c-feedback__prompt-question {
-    @include govuk-media-query($until: tablet) {
-      grid-area: 1 / 1;
-    }
-  }
-
-  .gem-c-feedback__option-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    @include govuk-media-query($until: tablet) {
-      grid-area: 1 / 1 / 2 / 2;
-      display: grid;
-      grid-template-columns: 140px 1fr;
-      // older grid spec
-      grid-row-gap: govuk-spacing(3);
-      // newer grid spec
-      row-gap: govuk-spacing(3); // sass-lint:disable-line no-misspelled-properties
-    }
-  }
-
-  .gem-c-feedback__option-list-item {
-    @include govuk-media-query($from: tablet) {
-      float: left;
-    }
-  }
-
-  .gem-c-feedback__option-list-item--useful {
-    @include govuk-media-query($until: tablet) {
-      display: inline-block;
-      @supports (display: grid) {
-        grid-area: 1 / 2;
-        padding-left: govuk-spacing(3);
-      }
-    }
-  }
-
-  .gem-c-feedback__option-list-item--not-useful {
-    @include govuk-media-query($until: tablet) {
-      display: inline-block;
-      @supports (display: grid) {
-        grid-area: 1 / 2;
-        padding-left: 50px;
-      }
-    }
-  }
-
-  .gem-c-feedback__option-list-item--wrong {
-    @include govuk-media-query($until: tablet) {
-      display: block;
-      margin-top: govuk-spacing(3);
-      @supports (display: grid) {
-        margin-top: 0;
-        grid-area: 2 / 1 / 2 / 3;
-      }
-    }
-
-    @include govuk-media-query($from: tablet) {
-      float: right;
-    }
-  }
-}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss

@@ -3,13 +3,10 @@
 // scss-lint:disable PlaceholderInExtend
 // sass-lint:disable placeholder-in-extend
 .gem-c-govspeak {
-  .button,
-  .govuk-button,
   .gem-c-button {
     @extend .govuk-button;
   }
 
-  .button-start,
   .govuk-button--start {
     @extend .govuk-button--start;
   }

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

@@ -19,7 +19,6 @@
   <% end %>
     <% items.each do |item| %>
       <% highlight_class = " gem-c-document-list__item--highlight" if item[:highlight] %>
-
       <li class="gem-c-document-list__item<%= within_multitype_list_class %> <%= brand_helper.brand_class %> <%= highlight_class %>">
         <% if item[:highlight] && item[:highlight_text] %>
           <p class='gem-c-document-list__highlight-text'><%= item[:highlight_text] %></p>
@@ -72,6 +71,35 @@
         <% if item[:subtext] %>
           <p class="gem-c-document-list__subtext"><%= item[:subtext] %></p>
         <% end %>
+
+        <% if item[:parts] && item[:parts].any? %>
+          <ul class="gem-c-document-list__children govuk-list">
+            <% item[:parts].each do |part| %>
+              <li class="gem-c-document-list-child">
+                <%=
+                  if part[:link][:path]
+                    link_to(
+                      part[:link][:text],
+                      part[:link][:path],
+                      data: part[:link][:data_attributes],
+                      class: "gem-c-document-list-child__heading #{brand_helper.color_class} gem-c-document-list-child__link",
+                    )
+                  else
+                    content_tag(
+                      "span",
+                      part[:link][:text],
+                      data: part[:link][:data_attributes],
+                      class: "gem-c-document-list-child__heading",
+                    )
+                  end
+                %>
+                <% if part[:link][:description] %>
+                  <p class="gem-c-document-list-child__description"><%= part[:link][:description] %></p>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
       </li>
     <% end %>
   <% unless within_multitype_list %>

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

@@ -1,7 +1,4 @@
 <%
-  margin_top ||= 1
-  margin_top_class = "gem-c-feedback--top-margin" if margin_top == 1
-
   def utf_encode(element)
     element.is_a?(String) ? element.encode : element
   end
@@ -11,7 +8,7 @@
   path_without_pii = utf_encode(request.fullpath.gsub(email_regex, '[email]'))
 %>
 
-<div class="gem-c-feedback <%= margin_top_class %>" data-module="feedback">
+<div class="gem-c-feedback" data-module="feedback">
   <%= render "govuk_publishing_components/components/feedback/yes_no_banner" %>
   <%= render "govuk_publishing_components/components/feedback/problem_form", url_without_pii: url_without_pii %>
   <%= render "govuk_publishing_components/components/feedback/survey_signup_form", path_without_pii: path_without_pii %>

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

@@ -236,3 +236,29 @@ examples:
           document_type: 'Organisation'
     context:
       right_to_left: true
+  with_parts:
+    description: Display child items, such as parts of guides or travel advice. Child items accept the same paramaters as parent items.
+    data:
+      items:
+      - link:
+          text: 'Universal credit'
+          path: '/universal-credit'
+          description: 'Universal Credit is replacing 6 other benefits with a single monthly payment if you are out of work or on a low income - eligibility, how to prepare'
+        parts:
+        - link:
+            text: 'What universal credit is'
+            path: '/universal-credit/what-it-is'
+            description: 'Universal Credit is a payment to help with your living costs. It’s paid monthly - or twice a month for some people in Scotland.'
+        - link:
+            text: 'Elegibility'
+            path: '/universal-credit/eligibility'
+            description: 'You may be able to get Universal Credit if: you’re on a low income or out...'
+            data_attributes:
+              track_category: 'resultPart'
+              track_action: 2
+              track_label: 'Result part 2'
+              track_options:
+                dimension82: 2
+        - link:
+            text: 'Criteria'
+            description: 'no url provided, just text'

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

@@ -1,9 +1,7 @@
 name: Feedback
 description: Invites user feedback on the current page.
 body: |
-  This component is designed to sit at the bottom of pages on GOV.UK to allow users to submit feedback on that page. It is based on the 'improve this page' component from the Service manual, but changes have been made.
-
-  This component includes imported button styles, which is not ideal (styles are duplicated). Once the [button component](/component-guide/button) has been moved to the gem, this should be used instead.
+  This component is designed to sit at the bottom of pages on GOV.UK to allow users to submit feedback on that page.
 accessibility_criteria: |
   Form elements in the component must:
 

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

@@ -673,21 +673,9 @@ examples:
           <p>This is a summary</p>
         </div>
   buttons:
-    description: |
-      We're in process of migrating govspeak from using the old (toolkit) button styles to using the (govuk-frontend) button component from this gem. The example below demonstrates both kinds of buttons.
-
-      This documentation will be updated once that work is complete.
     data:
       block: |
         <p>
-          <a href="#" class="button" role="button">
-            Old button
-          </a>
-          <a href="#" class="button button-start" role="button">
-            Old start button
-          </a>
-        </p>
-        <p>
-          <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">New button</a>
-          <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> New start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
+          <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
+          <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
         </p>

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

@@ -3,8 +3,9 @@
 %>
 
 <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
-  <div class="gem-c-feedback__js-prompt-questions js-prompt-questions">
+  <div class="gem-c-feedback__prompt-questions js-prompt-questions">
     <h2 class="gem-c-feedback__prompt-question">Is this page useful?</h2>
+    <!-- Maybe button exists only to try and capture clicks by bots -->
     <%= link_to contact_govuk_path, {
         class: 'gem-c-feedback__prompt-link',
         data: {
@@ -20,7 +21,7 @@
         Maybe
     <% end %>
     <ul class="gem-c-feedback__option-list">
-      <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--useful">
+      <li class="gem-c-feedback__option-list-item">
         <%= link_to contact_govuk_path, {
           class: 'gem-c-feedback__prompt-link js-page-is-useful',
           data: {
@@ -30,10 +31,10 @@
           'aria-expanded': false,
           role: 'button',
         } do %>
-          Yes <span class="visually-hidden">this page is useful</span>
+          Yes <span class="govuk-visually-hidden">this page is useful</span>
         <% end %>
       </li>
-      <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--not-useful">
+      <li class="gem-c-feedback__option-list-item">
         <%= link_to contact_govuk_path, {
           class: 'gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful',
           data: {
@@ -44,27 +45,26 @@
           'aria-expanded': false,
           role: 'button',
         } do %>
-          No <span class="visually-hidden">this page is not useful</span>
-        <% end %>
-      </li>
-      <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--wrong">
-        <%= link_to contact_govuk_path, {
-          class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
-          data: {
-            'track-category' => 'Onsite Feedback',
-            'track-action' => 'GOV.UK Open Form'
-          },
-          'aria-controls': 'something-is-wrong',
-          'aria-expanded': false,
-          role: 'button',
-        } do %>
-          Is there anything wrong with this page?
+          No <span class="govuk-visually-hidden">this page is not useful</span>
         <% end %>
       </li>
     </ul>
   </div>
-
-  <div class="gem-c-feedback__prompt-success js-prompt-success js-hidden" tabindex="-1">
+  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success js-hidden" tabindex="-1">
     Thank you for your feedback
   </div>
+  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
+    <%= link_to contact_govuk_path, {
+      class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
+      data: {
+        'track-category' => 'Onsite Feedback',
+        'track-action' => 'GOV.UK Open Form'
+      },
+      'aria-controls': 'something-is-wrong',
+      'aria-expanded': false,
+      role: 'button',
+    } do %>
+      Is there anything wrong with this page?
+    <% end %>
+  </div>
 </div>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.28.1".freeze
+  VERSION = "21.29.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.28.1
+  version: 21.29.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-11 00:00:00.000000000 Z
+date: 2020-03-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: gds-api-adapters