Create TaskList View, ViewComponent and Model

DotnetViewComponents/ViewComponents/TaskListViewComponent.cs

@@ -0,0 +1,17 @@
+namespace DotnetViewComponents.ViewComponents
+{
+    using System.Collections.Generic;
+    using Microsoft.AspNetCore.Mvc;
+    using DotnetViewComponents.ViewModels;
+
+    public class TaskListViewComponent : ViewComponent
+    {
+        public IViewComponentResult Invoke(
+            IEnumerable<TaskListItemViewModel> listItems)
+        {
+            var model = new TaskListViewModel(listItems);
+
+            return View(model);
+        }
+    }
+}

DotnetViewComponents/ViewModels/TaskListItemViewModel.cs

@@ -0,0 +1,86 @@
+namespace DotnetViewComponents.ViewModels
+{
+    public class TaskListItemViewModel
+    {
+        /// <summary>
+        /// Creates a new instance of the <see cref="TaskListItemViewModel"/> class.
+        /// STATE: Choose between "Completed", "Incomplete" and "Cannot start yet".
+        /// STATESTYLE: The style should match the state. (e.g. "TaskStateStyle.INCOMPLETE" for "Incomplete", "TaskStateStyle.COMPLETED" for "Completed", "TaskStateStyle.UNSTARTED" for "Cannot start yet")
+        /// </summary>
+        /// <param name="id">The unique identifier for the task.</param>
+        /// <param name="name">The name of the task.</param>
+        /// <param name="aspController">The asp-controller associated with the task's action.</param>
+        /// <param name="aspAction">The asp-action action associated with the task's action.</param>
+        /// <param name="aspRouteData">An asp-all-data-route dictionary containing route data for the task's action.</param>
+        /// <param name="state">Choose between "Completed", "Incomplete" and "Cannot start yet".</param>
+        /// <param name="stateStyle">The style should match the state. (e.g. "TaskStateStyle.INCOMPLETE" for "Incomplete", "TaskStateStyle.COMPLETED" for "Completed", "TaskStateStyle.UNSTARTED" for "Cannot start yet")</param>
+        /// <param name="hintText">Additional text providing hints about the task.</param>
+        public TaskListItemViewModel(
+            string id,
+            string name,
+            string aspController,
+            string aspAction,
+            Dictionary<string, string> aspRouteData,
+            string state,
+            TaskStateStyle stateStyle,
+            string hintText)
+        {
+            Id = id;
+            Name = name;
+            AspController = aspController;
+            AspAction = aspAction;
+            AspRouteData = aspRouteData;
+            State = state;
+            StateStyle = stateStyle;
+            HintText = hintText;
+        }
+
+        /// <summary>
+        /// Gets or sets the unique identifier for the task.
+        /// </summary>
+        public string Id { get; set; }
+
+        /// <summary>
+        /// Gets or sets the name of the task.
+        /// </summary>
+        public string Name { get; set; }
+
+        /// <summary>
+        /// Gets or sets the asp-controller of the link.
+        /// </summary>
+        public string AspController { get; set; }
+
+        /// <summary>
+        /// Gets or sets the as-action of the link.
+        /// </summary>
+        public string AspAction { get; set; }
+
+        /// <summary>
+        /// Gets or sets the asp-all-route-data of the link.
+        /// </summary>
+        public Dictionary<string, string> AspRouteData { get; set; }
+
+        /// <summary>
+        /// Gets or sets the current state of the task.
+        /// </summary>
+        public string State { get; set; }
+
+        /// <summary>
+        /// Gets or sets the style that matches the state of the task.
+        /// </summary>
+        public TaskStateStyle StateStyle { get; set; }
+
+        /// <summary>
+        /// Gets or sets additional text providing hints about the task.
+        /// </summary>
+        public string HintText { get; set; }
+    }
+
+
+    public enum TaskStateStyle
+    {
+        COMPLETED,
+        INCOMPLETE,
+        UNSTARTED
+    }
+}

DotnetViewComponents/ViewModels/TaskListViewModel.cs

@@ -0,0 +1,20 @@
+namespace DotnetViewComponents.ViewModels
+{
+    public class TaskListViewModel
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="TaskListViewModel"/> class.
+        /// </summary>
+        /// <param name="listItems">A collection of task list items.</param>
+        public TaskListViewModel(
+            IEnumerable<TaskListItemViewModel> listItems)
+        {
+            ListItems = listItems;
+        }
+
+        /// <summary>
+        /// Gets or sets the collection of task list items.
+        /// </summary>
+        public IEnumerable<TaskListItemViewModel> ListItems { get; set; }
+    }
+}

DotnetViewComponents/Views/Shared/Components/TaskList/Default.cshtml

@@ -0,0 +1,49 @@
+@using DotnetViewComponents.ViewModels
+@model TaskListViewModel
+
+<ul class="nhsuk-task-list">
+    @foreach (var task in Model.ListItems)
+    {
+        var hasLink = task.StateStyle != TaskStateStyle.UNSTARTED;
+        var statusClass = task.StateStyle switch
+        {
+            TaskStateStyle.COMPLETED => "nhsuk-task-list__status nhsuk-task-list__status--completed",
+            TaskStateStyle.INCOMPLETE => "nhsuk-task-list__status",
+            TaskStateStyle.UNSTARTED => "nhsuk-task-list__status nhsuk-task-list__status--cannot-start-yet",
+            _ => "nhsuk-task-list__status"
+        };
+        var statusId = task.StateStyle == TaskStateStyle.UNSTARTED
+        ? $"task-list-{task.Id}-status"
+        : task.Id;
+
+
+        <li class="nhsuk-task-list__item @(hasLink ? "nhsuk-task-list__item--with-link" : "")">
+            <div class="nhsuk-task-list__name-and-hint">
+                @if (hasLink)
+                {
+					<a class="nhsuk-link nhsuk-task-list__link" asp-controller="@task.AspController" asp-action="@task.AspAction" asp-all-route-data="@task.AspRouteData" aria-describedby="@statusId">
+                        @task.Name
+                    </a>
+                }
+                else
+                {
+                    <div>@task.Name</div>
+                }
+                @if (!String.IsNullOrWhiteSpace(task.HintText))
+                {
+                    <div id="@statusId" class="nhsuk-task-list__hint">@task.HintText</div>
+                }
+            </div>
+            <div class="@statusClass" id="@statusId">
+                @if (task.StateStyle == TaskStateStyle.INCOMPLETE)
+                {
+                    <strong class="nhsuk-tag nhsuk-tag--blue">@task.State</strong>
+                }
+                else
+                {
+                    @task.State
+                }
+            </div>
+        </li>
+    }
+</ul>