govuk_publishing_components 4.1.0 → 4.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 557702f784e135a56c3e36c04f41cd81a46ce0c1
-  data.tar.gz: '029295ec5b0986c2e3716ec2716a187f99284c1c'
+SHA256:
+  metadata.gz: 9cc0e69ba995b899312ec518fc2193c23b09b942d5cc4a3fefe65a6d2bb3535e
+  data.tar.gz: e51a19c9a7298816343b611486c92873fba2f05160344e22ff8c39ab33b447a9
 SHA512:
-  metadata.gz: 791114b6110dbff901b8141cce068d675cf47488a49b534bc19c1b40a6e7ad09ae94fcee51d2c0a8ee43a5cd97dc3b641743e2f9617386ab0878f18a09bbbf89
-  data.tar.gz: 45d86f132162f126ed398a8851251957f2ebfd6718d4a7a45c27f9f9dd1a062d030b4c22f36900d208a165643420b455c743149ce33664132772ad30799a50fd
+  metadata.gz: 7b864217c5e2b22c3ef1ec1c999a857aab5116cf57bea4aa523f2f5927673b1236538ef3d6dd57970fc33906b967dca79456bc28fb65eb57e162deb4c9b6e3ff
+  data.tar.gz: 745f7d086a3ae2eba8ebbf8ca0ddd3a179c7c09320aaab5518a6edec150aae8f74c7738d0670173ca17395ef23440a033122f68b372e2cffd518232a0afbe2ad

data/README.md

@@ -1,21 +1,35 @@
 # GOV.UK Publishing Components
 
-A gem to document components in GOV.UK frontend applications.
+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.
 
 ![Screenshot of component guide](docs/screenshot.png)
 
 ## Write components in your application
 
-Components are packages of template, style, behaviour and documentation that live 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)
 
-A lead paragraph component would be included in a template like this:
+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 'components/lead-paragraph', text: "A description is one or two leading sentences" %>
+<%= render "govuk_publishing_components/components/back_link", href: "#" %>
 ```
 
 ## Set up a component guide
@@ -27,9 +41,11 @@ 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 in the [development and test groups](http://bundler.io/v1.12/groups.html#grouping-your-dependencies):
+Add this line to your application's Gemfile:
 
 ```ruby
 gem 'govuk_publishing_components'
@@ -40,39 +56,13 @@ And then execute:
 $ bundle
 ```
 
-#### Integration with Heroku
-
-To make the best use of the component guide we use Heroku to serve the current `master` build and whenever a [pull request is added](https://devcenter.heroku.com/articles/github-integration-review-apps)
-
-When an app is deployed to Heroku it will be in `production` mode, so only gems that are in the main group will be installed and made available.
-To ensure that we only load the guide on Heroku and not when deployed to _production_ we need to have the gem included in the main bundle group in the Gemfile.
-For this use case we need `require: false` so that it's not loaded in _production_ but then we can manually `require` the gem in our `application.rb` based on the more complex environmental logic that we've specified.
-
-First move the gem outside of the `development`, `test` groups and set require to false. ([example](https://github.com/alphagov/government-frontend/blob/5110d3d33f7a6b63f218b889a5afec90e6df810f/Gemfile#L11)):
-
-```ruby
-# Gemfile
-gem 'govuk_publishing_components', require: false
-```
-
-Now we can manually require the gem ([example](https://github.com/alphagov/government-frontend/blob/5110d3d33f7a6b63f218b889a5afec90e6df810f/config/application.rb#L14)):
-
-```ruby
-# config/application.rb
-if !Rails.env.production? || ENV['HEROKU_APP_NAME'].present?
-  require 'govuk_publishing_components'
-end
-```
-
 ### Mount the component guide
 
 Mount the component guide in your application:
 
 ```ruby
 # config/routes.rb
-unless Rails.env.production?
-  mount GovukPublishingComponents::Engine, at: "/component-guide" if defined?(GovukPublishingComponents)
-end
+mount GovukPublishingComponents::Engine, at: "/component-guide"
 ```
 
 If your application was government-frontend the component guide would be at:
@@ -84,14 +74,12 @@ Use a config block in an initializer:
 
 ```ruby
 # config/initializers/govuk_publishing_components.rb
-if defined?(GovukPublishingComponents)
-  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
+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
 ```
 
@@ -154,6 +142,10 @@ class ComponentGuideTest < ActionDispatch::IntegrationTest
 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.
@@ -165,7 +157,7 @@ For an example of this check [test/.../docs/test-component-with-duplicate-ids.ym
 
 ## Component generator
 
-The gem includes a component generator to stub the minimal files required for a component.
+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]
@@ -173,6 +165,20 @@ rails generate govuk_publishing_components:component [component_name]
 
 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`
+
+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.
+
 ## 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.
@@ -190,3 +196,6 @@ The tool can be run via the console using the following command:
 
 ## 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/Rakefile

@@ -1,5 +1,9 @@
-require 'rspec/core/rake_task'
-RSpec::Core::RakeTask.new(:spec)
+begin
+  require 'rspec/core/rake_task'
+  RSpec::Core::RakeTask.new(:spec)
+rescue LoadError
+  puts "Running in production mode"
+end
 
 APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
 

data/app/assets/javascripts/govuk_publishing_components/components/task-list.js

@@ -27,7 +27,7 @@
     var rememberShownStep = false;
     var taskListSize;
     var sessionStoreLink = 'govuk-task-list-active-link';
-    var activeLinkClass = 'gem-c-task-list__link-item--active';
+    var activeLinkClass = 'gem-c-task-list__link--active';
     var activeLinkHref = '#content';
 
     this.start = function ($element) {
@@ -94,8 +94,9 @@
           if (headerIsOpen($(this))) {
             linkText = actions.hideLinkText;
           }
-
-          $(this).append('<span class="gem-c-task-list__toggle-link js-toggle-link">' + linkText + '</span>');
+          if (!$(this).find('.js-toggle-link').length) {
+            $(this).append('<span class="gem-c-task-list__toggle-link js-toggle-link">' + linkText + '</span>');
+          }
         });
       }
 
@@ -172,9 +173,6 @@
           var toggleClick = new StepToggleClick(event, stepView, $steps, tasklistTracker, $groups);
           toggleClick.track();
 
-          var toggleLink = $(this).find('.js-toggle-link');
-          toggleLink.text(toggleLink.text() == actions.showLinkText ? actions.hideLinkText : actions.showLinkText);
-
           setShowHideAllText();
         });
       }
@@ -210,11 +208,11 @@
 
       function setOnlyThisLinkActive(clicked) {
         $element.find('.' + activeLinkClass).removeClass(activeLinkClass);
-        clicked.addClass(activeLinkClass);
+        clicked.parent().addClass(activeLinkClass);
       }
 
       function ensureOnlyOneActiveLink() {
-        var $activeLinks = $element.find('.js-link.' + activeLinkClass);
+        var $activeLinks = $element.find('.js-list-item.' + activeLinkClass);
 
         if ($activeLinks.length <= 1) {
           return;
@@ -239,7 +237,7 @@
 
       function removeActiveStateFromAllButCurrent($links, current) {
         $links.each(function() {
-          if ($(this).data('position') !== current) {
+          if ($(this).find('.js-link').data('position') !== current) {
             $(this).removeClass(activeLinkClass);
           }
         });
@@ -339,6 +337,7 @@
         $stepElement.toggleClass('step-is-shown', isShown);
         $stepContent.toggleClass('js-hidden', !isShown);
         $titleLink.attr("aria-expanded", isShown);
+        $stepElement.find('.js-toggle-link').text(isShown ? actions.hideLinkText : actions.showLinkText);
 
         if (shouldUpdateHash) {
           updateHash($stepElement);

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

@@ -0,0 +1,18 @@
+// This is the file that the application needs to include in order to use
+// the components.
+
+// `govuk_frontend_toolkit`
+@import "measurements";
+@import "grid_layout";
+@import "typography";
+@import "colours";
+
+@import "components/back-link";
+@import "components/error-summary";
+@import "components/fieldset";
+@import "components/input";
+@import "components/label";
+@import "components/radio";
+@import "components/task-list";
+@import "components/task-list-header";
+@import "components/task-list-related";

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

@@ -0,0 +1,11 @@
+// This is the file that the application needs to include in order to use
+// the components.
+
+// `govuk_frontend_toolkit`
+@import "measurements";
+@import "grid_layout";
+@import "typography";
+@import "colours";
+
+@import "components/print/task-list";
+@import "components/print/task-list-header";

data/app/assets/stylesheets/govuk_publishing_components/{application.scss → component_guide.scss}

@@ -1,18 +1,11 @@
+// This file contains the styles for the Component Guide.
+
 // `govuk_frontend_toolkit`
 @import "measurements";
 @import "grid_layout";
 @import "typography";
 @import "colours";
 
-@import "components/back-link";
-@import "components/error-summary";
-@import "components/fieldset";
-@import "components/label";
-@import "components/radio";
-@import "components/task-list";
-@import "components/task-list-header";
-@import "components/task-list-related";
-
 $border-color: #ccc;
 
 .govuk-component-guide-wrapper {

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

@@ -0,0 +1,39 @@
+.gem-c-input {
+  @include core-19;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 2.10526em;
+  margin-top: 0;
+  margin-bottom: 20px;
+
+  padding: $gem-spacing-scale-1;
+  // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
+  // as background-color and color need to always be set together, color should not be set either
+  border: $gem-border-width-form-element solid;
+  border-radius: 0;
+
+  // Disable inner shadow and remove rounded corners
+  appearance: none;
+}
+
+@media (min-width: 40.0625em) {
+  .govuk-c-input {
+    margin-bottom: 30px;
+  }
+}
+
+.gem-c-input:focus {
+  outline: $gem-focus-width solid $gem-focus-colour;
+}
+
+.gem-c-input--error {
+  border: $gem-border-width-error solid $gem-error-colour;
+}
+
+// Replace this with the error message component.
+.gem-c-input__label-error {
+  font-weight: bold;
+  color: $gem-error-colour;
+  padding-top: 4px;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_task-list-related.scss

@@ -1,15 +1,15 @@
-.pub-c-task-list-related {
+.gem-c-task-list-related {
   margin-bottom: $gutter-half;
 }
 
-.pub-c-task-list-related__heading,
-.pub-c-task-list-related__links {
+.gem-c-task-list-related__heading,
+.gem-c-task-list-related__links {
   @include bold-19;
   margin: 0;
   padding: 0;
 }
 
-.pub-c-task-list-related__pretitle {
+.gem-c-task-list-related__pretitle {
   display: block;
   margin-bottom: $gutter-half;
 
@@ -18,11 +18,11 @@
   }
 }
 
-.pub-c-task-list-related__links {
+.gem-c-task-list-related__links {
   list-style: none;
 }
 
-.pub-c-task-list-related__link-item {
+.gem-c-task-list-related__link-item {
   margin-top: $gutter-half;
 
   @include media(tablet) {
@@ -30,7 +30,7 @@
   }
 }
 
-.pub-c-task-list-related__link {
+.gem-c-task-list-related__link {
   text-decoration: none;
 
   &:hover {

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

@@ -350,13 +350,13 @@ $top-border: solid 2px $grey-3;
   margin-left: $links-margin;
   list-style: disc;
 
-  .gem-c-task-list__link-item--active:before {
+  .gem-c-task-list__link--active:before {
     left: -($gutter + $gutter-half) - $links-margin;
   }
 
   .gem-c-task-list--large & {
     @include media(tablet) {
-      .gem-c-task-list__link-item--active:before {
+      .gem-c-task-list__link--active:before {
         left: -($gutter * 2) - $links-margin;
       }
     }
@@ -367,27 +367,8 @@ $top-border: solid 2px $grey-3;
   margin-bottom: 10px;
 }
 
-.gem-c-task-list__link-item {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.gem-c-task-list__link-item--active {
+.gem-c-task-list__link--active {
   position: relative;
-  color: $black;
-
-  &:visited,
-  &:active,
-  &:link {
-    color: $black;
-  }
-
-  &:focus {
-    outline: 0;
-  }
 
   &:before {
     @include box-sizing(border-box);
@@ -413,14 +394,33 @@ $top-border: solid 2px $grey-3;
       }
     }
   }
+
+  .gem-c-task-list__link-item {
+    color: $black;
+
+    &:visited,
+    &:active,
+    &:link {
+      color: $black;
+    }
+  }
+}
+
+.gem-c-task-list__link-item {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .gem-c-task-list__context {
+  display: inline-block;
   font-weight: normal;
   color: $grey-1;
 
   &:before {
-    content: " \2013  ";
+    content: " \2013\00a0"; // dash followed by  
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss

@@ -17,6 +17,7 @@ $gem-secondary-text-colour: $grey-1;
 $gem-border-width-mobile: 4px;
 $gem-border-width-tablet: 5px;
 $gem-border-width-form-element: 2px;
+$gem-border-width-error: 4px;
 
 // Focus
 $gem-focus-width: 3px;

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

@@ -10,7 +10,7 @@
   <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
 </div>
 
-<h2 class="component-doc-h2">Components</h2>
+<h2 class="component-doc-h2">Components in this application</h2>
 
 <ul class="component-list">
   <% @component_docs.each do |component_doc| %>

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

@@ -0,0 +1,31 @@
+<%
+  id ||= "input-#{SecureRandom.hex(4)}"
+  hint_id ||= "hint-#{SecureRandom.hex(4)}"
+  value ||= false
+  error_message ||= false
+  label ||= {}
+%>
+
+<%= render "govuk_publishing_components/components/label", {
+  text: label[:text],
+  html_for: id,
+  hint_text: error_message,
+  hint_text_classes: "gem-c-input__label-error",
+  hint_id: hint_id,
+  bold: error_message ? true : false,
+} %>
+
+<input
+  class="gem-c-input <%= "gem-c-input--error" if error_message %>"
+  id="<%= id %>"
+  name="<%= name %>"
+  type="text"
+
+  <% if error_message %>
+    aria-describedby="<%= hint_id %>"
+  <% end %>
+
+  <% if value %>
+    value="<%= value %>"
+  <% end %>
+>

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

@@ -1,7 +1,9 @@
 <%
+  options = {}
+  options[:heading_level] = heading_level ||= 2
+
   groups ||= false
   small ||= false
-  heading_level ||= 2
   show_step ||= false
   remember_last_step ||= false
   task_list_url ||= false
@@ -33,7 +35,7 @@
           <% group.each_with_index do |step, step_index| %>
             <%
               step_count += 1
-              id = step[:id] || step[:title].downcase.tr(" ","-")
+              id = TaskListHelper.new.generate_task_list_id(step[:title])
 
               logic = "and"
               logic = step[:logic] if ["and", "or"].include? step[:logic]
@@ -55,68 +57,25 @@
               <% end %>
 
               <div class="gem-c-task-list__header js-toggle-panel" data-position="<%= "#{group_index + 1}.#{step_index + 1}" %>">
-                <h<%= heading_level %> class="gem-c-task-list__title js-step-title">
-                  <%= step[:title] %>
-                </h<%= heading_level %>>
+                <%= content_tag("h#{heading_level}", step[:title], class: 'gem-c-task-list__title js-step-title') %>
               </div>
 
               <div class="gem-c-task-list__panel js-panel" id="step-panel-<%= id %>-<%= step_index + 1 %>">
                 <%
                   in_substep = false
-                  link_index = 0
+                  options[:group_index] = group_index
+                  options[:step_index] = step_index
+                  options[:link_index] = 0
                 %>
                 <% step[:contents].each do |element| %>
-                  <% if element[:type] == 'paragraph' %>
-                    <p class="gem-c-task-list__paragraph"><%= element[:text] %></p>
-
-                  <% elsif element[:type] == 'heading' %>
-                    <%= content_tag("h#{heading_level + 1}", element[:text], class: 'gem-c-task-list__heading') %>
-
-                  <% elsif element[:type] == 'list' %>
-                    <%
-                      list_style = ''
-                      list_element = 'ol'
-
-                      if element[:style] == 'required'
-                        list_style = 'gem-c-task-list__links--required'
-                      elsif element[:style] == 'choice'
-                        list_style = 'gem-c-task-list__links--choice'
-                        list_element = 'ul'
-                      end
-                    %>
-
-                    <%= content_tag(
-                      list_element,
-                      class: "gem-c-task-list__links #{list_style}",
-                      data: {
-                        length: element[:contents].length
-                      }) do %>
-                      <% element[:contents].each do |link| %>
-                        <%
-                          if link[:href]
-                            link_href = link[:active] ? "#content" : link[:href]
-                            link_text = link[:active] ? '<span class="visuallyhidden">You are currently viewing:</span> '.html_safe + link[:text] : link[:text]
-                            link_active = 'gem-c-task-list__link-item--active' if link[:active]
-                            link_rel = link_href.start_with?('http') ? 'rel=external' : ''
-                            link_index += 1
-                            link_position = "data-position=\"#{group_index + 1}.#{step_index + 1}.#{link_index}\""
-
-                            link_tag = "<a href=\"#{link_href}\" class=\"gem-c-task-list__link-item js-link #{link_active}\" #{link_position} #{link_rel}>#{link_text}</a>".html_safe
-                          else
-                            link_tag = link[:text]
-                          end
-                        %>
-                        <li class="gem-c-task-list__link">
-                          <%= link_tag %>
-
-                          <% if link[:context] %>
-                            <span class="gem-c-task-list__context"><%= link[:context] %></span>
-                          <% end %>
-                        </li>
-                      <% end %>
-                    <% end %>
+                  <%= TaskListHelper.new.render_task_list_element(element, options) %>
+                  <%
+                    if element[:type] == 'list'
+                      options[:link_index] += element[:contents].length
+                    end
+                  %>
 
-                  <% elsif element[:type] == 'substep' %>
+                  <% if element[:type] == 'substep' %>
                     <% if in_substep %>
                       </div>
                       <% in_substep = false %>

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

@@ -3,12 +3,12 @@
   pretitle ||= t("govuk_component.task_list_related.part_of", default: "Part of")
 %>
 <% if links %>
-  <div class="pub-c-task-list-related" data-module="track-click">
-    <h2 class="pub-c-task-list-related__heading">
-      <span class="pub-c-task-list-related__pretitle"><%= pretitle %></span>
+  <div class="gem-c-task-list-related" data-module="track-click">
+    <h2 class="gem-c-task-list-related__heading">
+      <span class="gem-c-task-list-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 %>
           <a href="<%= links[0][:href] %>"
-            class="pub-c-task-list-related__link"
+            class="gem-c-task-list-related__link"
             data-track-category="tasklistPartOfClicked"
             data-track-action="<%= pretitle %>"
             data-track-label="<%= links[0][:href] %>"
@@ -19,11 +19,11 @@
         </h2>
       <% else %>
         </h2>
-        <ul class="pub-c-task-list-related__links">
+        <ul class="gem-c-task-list-related__links">
           <% links.each do |link| %>
-            <li class="pub-c-task-list-related__link-item">
+            <li class="gem-c-task-list-related__link-item">
               <a href="<%= link[:href] %>"
-                class="pub-c-task-list-related__link"
+                class="gem-c-task-list-related__link"
                 data-track-category="tasklistPartOfClicked"
                 data-track-action="<%= pretitle %>"
                 data-track-label="<%= link[:href] %>"

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

@@ -0,0 +1,22 @@
+name: Form input
+description: A single-line text field.
+body: |
+  [Forked from GOV.UK Frontend](https://govuk-frontend-review.herokuapp.com/components/input)
+accessibility_criteria: |
+  Markdown listing what this component must do to be accessible. For example:
+
+  The link must:
+
+  * be keyboard focusable
+examples:
+  default:
+    data:
+      label:
+        text: "What is your email address?"
+      name: "address"
+  with_error:
+    data:
+      label:
+        text: "What is your email address?"
+      name: "address"
+      error_message: "Email address not recognised"

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

@@ -699,8 +699,7 @@ examples:
                 contents: [
                   {
                     href: 'https://en.wikipedia.org/wiki/HDMI',
-                    text: 'Remove the Chromebit from HDMI 1 on the TV',
-                    active: true
+                    text: 'Remove the Chromebit from HDMI 1 on the TV'
                   }
                 ]
               }
@@ -743,28 +742,28 @@ examples:
                 style: 'required',
                 contents: [
                   {
-                    href: '',
-                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall',
-                    active: true
+                    href: 'http://www.google.com',
+                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Turn on the transmitter and wait for the switch to blink green'
                   },
                   {
-                    href: '',
-                    text: 'Plug the transmitter USB cable into the facilitators laptop'
+                    href: 'http://www.google.com',
+                    text: 'Plug the transmitter USB cable into the facilitators laptop',
+                    active: true
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Twist and pull the black piece of foam out of the catchbox'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Turn on the catchbox and wait for the LED to turn green'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Wait for the transmitter light to turn solid green'
                   }
                 ]
@@ -790,7 +789,7 @@ examples:
                     text: "Get annoyed when it doesn't work"
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Try to find someone else who knows how to do it',
                     context: '1 to 10 minutes'
                   }
@@ -813,17 +812,15 @@ examples:
                 style: 'required',
                 contents: [
                   {
-                    href: '',
-                    text: 'Connect to standup hangout via the calendar invite',
-                    active: true
+                    href: 'http://www.google.com',
+                    text: 'Connect to standup hangout via the calendar invite'
                   },
                   {
                     text: 'or'
                   },
                   {
-                    href: '',
-                    text: 'Connect to standup hangout via the link in the team slack',
-                    active: true
+                    href: 'http://www.google.com',
+                    text: 'Connect to standup hangout via the link in the team slack'
                   }
                 ]
               },
@@ -836,19 +833,19 @@ examples:
                 style: 'required',
                 contents: [
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Click the three dots in the bottom hand corner to open settings'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Set speaker to "Jabra"'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Set microphone to "C Media USB"'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Click "present to meeting"'
                   },
                 ]
@@ -887,12 +884,13 @@ examples:
     description: Designed to fit in the sidebar of a page. Note that the small version of the task list should not become smaller on mobile, and the large version on mobile should be the same size as the small version. This example is a copy of the one above for comparison.
     data:
       small: true
+      remember_last_step: true
       task_list_url: "/learn-to-setup-standup"
       highlight_group: 2
       groups: [
         [
           {
-            title: 'Get the TV ready.',
+            title: 'Get the TV ready (small)',
             contents: [
               {
                 type: 'paragraph',
@@ -904,15 +902,14 @@ examples:
                 contents: [
                   {
                     href: 'https://en.wikipedia.org/wiki/HDMI',
-                    text: 'Remove the Chromebit from HDMI 1 on the TV',
-                    active: true
+                    text: 'Remove the Chromebit from HDMI 1 on the TV'
                   }
                 ]
               }
             ]
           },
           {
-            title: 'Plug everything in.',
+            title: 'Plug everything in (small)',
             contents: [
               {
                 type: 'paragraph',
@@ -937,7 +934,7 @@ examples:
         ],
         [
           {
-            title: 'Configure the catchbox.',
+            title: 'Configure the catchbox (small)',
             contents: [
               {
                 type: 'paragraph',
@@ -948,28 +945,28 @@ examples:
                 style: 'required',
                 contents: [
                   {
-                    href: '',
-                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall',
-                    active: true
+                    href: 'http://www.google.com',
+                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Turn on the transmitter and wait for the switch to blink green'
                   },
                   {
-                    href: '',
-                    text: 'Plug the transmitter USB cable into the facilitators laptop'
+                    href: 'http://www.google.com',
+                    text: 'Plug the transmitter USB cable into the facilitators laptop',
+                    active: true
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Twist and pull the black piece of foam out of the catchbox'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Turn on the catchbox and wait for the LED to turn green'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Wait for the transmitter light to turn solid green'
                   }
                 ]
@@ -995,7 +992,7 @@ examples:
                     text: "Get annoyed when it doesn't work"
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Try to find someone else who knows how to do it',
                     context: '1 to 10 minutes'
                   }
@@ -1006,7 +1003,7 @@ examples:
         ],
         [
           {
-            title: 'Join and configure the standup.',
+            title: 'Join and configure the standup (small)',
             show_help_link: true,
             contents: [
               {
@@ -1018,17 +1015,15 @@ examples:
                 style: 'required',
                 contents: [
                   {
-                    href: '',
-                    text: 'Connect to standup hangout via the calendar invite',
-                    active: true
+                    href: 'http://www.google.com',
+                    text: 'Connect to standup hangout via the calendar invite'
                   },
                   {
                     text: 'or'
                   },
                   {
-                    href: '',
-                    text: 'Connect to standup hangout via the link in the team slack',
-                    active: true
+                    href: 'http://www.google.com',
+                    text: 'Connect to standup hangout via the link in the team slack'
                   }
                 ]
               },
@@ -1041,19 +1036,19 @@ examples:
                 style: 'required',
                 contents: [
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Click the three dots in the bottom hand corner to open settings'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Set speaker to "Jabra"'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Set microphone to "C Media USB"'
                   },
                   {
-                    href: '',
+                    href: 'http://www.google.com',
                     text: 'Click "present to meeting"'
                   },
                 ]
@@ -1063,7 +1058,7 @@ examples:
         ],
         [
           {
-            title: 'Clear up.',
+            title: 'Clear up (small)',
             contents: [
               {
                 type: 'paragraph',
@@ -1076,7 +1071,7 @@ examples:
             ]
           },
           {
-            title: 'Get someone else to clear up.',
+            title: 'Get someone else to clear up (small)',
             logic: 'or',
             optional: true,
             contents: [

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

@@ -10,8 +10,8 @@
     <% end %>
     <%= yield :title %><% if content_for(:title) %> - <% end %><%= GovukPublishingComponents::Config.component_guide_title %>
   </title>
-  <%= stylesheet_link_tag "govuk_publishing_components/application", media: "screen" %>
-  <%= stylesheet_link_tag "govuk_publishing_components/print", media: "print" %>
+  <%= 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}" %>
   <%= javascript_include_tag "govuk_publishing_components/application" %>
   <%= javascript_include_tag "#{GovukPublishingComponents::Config.application_javascript}" %>

data/config/initializers/assets.rb

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

data/lib/govuk_publishing_components.rb

@@ -1,5 +1,6 @@
 require "govuk_publishing_components/config"
 require "govuk_publishing_components/engine"
+require "govuk_publishing_components/components/task_list_helper"
 
 module GovukPublishingComponents
 end

data/lib/govuk_publishing_components/components/task_list_helper.rb

@@ -0,0 +1,111 @@
+class TaskListHelper
+  include ActionView::Helpers
+  include ActionView::Context
+
+  def render_task_list_element(element, options)
+    @options = options
+    @link_index = options[:link_index]
+
+    case element[:type]
+    when "paragraph"
+      paragraph(element[:text])
+    when "heading"
+      heading(element[:text])
+    when "list"
+      list(element)
+    end
+  end
+
+  # id should be lowercase, contain only numbers and letters and replace spaces with dashes
+  def generate_task_list_id(step_title)
+    step_title.downcase.tr(" ", "-").gsub(/[^a-z0-9\-\s]/i, '')
+  end
+
+private
+
+  def paragraph(text)
+    content_tag(
+      :p,
+      text,
+      class: "gem-c-task-list__paragraph"
+    )
+  end
+
+  def heading(text)
+    content_tag(
+      "h#{@options[:heading_level] + 1}",
+      text,
+      class: "gem-c-task-list__heading"
+    )
+  end
+
+  def list(element)
+    content_tag(
+      get_list_element(element[:style]),
+      class: "gem-c-task-list__links #{get_list_style(element[:style])}",
+      data: {
+        length: element[:contents].length
+      }
+    ) do
+      element[:contents].collect { |contents|
+        concat(
+          content_tag(
+            :li,
+            class: "gem-c-task-list__link js-list-item #{link_active(contents[:active])}"
+          ) do
+            create_list_item_content(contents)
+          end
+        )
+      }
+    end
+  end
+
+  def create_list_item_content(link)
+    if link[:href]
+      @link_index += 1
+      href = link_href(link[:active], link[:href])
+      text = "#{link_text(link[:active], link[:text])} #{create_context(link[:context])}".html_safe
+
+      link_to(
+        href,
+        rel: ("external" if href.start_with?('http')),
+        data: {
+          position: "#{@options[:group_index] + 1}.#{@options[:step_index] + 1}.#{@link_index}"
+        },
+        class: "gem-c-task-list__link-item js-link"
+      ) do
+        text
+      end
+    else
+      link[:text]
+    end
+  end
+
+  def create_context(context)
+    content_tag(:span, context, class: "gem-c-task-list__context") if context
+  end
+
+  def get_list_style(style)
+    if style == "required"
+      "gem-c-task-list__links--required"
+    elsif style == "choice"
+      "gem-c-task-list__links--choice"
+    end
+  end
+
+  def get_list_element(style)
+    style == "choice" ? "ul" : "ol"
+  end
+
+  def link_href(active, href)
+    active ? "#content" : href
+  end
+
+  def link_text(active, text)
+    active ? content_tag(:span, "You are currently viewing: ", class: "visuallyhidden") + text : text
+  end
+
+  def link_active(active)
+    "gem-c-task-list__link--active" if active
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '4.1.0'.freeze
+  VERSION = '4.1.1'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 4.1.0
+  version: 4.1.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-01-11 00:00:00.000000000 Z
+date: 2018-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -94,6 +94,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: govuk-lint
   requirement: !ruby/object:Gem::Requirement
@@ -241,10 +255,14 @@ files:
 - app/assets/javascripts/govuk_publishing_components/vendor/matches-polyfill.min.js
 - app/assets/javascripts/govuk_publishing_components/visual-regression.js
 - app/assets/javascripts/history-support.js
-- app/assets/stylesheets/govuk_publishing_components/application.scss
+- 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/_fieldset.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_input.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_label.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_radio.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_task-list-header.scss
@@ -255,7 +273,6 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_task-list-header.scss
 - app/assets/stylesheets/govuk_publishing_components/components/print/_task-list.scss
-- app/assets/stylesheets/govuk_publishing_components/print.scss
 - app/controllers/govuk_publishing_components/application_controller.rb
 - app/controllers/govuk_publishing_components/component_guide_controller.rb
 - app/helpers/govuk_publishing_components/application_helper.rb
@@ -273,6 +290,7 @@ files:
 - 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/_fieldset.html.erb
+- app/views/govuk_publishing_components/components/_input.html.erb
 - app/views/govuk_publishing_components/components/_label.html.erb
 - app/views/govuk_publishing_components/components/_radio.html.erb
 - app/views/govuk_publishing_components/components/_task_list.html.erb
@@ -281,6 +299,7 @@ files:
 - 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/fieldset.yml
+- app/views/govuk_publishing_components/components/docs/input.yml
 - app/views/govuk_publishing_components/components/docs/label.yml
 - app/views/govuk_publishing_components/components/docs/radio.yml
 - app/views/govuk_publishing_components/components/docs/task_list.yml
@@ -297,6 +316,7 @@ files:
 - lib/generators/govuk_publishing_components/templates/_component.scss
 - lib/generators/govuk_publishing_components/templates/component.yml.erb
 - lib/govuk_publishing_components.rb
+- lib/govuk_publishing_components/components/task_list_helper.rb
 - lib/govuk_publishing_components/config.rb
 - lib/govuk_publishing_components/engine.rb
 - lib/govuk_publishing_components/minitest/component_guide_test.rb
@@ -322,7 +342,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.13
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications

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

@@ -1,3 +0,0 @@
-@import "typography";
-@import "components/print/task-list";
-@import "components/print/task-list-header";