diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 3952cd2b1..0a480798a 100755
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -15,7 +15,6 @@ $govuk-assets-path: "/dist/govuk/assets/";
// Patterns that aren't in Frontend
@import "patterns/related-items";
@import "patterns/start-page";
-@import "patterns/task-list";
// Misc
@import "helpers";
@@ -46,7 +45,6 @@ $govuk-assets-path: "/dist/govuk/assets/";
@import "components/spreadsheet";
@import "components/status-card";
@import "components/sub-navigation";
-@import "components/task-list";
@import "components/timeline";
@import "components/user-card";
diff --git a/app/assets/sass/components/_task-list.scss b/app/assets/sass/components/_task-list.scss
deleted file mode 100644
index 6c463b2e5..000000000
--- a/app/assets/sass/components/_task-list.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-////
-/// @group components/task-list
-////
-
-.app-task-list {
- @include govuk-font($size: 19);
- @include govuk-responsive-margin(9, "bottom");
- padding-left: 0;
- list-style: none;
-}
-
-.app-task-list__item {
- position: relative;
- margin-bottom: 0 !important;
- padding-top: govuk-spacing(2);
- padding-bottom: govuk-spacing(2);
- border-bottom: 1px solid $govuk-border-colour;
- @include govuk-clearfix;
-
- .govuk-tag {
- @include govuk-media-query($until: 450px) {
- margin-top: govuk-spacing(2);
- }
-
- @include govuk-media-query($from: 450px) {
- position: absolute;
- top: govuk-spacing(2);
- right: 0;
- // float: right; // default alignment when not using aboslute positioning
- }
- }
-}
-
-.app-task-list__item:first-child {
- border-top: 1px solid $govuk-border-colour;
-}
-
-.app-task-list__task-name {
- display: block;
- @include govuk-media-query($from: 450px) {
- float: left;
- }
-}
-
-.app-task-list__hint {
- display: inline-block;
- margin-top: 10px;
- margin-bottom: 0;
-}
-
-@media print {
- .app-task-list__task-name:after {
- display: none;
- }
-}
diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss
deleted file mode 100755
index 28365cde3..000000000
--- a/app/assets/sass/patterns/_task-list.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-////
-/// @group patterns/task-list
-////
-
-.app-task-list {
- margin-top: 0;
- margin-bottom: 0;
- padding-left: 0;
- list-style-type: none;
- @include govuk-media-query($from: tablet) {
- min-width: 550px;
- }
-}
-
-.app-task-list__section {
- display: table;
- @include govuk-font($size:24, $weight: bold);
-}
-
-.app-task-list__section-number {
- display: table-cell;
-
- @include govuk-media-query($from: tablet) {
- min-width: govuk-spacing(6);
- padding-right: 0;
- }
-}
-
-.app-task-list__items {
- @include govuk-font($size: 19);
- @include govuk-responsive-margin(9, "bottom");
- padding-left: 0;
- list-style: none;
- @include govuk-media-query($from: tablet) {
- padding-left: govuk-spacing(6);
- }
-}
-
-.app-task-list__item {
- margin-bottom: 0 !important;
- padding-top: govuk-spacing(2);
- padding-bottom: govuk-spacing(2);
- border-bottom: 1px solid $govuk-border-colour;
- @include govuk-clearfix;
-}
-
-.app-task-list__item:first-child {
- border-top: 1px solid $govuk-border-colour;
-}
-
-.app-task-list__task-name {
- display: block;
- @include govuk-media-query($from: 450px) {
- float: left;
- }
-}
-
-// The `app-task-list__task-completed` class was previously used on the task
-// list for the completed tag (changed in 86c90ec) – it's still included here to
-// avoid breaking task lists in existing prototypes.
-.app-task-list__tag,
-.app-task-list__task-completed {
- margin-top: govuk-spacing(2);
- margin-bottom: govuk-spacing(1);
-
- @include govuk-media-query($from: 450px) {
- margin-top: 0;
- margin-bottom: 0;
- float: right;
- }
-}
diff --git a/app/views/layout.njk b/app/views/layout.njk
index a68bc8521..6f12a82eb 100755
--- a/app/views/layout.njk
+++ b/app/views/layout.njk
@@ -28,6 +28,7 @@
{% from "govuk/components/table/macro.njk" import govukTable %}
{% from "govuk/components/tabs/macro.njk" import govukTabs %}
{% from "govuk/components/tag/macro.njk" import govukTag %}
+{% from "govuk/components/task-list/macro.njk" import govukTaskList %}
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
@@ -39,7 +40,6 @@
{% from "_components/autocomplete-new/macro.njk" import appAutocompleteFromSelect %}
{% from "_components/autocomplete-new/macro.njk" import appAutocompleteFromInput %}
{% from "_components/banner/macro.njk" import appBanner %}
-{% from "_components/task-list/macro.njk" import appTaskList %}
{% from "_components/footer/macro.njk" import appFooter %}
{% from "_components/school-autocomplete/macro.njk" import appSchoolAutocomplete with context %}
{% from "_components/sub-navigation/macro.njk" import appSubNavigation %}
diff --git a/app/views/new-record/overview-apply-grouped-sections.njk b/app/views/new-record/overview-apply-grouped-sections.njk
index 9b2a43cbd..664a2f314 100644
--- a/app/views/new-record/overview-apply-grouped-sections.njk
+++ b/app/views/new-record/overview-apply-grouped-sections.njk
@@ -7,11 +7,10 @@
{% endif %}
{% set hideReturnLink = true %}
-{% set backLink = '/drafts' %}
+{% set backLink = "/drafts" %}
{% set backText = "All drafts" %}
-{% set gridColumn = 'govuk-grid-column-full' %}
-
+{% set gridColumn = "govuk-grid-column-full" %}
{% block formContent %}
{# Rendered from /new-record/overview #}
@@ -56,25 +55,33 @@
{% set courseDetailsHref = "course-details/confirm" %}
{% endif %}
- {{ appTaskList({
+ {{ govukTaskList({
classes: "govuk-!-margin-bottom-8",
items: [
{
- text: "Course details",
+ idPrefix: "course-details",
+ title: {
+ text: "Course details"
+ },
href: courseDetailsHref | addReferrer(referrer),
- id: "course-details",
- tag: {
- classes: record.courseDetails | getStatusText('Review', 'Review') | getStatusClass,
- text: record.courseDetails | getStatusText('Review', 'Review')
+ status: {
+ tag: {
+ classes: record.courseDetails | getStatusText('Review', 'Review') | getStatusClass,
+ text: record.courseDetails | getStatusText('Review', 'Review')
+ }
}
} if record | requiresSection("courseDetails"),
{
- text: "Trainee data",
+ idPrefix: "application-overview",
+ title: {
+ text: "Trainee data"
+ },
href: "apply-trainee-application" | addReferrer(referrer),
- id: "application-overview",
- tag: {
- classes: record.applyData | getStatusText('Review', 'Review') | getStatusClass,
- text: record.applyData | getStatusText('Review', 'Review')
+ status: {
+ tag: {
+ classes: record.applyData | getStatusText('Review', 'Review') | getStatusClass,
+ text: record.applyData | getStatusText('Review', 'Review')
+ }
}
}
]
@@ -95,47 +102,64 @@ Lead partners and employing schools" %}
{% endif %}
{% endif %}
- {{ appTaskList({
+ {{ govukTaskList({
classes: "govuk-!-margin-bottom-8",
items: [
{
- text: "Trainee ID",
+ idPrefix: "training-details",
+ title: {
+ text: "Trainee ID"
+ },
href: "training-details" | reviewIfInProgress(record.trainingDetails) | addReferrer(referrer),
- id: "training-details",
- tag: {
- classes: record.trainingDetails | getStatusText | getStatusClass,
- text: record.trainingDetails | getStatusText
+ status: {
+ tag: {
+ classes: record.trainingDetails | getStatusText | getStatusClass,
+ text: record.trainingDetails | getStatusText
+ }
}
} if record | requiresSection("trainingDetails"),
{
- text: schoolSectionLabel,
+ idPrefix: "schools-details",
+ title: {
+ text: schoolSectionLabel
+ },
href: "schools" | reviewIfInProgress(record.schools) | addReferrer(referrer),
- id: "schools-details",
- tag: {
- classes: record.schools | getStatusText | getStatusClass,
- text: record.schools | getStatusText
+ status: {
+ tag: {
+ classes: record.schools | getStatusText | getStatusClass,
+ text: record.schools | getStatusText
+ }
}
} if record | requiresSection("schools"),
{
- text: "Placements",
- _href: "placements/confirm" if (record.placement) else "placements/can-add-placement",
+ idPrefix: "placement-details",
+ title: {
+ text: "Placements"
+ },
href: "placements/can-add-placement" | reviewIfInProgress(record.placement, "placements") | addReferrer(referrer),
- id: "placement-details",
- tag: {
- classes: record.placement | getStatusText | getStatusClass,
- text: record.placement | getStatusText
+ status: {
+ tag: {
+ classes: record.placement | getStatusText | getStatusClass,
+ text: record.placement | getStatusText
+ }
}
} if record | requiresSection("placement"),
{
- text: "Funding",
- href: "funding" | reviewIfInProgress(record.funding) if record | canStartFundingSection,
- hint: "Complete course details first" if not record | canStartFundingSection,
- id: "funding",
- tag: {
- classes: record.funding | getStatusText | getStatusClass,
- text: record.funding | getStatusText("Cannot start yet" if not record | canStartFundingSection)
- }
- } if record | requiresSection("funding")
+ idPrefix: "funding",
+ title: {
+ text: "Funding"
+ },
+ href: "funding" | reviewIfInProgress(record.funding) if record | canStartFundingSection,
+ hint: {
+ text: "Complete course details first" if not record | canStartFundingSection
+ },
+ status: {
+ tag: {
+ classes: record.funding | getStatusText | getStatusClass,
+ text: record.funding | getStatusText("Cannot start yet" if not record | canStartFundingSection)
+ }
+ }
+ } if record | requiresSection("funding")
]
}) if not closed }}
@@ -152,4 +176,5 @@ Lead partners and employing schools" %}
+
{% endblock %}
diff --git a/app/views/new-record/overview.njk b/app/views/new-record/overview.njk
index b1bf5a46b..ea92f727c 100644
--- a/app/views/new-record/overview.njk
+++ b/app/views/new-record/overview.njk
@@ -7,11 +7,10 @@
{% endif %}
{% set hideReturnLink = true %}
-{% set backLink = '/drafts' %}
+{% set backLink = "/drafts" %}
{% set backText = "All drafts" %}
-{% set gridColumn = 'govuk-grid-column-full' %}
-
+{% set gridColumn = "govuk-grid-column-full" %}
{% block formContent %}
@@ -37,59 +36,84 @@
{# Inset text about the provider and route #}
{% include "_includes/providerAndRouteInsetText.njk" %}
- Personal details{{ " and education" if record | requiresSection("degree") }}
- {{ appTaskList({
+
+ Personal details{{ " and education" if record | requiresSection("degree") }}
+
+
+ {{ govukTaskList({
classes: "govuk-!-margin-bottom-8",
- items: [{
- text: "Personal details",
- href: "personal-details/edit" | reviewIfInProgress(record.personalDetails, "personal-details"),
- id: "personal-details",
- tag: {
- classes: record.personalDetails | getStatusText | getStatusClass,
- text: record.personalDetails | getStatusText
- }
- } if record | requiresSection("personalDetails"),
- {
- text: "Diversity information",
- href: "diversity/ethnic-group" | reviewIfInProgress(record.diversity, 'diversity'),
- id: "diversity",
- tag: {
- classes: record.diversity | getStatusText | getStatusClass,
- text: record.diversity | getStatusText
- }
- } if record | requiresSection("diversity"),
- {
- text: "GCSE",
- href: "gcse-details" | reviewIfInProgress(record.gcse, 'gcse'),
- id: "qualification-gcse",
- tag: {
- classes: record.gcse | getStatusText | getStatusClass,
- text: record.gcse | getStatusText
- }
- } if record | requiresSection("gcse"),
- {
- text: "Degree",
- href: "degree/confirm" if (record.degree.items | length) else "degree/add",
- id: "qualification-degree",
- tag: {
- classes: record.degree | getStatusText | getStatusClass,
- text: record.degree | getStatusText
- }
- } if record | requiresSection("degree"),
- {
- text: "Qualifications on entry",
- href: "undergraduate-qualification/confirm" if (record.undergraduateQualification) else "undergraduate-qualification",
- id: "entry-qualification",
- tag: {
- classes: record.undergraduateQualification | getStatusText | getStatusClass,
- text: record.undergraduateQualification | getStatusText
- }
- } if record | requiresSection("undergraduateQualification")
+ items: [
+ {
+ idPrefix: "personal-details",
+ title: {
+ text: "Personal details"
+ },
+ href: "personal-details/edit" | reviewIfInProgress(record.personalDetails, "personal-details"),
+ status: {
+ tag: {
+ classes: record.personalDetails | getStatusText | getStatusClass,
+ text: record.personalDetails | getStatusText
+ }
+ }
+ } if record | requiresSection("personalDetails"),
+ {
+ idPrefix: "diversity",
+ title: {
+ text: "Diversity information"
+ },
+ href: "diversity/ethnic-group" | reviewIfInProgress(record.diversity, 'diversity'),
+ status: {
+ tag: {
+ classes: record.diversity | getStatusText | getStatusClass,
+ text: record.diversity | getStatusText
+ }
+ }
+ } if record | requiresSection("diversity"),
+ {
+ idPrefix: "qualification-gcse",
+ title: {
+ text: "GCSE"
+ },
+ href: "gcse-details" | reviewIfInProgress(record.gcse, 'gcse'),
+ status: {
+ tag: {
+ classes: record.gcse | getStatusText | getStatusClass,
+ text: record.gcse | getStatusText
+ }
+ }
+ } if record | requiresSection("gcse"),
+ {
+ idPrefix: "qualification-degree",
+ title: {
+ text: "Degree"
+ },
+ href: "degree/confirm" if (record.degree.items | length) else "degree/add",
+ status: {
+ tag: {
+ classes: record.degree | getStatusText | getStatusClass,
+ text: record.degree | getStatusText
+ }
+ }
+ } if record | requiresSection("degree"),
+ {
+ idPrefix: "entry-qualification",
+ title: {
+ text: "Qualifications on entry"
+ },
+ href: "undergraduate-qualification/confirm" if (record.undergraduateQualification) else "undergraduate-qualification",
+ status: {
+ tag: {
+ classes: record.undergraduateQualification | getStatusText | getStatusClass,
+ text: record.undergraduateQualification | getStatusText
+ }
+ }
+ } if record | requiresSection("undergraduateQualification")
]
}) if not closed }}
-
- About their teacher training
+
+ About their teacher training
+
{% set fundingHint %}
{% if not record | canStartFundingSection %}
@@ -101,8 +125,7 @@
{% set includesSchools = record | requiresField(["leadPartner", "employingSchool"]) %}
{% if includesSchools %}
{% if (record | requiresField("leadPartner")) and (record | requiresField("employingSchool")) %}
- {% set schoolSectionLabel = "
-Lead partners and employing schools" %}
+ {% set schoolSectionLabel = "Lead partners and employing schools" %}
{% elseif record | requiresField(["leadPartner"]) %}
{% set schoolSectionLabel = "Lead partner" %}
{% elseif record | requiresField(["employingSchool"]) %}
@@ -110,70 +133,100 @@ Lead partners and employing schools" %}
{% endif %}
{% endif %}
- {{ appTaskList({
+ {{ govukTaskList({
classes: "govuk-!-margin-bottom-8",
items: [{
- text: "Type of training",
+ idPrefix: "record-type",
+ title: {
+ text: "Type of training"
+ },
href: "record-setup",
- id: "record-type",
- tag: {
- classes: 'Completed' | getStatusClass,
- text: 'Completed'
+ status: {
+ tag: {
+ classes: 'Completed' | getStatusClass,
+ text: 'Completed'
+ }
}
} if record | requiresSection("recordSetup"),
{
- text: "Course details",
+ idPrefix: "course-details",
+ title: {
+ text: "Course details"
+ },
href: "course-details" | reviewIfInProgress(record.courseDetails),
- id: "course-details",
- tag: {
- classes: record.courseDetails | getStatusText | getStatusClass,
- text: record.courseDetails | getStatusText
+ status: {
+ tag: {
+ classes: record.courseDetails | getStatusText | getStatusClass,
+ text: record.courseDetails | getStatusText
+ }
}
} if record | requiresSection("courseDetails"),
{
- text: "International training details",
+ idPrefix: "iqts",
+ title: {
+ text: "International training details"
+ },
href: "iqts" | reviewIfInProgress(record.iqts),
- id: "iqts",
- tag: {
- classes: record.iqts | getStatusText | getStatusClass,
- text: record.iqts | getStatusText
+ status: {
+ tag: {
+ classes: record.iqts | getStatusText | getStatusClass,
+ text: record.iqts | getStatusText
+ }
}
} if record | requiresSection("iqts"),
{
- text: "Trainee ID",
+ idPrefix: "training-details",
+ title: {
+ text: "Trainee ID"
+ },
href: "training-details" | reviewIfInProgress(record.trainingDetails),
- id: "training-details",
- tag: {
- classes: record.trainingDetails | getStatusText | getStatusClass,
- text: record.trainingDetails | getStatusText
+ status: {
+ tag: {
+ classes: record.trainingDetails | getStatusText | getStatusClass,
+ text: record.trainingDetails | getStatusText
+ }
}
} if record | requiresSection("trainingDetails"),
{
- text: schoolSectionLabel,
+ idPrefix: "schools",
+ title: {
+ text: schoolSectionLabel
+ },
href: "schools" | reviewIfInProgress(record.schools),
- id: "schools",
- tag: {
- classes: record.schools | getStatusText | getStatusClass,
- text: record.schools | getStatusText
+ status: {
+ tag: {
+ classes: record.schools | getStatusText | getStatusClass,
+ text: record.schools | getStatusText
+ }
}
} if record | requiresSection("schools"),
{
- text: "Placements",
+ idPrefix: "placement-details",
+ title: {
+ text: "Placements"
+ },
href: "placements/confirm" if (record.placement) else "placements/can-add-placement",
- id: "placement-details",
- tag: {
- classes: record.placement | getStatusText | getStatusClass,
- text: record.placement | getStatusText
+ status: {
+ tag: {
+ classes: record.placement | getStatusText | getStatusClass,
+ text: record.placement | getStatusText
+ }
}
} if record | requiresSection("placement"),
{
- text: "Funding",
+ idPrefix: "funding",
+ title: {
+ text: "Funding"
+ },
href: "funding" | reviewIfInProgress(record.funding) if record | canStartFundingSection,
- hint: "Complete course details first" if not record | canStartFundingSection,
- id: "funding",
- tag: {
- classes: record.funding | getStatusText | getStatusClass,
- text: record.funding | getStatusText("Cannot start yet" if not record | canStartFundingSection, "Cannot start yet" if not record | canStartFundingSection)
+ hint: {
+ text: "Complete course details first" if not record | canStartFundingSection
+ },
+ status: {
+ tag: {
+ classes: record.funding | getStatusText | getStatusClass,
+ text: record.funding | getStatusText("Cannot start yet" if not record | canStartFundingSection, "Cannot start yet" if not record | canStartFundingSection)
+ }
}
} if record | requiresSection("funding")
]
@@ -192,9 +245,4 @@ Lead partners and employing schools" %}
-
-
-
-
-
{% endblock %}