govuk_publishing_components 5.0.0 → 5.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2246fa0ef19db8a5d4ce9ab9f9e58c0f7858d1504f4e7c847b45ef511ad38eea
-  data.tar.gz: 3468abaaa41ec8bdd66820bcba7615d28d937da6dd229c4a2eaa9a33a604edb2
+  metadata.gz: 6484c097648ef843277296e363e464c34eb5867e38208da9d95f535465b5d3dc
+  data.tar.gz: b385a33cf3ae71c87a358caaa745857e648b32dbb50eb79f74de2641e09ed428
 SHA512:
-  metadata.gz: c52ef6feed05da9b9dcc06fac40deb988d93d9b4e9cd56cc772bae21186dd993e9158e802fef751087effd37f8e85e61a9a1106061ccc15b0200fa15a6c25f1d
-  data.tar.gz: 29bab2b37364334ef3f873394fd2859dce85568b83e7b57012e3da1eaa6adafc9398c67433633a9e8cebcedd0cf9807b6584597370ae70387a5b0a816ab1c7e6
+  metadata.gz: 05d509df697c8317057d110949d62e6d3457a92842eaea6427600808b5cf21c3e42802358d5824353cd72673e5aaba361f127b40c21cf0a9f6e42d85aa5e8c70
+  data.tar.gz: 14caa84e583f4a8463204e4092e6cf84a8dd86f4bb04e8226cf9f75315f7bab989ae4867763e0411dfaa17e6a305e2d9586d1a32f60f515afeb33eb8630640fc

data/README.md

@@ -1,201 +1,38 @@
 # GOV.UK Publishing Components
 
-A gem to document components in GOV.UK frontend applications and provide shared components to applications. Components should be added to this gem if they are required in more than one application, otherwise they should be added to that application.
+A gem to 1) document components in GOV.UK frontend applications and 2) provide shared components to applications.
 
-![Screenshot of component guide](docs/screenshot.png)
-
-## Write components in your application
-
-Components are packages of template, style, behaviour and documentation.
-
-A component must:
-* [meet the component principles](docs/component_principles.md)
-* [follow component conventions](docs/component_conventions.md)
-
-Components are included in templates in slightly different ways depending on whether the component is in the application itself, in static, or in the gem.
-
-A component from the application would be included in a template like this:
-
-```erb
-<%= render "components/back-to-top", href: "#contents" %>
-```
-
-A component from static would be included like this:
-
-```erb
-<%= render "govuk_component/lead_paragraph", text: "A description is one or two leading sentences." %>
-```
-
-A component from the gem would be included like this:
-
-```erb
-<%= render "govuk_publishing_components/components/back_link", href: "#" %>
-```
-
-## Set up a component guide
-
-This gem creates a component guide for all your application’s components.
-
-An example guide this gem created for government-frontend:
-https://government-frontend.herokuapp.com/component-guide
-
-The guide includes your application’s `application.scss` and `application.js` files by default. This is [configurable](#configuration).
-
-You are encouraged to set up [Heroku review apps](https://docs.publishing.service.gov.uk/manual/review-apps.html) for your application, so that any changes to local components can be reviewed by looking at the component guide.
-
-### Install gem
-
-Add this line to your application's Gemfile:
-
-```ruby
-gem 'govuk_publishing_components'
-```
-
-And then execute:
-```bash
-$ bundle
-```
-
-### Mount the component guide
-
-Mount the component guide in your application:
-
-```ruby
-# config/routes.rb
-mount GovukPublishingComponents::Engine, at: "/component-guide"
-```
-
-If your application was government-frontend the component guide would be at:
-http://government-frontend.dev.gov.uk/component-guide
-
-### Configure the gem
-
-Use a config block in an initializer:
-
-```ruby
-# config/initializers/govuk_publishing_components.rb
-GovukPublishingComponents.configure do |c|
-  c.component_guide_title = "My component guide"
-
-  c.application_stylesheet = "custom_stylesheet" # Defaults to "application"
-  c.application_print_stylesheet = "print" # Not included by default
-  c.application_javascript = "custom_javascript" # Defaults to "application"
-end
-```
-
-### Running the gem as a standalone app
-
-If you want to work on this gem directly, without having to add it to another
-application, you can run it in the development vm:
-
-```
-./startup.sh
-```
-
-The app should start on http://localhost:3212 or http://publishing-components.dev.gov.uk/component-guide on GOV.UK development machines.
-
-```
-./startup.sh --live
-```
-
-This will run the app and point it at the production `static` instance.
-
-#### Running with bowl on the VM
-
-```
-$ cd /var/govuk/govuk_publishing_components
-$ bundle
-
-$ cd /var/govuk/govuk-puppet/development-vm
-$ bowl publishing-components
-```
-
-Then visit [publishing-components.dev.gov.uk/component-guide](http://publishing-components.dev.gov.uk/component-guide).
-
-#### Running locally
-
-If you don't want to run it in the development vm, you can start the app with:
-
-```
-$ cd /var/govuk/govuk_publishing_components
-$ bundle
-
-$ PLEK_SERVICE_STATIC_URI=assets.publishing.service.gov.uk bundle exec foreman start
-```
+Components should be added to this gem if they are required in more than one application, otherwise they should be added to that application.
 
-Then visit [localhost:5000/component-guide](http://localhost:5000/component-guide).
-
-### Test the component guide
+![Screenshot of component guide](docs/screenshot.png)
 
-The gem [includes integration tests](lib/govuk_publishing_components/minitest/component_guide_test.rb) to check that your component guide and examples are error free and that they meet basic accessibility needs.
+## How to
 
-Automated accessibility tests use [aXe](https://github.com/dequelabs/axe-core). Using our `AccessibilityTest` wrapper the gem runs the aXe suite against each example and throws JavaScript errors for any violations. These JavaScript errors can be used to fail a build in CI.
+- [Install and use this gem](/docs/install-and-use.md)
+- [Use a component in your application](/docs/use-components.md)
+- [Generate a new component](/docs/generate-a-new-component.md)
+- [Develop a component](/docs/develop-component.md)
+- [Run the component guide](/docs/run-component-guide.md)
+- [Move a component from an application to the gem](/docs/moving-components-upstream-into-this-gem.md)
 
-#### Minitest
+## Running tests
 
-```ruby
-# component_guide_test.rb
-require 'govuk_publishing_components/minitest/component_guide_test'
+The default rake task runs all tests:
 
-class ComponentGuideTest < ActionDispatch::IntegrationTest
-  include GovukPublishingComponents::Minitest::ComponentGuideTest
-end
 ```
-
-#### Test files
-
-All test files for components in the gem can be run with the command `bundle exec rake`.
-
-### Exclude accessibility rules
-
-Sometimes you will have a component that will throw an error due to it being in isolation, for example radio buttons not being in a fieldset.
-
-For this case you can add `accessibility_excluded_rules` to your components' documentation yml file with the rules you want to exclude. These rules can be found in brackets in the error messages displayed.
-
-For an example of this check [test/.../docs/test-component-with-duplicate-ids.yml](spec/dummy/app/views/components/docs/test-component-with-duplicate-ids.yml)
-
-
-## Component generator
-
-The gem includes a component generator to stub the minimal files required for a component. The following command will create a component in the application it is run in - it will not create a component if run within the gem.
-
-```ruby
-rails generate govuk_publishing_components:component [component_name]
+bundle exec rake
 ```
 
-This will create a template, scss file and yml documentation file for a new component. It will not create a test file as this cannot be reliably done automatically across applications, but a test file will be necessary.
-
-### Creating components in the gem
-
-Currently components in the gem must be manually created. File naming conventions should follow those in the [component conventions](docs/component_conventions.md), but a slightly different directory structure is required to avoid conflicts with components in applications.
-
-* Stylesheets go in `app/assets/stylesheets/govuk_publishing_components/components`
-* Print stylesheets go in `app/assets/stylesheets/govuk_publishing_components/components/print`
-* Scripts go in `app/assets/javascripts/govuk_publishing_components/components`
-* Templates go in `app/views/govuk_publishing_components/components`
-* Documentation goes in `app/views/govuk_publishing_components/components/docs`
-* Test files go in `spec/components`
-* Script test files go in `spec/javascripts/components`
+Javascript is tested using Jasmine and the [Jasmine gem](https://github.com/pivotal/jasmine-gem). Tests can be run either in the browser or on the command line via the dummy app’s tasks:
 
-In addition, components in the gem can have helper files. Helper files go in `lib/govuk_publishing_components/components` and need to be required in `lib/govuk_publishing_components.rb`. Helper files should be structured as a class.
+```sh
+# browser
+bundle exec rake app:jasmine
 
-## Automated Testing
-### Visual Diff Tool
-The component guide includes a visual diff tool that should make it easier to spot when you are introducing visual regressions in your components.
-
-It can be run on a locally running version of the component guide, to compare it to the heroku master deploy. For example: [government-frontend.dev.gov.uk/component-guide](http://government-frontend.dev.gov.uk/component-guide) will be compared to [government-frontend.herokuapp.com/component-guide](https://government-frontend.herokuapp.com/component-guide).
-
-The tool can be run via the console using the following command:
-```js
-  window.GOVUK.VisualDiffTool()
+# command line
+bundle exec rake app:jasmine:ci
 ```
 
 ## Licence
 
 [MIT Licence](LICENCE.md)
-
-## Development
-For documentation on how to update and develop this gem see [DEVELOPMENT.md](./DEVELOPMENT.md)
-
-### Moving components upstream into this gem
-See [the documentation on how to move components into this gem](docs/moving-components-upstream-into-this-gem.md)

data/app/assets/javascripts/govuk_publishing_components/components/feedback.js

@@ -0,0 +1,152 @@
+window.GOVUK = window.GOVUK || {};
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  "use strict";
+  window.GOVUK = window.GOVUK || {};
+
+  Modules.Feedback = function () {
+
+    this.start = function ($element) {
+      this.$prompt = $element.find('.js-prompt');
+      this.$fields = $element.find('.gem-c-feedback__form-field');
+      this.$forms = $element.find('.js-feedback-form');
+      this.$toggleForms = $element.find('.js-toggle-form');
+      this.$closeForms = $element.find('.js-close-form');
+      this.$activeForm = false;
+      this.$pageIsUsefulButton = $element.find('.js-page-is-useful');
+      this.$pageIsNotUsefulButton = $element.find('.js-page-is-not-useful');
+      this.$somethingIsWrongButton = $element.find('.js-something-is-wrong');
+      this.$promptQuestions = $element.find('.js-prompt-questions');
+      this.$promptSuccessMessage = $element.find('.js-prompt-success');
+
+      var that = this;
+      var jshiddenClass = 'js-hidden';
+
+      setInitialAriaAttributes();
+
+      this.$toggleForms.on('click', function(e) {
+        e.preventDefault();
+        toggleForm($(e.target).attr('aria-controls'));
+        trackEvent(getTrackEventParams($(this)));
+        updateAriaAttributes($(this));
+      });
+
+      this.$closeForms.on('click', function(e) {
+        e.preventDefault();
+        toggleForm($(e.target).attr('aria-controls'));
+        setInitialAriaAttributes();
+      });
+
+      this.$pageIsUsefulButton.on('click', function(e) {
+        e.preventDefault();
+        trackEvent(getTrackEventParams(that.$pageIsUsefulButton));
+        showFormSuccess();
+        revealInitialPrompt();
+      });
+
+      $element.find('form').on('submit', function(e) {
+        e.preventDefault();
+        var $form = $(this);
+        $.ajax({
+          type: "POST",
+          url: $form.attr('action'),
+          dataType: "json",
+          data: $form.serialize(),
+          beforeSend: disableSubmitFormButton($form),
+          timeout: 6000
+        }).done(function (xhr) {
+          trackEvent(getTrackEventParams($form));
+          showFormSuccess(xhr.message);
+          revealInitialPrompt();
+          setInitialAriaAttributes();
+          that.$activeForm.toggleClass(jshiddenClass);
+        }).fail(function (xhr) {
+          showError(xhr);
+          enableSubmitFormButton($form);
+        });
+      });
+
+      function disableSubmitFormButton ($form) {
+        $form.find('input[type="submit"]').prop('disabled', true);
+      }
+
+      function enableSubmitFormButton ($form) {
+        $form.find('input[type="submit"]').removeAttr('disabled');
+      }
+
+      function setInitialAriaAttributes () {
+        that.$forms.attr('aria-hidden', true);
+        that.$pageIsNotUsefulButton.attr('aria-expanded', false);
+        that.$somethingIsWrongButton.attr('aria-expanded', false);
+      }
+
+      function updateAriaAttributes (linkClicked) {
+        linkClicked.attr('aria-expanded', true);
+        $('#' + linkClicked.attr('aria-controls')).attr('aria-hidden', false);
+      }
+
+      function toggleForm (formId) {
+        that.$activeForm = $element.find('#' + formId);
+        that.$activeForm.toggleClass(jshiddenClass);
+        that.$prompt.toggleClass(jshiddenClass);
+
+        var formIsVisible = !that.$activeForm.hasClass(jshiddenClass);
+
+        if (formIsVisible) {
+          that.$activeForm.find('.gem-c-input').first().focus();
+        } else {
+          that.$activeForm = false;
+        }
+      }
+
+      function getTrackEventParams ($node) {
+        return {
+          category: $node.data('track-category'),
+          action: $node.data('track-action')
+        }
+      }
+
+      function trackEvent (trackEventParams) {
+        if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
+          GOVUK.analytics.trackEvent(trackEventParams.category, trackEventParams.action);
+        }
+      }
+
+      function clearMessages () {
+        $element.find('.js-errors').html('').addClass(jshiddenClass);
+      }
+
+      function showError (error) {
+        var error = [
+          '<h2 class="gem-c-feedback__heading">',
+          '  Sorry, we’re unable to receive your message right now. ',
+          '</h2>',
+          '<p>If the problem persists, we have other ways for you to provide',
+          ' feedback on the <a href="/contact/govuk">contact page</a>.</p>'
+        ].join('');
+
+        if (typeof(error.responseJSON) !== 'undefined') {
+          error = typeof(error.responseJSON.message) == 'undefined' ? error : error.responseJSON.message;
+        }
+        var $errors = that.$activeForm.find('.js-errors');
+        $errors.html(error).removeClass(jshiddenClass).focus();
+      }
+
+      function clearAllInputs () {
+        that.$fields.val('');
+      }
+
+      function showFormSuccess () {
+        that.$promptQuestions.addClass(jshiddenClass);
+        that.$promptSuccessMessage.removeClass(jshiddenClass).focus();
+      }
+
+      function revealInitialPrompt () {
+        that.$prompt.removeClass(jshiddenClass);
+        that.$prompt.focus();
+      }
+    }
+
+  };
+})(window.GOVUK.Modules);

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -49,7 +49,8 @@
 
       var $showOrHideAllButton;
 
-      var stepNavTracker = new StepNavTracker(totalSteps, totalLinks);
+      var uniqueId = $element.data('id') || false;
+      var stepNavTracker = new StepNavTracker(totalSteps, totalLinks, uniqueId);
 
       addButtonstoSteps();
       addShowHideAllButton();
@@ -450,7 +451,7 @@
 
     // A helper that sends a custom event request to Google Analytics if
     // the GOVUK module is setup
-    function StepNavTracker(totalSteps, totalLinks) {
+    function StepNavTracker(totalSteps, totalLinks, uniqueId) {
       this.track = function(category, action, options) {
         // dimension26 records the total number of expand/collapse steps in this step nav
         // dimension27 records the total number of links in this step nav
@@ -459,6 +460,7 @@
           options = options || {};
           options["dimension26"] = options["dimension26"] || totalSteps.toString();
           options["dimension27"] = options["dimension27"] || totalLinks.toString();
+          options["dimension96"] = options["dimension96"] || uniqueId;
           GOVUK.analytics.trackEvent(category, action, options);
         }
       }

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -16,3 +16,4 @@
 @import "components/step-by-step-nav";
 @import "components/step-by-step-nav-header";
 @import "components/step-by-step-nav-related";
+@import "components/feedback";

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -9,3 +9,4 @@
 
 @import "components/print/step-by-step-nav";
 @import "components/print/step-by-step-nav-header";
+@import "components/print/feedback";

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

@@ -0,0 +1,136 @@
+// govuk_frontend_toolkit
+@import 'grid_layout';
+@import 'design-patterns/buttons';
+
+.gem-c-feedback {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+// hide without js
+// show with js, unless also has the js-hidden class
+.gem-c-feedback__js-show {
+  display: none;
+
+  .js-enabled & {
+    display: block;
+
+    &.js-hidden {
+      display: none;
+    }
+  }
+}
+
+.gem-c-feedback__grid-row {
+  @extend %grid-row;
+}
+
+.gem-c-feedback__column-two-thirds {
+  @include grid-column( 2 / 3 );
+}
+
+.gem-c-feedback__prompt {
+  @extend %contain-floats;
+  background-color: $govuk-blue;
+  color: $white;
+  padding: $gutter-one-third $gutter-half 0;
+  outline: 0;
+}
+
+.gem-c-feedback__prompt-question,
+.gem-c-feedback__prompt-success {
+  @include bold-16;
+  display: inline;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.gem-c-feedback__prompt-link:link,
+.gem-c-feedback__prompt-link:visited {
+  color: $white;
+  display: inline-block;
+}
+
+.gem-c-feedback__prompt-link--useful {
+  margin-right: 0.2em;
+}
+
+.gem-c-feedback__prompt-link--wrong {
+  float: right;
+}
+
+.gem-c-feedback__error-summary {
+  margin-bottom: $gutter-half;
+  padding: $gutter-half;
+  border: solid 4px $error-colour;
+
+  &:focus {
+    outline: solid 3px $focus-colour;
+  }
+
+  @include media(tablet) {
+    border-width: 5px;
+  }
+
+  // this comes from the backend so we can't put a class on it
+  h2,
+  .gem-c-feedback__heading {
+    @include bold-19;
+    margin: 0;
+  }
+
+  p {
+    @include core-16;
+    margin: $gutter-one-third 0;
+  }
+}
+
+.gem-c-feedback__error-message {
+  @include bold-19;
+  display: block;
+  padding: 4px 0 0;
+  color: $error-colour;
+}
+
+.gem-c-feedback__form {
+  margin-top: $gutter-half;
+  padding: $gutter-half 0;
+  border-top: $gutter-one-third solid $govuk-blue;
+
+  @include media(tablet) {
+    padding: $gutter 0;
+  }
+}
+
+.gem-c-feedback__form-heading {
+  @include bold-19;
+  margin-bottom: $gutter-half;
+}
+
+.gem-c-feedback__form-paragraph {
+  @include core-16;
+  margin-bottom: $gutter;
+}
+
+.gem-c-feedback__form-label {
+  @include core-16;
+  display: block;
+  padding-bottom: $gutter-half;
+}
+
+.gem-c-feedback__close {
+  @include core-16;
+  text-align: right;
+  margin-bottom: $gutter-one-third;
+
+  @include media(tablet) {
+    float: right;
+    padding-top: 0;
+  }
+}
+
+.gem-c-feedback__submit {
+  @include button;
+}

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

@@ -1,10 +1,17 @@
-.gem-c-input {
+// scss-lint:disable QualifyingElement
+.gem-c-input,
+
+// Explicitly set the input type so that we have higher specificity than
+// https://github.com/alphagov/static/blob/79d29b6a4221874ead27e67d007704a6be166a57/app/assets/stylesheets/helpers/_buttons.scss#L91-L122
+// This can be removed once everything is using `core_layout`.
+input[type=text].gem-c-input {
   @include core-19;
 
   box-sizing: border-box;
   width: 100%;
   height: 2.10526em;
-  margin-top: 0;
+
+  margin: 0; // Override unwanted global cascaded styles
   margin-bottom: 20px;
 
   padding: $gem-spacing-scale-1;
@@ -16,6 +23,7 @@
   // Disable inner shadow and remove rounded corners
   appearance: none;
 }
+// scss-lint:enable QualifyingElement
 
 @media (min-width: 40.0625em) {
   .govuk-c-input {

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

@@ -0,0 +1,3 @@
+.gem-c-feedback {
+  display: none;
+}

data/app/controllers/govuk_publishing_components/application_controller.rb

@@ -14,7 +14,7 @@ module GovukPublishingComponents
   private
 
     def set_custom_slimmer_headers
-      set_slimmer_headers(report_a_problem: 'false', remove_search: true)
+      set_slimmer_headers(remove_search: true)
     end
 
     def set_x_frame_options_header

data/app/models/govuk_publishing_components/component_doc.rb

@@ -53,6 +53,11 @@ module GovukPublishingComponents
       end
     end
 
+    def github_search_url
+      params = { q: "org:alphagov #{partial_path}", type: "Code" }
+      "https://github.com/search?#{params.to_query}"
+    end
+
   private
 
     def govspeak_to_html(govspeak)

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

@@ -22,7 +22,7 @@
   <div class="component-doc">
     <h2 class="component-doc-h2">How to call this component</h2>
     <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
-
+    <%= link_to "Search for usage on GitHub", @component_doc.github_search_url %>
     <h2 class="component-doc-h2">How it looks</h2>
   </div>
 

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

@@ -0,0 +1,115 @@
+<%
+  contact_govuk_path = "/contact/govuk"
+%>
+
+<div class="gem-c-feedback" data-module="feedback">
+  <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
+    <div class="js-prompt-questions">
+      <h3 class="gem-c-feedback__prompt-question">Is this page useful?</h3>
+
+      <%= link_to contact_govuk_path, {
+        class: 'gem-c-feedback__prompt-link gem-c-feedback__prompt-link--useful js-page-is-useful',
+        data: {
+          'track-category' => 'yesNoFeedbackForm',
+          'track-action' => 'ffYesClick'
+          },
+        } do %>
+          Yes <span class="visually-hidden">this page is useful</span>
+      <% end %>
+
+      <%= link_to contact_govuk_path, {
+        class: 'gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful',
+        data: {
+          'track-category' => 'yesNoFeedbackForm',
+          'track-action' => 'ffNoClick'
+          },
+          'aria-controls': 'page-is-not-useful',
+          'aria-expanded': false
+        } do %>
+          No <span class="visually-hidden">this page is not useful</span>
+      <% end %>
+
+      <%= link_to contact_govuk_path, {
+        class: 'gem-c-feedback__prompt-link gem-c-feedback__prompt-link--wrong js-toggle-form js-something-is-wrong',
+        data: {
+          'track-category' => 'yesNoFeedbackForm',
+          'track-action' => 'ffWrongClick'
+          },
+          'aria-controls': 'something-is-wrong',
+          'aria-expanded': false
+        } do %>
+          Is there anything wrong with this page?
+      <% end %>
+    </div>
+
+    <div class="gem-c-feedback__prompt-success js-prompt-success js-hidden" tabindex="-1">
+      Thank you for your feedback
+    </div>
+  </div>
+
+  <form action="/contact/govuk/problem_reports" id="something-is-wrong" class="gem-c-feedback__form js-feedback-form js-hidden" data-track-category="yesNoFeedbackForm" data-track-action="ffFormSubmit">
+    <a href="#" class="gem-c-feedback__close gem-c-feedback__js-show js-close-form" aria-controls="something-is-wrong" aria-expanded="true" role="button">Close</a>
+
+    <div class="gem-c-feedback__grid-row">
+      <div class="gem-c-feedback__column-two-thirds">
+        <div class="gem-c-feedback__error-summary gem-c-feedback__js-show js-hidden js-errors" tabindex="-1"></div>
+
+        <input type="hidden" name="url" value="<%= request.original_url -%>">
+        <input type="hidden" name="user_agent" value="<%= request.user_agent -%>">
+
+        <h2 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h2>
+        <p id="feedback_explanation" class="gem-c-feedback__form-paragraph">Don’t include personal or financial information like your National Insurance number or credit card details.</p>
+
+        <%= render "govuk_publishing_components/components/input", {
+          label: {
+            text: "What were you doing?"
+          },
+          name: "what_doing"
+        } %>
+
+        <%= render "govuk_publishing_components/components/input", {
+          label: {
+            text: "What went wrong?"
+          },
+          name: "what_wrong"
+        } %>
+
+        <%# TODO: use button component once available in gem %>
+        <input class="gem-c-feedback__submit" type="submit" value="Send">
+      </div>
+    </div>
+  </form>
+
+  <form action="/contact/govuk/email-survey-signup" id="page-is-not-useful" class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form js-hidden" data-track-category="user_satisfaction_survey" data-track-action="banner_taken">
+    <a href="#" class="gem-c-feedback__close js-close-form" aria-controls="page-is-not-useful" aria-expanded="true" role="button">Close</a>
+
+    <div class="gem-c-feedback__grid-row">
+      <div class="gem-c-feedback__column-two-thirds">
+        <div class="gem-c-feedback__error-summary js-hidden js-errors" tabindex="-1"></div>
+
+        <input type="hidden" name="url" value="<%= request.original_url -%>">
+        <input type="hidden" name="user_agent" value="<%= request.user_agent -%>">
+
+        <input name="email_survey_signup[survey_id]" type="hidden" value="user_satisfaction_survey">
+        <input name="email_survey_signup[survey_source]" type="hidden" value="<%= request.original_url -%>">
+        <input name="email_survey_signup[ga_client_id]" type="hidden" value="1627485790.1515403243">
+
+        <h2 class="gem-c-feedback__form-heading">Help us improve GOV.UK</h2>
+        <p id="survey_explanation" class="gem-c-feedback__form-paragraph">To help us improve GOV.UK, we’d like to know more about your visit today. We’ll send you a link to a feedback form. It will take only 2 minutes to fill in. Don’t worry we won’t send you spam or share your email address with anyone.</p>
+
+        <%= render "govuk_publishing_components/components/input", {
+          label: {
+            text: "Email address"
+          },
+          name: "email_survey_signup[email_address]",
+          type: "email"
+        } %>
+
+        <%# TODO: use button component once available in gem %>
+        <input class="gem-c-feedback__submit" type="submit" value="Send me the survey">
+        <a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=<%= request.fullpath -%>&amp;gcl=1627485790.1515403243" id="take-survey" target="_blank" rel="noopener noreferrer">Don’t have an email address?</a>
+      </div>
+    </div>
+  </form>
+
+</div>

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

@@ -4,6 +4,7 @@
   value ||= false
   error_message ||= false
   label ||= {}
+  type ||= "text"
 %>
 
 <%= render "govuk_publishing_components/components/label", {
@@ -19,7 +20,7 @@
   class="gem-c-input <%= "gem-c-input--error" if error_message %>"
   id="<%= id %>"
   name="<%= name %>"
-  type="text"
+  type="<%= type %>"
 
   <% if error_message %>
     aria-describedby="<%= hint_id %>"

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

@@ -9,6 +9,7 @@
   step_nav_url ||= false
   step_nav_link_text ||= "Get help completing this step"
   highlight_step ||= false
+  tracking_id ||= false
 
   step_count = 0
   step_number = 0
@@ -17,7 +18,8 @@
   <div
     data-module="gemstepnav"
     class="gem-c-step-nav js-hidden <% unless small %>gem-c-step-nav--large<% end %>"
-    <% if remember_last_step %>data-remember<% end %>
+    <%= "data-remember" if remember_last_step %>
+    <%= "data-id=#{tracking_id}" if tracking_id %>
   >
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>

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

@@ -3,6 +3,7 @@
   path ||= false
   skip_link ||= false
   skip_link_text ||= "Skip content"
+  tracking_id ||= false
 %>
 <% if title %>
   <div class="gem-c-step-nav-header" data-module="track-click">
@@ -14,7 +15,8 @@
         data-track-action="top"
         data-track-label="<%= path %>"
         data-track-dimension="<%= title %>"
-        data-track-dimension-index="29">
+        data-track-dimension-index="29"
+        data-track-options='{"dimension96" : "<%= tracking_id %>" }'>
         <%= title %>
       </a>
     <% else %>

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

@@ -1,6 +1,7 @@
 <%
   links ||= false
   pretitle ||= t("govuk_component.step_by_step_nav_related.part_of", default: "Part of")
+  tracking_id ||= false
 %>
 <% if links %>
   <div class="gem-c-step-nav-related" data-module="track-click">
@@ -13,7 +14,8 @@
             data-track-action="<%= pretitle %>"
             data-track-label="<%= links[0][:href] %>"
             data-track-dimension="<%= links[0][:text] %>"
-            data-track-dimension-index="29">
+            data-track-dimension-index="29"
+            data-track-options='{"dimension96" : "<%= tracking_id %>" }'>
             <%= links[0][:text] %>
           </a>
         </h2>
@@ -28,7 +30,8 @@
                 data-track-action="<%= pretitle %>"
                 data-track-label="<%= link[:href] %>"
                 data-track-dimension="<%= link[:text] %>"
-                data-track-dimension-index="29">
+                data-track-dimension-index="29"
+                data-track-options='{"dimension96" : "<%= tracking_id %>" }'>
                 <%= link[:text] %>
               </a>
             </li>

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

@@ -0,0 +1,22 @@
+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.
+accessibility_criteria: |
+  Form elements in the component must:
+
+  * accept focus
+  * be focusable with a keyboard
+  * be usable with a keyboard
+  * be usable with touch
+  * indicate when they have focus
+  * be recognisable as form input elements
+  * have correctly associated labels
+  * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data: {}

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

@@ -10,13 +10,19 @@ accessibility_criteria: |
   * be keyboard focusable
 examples:
   default:
+    data:
+      label:
+        text: "What is your name?"
+      name: "name"
+  email_type:
     data:
       label:
         text: "What is your email address?"
       name: "address"
+      type: "email"
   with_error:
     data:
       label:
-        text: "What is your email address?"
-      name: "address"
-      error_message: "Email address not recognised"
+        text: "What is your name?"
+      name: "name"
+      error_message: "Please could you provide your name"

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

@@ -70,6 +70,29 @@ examples:
           ]
         }
       ]
+  with_unique_tracking:
+    description: |
+      We need to uniquely identify each step by step navigation in Google Analytics. If this parameter is added to the component, its value is included in any tracking events, specifically in dimension96.
+
+      This includes show/hide all, show/hide step and any link clicks.
+    data:
+      tracking_id: 'this-is-the-tracking-id'
+      steps: [
+        {
+          title: 'Unique tracking id',
+          contents: [
+            {
+              type: 'list',
+              contents: [
+                {
+                  href: '#',
+                  text: 'This is a link'
+                }
+              ]
+            }
+          ]
+        }
+      ]
   with_a_different_heading_level:
     description: Steps have a H2 by default, but this can be changed. The heading level does not change any styling.
     data:

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

@@ -18,6 +18,12 @@ examples:
     data:
       title: 'Having children: step by step'
       path: /childcare-parenting/pregnancy-and-birth
+  with_unique_tracking:
+    description: We need to uniquely identify each step by step navigation in Google Analytics. If this parameter is added to the component, its value is included in any tracking events, specifically in dimension96.
+    data:
+      title: 'With a tracking id'
+      path: '#'
+      tracking_id: 'this-is-the-tracking-id'
   with_a_skip_link:
     description: This option allows the insertion of a skip link to a step by step navigation elsewhere on the page. This aids navigation when using a keyboard or screen reader. The skip link is visually hidden until it receives focus.
     data:

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

@@ -52,3 +52,13 @@ examples:
           text: 'Learn to drive a motorbike: step by step'
         }
       ]
+  with_unique_tracking:
+    description: We need to uniquely identify each step by step navigation in Google Analytics. If this parameter is added to the component, its value is included in any tracking events, specifically in dimension96.
+    data:
+      tracking_id: 'this-is-the-tracking-id'
+      links: [
+        {
+          href: '#',
+          text: 'With a tracking id'
+        }
+      ]

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

@@ -11,8 +11,10 @@
     <%= yield :title %><% if content_for(:title) %> - <% end %><%= GovukPublishingComponents::Config.component_guide_title %>
   </title>
   <%= stylesheet_link_tag "govuk_publishing_components/component_guide", media: "screen" %>
-  <%= stylesheet_link_tag "govuk_publishing_components/component_guide_print", media: "print" %>
   <%= stylesheet_link_tag "#{GovukPublishingComponents::Config.application_stylesheet}" %>
+  <% if GovukPublishingComponents::Config.application_print_stylesheet %>
+    <%= stylesheet_link_tag "#{GovukPublishingComponents::Config.application_print_stylesheet}", media: "print" %>
+  <% end %>
   <%= javascript_include_tag "govuk_publishing_components/application" %>
   <%= javascript_include_tag "#{GovukPublishingComponents::Config.application_javascript}" %>
   <%= csrf_meta_tags %>

data/config/initializers/assets.rb

@@ -1 +1 @@
-Rails.application.config.assets.precompile += %w(govuk_publishing_components/component_guide.css govuk_publishing_components/component_guide_print.css)
+Rails.application.config.assets.precompile += %w(govuk_publishing_components/component_guide.css)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '5.0.0'.freeze
+  VERSION = '5.1.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 5.0.0
+  version: 5.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-07 00:00:00.000000000 Z
+date: 2018-02-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -241,7 +241,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- DEVELOPMENT.md
 - LICENCE.md
 - README.md
 - Rakefile
@@ -250,6 +249,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/accessibility-test.js
 - app/assets/javascripts/govuk_publishing_components/application.js
 - app/assets/javascripts/govuk_publishing_components/components/error-summary.js
+- app/assets/javascripts/govuk_publishing_components/components/feedback.js
 - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
 - app/assets/javascripts/govuk_publishing_components/vendor/axe.min.js
 - app/assets/javascripts/govuk_publishing_components/vendor/matches-polyfill.min.js
@@ -258,9 +258,9 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/_all_components.scss
 - app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss
 - app/assets/stylesheets/govuk_publishing_components/component_guide.scss
-- app/assets/stylesheets/govuk_publishing_components/component_guide_print.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_input.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_label.scss
@@ -271,6 +271,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_clearfix.scss
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_px-to-em.scss
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss
+- app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav-header.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss
 - app/controllers/govuk_publishing_components/application_controller.rb
@@ -289,6 +290,7 @@ files:
 - app/views/govuk_publishing_components/component_guide/show.html.erb
 - app/views/govuk_publishing_components/components/_back_link.html.erb
 - app/views/govuk_publishing_components/components/_error_summary.html.erb
+- app/views/govuk_publishing_components/components/_feedback.html.erb
 - app/views/govuk_publishing_components/components/_fieldset.html.erb
 - app/views/govuk_publishing_components/components/_input.html.erb
 - app/views/govuk_publishing_components/components/_label.html.erb
@@ -298,6 +300,7 @@ files:
 - app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
 - app/views/govuk_publishing_components/components/docs/back_link.yml
 - app/views/govuk_publishing_components/components/docs/error_summary.yml
+- app/views/govuk_publishing_components/components/docs/feedback.yml
 - app/views/govuk_publishing_components/components/docs/fieldset.yml
 - app/views/govuk_publishing_components/components/docs/input.yml
 - app/views/govuk_publishing_components/components/docs/label.yml

data/DEVELOPMENT.md

@@ -1,15 +0,0 @@
-### Running tests
-
-The default rake task runs all tests:
-```
-bundle exec rake
-```
-
-Javascript is tested using Jasmine and the [Jasmine gem](https://github.com/pivotal/jasmine-gem). Tests can be run either in the browser or on the command line via the dummy app’s tasks:
-```sh
-# browser
-bundle exec rake app:jasmine
-
-# command line
-bundle exec rake app:jasmine:ci
-```

data/app/assets/stylesheets/govuk_publishing_components/component_guide_print.scss

@@ -1,3 +0,0 @@
-@import "typography";
-@import "components/print/step-by-step-nav";
-@import "components/print/step-by-step-nav-header";