govuk_publishing_components 2.0.0 → 3.0.0

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

@@ -3,6 +3,9 @@
 @import "grid_layout";
 @import "typography";
 @import "colours";
+@import "../components/task-list";
+@import "../components/task-list-header";
+@import "../components/task-list-related";
 
 $border-color: #ccc;
 

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

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

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -4,6 +4,7 @@ module GovukPublishingComponents
 
     def index
       @component_docs = component_documentation_resolver.all
+      @gem_component_docs = gem_component_documentation_resolver.all
     end
 
     def show
@@ -41,6 +42,10 @@ module GovukPublishingComponents
       @component_documentation_resolver ||= ComponentDocResolver.new
     end
 
+    def gem_component_documentation_resolver
+      @gem_component_documentation_resolver ||= ComponentDocResolver.new(gem_components: true)
+    end
+
     def index_breadcrumb
       {
         title: GovukPublishingComponents::Config.component_guide_title,

data/app/models/govuk_publishing_components/component_doc.rb

@@ -6,7 +6,8 @@ module GovukPublishingComponents
                 :body,
                 :accessibility_criteria,
                 :accessibility_excluded_rules,
-                :examples
+                :examples,
+                :source
 
     def initialize(
       id,
@@ -15,7 +16,8 @@ module GovukPublishingComponents
       body,
       accessibility_criteria,
       accessibility_excluded_rules,
-      examples
+      examples,
+      source
     )
       @id = id
       @name = name
@@ -24,6 +26,7 @@ module GovukPublishingComponents
       @accessibility_criteria = accessibility_criteria
       @accessibility_excluded_rules = accessibility_excluded_rules
       @examples = examples
+      @source = source
     end
 
     def example
@@ -43,7 +46,11 @@ module GovukPublishingComponents
     end
 
     def partial_path
-      "#{GovukPublishingComponents::Config.component_directory_name}/#{id}"
+      if source == 'gem'
+        "components/#{id}"
+      else
+        "#{GovukPublishingComponents::Config.component_directory_name}/#{id}"
+      end
     end
 
   private

data/app/models/govuk_publishing_components/component_doc_resolver.rb

@@ -1,5 +1,9 @@
 module GovukPublishingComponents
   class ComponentDocResolver
+    def initialize(gem_components: false)
+      @documentation_directory = gem_components ? gem_documentation_directory : app_documentation_directory
+    end
+
     def get(id)
       component = fetch_component_doc(id)
       build(component)
@@ -24,7 +28,8 @@ module GovukPublishingComponents
         component[:body],
         combined_accessibility_criteria(component),
         component[:accessibility_excluded_rules],
-        examples
+        examples,
+        component[:source],
       )
     end
 
@@ -40,21 +45,30 @@ module GovukPublishingComponents
     end
 
     def fetch_component_docs
-      doc_files = Rails.root.join(documentation_directory, "*.yml")
+      doc_files = Rails.root.join(@documentation_directory, "*.yml")
       Dir[doc_files].sort.map { |file| parse_documentation(file) }
     end
 
     def fetch_component_doc(id)
-      file = Rails.root.join(documentation_directory, "#{id}.yml")
-      parse_documentation(file)
+      file = Rails.root.join(@documentation_directory, "#{id}.yml")
+      if !file.exist?
+        file = gem_documentation_directory.join("#{id}.yml")
+        parse_documentation(file).merge(source: 'gem')
+      else
+        parse_documentation(file).merge(source: 'application')
+      end
     end
 
     def parse_documentation(file)
       { id: File.basename(file, ".yml") }.merge(YAML::load_file(file)).with_indifferent_access
     end
 
-    def documentation_directory
+    def app_documentation_directory
       Rails.root.join("app", "views", GovukPublishingComponents::Config.component_directory_name, "docs")
     end
+
+    def gem_documentation_directory
+      Pathname.new(GovukPublishingComponents::Config.gem_directory).join("app", "views", "components", "docs")
+    end
   end
 end

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

@@ -0,0 +1,143 @@
+<%
+  groups ||= false
+  small ||= false
+  heading_level ||= 2
+  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 = step[:id] || step[:title].downcase.tr(" ","-")
+
+              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}" %>">
+                <h<%= heading_level %> class="gem-c-task-list__title js-step-title">
+                  <%= step[:title] %>
+                </h<%= heading_level %>>
+              </div>
+
+              <div class="gem-c-task-list__panel js-panel" id="step-panel-<%= id %>-<%= step_index + 1 %>">
+                <%
+                  in_substep = false
+                  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] == '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 %>
+
+                  <% elsif 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 %>
+                  <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/components/_task_list_header.html.erb

@@ -0,0 +1,38 @@
+<%
+  title ||= false
+  path ||= false
+  skip_link ||= false
+  skip_link_text ||= "Skip content"
+%>
+<% if title %>
+  <div class="gem-c-task-list-header" data-module="track-click">
+    <span class="gem-c-task-list-header__part-of">Part of</span>
+    <% if path %>
+      <a href="<%= path %>"
+        class="gem-c-task-list-header__title"
+        data-track-category="tasklistHeaderClicked"
+        data-track-action="top"
+        data-track-label="<%= path %>"
+        data-track-dimension="<%= title %>"
+        data-track-dimension-index="29">
+        <%= title %>
+      </a>
+    <% else %>
+      <span class="gem-c-task-list-header__title">
+        <%= title %>
+      </span>
+    <% end %>
+
+    <% if skip_link %>
+      <a href="<%= skip_link %>"
+        class="gem-c-task-list-header__skip-link"
+        data-track-category="tasklistHeaderClicked"
+        data-track-action="top"
+        data-track-label="<%= skip_link %>"
+        data-track-dimension="<%= skip_link_text %>"
+        data-track-dimension-index="29">
+        <%= skip_link_text %>
+      </a>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,39 @@
+<%
+  links ||= false
+  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>
+      <% if links.length == 1 %>
+          <a href="<%= links[0][:href] %>"
+            class="pub-c-task-list-related__link"
+            data-track-category="tasklistPartOfClicked"
+            data-track-action="<%= pretitle %>"
+            data-track-label="<%= links[0][:href] %>"
+            data-track-dimension="<%= links[0][:text] %>"
+            data-track-dimension-index="29">
+            <%= links[0][:text] %>
+          </a>
+        </h2>
+      <% else %>
+        </h2>
+        <ul class="pub-c-task-list-related__links">
+          <% links.each do |link| %>
+            <li class="pub-c-task-list-related__link-item">
+              <a href="<%= link[:href] %>"
+                class="pub-c-task-list-related__link"
+                data-track-category="tasklistPartOfClicked"
+                data-track-action="<%= pretitle %>"
+                data-track-label="<%= link[:href] %>"
+                data-track-dimension="<%= link[:text] %>"
+                data-track-dimension-index="29">
+                <%= link[:text] %>
+              </a>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,1032 @@
+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'
+                  },
+                  {
+                    href: '/component-guide/task_list/',
+                    text: 'Continue into higher education',
+                    context: '£9,500'
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        [
+          {
+            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
+                  }
+                ]
+              },
+            ]
+          }
+        ]
+      ]
+  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.'
+              }
+            ]
+          }
+        ]
+      ]
+  with_links_to_more_information:
+    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.
+
+      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",
+            contents: [
+              {
+                type: 'list',
+                contents: [
+                  {
+                    href: '/test7',
+                    text: 'This is a link'
+                  },
+                  {
+                    href: '/test7',
+                    text: 'This is another link'
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        [
+          {
+            title: "Another link back to the main task list",
+            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',
+                    active: true
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            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: '',
+                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall',
+                    active: true
+                  },
+                  {
+                    href: '',
+                    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: '',
+                    text: 'Twist and pull the black piece of foam out of the catchbox'
+                  },
+                  {
+                    href: '',
+                    text: 'Turn on the catchbox and wait for the LED to turn green'
+                  },
+                  {
+                    href: '',
+                    text: 'Wait for the transmitter light to turn solid green'
+                  }
+                ]
+              },
+              {
+                type: 'substep',
+                optional: true
+              },
+              {
+                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: '',
+                    text: 'Try to find someone else who knows how to do it',
+                    context: '1 to 10 minutes'
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        [
+          {
+            title: 'Join and configure the standup',
+            contents: [
+              {
+                type: 'paragraph',
+                text: 'Join the hangout and present to those on it.'
+              },
+              {
+                type: 'list',
+                style: 'required',
+                contents: [
+                  {
+                    href: '',
+                    text: 'Connect to standup hangout via the calendar invite',
+                    active: true
+                  },
+                  {
+                    text: 'or'
+                  },
+                  {
+                    href: '',
+                    text: 'Connect to standup hangout via the link in the team slack',
+                    active: true
+                  }
+                ]
+              },
+              {
+                type: 'paragraph',
+                text: 'then'
+              },
+              {
+                type: 'list',
+                style: 'required',
+                contents: [
+                  {
+                    href: '',
+                    text: 'Click the three dots in the bottom hand corner to open settings'
+                  },
+                  {
+                    href: '',
+                    text: 'Set speaker to "Jabra"'
+                  },
+                  {
+                    href: '',
+                    text: 'Set microphone to "C Media USB"'
+                  },
+                  {
+                    href: '',
+                    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
+      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',
+                    active: true
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            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: '',
+                    text: 'Ensure the catchbox transmitter is plugged in at the mains wall',
+                    active: true
+                  },
+                  {
+                    href: '',
+                    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: '',
+                    text: 'Twist and pull the black piece of foam out of the catchbox'
+                  },
+                  {
+                    href: '',
+                    text: 'Turn on the catchbox and wait for the LED to turn green'
+                  },
+                  {
+                    href: '',
+                    text: 'Wait for the transmitter light to turn solid green'
+                  }
+                ]
+              },
+              {
+                type: 'substep',
+                optional: true
+              },
+              {
+                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: '',
+                    text: 'Try to find someone else who knows how to do it',
+                    context: '1 to 10 minutes'
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        [
+          {
+            title: 'Join and configure the standup.',
+            contents: [
+              {
+                type: 'paragraph',
+                text: 'Join the hangout and present to those on it.'
+              },
+              {
+                type: 'list',
+                style: 'required',
+                contents: [
+                  {
+                    href: '',
+                    text: 'Connect to standup hangout via the calendar invite',
+                    active: true
+                  },
+                  {
+                    text: 'or'
+                  },
+                  {
+                    href: '',
+                    text: 'Connect to standup hangout via the link in the team slack',
+                    active: true
+                  }
+                ]
+              },
+              {
+                type: 'paragraph',
+                text: 'then'
+              },
+              {
+                type: 'list',
+                style: 'required',
+                contents: [
+                  {
+                    href: '',
+                    text: 'Click the three dots in the bottom hand corner to open settings'
+                  },
+                  {
+                    href: '',
+                    text: 'Set speaker to "Jabra"'
+                  },
+                  {
+                    href: '',
+                    text: 'Set microphone to "C Media USB"'
+                  },
+                  {
+                    href: '',
+                    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.'
+              }
+            ]
+          }
+        ]
+      ]