govuk_publishing_components 4.1.1 → 5.0.0

data/app/views/govuk_publishing_components/components/docs/{task_list_header.yml → step_by_step_nav_header.yml}

@@ -1,13 +1,13 @@
-name: Task list header
-description: Shows that a content page is part of a task list.
+name: Step by step navigation header
+description: Shows that a content page is part of a step by step navigation
 body: |
-  The component indicates to the user that the current page is part of a [task list](/component-guide/task_list), and can provide a link to that task list.
+  The component indicates to the user that the current page is part of a [step by step navigation](/component-guide/step_by_step_nav), and can provide a link to it.
 accessibility_criteria: |
   The component is designed to go into the top of an existing content page and should not interfere with the heading structure of the page, so therefore should not contain a heading tag.
 
   The component must:
 
-  - provide a skip link to the task list on the page, if that task list is present
+  - provide a skip link to the step by step navigation on the page, if one is present
 shared_accessibility_criteria:
   - link
 examples:
@@ -19,15 +19,15 @@ examples:
       title: 'Having children: step by step'
       path: /childcare-parenting/pregnancy-and-birth
   with_a_skip_link:
-    description: This option allows the insertion of a skip link to a task list elsewhere on the page. This aids navigation when using a keyboard or screen reader. The skip link is visually hidden until it receives focus.
+    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:
       title: 'Separating from a spouse or civil partner: step by step'
       path: /divorce
-      skip_link: '#task-list-wrapper'
+      skip_link: '#step-nav-wrapper'
   with_a_skip_link_with_custom_text:
     description: It's hard to think of good text to put in a skip link, so this option lets you customise it.
     data:
       title: 'Buying and renting a property: step by step'
       path: /buy-sell-your-home
-      skip_link: '#task-list-steps'
+      skip_link: '#step-nav-steps'
       skip_link_text: Skip to steps

data/app/views/govuk_publishing_components/components/docs/{task_list_related.yml → step_by_step_nav_related.yml}

@@ -1,12 +1,12 @@
-name: Task list related links
-description: Links to task lists that a page is part of
+name: Step by step navigation related links
+description: Links to step by step navigations that a page is part of
 body: |
-  The component is designed to go on a content page to accompany a small task list in a sidebar. It provides links to the main task list page.
+  The component is designed to go on a content page to accompany a small step by step navigation in a sidebar. It provides links to one or more step by step navigation pages.
 
   The component has two uses:
 
-  - above the task list, it provides a link to the main task list page
-  - below the task list, it shows and links to any other task lists that this page belongs to
+  - above the step by step navigation sidebar, it provides a link to the main step by step navigation
+  - below the step by step navigation sidebar, it shows and links to any other step by step navigations that this page belongs to
 
   In the first use case, only one link should be present and the entire text of the component should be contained in a heading. In the second use case, if more than one link is provided, the links should be shown in a list, separate from the heading.
 accessibility_criteria: |

data/config/locales/en.yml

@@ -25,3 +25,5 @@ en:
       or: 'or'
     back_link:
       back: 'Back'
+    step_by_step_nav_related:
+      part_of: "Part of"

data/lib/govuk_publishing_components.rb

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

data/lib/govuk_publishing_components/components/{task_list_helper.rb → step_by_step_nav_helper.rb}

@@ -1,8 +1,8 @@
-class TaskListHelper
+class StepNavHelper
   include ActionView::Helpers
   include ActionView::Context
 
-  def render_task_list_element(element, options)
+  def render_step_nav_element(element, options)
     @options = options
     @link_index = options[:link_index]
 
@@ -17,7 +17,7 @@ class TaskListHelper
   end
 
   # id should be lowercase, contain only numbers and letters and replace spaces with dashes
-  def generate_task_list_id(step_title)
+  def generate_step_nav_id(step_title)
     step_title.downcase.tr(" ", "-").gsub(/[^a-z0-9\-\s]/i, '')
   end
 
@@ -27,7 +27,7 @@ private
     content_tag(
       :p,
       text,
-      class: "gem-c-task-list__paragraph"
+      class: "gem-c-step-nav__paragraph"
     )
   end
 
@@ -35,14 +35,14 @@ private
     content_tag(
       "h#{@options[:heading_level] + 1}",
       text,
-      class: "gem-c-task-list__heading"
+      class: "gem-c-step-nav__heading"
     )
   end
 
   def list(element)
     content_tag(
       get_list_element(element[:style]),
-      class: "gem-c-task-list__links #{get_list_style(element[:style])}",
+      class: "gem-c-step-nav__links #{get_list_style(element[:style])}",
       data: {
         length: element[:contents].length
       }
@@ -51,7 +51,7 @@ private
         concat(
           content_tag(
             :li,
-            class: "gem-c-task-list__link js-list-item #{link_active(contents[:active])}"
+            class: "gem-c-step-nav__link js-list-item #{link_active(contents[:active])}"
           ) do
             create_list_item_content(contents)
           end
@@ -70,9 +70,9 @@ private
         href,
         rel: ("external" if href.start_with?('http')),
         data: {
-          position: "#{@options[:group_index] + 1}.#{@options[:step_index] + 1}.#{@link_index}"
+          position: "#{@options[:step_index] + 1}.#{@link_index}"
         },
-        class: "gem-c-task-list__link-item js-link"
+        class: "gem-c-step-nav__link-item js-link"
       ) do
         text
       end
@@ -82,14 +82,14 @@ private
   end
 
   def create_context(context)
-    content_tag(:span, context, class: "gem-c-task-list__context") if context
+    content_tag(:span, context, class: "gem-c-step-nav__context") if context
   end
 
   def get_list_style(style)
     if style == "required"
-      "gem-c-task-list__links--required"
+      "gem-c-step-nav__links--required"
     elsif style == "choice"
-      "gem-c-task-list__links--choice"
+      "gem-c-step-nav__links--choice"
     end
   end
 
@@ -106,6 +106,6 @@ private
   end
 
   def link_active(active)
-    "gem-c-task-list__link--active" if active
+    "gem-c-step-nav__link--active" if active
   end
 end

data/lib/govuk_publishing_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 4.1.1
+  version: 5.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-02 00:00:00.000000000 Z
+date: 2018-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -250,7 +250,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/task-list.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
 - app/assets/javascripts/govuk_publishing_components/visual-regression.js
@@ -265,14 +265,14 @@ files:
 - 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
-- app/assets/stylesheets/govuk_publishing_components/components/_task-list-related.scss
-- app/assets/stylesheets/govuk_publishing_components/components/_task-list.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
 - 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/_task-list-header.scss
-- app/assets/stylesheets/govuk_publishing_components/components/print/_task-list.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
 - app/controllers/govuk_publishing_components/component_guide_controller.rb
 - app/helpers/govuk_publishing_components/application_helper.rb
@@ -293,18 +293,18 @@ files:
 - 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
-- app/views/govuk_publishing_components/components/_task_list_header.html.erb
-- app/views/govuk_publishing_components/components/_task_list_related.html.erb
+- app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
+- app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
+- 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/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
-- app/views/govuk_publishing_components/components/docs/task_list_header.yml
-- app/views/govuk_publishing_components/components/docs/task_list_related.yml
+- app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
+- app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
+- app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml
 - app/views/layouts/govuk_publishing_components/application.html.erb
 - config/initializers/assets.rb
 - config/locales/cy.yml
@@ -316,7 +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/components/step_by_step_nav_helper.rb
 - lib/govuk_publishing_components/config.rb
 - lib/govuk_publishing_components/engine.rb
 - lib/govuk_publishing_components/minitest/component_guide_test.rb

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

@@ -1,105 +0,0 @@
-<%
-  options = {}
-  options[:heading_level] = heading_level ||= 2
-
-  groups ||= false
-  small ||= false
-  show_step ||= false
-  remember_last_step ||= false
-  task_list_url ||= false
-  task_list_url_link_text ||= "Get help completing this step"
-  highlight_group ||= false
-
-  step_count = 0
-%>
-<% if groups %>
-  <div
-    data-module="gemtasklist"
-    class="gem-c-task-list js-hidden <% unless small %>gem-c-task-list--large<% end %>"
-    <% if remember_last_step %>data-remember<% end %>
-    >
-    <ol class="gem-c-task-list__groups">
-      <% groups.each_with_index do |group, group_index| %>
-        <%
-          group_is_active = group_index + 1 == highlight_group
-        %>
-        <li class="gem-c-task-list__group <%= 'gem-c-task-list__group--active' if group_is_active %>" <% if group_is_active %>aria-current="step"<% end %>>
-          <span class="gem-c-task-list__circle gem-c-task-list__circle--number">
-            <span class="gem-c-task-list__circle-inner">
-              <span class="gem-c-task-list__circle-background">
-                <span class="visuallyhidden">Step</span> <%= group_index + 1 %>
-              </span>
-            </span>
-          </span>
-
-          <% group.each_with_index do |step, step_index| %>
-            <%
-              step_count += 1
-              id = TaskListHelper.new.generate_task_list_id(step[:title])
-
-              logic = "and"
-              logic = step[:logic] if ["and", "or"].include? step[:logic]
-            %>
-            <div
-              class="gem-c-task-list__step js-step <%= "gem-c-task-list__step--optional" if step[:optional] %>"
-              id="<%= id %>"
-              data-track-count="tasklistSection"
-              <%= "data-show" if step_count == show_step %>
-              >
-              <% if step_index > 0 %>
-                <div class="gem-c-task-list__circle gem-c-task-list__circle--logic">
-                  <span class="gem-c-task-list__circle-inner">
-                    <span class="gem-c-task-list__circle-background">
-                      <%= logic %>
-                    </span>
-                  </span>
-                </div>
-              <% end %>
-
-              <div class="gem-c-task-list__header js-toggle-panel" data-position="<%= "#{group_index + 1}.#{step_index + 1}" %>">
-                <%= 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
-                  options[:group_index] = group_index
-                  options[:step_index] = step_index
-                  options[:link_index] = 0
-                %>
-                <% step[:contents].each do |element| %>
-                  <%= TaskListHelper.new.render_task_list_element(element, options) %>
-                  <%
-                    if element[:type] == 'list'
-                      options[:link_index] += element[:contents].length
-                    end
-                  %>
-
-                  <% if element[:type] == 'substep' %>
-                    <% if in_substep %>
-                      </div>
-                      <% in_substep = false %>
-                    <% end %>
-                    <div class="gem-c-task-list__substep <% if element[:optional] %>gem-c-task-list__substep--optional<% end %>">
-                    <% in_substep = true %>
-                  <% end %>
-                <% end %>
-
-                <% if in_substep %>
-                  </div>
-                <% end %>
-
-                <% if task_list_url && step[:show_help_link] %>
-                  <div class="gem-c-task-list__help">
-                    <a href="<%= task_list_url %>#<%= id %>" class="gem-c-task-list__help-link js-link" data-position="get-help"><%= task_list_url_link_text %></a>
-                  </div>
-                <% end %>
-              </div>
-
-            </div>
-          <% end %>
-        </li>
-      <% end %>
-    </ol>
-  </div>
-<% end %>

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

@@ -1,1085 +0,0 @@
-name: Task list
-description: Numbered groups containing expanding/collapsing steps
-body: |
-  Task lists are designed to show a sequence of steps towards a specific goal, such as 'learning to drive'. Each group of a task list can contain one or more steps. Each step can contain one or more links to pages. User research suggested that each step should be collapsed by default so that users are not overwhelmed with information.
-
-  If JavaScript is disabled the task list expands fully. All of the task list functionality (including the icons and aria attributes) are added using JavaScript.
-
-  The task list is based on the accordion component in collections, but has been altered. This is for two reasons.
-
-  - task lists are needed throughout GOV.UK and extending the accordion to be the task list would require promoting it to static, which would break integration testing
-  - creating a new component allows further iteration without impacting the accordion
-accessibility_criteria: |
-  The task list must:
-
-  - indicate to users that each step can be expanded and collapsed
-  - inform the user when a step has been expanded or collapsed
-  - be usable with a keyboard
-  - allow users to show or hide all steps at once
-  - inform the user which step a link belongs to
-  - inform the user which step the current page is in, particularly where there are multiple steps in one group
-  - be readable when only the text of the page is zoomed - achieved for the numbers and logic elements by their text being wrapped in several elements that give them a white background and ensure the text when zoomed expands to the left, not to the right, where it would obscure the step titles
-
-  The show/hide all button only needs to list the first panel id in the aria-controls attribute, rather than all of them.
-
-  Step headings must use a button element:
-
-  - so that steps can be toggled with the space and enter keys
-  - so that steps can't be opened in a new tab or window
-
-  When JavaScript is unavailable the task list must:
-
-  - be fully expanded
-  - not be marked as expandable
-shared_accessibility_criteria:
-  - link
-examples:
-  default:
-    data:
-      groups: [
-        [
-          {
-            title: "Do a thing",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'This is a paragraph of text.'
-              },
-              {
-                type: 'paragraph',
-                text: 'This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth.'
-              }
-            ]
-          },
-          {
-            title: "Do another thing",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Groups can contain multiple steps, like this.'
-              },
-            ]
-          }
-        ],
-        [
-          {
-            title: "Do something else",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'This is yet another paragraph.'
-              }
-            ]
-          }
-        ]
-      ]
-  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:
-      heading_level: 3
-      groups: [
-        [
-          {
-            title: 'This is a heading 3',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'This is yet another paragraph.'
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'This is also a heading 3',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'This is yet another paragraph.'
-              }
-            ]
-          }
-        ]
-      ]
-  open_a_step_by_default:
-    description: Pass the index of the step to open by default. This is the nth step, regardless of group number.
-    data:
-      show_step: 3
-      groups: [
-        [
-          {
-            title: 'Closed by default',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Well, open now, obviously.'
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Also closed by default',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Hello.'
-              }
-            ]
-          },
-          {
-            title: 'Open by default',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Hello!'
-              }
-            ]
-          }
-        ]
-      ]
-  remember_last_opened_step:
-    description: |
-      If a step is opened its ID is appended to the end of the URL, so that if the URL is shared or the 'back' button is used, that step will be opened on page load. This was historically part of the behaviour of the accordion. By default this is turned off and cannot be used together with the option to open a step by default.
-
-      This behaviour is used with the 'links to more information' option.
-    data:
-      remember_last_step: true
-      groups: [
-        [
-          {
-            title: 'Remember this',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Hello!'
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Or this',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Hello!'
-              }
-            ]
-          }
-        ]
-      ]
-  with_links:
-    description: |
-      Links can have the following attributes:
-
-      - style, an attribute on the parent list that controls its appearance, either required (bold), optional (not bold) or choice (not bold, with bullets on the list). The default is optional.
-      - context, an optional text field to show some extra information after the link, usually a monetary value
-      - active, whether to make the link highlighted (to indicate the current page)
-      - highlight_group, a general option to highlight a specific group of steps. Usually the active link would be in the active group, but in some circumstances there might be an active group but no highlighted link.
-    data:
-      highlight_group: 2
-      show_step: 2
-      groups: [
-        [
-          {
-            title: 'Links and paragraphs',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'These links represent tasks that are required.'
-              },
-              {
-                type: 'paragraph',
-                text: 'Spacing between a paragraph and a list of links should be smaller than the spacing between two paragraphs, in order to visually connect the two.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Obtain a driving licence prior to driving a car',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Acquire food before attempting to cook',
-                    context: '1p to £20',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Maintain contact with the ground at all times',
-                    active: true
-                  }
-                ]
-              },
-              {
-                type: 'paragraph',
-                text: 'These links represent tasks that are optional.'
-              },
-              {
-                type: 'list',
-                contents: [
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Learn to play the saxophone',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Develop a new method of extracting juice from oranges',
-                    context: '£0 to £300',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Buy a race car',
-                    active: true
-                  }
-                ]
-              },
-              {
-                type: 'paragraph',
-                text: 'These links represent a choice:'
-              },
-              {
-                type: 'list',
-                style: 'choice',
-                contents: [
-                  {
-                    href: '/component-guide/task_list/',
-                    text: 'Leave school at sixteen',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/',
-                    text: 'Continue into higher education',
-                    context: '£9,500',
-                    active: true
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Active group and links',
-            contents: [
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: '/component-guide/task_list/',
-                    text: 'Check the reasons'
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Make the decisions based on available data and the reasonable assumptions that are possible at the time',
-                    context: '1p to £20',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Do the things',
-                    active: true
-                  }
-                ]
-              },
-            ]
-          }
-        ]
-      ]
-  with_headings:
-    description: Headings can be included to break up complex content within steps. Headings are intended to be used to highlight 'Get help completing this step' information, but can be used in other contexts. The heading level is automatically determined based on the heading level of the step titles.
-    data:
-      show_step: 1
-      heading_level: 3
-      groups: [
-        [
-          {
-            title: "Do something complicated",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'This is an example of a step containing a heading. A section has been used with the heading to demonstrate the intended appearance of a Get Help section.'
-              },
-              {
-                type: 'substep',
-                optional: true
-              },
-              {
-                type: 'heading',
-                text: 'Get help completing this step'
-              },
-              {
-                type: 'list',
-                contents: [
-                  {
-                    href: '#',
-                    text: 'Apply online'
-                  },
-                  {
-                    href: '#',
-                    text: 'Talk to one of our advisers'
-                  },
-                  {
-                    href: '#',
-                    text: 'Search our website'
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      ]
-  or_then:
-    description: Some of the more complex things in a task list require an option for laying out links in a clear structure. If a link in a list is not given a href, only the text is displayed, allowing for structures like the one shown below.
-    data:
-      show_step: 1
-      groups: [
-        [
-          {
-            title: "Get a court to decide your child arrangements",
-            contents: [
-              {
-                type: 'paragraph',
-                text: "You can only apply for a court to make a decision if you've tried mediation or your family are at risk, for example domestic abuse."
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://solicitors.lawsociety.org.uk/',
-                    text: 'Hire a lawyer to represent you',
-                    context: '£110 to £410 per hour'
-                  },
-                  {
-                    text: 'or',
-                  },
-                  {
-                    href: 'http://localhost:3000/represent-yourself-in-court',
-                    text: 'Represent yourself in court'
-                  }
-                ]
-              },
-              {
-                type: 'paragraph',
-                text: 'then'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: '/looking-after-children-divorce/apply-for-court-order',
-                    text: 'Apply for a court order',
-                    context: '£215'
-                  },
-                  {
-                    href: 'https://courttribunalfinder.service.gov.uk/search/',
-                    text: 'Find the right court to send your application'
-                  },
-                  {
-                    href: '/get-help-with-court-fees',
-                    text: 'Get help with court fees'
-                  }
-                ]
-              },
-              {
-                type: 'paragraph',
-                text: "The court will send you a date for your first hearing 4 to 6 weeks after your application. You'll be told when and where your hearing will take place."
-              }
-            ]
-          }
-        ]
-      ]
-  solve_the_double_dot_problem:
-    description: |
-      If a page is in a task list more than once and a user is viewing that URL, both links to it will be highlighted as the site has no way to know which entry in the task list the user is currently viewing (highlighted links should only occur when the task list is in the sidebar).
-
-      JavaScript is included in the component to solve this. It uses sessionStorage to capture the data-position attribute of non-external links in the task list when clicked, and then uses this value to decide which link to highlight when the new page loads. This session storage data is immediately deleted after it is read on page load, mainly to prevent problems with highlighting if the user were to move between different task lists.
-
-      If a user has not clicked a link (i.e. has visited the page without first clicking on a task list) the first active link in the first active group will be highlighted. If there is no active group, the first active link will be highlighted (but there should always be an active group).
-
-      The current page in the task list is an anchor link to the top of the page. If there are more than one of these and the user clicks one that is not currently highlighted, that one will be highlighted.
-
-      The example below will show all links highlighted if JS is disabled, in the real world no more than two or three links are likely to be highlighted at once.
-    data:
-      highlight_group: 2
-      show_step: 2
-      groups: [
-        [
-          {
-            title: "Not the active step",
-            contents: [
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://google.com',
-                    text: 'External link not set to active'
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Internal link set to active',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Internal link set to active',
-                    active: true
-                  },
-                  {
-                    href: 'http://google.com',
-                    text: 'External link not set to active'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: "The active step",
-            contents: [
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Internal link set to active - in the active group, should be set by default until another link is clicked',
-                    active: true
-                  },
-                  {
-                    href: '/component-guide/task_list/with_links/preview',
-                    text: 'Internal link set to active',
-                    active: true
-                  },
-                  {
-                    href: 'http://google.com',
-                    text: 'External link not set to active'
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      ]
-  with_optional_steps:
-    description: |
-      Steps can be optional. This is controlled by two parameters for maximum flexibility, 'optional' (which causes the step to have a dotted line down the side) and 'logic', which defaults to showing the word 'and' alongside the step title, but also accepts 'or'.
-
-      If a step is optional this should be conveyed by the text within that step.
-    data:
-      groups: [
-        [
-          {
-            title: "Drive to work",
-            contents: [
-              {
-                type: paragraph,
-                text: 'If you do not have a car, you will need to choose an alternative.'
-              }
-            ]
-          },
-          {
-            title: "Walk to work",
-            optional: true,
-            logic: 'or',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Walking is healthy but may not be practical where large distances are concerned.'
-              }
-            ]
-          },
-          {
-            title: "Get public transport to work",
-            optional: true,
-            logic: 'or',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Public transport includes buses, trains and boats.'
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: "Do work",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Once you have reached your destination you should be able to start work.'
-              }
-            ]
-          },
-          {
-            title: "Get paid",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Your employer should pay you for hours worked.'
-              }
-            ]
-          }
-        ]
-      ]
-  with_sub_steps:
-    description: Steps can also contain sub steps, which act either as a way to break up content or to indicate that some tasks are optional. Whenever a step or sub step is optional this should be made clear in the written content. Optional steps are styled differently but this should support the meaning, not convey it.
-    data:
-      highlight_group: 2
-      show_step: 2
-      groups: [
-        [
-          {
-            title: "A required step",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'This step ends with an optional sub step.'
-              },
-              {
-                type: 'substep',
-                optional: true
-              },
-              {
-                type: 'paragraph',
-                text: 'This paragraph is inside the sub step.'
-              },
-              {
-                type: 'list',
-                contents: [
-                  {
-                    href: '/test6',
-                    text: 'This link is also inside the sub step'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: "An optional step",
-            optional: true,
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'This optional step contains multiple sub steps.'
-              },
-              {
-                type: 'substep',
-                optional: false
-              },
-              {
-                type: 'paragraph',
-                text: 'This paragraph is inside a required sub step.'
-              },
-              {
-                type: 'substep',
-                optional: true
-              },
-              {
-                type: 'paragraph',
-                text: 'This paragraph is inside an optional sub step.'
-              },
-              {
-                type: 'list',
-                contents: [
-                  {
-                    href: '/test7',
-                    text: 'This link is inside an optional sub step as well',
-                    active: true
-                  }
-                ]
-              },
-              {
-                type: 'substep',
-                optional: false
-              },
-              {
-                type: 'paragraph',
-                text: 'This paragraph is inside a required sub step.'
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: "Another required step",
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Um. Hello.'
-              }
-            ]
-          }
-        ]
-      ]
-  get_help_links:
-    description: |
-      Where task lists are long, content can be substituted with a link back to the main task list page. This link will open the main task list page with that step shown. The link text defaults to "Get help completing this step" but can be overridden.
-
-      Get help links will only appear if the task_list_url global parameter is set and the step itself has the optional show_help_link parameter set to true.
-
-      Note that this option does not remove any content - it is left to developers to simply pass less content to the component in this situation.
-    data:
-      task_list_url: "/learn-to-do-something"
-      task_list_url_link_text: "Get more information"
-      show_step: 1
-      groups: [
-        [
-          {
-            title: "A link back to the main task list",
-            show_help_link: true,
-            contents: [
-              {
-                type: 'list',
-                contents: [
-                  {
-                    href: '/test7',
-                    text: 'This is a link'
-                  },
-                  {
-                    href: '/test7',
-                    text: 'This is another link'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: "No help link here",
-            contents: [
-              {
-                type: 'list',
-                contents: [
-                  {
-                    href: '/test7',
-                    text: 'This is yet another link'
-                  },
-                  {
-                    href: '/test7',
-                    text: 'This is a further link'
-                  },
-                ]
-              }
-            ]
-          }
-        ]
-      ]
-  test_all_the_things:
-    description: This component is very complicated so here is an example containing as many of the options available as possible.
-    data:
-      task_list_url: "/learn-to-setup-standup"
-      highlight_group: 2
-      groups: [
-        [
-          {
-            title: 'Get the TV ready',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Configure the television so it is ready for the standup. You will also need a laptop.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'https://en.wikipedia.org/wiki/HDMI',
-                    text: 'Remove the Chromebit from HDMI 1 on the TV'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            title: 'Plug everything in',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Connect the relevant cables between the various devices.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'https://www.google.co.uk/',
-                    text: 'Run the HDMI - MINI DVI cable from the TV to the facilitators laptop'
-                  },
-                  {
-                    href: 'https://www.jabra.co.uk/',
-                    text: 'Plug the Jabra into the facilitators laptop'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Configure the catchbox',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'These steps are required.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Turn on the transmitter and wait for the switch to blink green'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Plug the transmitter USB cable into the facilitators laptop',
-                    active: true
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Twist and pull the black piece of foam out of the catchbox'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Turn on the catchbox and wait for the LED to turn green'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Wait for the transmitter light to turn solid green'
-                  }
-                ]
-              },
-              {
-                type: 'substep',
-                optional: true
-              },
-              {
-                type: 'heading',
-                text: 'Optional steps'
-              },
-              {
-                type: 'paragraph',
-                text: 'These steps are not required.'
-              },
-              {
-                type: 'list',
-                style: 'choice',
-                contents: [
-                  {
-                    href: 'https://www.google.co.uk/',
-                    text: "Get annoyed when it doesn't work"
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Try to find someone else who knows how to do it',
-                    context: '1 to 10 minutes'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Join and configure the standup',
-            show_help_link: true,
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Join the hangout and present to those on it.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Connect to standup hangout via the calendar invite'
-                  },
-                  {
-                    text: 'or'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Connect to standup hangout via the link in the team slack'
-                  }
-                ]
-              },
-              {
-                type: 'paragraph',
-                text: 'then'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Click the three dots in the bottom hand corner to open settings'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Set speaker to "Jabra"'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Set microphone to "C Media USB"'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Click "present to meeting"'
-                  },
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Clear up',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Disconnect from the hangout and disconnect any cables.'
-              },
-              {
-                type: 'paragraph',
-                text: 'Most importantly, remember to switch off the catchbox to save the battery.'
-              }
-            ]
-          },
-          {
-            title: 'Get someone else to clear up',
-            logic: 'or',
-            optional: true,
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Schedule another meeting for right after the standup and force someone else to sort everything out.'
-              }
-            ]
-          }
-        ]
-      ]
-  small:
-    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 (small)',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Configure the television so it is ready for the standup. You will also need a laptop.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'https://en.wikipedia.org/wiki/HDMI',
-                    text: 'Remove the Chromebit from HDMI 1 on the TV'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            title: 'Plug everything in (small)',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Connect the relevant cables between the various devices.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'https://www.google.co.uk/',
-                    text: 'Run the HDMI - MINI DVI cable from the TV to the facilitators laptop'
-                  },
-                  {
-                    href: 'https://www.jabra.co.uk/',
-                    text: 'Plug the Jabra into the facilitators laptop'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Configure the catchbox (small)',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'These steps are required.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Turn on the transmitter and wait for the switch to blink green'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Plug the transmitter USB cable into the facilitators laptop',
-                    active: true
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Twist and pull the black piece of foam out of the catchbox'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Turn on the catchbox and wait for the LED to turn green'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Wait for the transmitter light to turn solid green'
-                  }
-                ]
-              },
-              {
-                type: 'substep',
-                optional: true
-              },
-              {
-                type: 'heading',
-                text: 'Optional steps'
-              },
-              {
-                type: 'paragraph',
-                text: 'These steps are not required.'
-              },
-              {
-                type: 'list',
-                style: 'choice',
-                contents: [
-                  {
-                    href: 'https://www.google.co.uk/',
-                    text: "Get annoyed when it doesn't work"
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Try to find someone else who knows how to do it',
-                    context: '1 to 10 minutes'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Join and configure the standup (small)',
-            show_help_link: true,
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Join the hangout and present to those on it.'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Connect to standup hangout via the calendar invite'
-                  },
-                  {
-                    text: 'or'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Connect to standup hangout via the link in the team slack'
-                  }
-                ]
-              },
-              {
-                type: 'paragraph',
-                text: 'then'
-              },
-              {
-                type: 'list',
-                style: 'required',
-                contents: [
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Click the three dots in the bottom hand corner to open settings'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Set speaker to "Jabra"'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Set microphone to "C Media USB"'
-                  },
-                  {
-                    href: 'http://www.google.com',
-                    text: 'Click "present to meeting"'
-                  },
-                ]
-              }
-            ]
-          }
-        ],
-        [
-          {
-            title: 'Clear up (small)',
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Disconnect from the hangout and disconnect any cables.'
-              },
-              {
-                type: 'paragraph',
-                text: 'Most importantly, remember to switch off the catchbox to save the battery.'
-              }
-            ]
-          },
-          {
-            title: 'Get someone else to clear up (small)',
-            logic: 'or',
-            optional: true,
-            contents: [
-              {
-                type: 'paragraph',
-                text: 'Schedule another meeting for right after the standup and force someone else to sort everything out.'
-              }
-            ]
-          }
-        ]
-      ]