{
  "name": "Task list",
  "component": "task-list",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "idPrefix": "your-health",
        "items": [
          {
            "heading": {
              "text": "Exercise"
            },
            "href": "#/task/exercise",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          {
            "heading": {
              "text": "Personal health"
            },
            "href": "#/task/personal-health",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          {
            "heading": {
              "text": "Family health history"
            },
            "hint": {
              "text": "Details of your parents, brothers and sisters"
            },
            "href": "#/task/family-health-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "heading": {
              "text": "Smoking history"
            },
            "href": "#/task/smoking-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "heading": {
              "text": "Blood test"
            },
            "status": {
              "tag": {
                "text": "Cannot start yet",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
              }
            }
          }
        ]
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<ul class=\"nhsuk-task-list\">\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/exercise\" aria-describedby=\"your-health-1-status\">\n        Exercise\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-1-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/personal-health\" aria-describedby=\"your-health-2-status\">\n        Personal health\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-2-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/family-health-history\" aria-describedby=\"your-health-3-hint your-health-3-status\">\n        Family health history\n      </a>\n      <div class=\"nhsuk-task-list__hint\" id=\"your-health-3-hint\">\n        Details of your parents, brothers and sisters\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-3-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/smoking-history\" aria-describedby=\"your-health-4-status\">\n        Smoking history\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-4-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <div>\n        Blood test\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-5-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour\">\n        Cannot start yet\n      </strong>\n    </div>\n  </li>\n</ul>"
    },
    {
      "name": "with deprecated status classes",
      "context": {
        "idPrefix": "your-health",
        "items": [
          {
            "title": {
              "text": "Exercise"
            },
            "href": "#/task/exercise",
            "status": {
              "text": "Completed",
              "classes": "nhsuk-task-list__status--completed"
            }
          },
          {
            "title": {
              "text": "Personal health"
            },
            "href": "#/task/personal-health",
            "status": {
              "text": "Completed",
              "classes": "nhsuk-task-list__status--completed"
            }
          },
          {
            "title": {
              "text": "Family health history"
            },
            "hint": {
              "text": "Details of your parents, brothers and sisters"
            },
            "href": "#/task/family-health-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "title": {
              "text": "Smoking history"
            },
            "href": "#/task/smoking-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "title": {
              "text": "Blood test"
            },
            "status": {
              "text": "Cannot start yet",
              "classes": "nhsuk-task-list__status--cannot-start-yet"
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<ul class=\"nhsuk-task-list\">\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/exercise\" aria-describedby=\"your-health-1-status\">\n        Exercise\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status nhsuk-task-list__status--completed\" id=\"your-health-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/personal-health\" aria-describedby=\"your-health-2-status\">\n        Personal health\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status nhsuk-task-list__status--completed\" id=\"your-health-2-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/family-health-history\" aria-describedby=\"your-health-3-hint your-health-3-status\">\n        Family health history\n      </a>\n      <div class=\"nhsuk-task-list__hint\" id=\"your-health-3-hint\">\n        Details of your parents, brothers and sisters\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-3-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/smoking-history\" aria-describedby=\"your-health-4-status\">\n        Smoking history\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-4-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <div>\n        Blood test\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status nhsuk-task-list__status--cannot-start-yet\" id=\"your-health-5-status\">\n      Cannot start yet\n    </div>\n  </li>\n</ul>"
    },
    {
      "name": "with deprecated titles",
      "context": {
        "idPrefix": "your-health",
        "items": [
          {
            "title": {
              "text": "Exercise"
            },
            "href": "#/task/exercise",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          {
            "title": {
              "text": "Personal health"
            },
            "href": "#/task/personal-health",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          {
            "title": {
              "text": "Family health history"
            },
            "hint": {
              "text": "Details of your parents, brothers and sisters"
            },
            "href": "#/task/family-health-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "title": {
              "text": "Smoking history"
            },
            "href": "#/task/smoking-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "title": {
              "text": "Blood test"
            },
            "status": {
              "tag": {
                "text": "Cannot start yet",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
              }
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<ul class=\"nhsuk-task-list\">\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/exercise\" aria-describedby=\"your-health-1-status\">\n        Exercise\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-1-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/personal-health\" aria-describedby=\"your-health-2-status\">\n        Personal health\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-2-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/family-health-history\" aria-describedby=\"your-health-3-hint your-health-3-status\">\n        Family health history\n      </a>\n      <div class=\"nhsuk-task-list__hint\" id=\"your-health-3-hint\">\n        Details of your parents, brothers and sisters\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-3-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/smoking-history\" aria-describedby=\"your-health-4-status\">\n        Smoking history\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-4-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <div>\n        Blood test\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-5-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour\">\n        Cannot start yet\n      </strong>\n    </div>\n  </li>\n</ul>"
    },
    {
      "name": "with empty items",
      "context": {
        "idPrefix": "your-health",
        "items": [
          {
            "heading": {
              "text": "Exercise"
            },
            "href": "#/task/exercise",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          {
            "heading": {
              "text": "Personal health"
            },
            "href": "#/task/personal-health",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          false,
          false,
          {
            "heading": {
              "text": "Blood test"
            },
            "href": "#/task/blood-test",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<ul class=\"nhsuk-task-list\">\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/exercise\" aria-describedby=\"your-health-1-status\">\n        Exercise\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-1-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/personal-health\" aria-describedby=\"your-health-2-status\">\n        Personal health\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-2-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n\n\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/blood-test\" aria-describedby=\"your-health-5-status\">\n        Blood test\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-5-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
    },
    {
      "name": "with headings and hints as strings",
      "context": {
        "idPrefix": "your-health",
        "items": [
          {
            "heading": "Exercise",
            "href": "#/task/exercise",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          {
            "heading": "Personal health",
            "href": "#/task/personal-health",
            "status": {
              "tag": {
                "text": "Completed",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal"
              }
            }
          },
          {
            "heading": "Family health history",
            "hint": "Details of your parents, brothers and sisters",
            "href": "#/task/family-health-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "heading": "Smoking history",
            "href": "#/task/smoking-history",
            "status": {
              "tag": {
                "text": "Incomplete",
                "colour": "blue"
              }
            }
          },
          {
            "heading": "Blood test",
            "status": {
              "tag": {
                "text": "Cannot start yet",
                "border": false,
                "colour": false,
                "classes": "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
              }
            }
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<ul class=\"nhsuk-task-list\">\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/exercise\" aria-describedby=\"your-health-1-status\">\n        Exercise\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-1-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/personal-health\" aria-describedby=\"your-health-2-status\">\n        Personal health\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-2-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal\">\n        Completed\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/family-health-history\" aria-describedby=\"your-health-3-hint your-health-3-status\">\n        Family health history\n      </a>\n      <div class=\"nhsuk-task-list__hint\" id=\"your-health-3-hint\">\n        Details of your parents, brothers and sisters\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-3-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/smoking-history\" aria-describedby=\"your-health-4-status\">\n        Smoking history\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-4-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <div>\n        Blood test\n      </div>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-5-status\">\n      <strong class=\"nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour\">\n        Cannot start yet\n      </strong>\n    </div>\n  </li>\n</ul>"
    },
    {
      "name": "with headings and status text as strings",
      "context": {
        "idPrefix": "your-health",
        "items": [
          {
            "heading": "Exercise",
            "href": "#/task/exercise",
            "status": "Not applicable"
          },
          {
            "heading": "Personal health",
            "href": "#/task/personal-health",
            "status": "Not applicable"
          },
          {
            "heading": "Blood test",
            "href": "#/task/blood-test",
            "status": "Not applicable"
          }
        ]
      },
      "screenshot": false,
      "options": {},
      "html": "<ul class=\"nhsuk-task-list\">\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/exercise\" aria-describedby=\"your-health-1-status\">\n        Exercise\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-1-status\">\n      Not applicable\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/personal-health\" aria-describedby=\"your-health-2-status\">\n        Personal health\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-2-status\">\n      Not applicable\n    </div>\n  </li>\n  <li class=\"nhsuk-task-list__item nhsuk-task-list__item--with-link\">\n    <div class=\"nhsuk-task-list__name-and-hint\">\n      <a class=\"nhsuk-task-list__link nhsuk-link\" href=\"#/task/blood-test\" aria-describedby=\"your-health-3-status\">\n        Blood test\n      </a>\n    </div>\n    <div class=\"nhsuk-task-list__status\" id=\"your-health-3-status\">\n      Not applicable\n    </div>\n  </li>\n</ul>"
    }
  ]
}