Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add task list component #445

Merged
merged 25 commits into from
Nov 3, 2023
Merged

Conversation

peteryates
Copy link
Member

@peteryates peteryates commented Aug 23, 2023

This PR adds the upcoming Task list component. It's built in a similar fashion to the summary list.

Tags can be added within statuses by calling govuk_tag within the status, or plain text can be used.

Screenshot 2023-10-31 at 10 30 53

Final tasks

  • Add the ability to initialise the component with a Nunjucks style array of hashes.
  • Finish off the guide page
  • Remove the temporary task list component styles

The task list component displays all the tasks a user needs to do, and
allows users to easily identify which ones are done and which they still
need to do.

Refs: alphagov/govuk-design-system/pull/1994
These are only needed to preview the guide until the task list is
released and available in govuk-frontend. This commit can be dropped
prior to merge.
@netlify
Copy link

netlify bot commented Aug 23, 2023

Deploy Preview for govuk-components ready!

Name Link
🔨 Latest commit aac8008
🔍 Latest deploy log https://app.netlify.com/sites/govuk-components/deploys/653bd1df3b3fdb000830afb3
😎 Deploy Preview https://deploy-preview-445--govuk-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Collaborator

@frankieroberto frankieroberto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good! Left some initial comments.

@frankieroberto frankieroberto changed the base branch from main to govuk-frontend-v5 October 27, 2023 15:07
Now when these things are missing the containing elements aren't
rendered at all
@peteryates
Copy link
Member Author

I've added support for aria-descrribedby in 2bf5a18

There are some slight complications:

  • in the examples the aria-describedby attribute is on the <a> element but we now support rendering without the link. When that happens I've moved the aria-describedby up to the div.govuk-task-list__name-and-hint.
  • there's no nice way of us talking to sibling components with ViewComponent, so the Title and Status both belong to Item - it's impossible to know whether or not there's an status present when rendering the title. In Nunjucks where everything's passed in in a single object at the start it's easlier, but here less so. For the time being I'm assuming there's always a status.

@frankieroberto
Copy link
Collaborator

@peteryates:

  • in the examples the aria-describedby attribute is on the <a> element but we now support rendering without the link. When that happens I've moved the aria-describedby up to the div.govuk-task-list__name-and-hint.

As I understand it, aria-describedby can only be added to interactive elements, so in the nunjucks macro we don’t add this attribute at all where there is no link – see example.

frankieroberto and others added 5 commits October 30, 2023 12:51
This change brings the behaviour of the task list more in line with the
Nunjucks component. Now when there's no id_prefix param the ids of the
statuses and tags are just numbered sequentially. If there's going to
be more than one task list on a page they can have their prefixes set
seprately so there's no ID clashes on the final rendered page.

Co-authored-by: Frankie Roberto <[email protected]>
@frankieroberto frankieroberto marked this pull request as ready for review October 31, 2023 10:29
@frankieroberto
Copy link
Collaborator

@peteryates do we think there’s anything left to do on this or shall we merge it into the v5 branch? Do we still want to support an array of item objects as well as the block syntax, or is that an optional extra?

@peteryates
Copy link
Member Author

I do plan on adding the array of items approach but I'm happy for that to follow as an enhancement, will get this merged later today.

@peteryates peteryates merged commit 40b2745 into govuk-frontend-v5 Nov 3, 2023
7 checks passed
@peteryates peteryates deleted the add-task-list-component branch November 3, 2023 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

2 participants