Task list component guidance and updated pattern page

[frankieroberto]

Adds a new guidance page for the new Task List component.

It also updates the existing Task list page pattern, replacing the screenshot image with the new Task List component, and updating the guidance.

➡️ Preview

[netlify]

✅ You can preview this change here:

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9e7ed25
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/6523e527f049790008d7c7a6
😎 Deploy Preview	https://deploy-preview-1994--govuk-design-system-preview.netlify.app/patterns/task-list-pages
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[paulrobertlloyd]

With regards to statuses and their relationship to the tags component, wondering if it might be desirable to have the implementation be a little more flexible, and also consistent with how other components allow for content to be provided as either text or html (for which the HTML content could be a tag):

{{ govukTaskList({
  items: [{
    title: {
      text: "Company details"
    },
    href: "#",
    status: {
      text: "Completed"
    }
  }, {
    title: {
      text: "Project details"
    },
    href: "#",
    status: {
      html: govukTag({
        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-!-secondary-text-colour"
    }
  }]
}) }}

(Note: I have provided the secondary text colour in this example by using a new utility class, govuk-!-secondary-text-colour. If that wasn’t deemed a useful enough utility class for broader inclusion in the Design System, you could use the proposed class govuk-task-list__status--secondary-text-colour.)

---

Allowing for any HTML be added may be too flexible, and contradict guidance which is trying to direct authors to use statuses in a restricted and predictable fashion.

Also, while the above example of using a Nunjucks component as a value for a html parameter is possible, it’s not something ever used in any of the existing Design System guidance.

An alternative therefore might be to allow for either status.text or status.tag parameters (with status.tag taking precedence if both provided). This somewhat follows the design of the Phase Banner component, which also consumes the tag component and has a tag parameter. So for example:

{{ govukTaskList({
  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-!-secondary-text-colour"
    }
  }]
}) }}

The HTML for the above would be something like this:

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <span class="govuk-task-list__task-name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">Company details</a>
    </span>
    <span class="govuk-task-list__status" id="task-list-1-status">
      Completed
    </span>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <span class="govuk-task-list__task-name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-2-status">Project details</a>
    </span>
    <span class="govuk-task-list__status">
      <strong class="govuk-tag govuk-tag--blue" id="task-list-2-status">
        Incomplete
      </strong>
    </span>
  </li>
  <li class="govuk-task-list__item">
    <span class="govuk-task-list__task-name-and-hint">
      <div class="govuk-task-list__task-no-link">Fund applied to</div>
      <div id="task-list-3-hint" class="govuk-task-list__task_hint">
        The funds will be announced on 1 April 2022
      </div>
    </span>
    <span class="govuk-task-list__status govuk-!-secondary-text-colour" id="task-list-3-status">
      Cannot start yet
    </span>
  </li>
</ul>

[paulrobertlloyd]

Sidenote: wondering about the usefulness of the secondary text colour as an option – does it add anything? Would most users notice the difference?

[frankieroberto]

@paulrobertlloyd all good questions! The original intention was that the task list component wouldn’t use the tag component (as the design was so different) and so we just had a “status” element within each row instead.

The working group weren’t happy with the inconsistency this would introduce though, so we’ve started exploring how to update the tag component. We’ve not yet explored how with would affect the task list implementation, but I was presuming that it would directly use the updated tag component, in the same way that the Phase banner does - ie with a tag key instead of status. Open to ideas though!

[frankieroberto]

Sidenote: wondering about the usefulness of the secondary text colour as an option – does it add anything? Would most users notice the difference?

It’s intended only for use as “Cannot start yet”, where the whole row wouldn’t be clickable. See draft guidance: https://deploy-preview-1994--govuk-design-system-preview.netlify.app/components/task-list/

The grey is very close to the black though, admittedly!

[paulrobertlloyd]

It’s intended only for use as “Cannot start yet”, where the whole row wouldn’t be clickable.

Oh, I get the intention. And the designer in me really likes it! Love a bit of grey text. I just wonder if in reality it really adds anything that the words don’t already convey. And yes, long history of grey text getting ever darker to meet accessibility standards, further suggesting this may be unwarranted, and a needless complexity in the grand scheme of things.

[paulrobertlloyd]

1. The Nunnucks options for the Phase banner component shows this for its corresponding tag option:

   Options for the tag component. See tag.

   Do we want to do the same here?

2. There are options shown for url.text, url.html and url.classes, but going by the examples, I don’t think the url option exists on items. Should this not be href?

[frankieroberto]

• The Nunnucks options for the Phase banner component shows this for its corresponding tag option:

  Options for the tag component. See tag.

Ooh, I’d not spotted this. @owenatgov shall we use that pattern in the task list params documentation too? I wonder whether it’s better to repeat the documentation for tag rather than to just link to it, but maybe it should be consistent?

Do we want to do the same here?

• There are options shown for url.text, url.html and url.classes, but going by the examples, I don’t think the url option exists on items. Should this not be href?

This was fixed within govuk-frontend before it was merged, but the preview on this PR isn’t showing it as that’s based on an older pre-release.

We’ll do another updated pre-release soon I think, but it’s currently blocked by something.

[colinrotherham]

Hi @frankieroberto, would you mind rebasing this PR against support/5.x?

In preparation for pre-releasing govuk-frontend@5 we'd like to start previewing together all the GOV.UK Design System website changes that otherwise can't go into main yet whilst it's on govuk-frontend@4

Thanks

[36degrees]

Hi @frankieroberto, would you mind rebasing this PR against support/5.x?

Minor update – that should now be release/5.0 instead. Thanks!

[frankieroberto]

@colinrotherham @36degrees sorry for the delay (I was on holiday). This PR has now been rebased from the release/5.0 branch, and I’ve fixed up a few minor things I spotted.

I think it’s now ready for a final review. There’s one TODO left in the content for a reference to when the component is released - I’m not sure what to do about that?

I’m happy to rebase again and squash some of the minor comments when you’re ready for this to be merged. @colinrotherham also has push access to the forked repo if that’s quicker too.

[calvin-lau-sig7]

Hello! I've committed a change to remove a reference to the date of release — I feel like the date itself isn't absolutely essential and we can add it back in when we know (when v5 is released).

[frankieroberto]

@colinrotherham can you think of any way to resolve the duplicate ID issue, caused by embedding the same example HTML twice in the page?

[colinrotherham]

Just made a few tidy up tweaks including:

1. Add an archive page for Task list pattern
2. Update Task list pattern mentions to new name
3. Updated the road map to remove Task list
4. Squash various commits

Think we're ready to go 🙌