Merge pull request #1994 from x-govuk/task-list-component

Task list component guidance and updated pattern page

src/community/roadmap/index.md

@@ -45,7 +45,6 @@ We're also:
 - running more workshops on accessibility
 - organising [Design System Day 2023](https://design-system.service.gov.uk/community/design-system-day/)
 - [updating the typographic scale](https://github.com/alphagov/govuk-design-system/issues/2289), including increasing the minimum text size on mobile
-- hosting community co-design work to turn the [task list pattern](/patterns/task-list-pages/) into a component (thanks to the community)
 
 ## Coming up next
 

src/community/upcoming-components-patterns/index.md

@@ -2,7 +2,7 @@
 title: Upcoming components and patterns
 description: Anyone can propose, develop or contribute to new patterns and components, or improvements to existing ones.
 section: Community
-aliases: maps, task list, autocomplete, choosing a date, navigation
+aliases: maps, autocomplete, choosing a date, navigation
 theme: What we’re working on
 layout: layout-pane.njk
 order: 1
@@ -38,23 +38,6 @@ If you’d like to help us build these components and patterns, join the convers
           }
         ]
       }
-    },
-    {
-      key: {
-        text: "Task list"
-      },
-      value: {
-        html: "A community collaboration to build the existing task list pattern into a component."
-      },
-      actions: {
-        classes: "govuk-!-text-align-left",
-        items: [
-          {
-            href: "https://join.slack.com/t/task-list-collab/shared_invite/zt-1gfbxa78k-Ql8885Iuan17w5v26F6yVQ",
-            text: "Join the Task list Slack group"
-          }
-        ]
-      }
     }
   ]
 }) }}

src/components/summary-list/index.md

@@ -25,7 +25,7 @@ You can use it to display metadata like ‘Last updated’ with a date like ‘2
 
 The summary list uses the description list (`<dl>`) HTML element, so only use it to present information that has a key and at least one value.
 
-Do not use it for tabular data or a simple list of information or tasks, like a [task list](/patterns/task-list-pages/). For those use a `<table>`, `<ul>` or `<ol>`.
+Do not use it for tabular data or a simple list of information or tasks, like a [task list](/components/task-list/). For those use a `<table>`, `<ul>` or `<ol>`.
 
 ## How it works
 

src/components/tag/index.md

@@ -15,7 +15,7 @@ Use the tag component to show users the status of something.
 
 ## When to use this component
 
-Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status. For example, you can use a tag to show whether an item in a [task list](/patterns/task-list-pages/) has been ‘completed’.
+Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status. For example, you can use a tag to show whether an item in a [task list](/components/task-list/) has been ‘completed’.
 
 ## How it works
 
@@ -27,7 +27,7 @@ Tags are just used to indicate a status, so do not add links. Use adjectives rat
 
 Sometimes a single status is enough. For example if you need to tell users which parts of an application they’ve finished and which they have not, you may only need a ‘Completed’ tag. Because the user understands that if something does not have a tag, that means it’s incomplete.
 
-The [task list pattern](/patterns/task-list-pages/) has an example of how to show one status using tags.
+The [complete multiple tasks pattern](/patterns/complete-multiple-tasks/) has an example of how to show one status using tags.
 
 Or it can make sense to have two statuses. For example you may find that there’s a need to have one tag for ‘Active’ users and one for ‘Inactive’ users.
 

src/components/task-list/all-colours/index.njk

@@ -0,0 +1,120 @@
+---
+title: Task list with all colours
+layout: layout-example.njk
+---
+
+{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
+
+{{ govukTaskList({
+  idPrefix: "all-colours",
+  items: [
+    {
+      title: {
+        text: "Task A"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Grey",
+          classes: "govuk-tag--grey"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task B"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Green",
+          classes: "govuk-tag--green"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task C"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Turquoise",
+          classes: "govuk-tag--turquoise"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task D"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Blue",
+          classes: "govuk-tag--blue"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task E"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Light blue",
+          classes: "govuk-tag--light-blue"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task F"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Purple",
+          classes: "govuk-tag--purple"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task G"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Pink",
+          classes: "govuk-tag--pink"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task H"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Orange",
+          classes: "govuk-tag--orange"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Task I"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Yellow",
+          classes: "govuk-tag--yellow"
+        }
+      }
+    }
+  ]
+}) }}

src/components/task-list/cannot-start-yet/index.njk

@@ -0,0 +1,45 @@
+---
+title: Task list with cannot start yet
+layout: layout-example.njk
+---
+
+{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
+
+{{ govukTaskList({
+  idPrefix: "application-details",
+  items: [
+    {
+      title: {
+        text: "Company details"
+      },
+      href: "#",
+      status: {
+        text: "Completed"
+      }
+    },
+    {
+      title: {
+        text: "Project details"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Incomplete",
+          classes: "govuk-tag--blue"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Fund applied to"
+      },
+      hint: {
+        text: "The funds will be announced on 1 April 2022"
+      },
+      status: {
+        text: "Cannot start yet",
+        classes: "govuk-task-list__status--cannot-start-yet"
+      }
+    }
+  ]
+}) }}

src/components/task-list/default/index.njk

@@ -0,0 +1,72 @@
+---
+title: Task list
+layout: layout-example.njk
+---
+
+{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
+
+{{ govukTaskList({
+  idPrefix: "company-details",
+  items: [
+    {
+      title: {
+        text: "Company Directors"
+      },
+      href: "#",
+      status: {
+        text: "Completed"
+      }
+    },
+    {
+      title: {
+        text: "Registered company details"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Incomplete",
+          classes: "govuk-tag--blue"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Financial history"
+      },
+      hint: {
+        text: "Include 5 years of the company’s relevant financial information."
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Incomplete",
+          classes: "govuk-tag--blue"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Business plan"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Incomplete",
+          classes: "govuk-tag--blue"
+        }
+      }
+    },
+    {
+      title: {
+        text: "References"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Incomplete",
+          classes: "govuk-tag--blue"
+        }
+      }
+    }
+  ]
+}) }}

src/components/task-list/error/index.njk

@@ -0,0 +1,54 @@
+---
+title: Task list with an error
+layout: layout-example.njk
+---
+
+{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
+
+{{ govukTaskList({
+  idPrefix: "application-details",
+  items: [
+    {
+      title: {
+        text: "Contact details"
+      },
+      href: "#",
+      status: {
+        text: "Completed"
+      }
+    },
+    {
+      title: {
+        text: "Project details"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "Incomplete",
+          classes: "govuk-tag--blue"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Funding required"
+      },
+      href: "#",
+      status: {
+        tag: {
+          text: "There is a problem",
+          classes: "govuk-tag--red"
+        }
+      }
+    },
+    {
+      title: {
+        text: "Bank account"
+      },
+      href: "#",
+      status: {
+        text: "Completed"
+      }
+    }
+  ]
+}) }}