From 6fdbede01665a9f98de0e96bff51ccdb4f522ec5 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 14:49:01 +0000 Subject: [PATCH 1/3] Import govukTaskList --- app/views/layout.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layout.njk b/app/views/layout.njk index a68bc852..6f12a82e 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 %} From 6de42e041918ccea1d8b61a80221625cc5b23dae Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 14:49:13 +0000 Subject: [PATCH 2/3] Use govukTaskList --- .../overview-apply-grouped-sections.njk | 105 +++++--- app/views/new-record/overview.njk | 240 +++++++++++------- 2 files changed, 209 insertions(+), 136 deletions(-) diff --git a/app/views/new-record/overview-apply-grouped-sections.njk b/app/views/new-record/overview-apply-grouped-sections.njk index 9b2a43cb..664a2f31 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 b1bf5a46..ea92f727 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 %} From 314ec6c9d7f32b639a0babf5a7ee0fe53bc2387e Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 14:49:24 +0000 Subject: [PATCH 3/3] Remove task list styles --- app/assets/sass/application.scss | 2 - app/assets/sass/components/_task-list.scss | 55 ----------------- app/assets/sass/patterns/_task-list.scss | 71 ---------------------- 3 files changed, 128 deletions(-) delete mode 100644 app/assets/sass/components/_task-list.scss delete mode 100755 app/assets/sass/patterns/_task-list.scss diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index 3952cd2b..0a480798 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 6c463b2e..00000000 --- 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 28365cde..00000000 --- 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; - } -}