From e50c0da5c37d338a694cd61130f5f827c6fb7c63 Mon Sep 17 00:00:00 2001 From: Alex Colbeck <36191568+alexcolbeck1@users.noreply.github.com> Date: Wed, 19 Nov 2025 10:57:06 +0000 Subject: [PATCH 1/2] Upgrading nhsuk-frontend to latest version and moving SASS files to assets/css/ --- docs/_config.yml | 7 +- docs/_includes/breadcrumb.html | 34 ++-- docs/_includes/components/action-link.html | 18 +- docs/_includes/components/button-reverse.html | 6 +- docs/_includes/components/button.html | 6 +- docs/_includes/components/inset-text.html | 2 +- docs/_includes/components/phase-banner.html | 12 +- .../campaign-feature-list.html | 120 +++----------- .../direct-message-feature-list.html | 155 +++--------------- .../transactional-feature-list.html | 120 +++----------- docs/_includes/footer.html | 29 ++-- docs/_includes/header.html | 37 +++-- docs/_includes/primary-navigation.html | 41 +++-- docs/_layouts/default.html | 11 +- docs/{_sass => assets/css}/_breadcrumbs.scss | 8 +- docs/{_sass => assets/css}/_nhs-colours.scss | 0 .../css}/_nhsnotify-side-nav.scss | 12 +- docs/{_sass => assets/css}/_nhsnotify.scss | 44 ++--- docs/assets/css/main.scss | 3 +- docs/assets/js/nhsuk-frontend.min.js | 1 + docs/package-lock.json | 12 +- docs/package.json | 2 +- docs/pages/get-started/get-started.md | 1 + docs/pages/index.md | 6 +- docs/pages/support/support.md | 4 +- .../create-and-submit-a-template.md | 2 + 26 files changed, 207 insertions(+), 486 deletions(-) rename docs/{_sass => assets/css}/_breadcrumbs.scss (93%) rename docs/{_sass => assets/css}/_nhs-colours.scss (100%) rename docs/{_sass => assets/css}/_nhsnotify-side-nav.scss (87%) rename docs/{_sass => assets/css}/_nhsnotify.scss (81%) create mode 100644 docs/assets/js/nhsuk-frontend.min.js diff --git a/docs/_config.yml b/docs/_config.yml index 49630cf..c523482 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -70,10 +70,11 @@ callouts: color: red sass: - style: compact # possible values: nested expanded compact compressed + sass_dir: assets/css load_paths: - - _sass/ - - node_modules/nhsuk-frontend/packages/ + - node_modules + - node_modules/nhsuk-frontend/dist + style: compressed # Exclude from processing. # The following items will not be processed, by default. diff --git a/docs/_includes/breadcrumb.html b/docs/_includes/breadcrumb.html index 58b6e45..c6bf55d 100644 --- a/docs/_includes/breadcrumb.html +++ b/docs/_includes/breadcrumb.html @@ -5,37 +5,37 @@
    -
  1. +
  2. Home
    3. {% if page.parent == "Features" %} -
  3. +
  4. Features
    5. {% endif %} {% if page.parent == "Pricing" %} -
  5. +
  6. Pricing
    7. {% endif %} {% if page.parent == "Using NHS Notify" %} -
  7. +
  8. Using NHS Notify
    9. {% endif %} {% if page.parent == "Support" %} -
  9. +
  10. Support
    11. {% endif %} {% if page.parent == "Get started" %} -
  11. +
  12. Get started
    13. {% endif %} @@ -44,18 +44,16 @@ -

    - {% if page.title == "Features" %} - + Back to   Home {% endif %} {% if page.parent == "Features" %} - + Back to   Features @@ -63,14 +61,14 @@ {% if page.title == "Pricing" %} - + Back to   Home {% endif %} {% if page.parent == "Pricing" %} - + Back to   Pricing @@ -78,14 +76,14 @@ {% if page.title == "Using NHS Notify" %} - + Back to   Home {% endif %} {% if page.parent == "Using NHS Notify" %} - + Back to   Using NHS Notify @@ -93,7 +91,7 @@ {% if page.title == "Support" %} - + Back to   Home @@ -101,19 +99,17 @@ {% if page.title == "Get started" %} - + Back to   Home {% endif %} {% if page.parent == "Get started" %} - + Back to   Get started {% endif %} -

    - diff --git a/docs/_includes/components/action-link.html b/docs/_includes/components/action-link.html index 98fa59b..376f0b9 100644 --- a/docs/_includes/components/action-link.html +++ b/docs/_includes/components/action-link.html @@ -1,12 +1,6 @@ -
    - - - {{ include.text }} - -
    +{{ include.text }} diff --git a/docs/_includes/components/button-reverse.html b/docs/_includes/components/button-reverse.html index 864f478..86d2703 100644 --- a/docs/_includes/components/button-reverse.html +++ b/docs/_includes/components/button-reverse.html @@ -1,5 +1,3 @@ - - + + {{ include.text }} diff --git a/docs/_includes/components/button.html b/docs/_includes/components/button.html index a2e8131..4899d8d 100644 --- a/docs/_includes/components/button.html +++ b/docs/_includes/components/button.html @@ -1,5 +1,3 @@ - - + + {{ include.text }} diff --git a/docs/_includes/components/inset-text.html b/docs/_includes/components/inset-text.html index 33cae53..415aff3 100644 --- a/docs/_includes/components/inset-text.html +++ b/docs/_includes/components/inset-text.html @@ -1,4 +1,4 @@ -
    +
    Information: {{ include.text | markdownify }}
    diff --git a/docs/_includes/components/phase-banner.html b/docs/_includes/components/phase-banner.html index e974a3e..fed98d6 100644 --- a/docs/_includes/components/phase-banner.html +++ b/docs/_includes/components/phase-banner.html @@ -1,12 +1,18 @@
    -

    + +

    + NEWS + NHS announces move to digital-first messaging. - Send messages with the NHS App first using NHS + Send messages + with the NHS App first using NHS Notify. -

    + +
    +
    @@ -26,7 +24,7 @@ - + Skip to main content @@ -35,6 +33,11 @@ {{ content }} {%- include footer.html -%} + + diff --git a/docs/_sass/_breadcrumbs.scss b/docs/assets/css/_breadcrumbs.scss similarity index 93% rename from docs/_sass/_breadcrumbs.scss rename to docs/assets/css/_breadcrumbs.scss index 10e9ad7..f7ddddb 100644 --- a/docs/_sass/_breadcrumbs.scss +++ b/docs/assets/css/_breadcrumbs.scss @@ -12,16 +12,16 @@ //// .nhsuk-breadcrumb { - @include print-hide; // [1] + @include nhsuk-print-hide; // [1] margin-top: nhsuk-spacing(3); - @include mq($from: tablet) { + @include nhsuk-media-query($from: tablet) { margin-top: nhsuk-spacing(4); } } .nhsuk-breadcrumb__list { - @include mq($until: tablet) { + @include nhsuk-media-query($until: tablet) { display: none; // [3] } @@ -71,7 +71,7 @@ padding-left: nhsuk-spacing(3); position: relative; - @include mq($from: tablet) { + @include nhsuk-media-query($from: tablet) { display: none; // [5] } diff --git a/docs/_sass/_nhs-colours.scss b/docs/assets/css/_nhs-colours.scss similarity index 100% rename from docs/_sass/_nhs-colours.scss rename to docs/assets/css/_nhs-colours.scss diff --git a/docs/_sass/_nhsnotify-side-nav.scss b/docs/assets/css/_nhsnotify-side-nav.scss similarity index 87% rename from docs/_sass/_nhsnotify-side-nav.scss rename to docs/assets/css/_nhsnotify-side-nav.scss index ea2566c..be60658 100644 --- a/docs/_sass/_nhsnotify-side-nav.scss +++ b/docs/assets/css/_nhsnotify-side-nav.scss @@ -14,7 +14,7 @@ width: 220px; margin-right: nhsuk-spacing(9); - @include mq($until: desktop) { + @include nhsuk-media-query($until: desktop) { display: none; } @@ -43,7 +43,7 @@ @include nhsuk-font(16, $line-height: 1.3); margin-bottom: 0; - @include mq($until: desktop) { + @include nhsuk-media-query($until: desktop) { @include nhsuk-font(19, $line-height: 1.3); margin-bottom: nhsuk-spacing(2); } @@ -55,8 +55,8 @@ margin-bottom: 12px; padding-top: 4px; - @include mq($until: desktop) { - @include nhsuk-font(24, $line-height: 1.25, $weight: bold); + @include nhsuk-media-query($until: desktop) { + @include nhsuk-font(22, $line-height: 1.25, $weight: bold); color: $nhsuk-text-color; } } @@ -80,7 +80,7 @@ .nhsnotify-side-nav__link { text-decoration: none; - @include mq($until: desktop) { + @include nhsuk-media-query($until: desktop) { text-decoration: underline; } @@ -105,7 +105,7 @@ // Hide content on desktop .nhsnotify-u-hide-desktop { - @include mq($from: desktop) { + @include nhsuk-media-query($from: desktop) { display: none; } } diff --git a/docs/_sass/_nhsnotify.scss b/docs/assets/css/_nhsnotify.scss similarity index 81% rename from docs/_sass/_nhsnotify.scss rename to docs/assets/css/_nhsnotify.scss index d605b89..7eb7b14 100644 --- a/docs/_sass/_nhsnotify.scss +++ b/docs/assets/css/_nhsnotify.scss @@ -67,6 +67,7 @@ margin: 0; } +/* .nhsuk-header__navigation-item { padding-left: 0; padding-right: 0; @@ -92,6 +93,7 @@ } } +*/ .nhsuk-phase-banner { padding-top: 10px; @@ -105,26 +107,15 @@ margin-bottom: 0px; } -.nhsuk-tag { - outline: 2px solid transparent; - outline-offset: -2px; - color: #fff; - background-color: #005eb8; - letter-spacing: 1px; - text-decoration: none; - text-transform: uppercase; - font-weight: 700; -} - .nhsuk-phase-banner__text { font-size: 1rem; line-height: 1.25; padding-left: 0.5em; + color: $nhsuk-text-color; } .nhsuk-inset-text-override { - @include top-and-bottom(); /* [1] */ - @include reading-width(); /* [2] */ + @include nhsuk-reading-width(); /* [2] */ @include nhsuk-responsive-margin(7, "bottom"); @include nhsuk-responsive-margin(4, "top"); @@ -132,7 +123,7 @@ border-left: $nhsuk-border-width-inset-text solid $color_nhsuk-blue; - @include mq($media-type: print) { + @include nhsuk-media-query($media-type: print) { border-color: $nhsuk-print-text-color; } } @@ -147,11 +138,11 @@ @include nhsuk-responsive-margin(6, "bottom"); @include nhsuk-responsive-margin(3, "top"); - @include mq($from: desktop) { + @include nhsuk-media-query($from: desktop) { width: 100%; /* [2] */ } - @include mq($media-type: print) { + @include nhsuk-media-query($media-type: print) { width: 50%; /* [3] */ } @@ -163,7 +154,7 @@ // Breadcrumb spacing override /* .nhsnotify-breadcrumb { - @include print-hide(); + @include nhsuk-print-hide(); padding-top: 20px; @@ -196,31 +187,26 @@ // Custom breadcrumb styles - +/* .nhsuk-breadcrumb { margin-top: 0; padding-bottom: 0; - @include mq($from: tablet) { + @include nhsuk-media-query($from: tablet) { margin-top: 0; } } +*/ // Home page button margin override .nhsnotify-home-page .nhsuk-button { margin-bottom: 0; } -.nhsuk-breadcrumb__item { - &:not(:last-child)::after { - background: url(/assets/images/icon-chevron-right__breadcrumb.svg) top left no-repeat; - } -} -.nhsuk-breadcrumb__back { - - &::before { - background: url(/assets/images/icon-chevron-left__back_link.svg) top left no-repeat; - } +// Hide the outline on header account link when it's the only item +.nhsuk-header__account-item:only-child, +.nhsuk-header__account-item:last-child { + outline: none; } diff --git a/docs/assets/css/main.scss b/docs/assets/css/main.scss index e90a729..1114e3b 100644 --- a/docs/assets/css/main.scss +++ b/docs/assets/css/main.scss @@ -1,9 +1,8 @@ --- --- -@import "../../node_modules/nhsuk-frontend/packages/nhsuk"; +@import "nhsuk-frontend/dist/nhsuk/nhsuk"; @import "nhs-colours"; -@import "breadcrumbs"; @import "nhsnotify"; @import "nhsnotify-side-nav"; diff --git a/docs/assets/js/nhsuk-frontend.min.js b/docs/assets/js/nhsuk-frontend.min.js new file mode 100644 index 0000000..8783c15 --- /dev/null +++ b/docs/assets/js/nhsuk-frontend.min.js @@ -0,0 +1 @@ +const version="10.0.0";function toggleConditionalInput(e,t){if(!(e&&e instanceof HTMLInputElement&&t))return;const n=e.getAttribute("aria-controls");if(!n)return;const i=document.getElementById(n);i&&(e.setAttribute("aria-expanded",e.checked.toString()),i.classList.toggle(t,!e.checked))}function setFocus(e,t={}){const n=e.getAttribute("tabindex");function onBlur(){e.removeEventListener("blur",onBlur),t.onBlur&&t.onBlur.call(e),n||e.removeAttribute("tabindex")}n||e.setAttribute("tabindex","-1"),e.addEventListener("focus",(function onFocus(){e.removeEventListener("focus",onFocus),e.addEventListener("blur",onBlur)})),t.onBeforeFocus&&t.onBeforeFocus.call(e),e.focus()}function isSupported(e=document.body){return!!e&&e.classList.contains("nhsuk-frontend-supported")}function isObject(e){return!!e&&"object"==typeof e&&!Array.isArray(e)}function isScope(e){return!!e&&(e instanceof Element||e instanceof Document)}function formatErrorMessage(Component,e){return`${Component.moduleName}: ${e}`}function normaliseString(e,t){const n=e?e.trim():"";let i,s=null==t?void 0:t.type;switch(s||(["true","false"].includes(n)&&(s="boolean"),n.length>0&&isFinite(Number(n))&&(s="number")),s){case"boolean":i="true"===n;break;case"number":i=Number(n);break;default:i=e}return i}function extractConfigByNamespace(e,t,n){const i=e.properties[n];if("object"!==(null==i?void 0:i.type))return;const s={[n]:{}};for(const[o,r]of Object.entries(t)){let e=s;const t=o.split(".");for(const[i,s]of t.entries())isObject(e)&&(i` from template `