diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss index 13ba4b4d2..648400d94 100644 --- a/app/assets/stylesheets/components/_card.scss +++ b/app/assets/stylesheets/components/_card.scss @@ -1,34 +1,84 @@ @use "sass:color"; @use "../vendor/nhsuk-frontend" as *; +$_blue-background-colour: nhsuk-tint(nhsuk-colour("blue"), 80%); +$_blue-border-colour: nhsuk-tint(nhsuk-colour("blue"), 50%); +$_blue-border-hover-colour: nhsuk-shade(nhsuk-colour("blue"), 10%); +$_blue-text-colour: nhsuk-shade(nhsuk-colour("blue"), 30%); + +$_green-background-colour: nhsuk-tint(nhsuk-colour("green"), 80%); +$_green-border-colour: nhsuk-tint(nhsuk-colour("green"), 40%); +$_green-border-hover-colour: nhsuk-shade(nhsuk-colour("green"), 10%); +$_green-text-colour: nhsuk-shade(nhsuk-colour("green"), 40%); + +$_red-background-colour: nhsuk-tint(nhsuk-colour("red"), 80%); +$_red-border-colour: nhsuk-tint(nhsuk-colour("red"), 50%); +$_red-border-hover-colour: nhsuk-shade(nhsuk-colour("red"), 10%); +$_red-text-colour: nhsuk-shade(nhsuk-colour("red"), 50%); + +$_orange-background-colour: nhsuk-tint(nhsuk-colour("warm-yellow"), 70%); +$_orange-border-colour: nhsuk-tint(nhsuk-colour("warm-yellow"), 10%); +$_orange-border-hover-colour: nhsuk-shade(nhsuk-colour("warm-yellow"), 10%); +$_orange-text-colour: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%); + .app-card { &--blue { - border-color: nhsuk-tint(nhsuk-colour("blue"), 30%); - color: nhsuk-shade(nhsuk-colour("blue"), 30%); - background-color: nhsuk-tint(nhsuk-colour("blue"), 80%); + border-color: $_blue-border-colour; + color: $_blue-text-colour; + background-color: $_blue-background-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_blue-border-colour; + + &.nhsuk-card--clickable:hover, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover), + &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) { + border-color: $_blue-border-hover-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_blue-border-hover-colour; + } - &.nhsuk-card--clickable:active { - border-color: nhsuk-shade(nhsuk-colour("blue"), 30%); + &.nhsuk-card--clickable:active, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active), + &.nhsuk-card--clickable:has(.nhsuk-card__link:active) { + box-shadow: none; } } &--green { - border-color: nhsuk-tint(nhsuk-colour("green"), 40%); - color: nhsuk-shade(nhsuk-colour("green"), 40%); - background-color: nhsuk-tint(nhsuk-colour("green"), 80%); + border-color: $_green-border-colour; + color: $_green-text-colour; + background-color: $_green-background-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_green-border-colour; + + &.nhsuk-card--clickable:hover, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover), + &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) { + border-color: $_green-border-hover-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_green-border-hover-colour; + } - &.nhsuk-card--clickable:active { - border-color: nhsuk-shade(nhsuk-colour("green"), 40%); + &.nhsuk-card--clickable:active, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active), + &.nhsuk-card--clickable:has(.nhsuk-card__link:active) { + box-shadow: none; } } &--orange { - border-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 10%); - color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%); - background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 70%); + border-color: $_orange-border-colour; + color: $_orange-text-colour; + background-color: $_orange-background-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_orange-border-colour; + + &.nhsuk-card--clickable:hover, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover), + &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) { + border-color: $_orange-border-hover-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_orange-border-hover-colour; + } - &.nhsuk-card--clickable:active { - border-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 30%); + &.nhsuk-card--clickable:active, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active), + &.nhsuk-card--clickable:has(.nhsuk-card__link:active) { + box-shadow: none; } blockquote { @@ -37,12 +87,22 @@ } &--red { - border-color: nhsuk-tint(nhsuk-colour("red"), 50%); - color: nhsuk-shade(nhsuk-colour("red"), 50%); - background-color: nhsuk-tint(nhsuk-colour("red"), 80%); + border-color: $_red-border-colour; + color: $_red-text-colour; + background-color: $_red-background-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_red-border-colour; + + &.nhsuk-card--clickable:hover, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:hover), + &.nhsuk-card--clickable:has(.nhsuk-card__link:hover) { + border-color: $_red-border-hover-colour; + box-shadow: 0 $nhsuk-card-border-bottom-width 0 $_red-border-hover-colour; + } - &.nhsuk-card--clickable:active { - border-color: nhsuk-shade(nhsuk-colour("red"), 50%); + &.nhsuk-card--clickable:active, + &.nhsuk-card--clickable:has(.nhsuk-card__heading a:active), + &.nhsuk-card--clickable:has(.nhsuk-card__link:active) { + box-shadow: none; } } @@ -71,6 +131,12 @@ .nhsuk-card__content { @include nhsuk-responsive-padding(4); } + + .nhsuk-button-group .nhsuk-button { + @include nhsuk-media-query($from: tablet) { + margin-bottom: 0; + } + } } // Align counts across cards diff --git a/app/assets/stylesheets/components/_sticky-navigation.scss b/app/assets/stylesheets/components/_sticky-navigation.scss index 6b5c26aa3..a301ae660 100644 --- a/app/assets/stylesheets/components/_sticky-navigation.scss +++ b/app/assets/stylesheets/components/_sticky-navigation.scss @@ -40,6 +40,6 @@ background: nhsuk-shade($nhsuk-brand-colour, 20%); .app-secondary-navigation { - box-shadow: 0 -1px 0 0 $nhsuk-secondary-border-colour; + box-shadow: 0 -1px 0 0 $nhsuk-reverse-border-colour; } } diff --git a/app/filters.js b/app/filters.js index 7856df88b..cd9529b57 100644 --- a/app/filters.js +++ b/app/filters.js @@ -26,7 +26,7 @@ export default (env) => { */ filters.removeLastSummaryBorder = function (array) { if (array && Array.isArray(array) && array.length > 0) { - array.at(-1).classes = 'nhsuk-summary-list__row--no-border' + array.at(-1).border = false return array } diff --git a/app/globals.js b/app/globals.js index e6e3ee427..c1baa0d57 100644 --- a/app/globals.js +++ b/app/globals.js @@ -316,7 +316,7 @@ export default () => { : keyText summaryRows.push({ - classes: undefined, + border: undefined, key: { text: keyText }, value: { html }, ...(edit && { @@ -333,7 +333,7 @@ export default () => { }) } - summaryRows.at(-1).classes = 'nhsuk-summary-list__row--no-border' + summaryRows.at(-1).border = false return summaryRows } @@ -584,7 +584,7 @@ export default () => { : 'Not provided' summaryRows.push({ - classes: '', + border: true, key: { text: label }, @@ -607,7 +607,7 @@ export default () => { } // Remove border from final row - summaryRows.at(-1).classes = 'nhsuk-summary-list__row--no-border' + summaryRows.at(-1).border = false return summaryRows } diff --git a/app/views/_layouts/form.njk b/app/views/_layouts/form.njk index 053489306..72f3bbff3 100644 --- a/app/views/_layouts/form.njk +++ b/app/views/_layouts/form.njk @@ -12,8 +12,8 @@ {% block afterForm %} {{ button({ - classes: confirmButtonClasses, - html: confirmButtonText if confirmButtonText else __("form.continue") + html: confirmButtonText if confirmButtonText else __("form.continue"), + variant: confirmButtonVariant }) if not hideConfirmButton }} {% endblock %} diff --git a/app/views/_macros/add-another.njk b/app/views/_macros/add-another.njk index ec6d22ce5..c9be197b1 100644 --- a/app/views/_macros/add-another.njk +++ b/app/views/_macros/add-another.njk @@ -19,14 +19,16 @@ {% endif %} diff --git a/app/views/_macros/patient-search.njk b/app/views/_macros/patient-search.njk index 2c90e2da4..1400edb3d 100644 --- a/app/views/_macros/patient-search.njk +++ b/app/views/_macros/patient-search.njk @@ -20,17 +20,19 @@ {% set filterButtonGroup %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.confirm"), + small: true, + variant: "secondary", attributes: { formaction: params.formaction, formmethod: "post", role: "search" } }, { - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.clear"), - href: params.clear or "/patients" + href: params.clear or "/patients", + small: true, + variant: "secondary" } if data.q or data.programme or data.yearGroup or data.dob or data.status or data.hasMissingNhsNumber] }) }} {% endset %} @@ -51,25 +53,25 @@ }) }} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("programme.label") } }, + small: true, items: programmeItems, decorate: "programme_id" }) if programmeItems }} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("patient.clinicProgramme_ids.label") } }, + small: true, items: [{ text: 'Invited to clinic', value: 'true' @@ -79,13 +81,13 @@ {% for name, enums in params.checkboxFilters %} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("patientSession." + name + ".label") } }, + small: true, items: checkboxFilterItems(enums, data[name]), decorate: name }) if enums }} @@ -93,20 +95,20 @@ {% for name, enums in params.radioFilters %} {{ radios({ - classes: "nhsuk-radios--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("patientSession." + name + ".label") } }, + small: true, items: radioFilterItems(enums, data[name]), decorate: name }) if enums }} {% endfor %} {{ radios({ - classes: "nhsuk-radios--small", + small: true, fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", @@ -123,7 +125,7 @@ text: PatientStatus.Consent, conditional: { html: checkboxes({ - classes: "nhsuk-checkboxes--small", + small: true, items: enumItems(PatientConsentStatus), decorate: "patientConsent" }) @@ -132,7 +134,7 @@ text: PatientStatus.Refused, conditional: { html: checkboxes({ - classes: "nhsuk-checkboxes--small", + small: true, items: enumItems(PatientRefusedStatus), decorate: "patientRefused" }) @@ -149,7 +151,7 @@ text: ProgrammeType.Flu + " vaccine type" } } if not session, - classes: "nhsuk-checkboxes--small", + small: true, items: enumItems(RecordVaccineCriteria), items: [{ text: RecordVaccineCriteria.AlternativeFluInjectionOnly @@ -166,7 +168,7 @@ text: ProgrammeType.MMR + " vaccine type" } } if not session, - classes: "nhsuk-checkboxes--small", + small: true, items: [{ text: RecordVaccineCriteria.NoMMRPreference }, { @@ -179,7 +181,7 @@ text: PatientStatus.Deferred, conditional: { html: checkboxes({ - classes: "nhsuk-checkboxes--small", + small: true, items: enumItems(PatientDeferredStatus), decorate: "patientDeferred" }) @@ -190,7 +192,7 @@ text: PatientStatus.Vaccinated, conditional: { html: checkboxes({ - classes: "nhsuk-checkboxes--small", + small: true, items: enumItems(PatientVaccinatedStatus), decorate: "patientVaccinated" }) @@ -200,13 +202,13 @@ }) if not params.hideProgrammeStatuses }} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("patient.yearGroup.label") } }, + small: true, items: yearGroupItems, decorate: "yearGroup" }) if yearGroupItems }} @@ -223,13 +225,13 @@ }) }} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("patient.search.showOnly") } }, + small: true, items: [ { value: "archived", diff --git a/app/views/_macros/search-input.njk b/app/views/_macros/search-input.njk index 3ec6ec808..72d829631 100644 --- a/app/views/_macros/search-input.njk +++ b/app/views/_macros/search-input.njk @@ -19,10 +19,11 @@ classes: "app-search-input", afterInput: { html: button({ - classes: "nhsuk-button--small app-button--icon app-search-input__button", + classes: "app-button--icon app-search-input__button", html: nhsukIcon("search", { title: "Search" - }) + }), + small: true }) } } diff --git a/app/views/_macros/session-search.njk b/app/views/_macros/session-search.njk index 79e9809e5..2fd34aca9 100644 --- a/app/views/_macros/session-search.njk +++ b/app/views/_macros/session-search.njk @@ -25,66 +25,68 @@ }) }} {{ radios({ - classes: "nhsuk-radios--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("session.academicYear.label") } }, + small: true, items: academicYearItems, decorate: "academicYear" }) if academicYearItems }} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("programme.label") } }, + small: true, items: programmeItems, decorate: "programme_id" })}} {{ radios({ - classes: "nhsuk-radios--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("session.status.label") } }, + small: true, items: radioFilterItems(SessionStatus), decorate: "status" }) }} {{ radios({ - classes: "nhsuk-radios--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("session.type.label") } }, + small: true, items: radioFilterItems(SessionType), decorate: "type" }) }} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.confirm"), + small: true, + variant: "secondary", attributes: { formaction: params.formaction, formmethod: "post", role: "search" } }, { - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.clear"), - href: params.clear or "/sessions" + href: params.clear or "/sessions", + small: true, + variant: "secondary" } if data.q or data.programme_id or data.status != "none" or data.type != "none"] }) }} {% endcall %} diff --git a/app/views/batch/action.njk b/app/views/batch/action.njk index 9f44c7821..f20bcb15b 100644 --- a/app/views/batch/action.njk +++ b/app/views/batch/action.njk @@ -14,8 +14,8 @@ {% block afterForm %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--warning", text: __("batch.action.confirm", type), + variant: "warning", attributes: { formAction: batch.uri + "/" + type } diff --git a/app/views/batch/form.njk b/app/views/batch/form.njk index 3d38d7391..64d6bc527 100644 --- a/app/views/batch/form.njk +++ b/app/views/batch/form.njk @@ -10,8 +10,9 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10 nhsuk-input--code", label: { text: __("batch.id.label") }, + code: true, + width: 10, decorate: "batch.id" }) }} diff --git a/app/views/clinic/action.njk b/app/views/clinic/action.njk index 416fd6db4..380221265 100644 --- a/app/views/clinic/action.njk +++ b/app/views/clinic/action.njk @@ -12,8 +12,8 @@ {% block afterForm %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--warning", text: __("clinic.action.confirm", type), + variant: "warning", attributes: { formAction: clinic.uri + "/" + type } diff --git a/app/views/clinic/form.njk b/app/views/clinic/form.njk index 103cebb04..f3d413a5d 100644 --- a/app/views/clinic/form.njk +++ b/app/views/clinic/form.njk @@ -37,9 +37,9 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10", label: { text: __("location.postalCode.label") }, autocomplete: "postal-code", + width: 10, decorate: "clinic.postalCode" }) }} {% endcall %} diff --git a/app/views/consent/invalidate.njk b/app/views/consent/invalidate.njk index a9dd2d363..2175e27be 100644 --- a/app/views/consent/invalidate.njk +++ b/app/views/consent/invalidate.njk @@ -1,6 +1,6 @@ {% extends "_layouts/form.njk" %} -{% set confirmButtonClasses = "nhsuk-button--warning" %} +{% set confirmButtonVariant = "warning" %} {% set confirmButtonText = __("consent.invalidate.confirm") %} {% set title = __("consent.invalidate.title") %} diff --git a/app/views/consent/match.njk b/app/views/consent/match.njk index 9f06ecae8..0385c8a19 100644 --- a/app/views/consent/match.njk +++ b/app/views/consent/match.njk @@ -22,7 +22,8 @@ headingLevel: 3 }) %} {{ summaryList({ - classes: "nhsuk-u-margin-bottom-4 nhsuk-summary-list--no-border app-summary-list--full-width", + classes: "nhsuk-u-margin-bottom-4 app-summary-list--full-width", + border: false, rows: summaryRows(consent.child, { fullAndPreferredNames: { label: __("consent.child.fullAndPreferredNames.label") @@ -41,8 +42,8 @@ {{ button({ href: consentPath + "/add", - classes: "nhsuk-button--secondary", - text: __("consent.add.label") + text: __("consent.add.label"), + variant: "secondary" }) }} {% endcall %} diff --git a/app/views/download/list.njk b/app/views/download/list.njk index ad4e87aae..82c869c09 100644 --- a/app/views/download/list.njk +++ b/app/views/download/list.njk @@ -22,30 +22,32 @@ headingLevel: 3 }) %} {{ radios({ - classes: "nhsuk-radios--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("download.type.label") } }, + small: true, items: radioFilterItems(DownloadType), decorate: "type" }) }} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.confirm"), + small: true, + variant: "secondary", attributes: { formaction: params.formaction, formmethod: "post", role: "search" } }, { - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.clear"), - href: "/downloads" + href: "/downloads", + small: true, + variant: "secondary" } if data.type] }) }} {% endcall %} diff --git a/app/views/move/list.njk b/app/views/move/list.njk index 2e5c69d80..ed732d6ef 100644 --- a/app/views/move/list.njk +++ b/app/views/move/list.njk @@ -16,9 +16,9 @@ {{ __("move.list.introduction") | nhsukMarkdown }} {{ button({ - classes: "nhsuk-button--secondary", text: __("move.download.label"), value: DownloadType.Moves, + variant: "secondary", decorate: "download.type", attributes: { formaction: "/downloads/new?referrer=/moves", diff --git a/app/views/notice/action.njk b/app/views/notice/action.njk index 34035b4aa..16901c6a7 100644 --- a/app/views/notice/action.njk +++ b/app/views/notice/action.njk @@ -16,8 +16,8 @@ {% block afterForm %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--warning", text: __("notice.action.confirm", type), + variant: "warning", attributes: { formAction: notice.uri + "/" + type } diff --git a/app/views/parent/form/address.njk b/app/views/parent/form/address.njk index 60f41e6fc..88aa57cd5 100644 --- a/app/views/parent/form/address.njk +++ b/app/views/parent/form/address.njk @@ -33,9 +33,9 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10", label: { text: __("location.postalCode.label") }, autocomplete: "postal-code", + width: 10, decorate: "consent.child.address.postalCode" }) }} {% endcall %} diff --git a/app/views/patient-session/_consent.njk b/app/views/patient-session/_consent.njk index 935d4b164..962cb5cb0 100644 --- a/app/views/patient-session/_consent.njk +++ b/app/views/patient-session/_consent.njk @@ -18,15 +18,15 @@ {# Actions #} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary", text: __("remind.new.title"), + variant: "secondary", attributes: { formaction: patientSession.uri + "/new/remind", formmethod: "post" } } if options.canRemind, { - classes: "nhsuk-button--secondary", text: __("patientSession.invite.label"), + variant: "secondary", attributes: { formaction: patientSession.uri + "/new/invite", formmethod: "post" diff --git a/app/views/patient-session/_note.njk b/app/views/patient-session/_note.njk index 0e38f85fd..99a14b7a5 100644 --- a/app/views/patient-session/_note.njk +++ b/app/views/patient-session/_note.njk @@ -14,11 +14,11 @@ }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("event.pinned.title") } }, hint: { text: __("event.pinned.hint") }, + inline: true, items: booleanItems, decorate: "pinned" }) }} diff --git a/app/views/patient-session/_record.njk b/app/views/patient-session/_record.njk index ffe9b65ba..27b8b0a0b 100644 --- a/app/views/patient-session/_record.njk +++ b/app/views/patient-session/_record.njk @@ -35,19 +35,19 @@ value: false, conditional: { html: input({ - classes: "nhsuk-input--width-20", label: { text: __("patientSession.preScreen.identifiedBy.name.title") }, + width: 20, decorate: "patientSession.preScreen.identifiedBy.name" }) + input({ - classes: "nhsuk-input--width-20", label: { text: __("patientSession.preScreen.identifiedBy.relationship.title") }, hint: { text: __("patientSession.preScreen.identifiedBy.relationship.hint") }, + width: 20, decorate: "patientSession.preScreen.identifiedBy.relationship" }) } diff --git a/app/views/patient-session/_triage.njk b/app/views/patient-session/_triage.njk index 10a95f405..0574bc5b3 100644 --- a/app/views/patient-session/_triage.njk +++ b/app/views/patient-session/_triage.njk @@ -60,8 +60,8 @@
{% set psdRadiosHtml = radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("triage.psd.label") } }, + inline: true, items: booleanItems, decorate: "triage.psd" }) if account.canPrescribe %} diff --git a/app/views/patient-session/form/gillick.njk b/app/views/patient-session/form/gillick.njk index 2c4736dd6..0cbe25558 100644 --- a/app/views/patient-session/form/gillick.njk +++ b/app/views/patient-session/form/gillick.njk @@ -14,46 +14,46 @@ }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("patientSession.gillick.q1.label") } }, + inline: true, items: booleanItems, decorate: "patientSession.gillick.q1" }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("patientSession.gillick.q2.label") } }, + inline: true, items: booleanItems, decorate: "patientSession.gillick.q2" }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("patientSession.gillick.q3.label") } }, + inline: true, items: booleanItems, decorate: "patientSession.gillick.q3" }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("patientSession.gillick.q4.label") } }, + inline: true, items: booleanItems, decorate: "patientSession.gillick.q4" }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("patientSession.gillick.q5.label") } }, + inline: true, items: booleanItems, decorate: "patientSession.gillick.q5" }) }} diff --git a/app/views/patient-session/form/triage.njk b/app/views/patient-session/form/triage.njk index 27b020485..737f0d0ed 100644 --- a/app/views/patient-session/form/triage.njk +++ b/app/views/patient-session/form/triage.njk @@ -9,8 +9,8 @@ }) }} {% set psdRadiosHtml = radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("triage.psd.label") } }, + inline: true, items: booleanItems, decorate: "triage.psd" }) if account.canPrescribe %} diff --git a/app/views/patient-session/show.njk b/app/views/patient-session/show.njk index 97bb4d81b..81d86666b 100644 --- a/app/views/patient-session/show.njk +++ b/app/views/patient-session/show.njk @@ -30,7 +30,8 @@ href: patient.uri + "?referrer=" + referrer, secondary: true }, - classes: "nhsuk-summary-list--no-border app-summary-list--full-width", + classes: "app-summary-list--full-width", + border: false, rows: summaryRows(patient, { nhsn: { changeLabel: "the child’s NHS number", diff --git a/app/views/patient/archive.njk b/app/views/patient/archive.njk index be4df152b..d0150de96 100644 --- a/app/views/patient/archive.njk +++ b/app/views/patient/archive.njk @@ -5,9 +5,10 @@ {% block form %} {% set duplicateHtml = input({ - classes: "nhsuk-input--width-10 nhsuk-input--code", label: { text: __("patient.archive.duplicate.label") }, - hint: { text: __("patient.archive.duplicate.hint") } + hint: { text: __("patient.archive.duplicate.hint") }, + code: true, + width: 10 }) %} {% set otherHtml = input({ @@ -33,8 +34,8 @@ {% block afterForm %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--warning", text: __("patient.archive.confirm"), + variant: "warning", attributes: { formAction: patient.uri + "/archive" } diff --git a/app/views/patient/form/address.njk b/app/views/patient/form/address.njk index 40d10bd46..eede16b45 100644 --- a/app/views/patient/form/address.njk +++ b/app/views/patient/form/address.njk @@ -32,9 +32,9 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10", label: { text: __("location.postalCode.label") }, autocomplete: "postal-code", + width: 10, decorate: "patient.address.postalCode" }) }} {% endcall %} diff --git a/app/views/patient/form/nhsn.njk b/app/views/patient/form/nhsn.njk index ee3ad42af..bbbe7c343 100644 --- a/app/views/patient/form/nhsn.njk +++ b/app/views/patient/form/nhsn.njk @@ -4,13 +4,14 @@ {% block form %} {{ input({ - classes: "nhsuk-input--width-10 nhsuk-input--code", label: { html: appHeading({ caption: patient.fullName, title: title }) }, + code: true, + width: 10, value: "" if patient.hasMissingNhsNumber else patient.nhsn, decorate: "patient.nhsn" }) }} diff --git a/app/views/patient/programme.njk b/app/views/patient/programme.njk index 033e41bb4..85b6a8771 100644 --- a/app/views/patient/programme.njk +++ b/app/views/patient/programme.njk @@ -72,17 +72,17 @@ {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary", text: __("patientSession.record.title", { programme: patientProgramme.programme }) | safe, + variant: "secondary", attributes: { formaction: patientProgramme.uri + "/record?referrer=" + referrer } }, { - classes: "nhsuk-button--secondary", text: __("vaccination.new.alreadyVaccinated.title"), - href: patientProgramme.uri + "/new/vaccination" + href: patientProgramme.uri + "/new/vaccination", + variant: "secondary" }] }) if patientProgramme.status != PatientStatus.Vaccinated and patientProgramme.eligible }} {% endcall %} @@ -127,9 +127,9 @@ }) }} {{ button({ - classes: "nhsuk-button--secondary", text: __("vaccination.new.alreadyVaccinated.ttcv"), - href: patientProgramme.uri + "/new/ttcv" + href: patientProgramme.uri + "/new/ttcv", + variant: "secondary" }) }} {% endcall %} {% endif %} diff --git a/app/views/reply/form/outcome.njk b/app/views/reply/form/outcome.njk index 6cc1fd61a..c8d79efea 100644 --- a/app/views/reply/form/outcome.njk +++ b/app/views/reply/form/outcome.njk @@ -15,10 +15,10 @@ }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("reply.confirmed.label") } }, + inline: true, items: booleanItems, decorate: "reply.confirmed" }) }} diff --git a/app/views/reply/form/triage.njk b/app/views/reply/form/triage.njk index 403de95e6..04737dd0b 100644 --- a/app/views/reply/form/triage.njk +++ b/app/views/reply/form/triage.njk @@ -9,8 +9,8 @@ }) }} {% set psdRadiosHtml = radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { text: __("triage.psd.label") } }, + inline: true, items: booleanItems, decorate: "triage.psd" }) if account.canPrescribe %} diff --git a/app/views/school/action.njk b/app/views/school/action.njk index 17aaafa24..02d4abadf 100644 --- a/app/views/school/action.njk +++ b/app/views/school/action.njk @@ -14,8 +14,8 @@ {% block afterForm %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--warning", text: __("school.action.confirm", type), + variant: "warning", attributes: { formAction: school.uri + "/" + type } diff --git a/app/views/school/form/address.njk b/app/views/school/form/address.njk index f3f49675a..41a9d12a5 100644 --- a/app/views/school/form/address.njk +++ b/app/views/school/form/address.njk @@ -32,9 +32,9 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10", label: { text: __("location.postalCode.label") }, autocomplete: "postal-code", + width: 10, decorate: "school.postalCode" }) }} {% endcall %} diff --git a/app/views/school/form/site.njk b/app/views/school/form/site.njk index 916b29a2d..aa1c3f4b1 100644 --- a/app/views/school/form/site.njk +++ b/app/views/school/form/site.njk @@ -38,9 +38,9 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10", label: { text: __("location.postalCode.label") }, autocomplete: "postal-code", + width: 10, decorate: "school.postalCode" }) }} {% endcall %} diff --git a/app/views/school/form/urn.njk b/app/views/school/form/urn.njk index 6b2e3de6f..34f6b8807 100644 --- a/app/views/school/form/urn.njk +++ b/app/views/school/form/urn.njk @@ -18,10 +18,11 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10 nhsuk-input--code", label: { text: __("school.urn.label") }, + code: true, + width: 10, decorate: "school.urn", errorMessage: { text: __("school.urn.error") } if data.error }) }} diff --git a/app/views/school/list.njk b/app/views/school/list.njk index dff479282..ad3abb389 100644 --- a/app/views/school/list.njk +++ b/app/views/school/list.njk @@ -30,42 +30,44 @@ }) }} {{ radios({ - classes: "nhsuk-radios--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("school.phase.label") } }, + small: true, items: enumItems(SchoolPhase), decorate: "phase" }) }} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("programme.label") } }, + small: true, items: programmeItems, decorate: "programme_id" }) if programmeItems }} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.confirm"), + small: true, + variant: "secondary", attributes: { formaction: params.formaction, formmethod: "post", role: "search" } }, { - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.clear"), - href: "/schools" + href: "/schools", + small: true, + variant: "secondary" } if data.q or data.phase] }) }} {% endcall %} diff --git a/app/views/school/sessions.njk b/app/views/school/sessions.njk index 4c6426b65..94f639df3 100644 --- a/app/views/school/sessions.njk +++ b/app/views/school/sessions.njk @@ -31,14 +31,16 @@ {{ appButtonGroup({ buttons: [ { - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("session.edit.title"), - href: session.uri + "/edit" + href: session.uri + "/edit", + small: true, + variant: "secondary" }, { - classes: "app-button--secondary-warning nhsuk-button--small", + classes: "app-button--secondary-warning", text: "Delete", - href: session.uri + "/delete" + href: session.uri + "/delete", + small: true } if session.consentWindow != ConsentWindow.Open ] }) if not session.isCompleted }} @@ -69,9 +71,9 @@ }) }} {{ button({ - classes: "nhsuk-button--secondary", text: __("session.new.label"), - href: "/sessions/new" + href: "/sessions/new", + variant: "secondary" }) }} {% if activeSession %} diff --git a/app/views/school/show.njk b/app/views/school/show.njk index 8d27e266a..9e8ed51a2 100644 --- a/app/views/school/show.njk +++ b/app/views/school/show.njk @@ -29,13 +29,13 @@ }) }} {{ button({ - classes: "nhsuk-button--secondary", href: "/uploads/new?type=" + UploadType.School + "&school_id=" + school.id, - text: __("session.upload-class-list.title") + text: __("session.upload-class-list.title"), + variant: "secondary" } if not school.homeOrUnknown else { - classes: "nhsuk-button--secondary", href: school.uri + "/invite-to-clinic", - text: __("session.inviteToClinic.label") + text: __("session.inviteToClinic.label"), + variant: "secondary" }) }}
@@ -65,8 +65,9 @@ }) }} {{ button({ - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("session.offline.confirm"), + small: true, + variant: "secondary", value: DownloadType.Session, decorate: "download.type", attributes: { diff --git a/app/views/session/activity.njk b/app/views/session/activity.njk index abad47ebe..f63441881 100644 --- a/app/views/session/activity.njk +++ b/app/views/session/activity.njk @@ -126,8 +126,9 @@ {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("patientSession.registration.actions.present.label"), + small: true, + variant: "secondary", decorate: "patientSession.register", value: RegistrationOutcome.Present, attributes: { @@ -136,8 +137,9 @@ formmethod: "post" } }, { - classes: "app-button--secondary-warning nhsuk-button--small", + classes: "app-button--secondary-warning", text: __("patientSession.registration.actions.absent.label"), + small: true, decorate: "patientSession.register", value: RegistrationOutcome.Absent, attributes: { diff --git a/app/views/session/form/date-check.njk b/app/views/session/form/date-check.njk index 380ffe058..917291705 100644 --- a/app/views/session/form/date-check.njk +++ b/app/views/session/form/date-check.njk @@ -16,8 +16,8 @@ {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--reverse", - text: __("session.date.check.confirm") + text: __("session.date.check.confirm"), + variant: "reverse" }], links: [{ text: __("session.date.check.cancel") diff --git a/app/views/session/form/reminders.njk b/app/views/session/form/reminders.njk index 03d2f798f..70ac63577 100644 --- a/app/views/session/form/reminders.njk +++ b/app/views/session/form/reminders.njk @@ -4,7 +4,6 @@ {% block form %} {{ input({ - classes: "nhsuk-input--width-2", label: { classes: "nhsuk-label--l", html: appHeading({ @@ -14,6 +13,7 @@ }, hint: { text: __("session.reminderWeeks.hint") }, suffix: "weeks", + width: 2, decorate: "session.reminderWeeks" }) }} {% endblock %} diff --git a/app/views/session/list.njk b/app/views/session/list.njk index 591ce1c4e..6f32371ec 100644 --- a/app/views/session/list.njk +++ b/app/views/session/list.njk @@ -16,9 +16,9 @@ }) }} {{ button({ - classes: "nhsuk-button--secondary", text: __("session.new.label"), - href: "/sessions/new" + href: "/sessions/new", + variant: "secondary" }) }}
diff --git a/app/views/session/offline.njk b/app/views/session/offline.njk index 39c957668..b5165e4c2 100644 --- a/app/views/session/offline.njk +++ b/app/views/session/offline.njk @@ -35,15 +35,15 @@ } }) %} {{ input({ - classes: "nhsuk-input--width-20", label: { text: __("session.offline.vaccinator.firstName") }, + width: 20, decorate: "firstName", value: account.firstName }) }} {{ input({ - classes: "nhsuk-input--width-20", label: { text: __("session.offline.vaccinator.lastName") }, + width: 20, decorate: "lastName", value: account.lastName }) }} diff --git a/app/views/session/show.njk b/app/views/session/show.njk index 29e7e1617..e676b44a9 100644 --- a/app/views/session/show.njk +++ b/app/views/session/show.njk @@ -43,14 +43,14 @@ {{ appButtonGroup({ buttons: [ { - classes: "nhsuk-button--secondary", text: __("session.schedule.title") if session.isUnplanned else __("session.edit.title"), - href: session.uri + "/edit" + href: session.uri + "/edit", + variant: "secondary" }, { - classes: "nhsuk-button--secondary", text: __("session.inviteToClinic.label"), - href: session.uri + "/invite-to-clinic" + href: session.uri + "/invite-to-clinic", + variant: "secondary" } if session.isCompleted ], links: [{ diff --git a/app/views/start.njk b/app/views/start.njk index 6184fad51..7c81e44af 100644 --- a/app/views/start.njk +++ b/app/views/start.njk @@ -27,9 +27,10 @@ Once you log in, you'll be taken to the service your organisation is set up to u {% endfilter %} {{ button({ - classes: "nhsuk-button--login nhsuk-u-margin-bottom-4", + classes: "nhsuk-u-margin-bottom-4", html: "Log in with my Care Identity", - href: "/account/cis2" + href: "/account/cis2", + variant: "login" }) }} {{ link("https://manage-care-identities.care-identity-service2.nhs.uk/#/self-service/unlock-authenticator", __("account.cis2.unlock")) | nhsukMarkdown }} diff --git a/app/views/team/form/sessions.njk b/app/views/team/form/sessions.njk index 297595f41..bfd56b6d1 100644 --- a/app/views/team/form/sessions.njk +++ b/app/views/team/form/sessions.njk @@ -16,13 +16,13 @@ formGroup: { classes: "nhsuk-u-margin-bottom-7" }, - classes: "nhsuk-input--width-2", label: { classes: "nhsuk-label--m", text: __("team.sessionOpenWeeks.title") }, hint: { text: __("team.sessionOpenWeeks.hint") }, suffix: "weeks", + width: 2, decorate: "team.sessionOpenWeeks" }) }} @@ -30,24 +30,24 @@ formGroup: { classes: "nhsuk-u-margin-bottom-7" }, - classes: "nhsuk-input--width-2", label: { classes: "nhsuk-label--m", text: __("team.sessionReminderWeeks.title") }, hint: { text: __("team.sessionReminderWeeks.hint") }, suffix: "weeks", + width: 2, decorate: "team.sessionReminderWeeks" }) }} {{ radios({ - classes: "nhsuk-radios--inline", fieldset: { legend: { classes: "nhsuk-fieldset__legend--m", text: __("team.sessionRegistration.title") } }, + inline: true, items: booleanItems, decorate: "team.sessionRegistration" }) }} diff --git a/app/views/upload/_pending-records.njk b/app/views/upload/_pending-records.njk index f50c75bd2..d94e7b695 100644 --- a/app/views/upload/_pending-records.njk +++ b/app/views/upload/_pending-records.njk @@ -5,7 +5,6 @@ {% set type = "vaccination" if upload.type == UploadType.Report else "child" %} {% set archiveChangeset = __("upload.show.partial.decision.archived.label", ArchiveRecordReason.Error) | nl2br %} {% set archiveRadios = radios({ - classes: "nhsuk-radios--small", formGroup: { classes: "nhsuk-u-margin-bottom-2" }, @@ -15,6 +14,7 @@ text: __("upload.show.partial.decision.title", { patient: patient }) } }, + small: true, items: [{ text: __("upload.show.partial.decision.ignore.label", type), value: "ignore" @@ -37,7 +37,6 @@ }) }) %} {% set duplicateRadios = radios({ - classes: "nhsuk-radios--small", formGroup: { classes: "nhsuk-u-margin-bottom-2" }, @@ -47,6 +46,7 @@ text: __("upload.show.partial.decision.title", { patient: patient }) } }, + small: true, items: [{ text: __("upload.show.partial.decision.original.label", type), value: "original" diff --git a/app/views/upload/_school-moves.njk b/app/views/upload/_school-moves.njk index 015ec5a71..fd36385d3 100644 --- a/app/views/upload/_school-moves.njk +++ b/app/views/upload/_school-moves.njk @@ -12,7 +12,6 @@ { header: __("upload.show.moves.decision.label"), html: radios({ - classes: "nhsuk-radios--small", formGroup: { classes: "nhsuk-u-margin-bottom-2" }, @@ -22,6 +21,7 @@ text: __("upload.show.moves.decision.title", { patient: patient }) } }, + small: true, items: [{ text: __("upload.show.moves.decision.accept.label"), value: "restore" diff --git a/app/views/upload/action.njk b/app/views/upload/action.njk index 8d2465c10..31c5f1ec1 100644 --- a/app/views/upload/action.njk +++ b/app/views/upload/action.njk @@ -14,8 +14,8 @@ {% block afterForm %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--warning", - text: __("upload.action.confirm", type) + text: __("upload.action.confirm", type), + variant: "warning" }], links: [{ text: __("upload.action.cancel"), diff --git a/app/views/upload/list.njk b/app/views/upload/list.njk index 2858a3889..dddf232a1 100644 --- a/app/views/upload/list.njk +++ b/app/views/upload/list.njk @@ -17,9 +17,9 @@ {{ __("upload.list.introduction") | nhsukMarkdown }} {{ button({ - classes: "nhsuk-button--secondary", text: __("upload.new.label"), - href: "/uploads/new" + href: "/uploads/new", + variant: "secondary" }) }}
@@ -32,42 +32,44 @@ headingLevel: 3 }) %} {{ radios({ - classes: "nhsuk-radios--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("upload.type.label") } }, + small: true, items: radioFilterItems(UploadType), decorate: "type" }) }} {{ checkboxes({ - classes: "nhsuk-checkboxes--small", fieldset: { legend: { classes: "nhsuk-fieldset__legend--s", text: __("upload.status.label") } }, + small: true, items: checkboxFilterItems(UploadStatus), decorate: "status" }) }} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.confirm"), + small: true, + variant: "secondary", attributes: { formaction: params.formaction, formmethod: "post", role: "search" } }, { - classes: "nhsuk-button--secondary nhsuk-button--small", text: __("search.clear"), - href: "/uploads" + href: "/uploads", + small: true, + variant: "secondary" } if data.type or data.status] }) }} {% endcall %} diff --git a/app/views/upload/show.njk b/app/views/upload/show.njk index 154ff5131..727896793 100644 --- a/app/views/upload/show.njk +++ b/app/views/upload/show.njk @@ -174,8 +174,8 @@ formaction: upload.uri + "/approve" } }, { - classes: "nhsuk-button--secondary", text: __("upload.delete.confirm"), + variant: "secondary", attributes: { formaction: upload.uri + "/delete" } @@ -186,8 +186,8 @@ {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--secondary", text: __("upload.delete.label"), + variant: "secondary", attributes: { formaction: upload.uri + "/delete" } diff --git a/app/views/vaccination/form/batch.njk b/app/views/vaccination/form/batch.njk index 81347f6c7..24bb4bb6c 100644 --- a/app/views/vaccination/form/batch.njk +++ b/app/views/vaccination/form/batch.njk @@ -9,8 +9,9 @@ }) }} {{ input({ - classes: "nhsuk-input--width-10 nhsuk-input--code", label: { text: __("batch.id.label") }, + code: true, + width: 10, decorate: "vaccination.batch_id" }) }} diff --git a/app/views/vaccination/form/created-at.njk b/app/views/vaccination/form/created-at.njk index 8f3641082..e637e8e1e 100644 --- a/app/views/vaccination/form/created-at.njk +++ b/app/views/vaccination/form/created-at.njk @@ -28,14 +28,14 @@ }, hint: { text: __("vaccination.createdAt_time.hint") }, items: [{ - classes: "nhsuk-input--width-2", label: "Hour", + width: 2, id: "vaccination-createdAt_-hour", name: "[vaccination][createdAt_][hour]", value: vaccination.createdAt_.hour }, { - classes: "nhsuk-input--width-2", label: "Minute", + width: 2, id: "vaccination-createdAt_-minute", name: "[vaccination][createdAt_][minute]", value: vaccination.createdAt_.minute diff --git a/app/views/vaccination/form/dose.njk b/app/views/vaccination/form/dose.njk index 40fc2b516..17e1b3de1 100644 --- a/app/views/vaccination/form/dose.njk +++ b/app/views/vaccination/form/dose.njk @@ -4,7 +4,6 @@ {% block form %} {{ input({ - classes: "nhsuk-input--width-5", label: { html: appHeading({ classes: "nhsuk-label--l", @@ -13,6 +12,7 @@ }) }, suffix: "ml", + width: 5, decorate: "vaccination.dose" }) if vaccination.vaccine.criteria != VaccineCriteria.Intranasal else radios({ fieldset: { diff --git a/app/views/vaccination/form/identified-by.njk b/app/views/vaccination/form/identified-by.njk index b46dfaed2..931dd346f 100644 --- a/app/views/vaccination/form/identified-by.njk +++ b/app/views/vaccination/form/identified-by.njk @@ -23,13 +23,13 @@ value: false, conditional: { html: input({ - classes: "nhsuk-input--width-20", label: { text: __("vaccination.identifiedBy.name.title") }, + width: 20, decorate: "vaccination.identifiedBy.name" }) + input({ - classes: "nhsuk-input--width-20", label: { text: __("vaccination.identifiedBy.relationship.title") }, hint: { text: __("vaccination.identifiedBy.relationship.hint") }, + width: 20, decorate: "vaccination.identifiedBy.relationship" }) } diff --git a/app/views/vaccine/action.njk b/app/views/vaccine/action.njk index bf1a47c00..3e39bfe70 100644 --- a/app/views/vaccine/action.njk +++ b/app/views/vaccine/action.njk @@ -14,8 +14,8 @@ {% block afterForm %} {{ appButtonGroup({ buttons: [{ - classes: "nhsuk-button--warning", text: __("vaccine.action.confirm", type), + variant: "warning", attributes: { formAction: vaccine.uri + "/" + type } diff --git a/app/views/vaccine/list.njk b/app/views/vaccine/list.njk index 8ad65220b..43f2b74f6 100644 --- a/app/views/vaccine/list.njk +++ b/app/views/vaccine/list.njk @@ -25,9 +25,9 @@ }) }} {{ button({ - classes: "nhsuk-button--secondary", text: __("batch.new.label"), - href: vaccine.uri + "/batches/new" + href: vaccine.uri + "/batches/new", + variant: "secondary" }) }} {% set batchRows = [] %}