From e7f4c5d847935bfde25cf9bbad005ef110e2d940 Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Tue, 12 Dec 2023 09:24:01 +0000 Subject: [PATCH] updated sass and npm packages --- components/cookieBanner.js | 177 +++++++++--------- package.json | 58 +++--- styles/sass/patterns/_card.scss | 8 +- .../sass/patterns/_step-by-step-header.scss | 8 +- styles/sass/patterns/_step-by-step-nav.scss | 54 +++--- styles/sass/styles.scss | 4 +- styles/sass/welshgov/_application.scss | 16 +- 7 files changed, 164 insertions(+), 161 deletions(-) diff --git a/components/cookieBanner.js b/components/cookieBanner.js index 7c82c71f..eccb3334 100644 --- a/components/cookieBanner.js +++ b/components/cookieBanner.js @@ -1,4 +1,4 @@ -import CookieConsent from "react-cookie-consent"; +import { CookieConsent } from "react-cookie-consent"; import Link from "next/link"; import { useRouter } from "next/router"; import useTranslation from "next-translate/useTranslation"; @@ -36,102 +36,103 @@ const CookieBanner = () => { setBannerVisible(false); }; - return <> - {bannerVisible ? ( - -
- +
+ + + + {t("common:cookie-banner-change-settings")} + +
-
- - - - - {t("common:cookie-banner-change-settings")} - - -
- - - ) : ( - "" - )} - ; + + ) : ( + "" + )} + + ); }; export default CookieBanner; diff --git a/package.json b/package.json index 1a058bfc..0d0af7c9 100644 --- a/package.json +++ b/package.json @@ -14,31 +14,31 @@ "child_process": false }, "dependencies": { - "@auth/prisma-adapter": "^1.0.1", - "@azure/identity": "^3.2.4", - "@azure/storage-blob": "^12.12.0", - "@azure/storage-queue": "^12.11.0", - "@next-auth/prisma-adapter": "^1.0.4", - "@prisma/client": "^5.0.0", - "@react-pdf/renderer": "^3.1.12", - "@redux-devtools/extension": "^3.2.5", + "@auth/prisma-adapter": "^1.0.10", + "@azure/identity": "^4.0.0", + "@azure/storage-blob": "^12.17.0", + "@azure/storage-queue": "^12.16.0", + "@next-auth/prisma-adapter": "^1.0.7", + "@prisma/client": "^5.7.0", + "@react-pdf/renderer": "^3.1.14", + "@redux-devtools/extension": "^3.3.0", "@xmldom/xmldom": "^0.8.10", - "applicationinsights": "^2.2.0", - "axios": "^0.24.0", + "applicationinsights": "^2.9.1", + "axios": "^1.6.2", "compression": "^1.7.4", "cookie-cutter": "^0.2.0", - "crypto-js": "^4.1.1", - "date-fns": "^2.28.0", + "crypto-js": "^4.2.0", + "date-fns": "^2.30.0", "dom": "^0.0.3", - "express": "^4.17.2", + "express": "^4.18.2", "fs": "0.0.2", - "google-map-react": "^2.1.10", - "govuk-frontend": "3.13.0", + "google-map-react": "^2.2.1", + "govuk-frontend": "^5.0.0", "jsonpath": "^1.1.1", - "leaflet": "^1.7.1", - "leaflet-defaulticon-compatibility": "^0.1.1", + "leaflet": "^1.9.4", + "leaflet-defaulticon-compatibility": "^0.1.2", "lodash": "^4.17.21", - "moment": "^2.29.1", + "moment": "^2.29.4", "multiparty": "^4.2.3", "mysql": "^2.18.1", "nanoid": "^3.2.0", @@ -49,9 +49,9 @@ "next-redux-wrapper": "^7.0.5", "next-swagger-doc": "^0.4.0", "next-translate": "^2.6.2", - "nodemailer": "^6.9.1", + "nodemailer": "^6.9.7", "nookies": "^2.5.2", - "notifications-node-client": "^5.1.1", + "notifications-node-client": "^7.0.6", "ospoint": "^0.2.1", "path": "^0.12.7", "prop-types": "^15.8.1", @@ -59,13 +59,13 @@ "react": "^18.2.0", "react-accessible-accordion": "^5.0.0", "react-autosuggest": "^10.1.0", - "react-cookie-consent": "^7.2.1", - "react-datepicker": "4.10.0", + "react-cookie-consent": "^9.0.0", + "react-datepicker": "4.24.0", "react-dom": "^18.2.0", - "react-dropzone": "^11.5.1", + "react-dropzone": "^14.2.3", "react-idle-timer": "4.6.4", "react-leaflet": "^4.2.1", - "react-pdf": "^7.3.3", + "react-pdf": "^7.6.0", "react-pdf-html": "^1.1.18", "react-quill": "^2.0.0", "react-redux": "^7.2.6", @@ -73,10 +73,10 @@ "redux-form": "^8.3.9", "redux-persist": "^6.0.0", "redux-thunk": "^2.4.2", - "sass": "1.32", - "sass-loader": "13.2.0", - "swagger-ui": "^4.17.1", - "swagger-ui-react": "^4.17.0", + "sass": "1.69", + "sass-loader": "13.3.2", + "swagger-ui": "^5.10.3", + "swagger-ui-react": "^5.10.3", "typescript": "^5.3.2", "uuid": "9.0.0", "webpack": "^5.66.0", @@ -89,4 +89,4 @@ "next-translate-plugin": "^2.6.2", "prisma": "^5.0.0" } -} +} \ No newline at end of file diff --git a/styles/sass/patterns/_card.scss b/styles/sass/patterns/_card.scss index 2e061087..814ec9ef 100644 --- a/styles/sass/patterns/_card.scss +++ b/styles/sass/patterns/_card.scss @@ -117,7 +117,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container { } &.active { - background-color: govuk-colour("light-grey", $legacy: "grey-4"); + background-color: govuk-colour("light-grey"); transition: 0.1s ease-in-out; .card-heading a { @@ -125,7 +125,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container { margin-top: 0; &:focus { - color: govuk-colour("black", $legacy: "black"); + color: govuk-colour("black"); outline: 3px solid transparent; box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; } @@ -167,7 +167,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container { } &:focus { - color: govuk-colour("black", $legacy: "black"); + color: govuk-colour("black"); outline: 3px solid transparent; box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; } @@ -187,7 +187,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container { } &.clear { - background-color: govuk-colour("white", $legacy: "white"); + background-color: govuk-colour("white"); border: none; } } diff --git a/styles/sass/patterns/_step-by-step-header.scss b/styles/sass/patterns/_step-by-step-header.scss index fcc3cf28..4f2fb975 100644 --- a/styles/sass/patterns/_step-by-step-header.scss +++ b/styles/sass/patterns/_step-by-step-header.scss @@ -5,9 +5,9 @@ @include govuk-text-colour; position: relative; padding: 10px; - background: govuk-colour("light-grey", $legacy: "grey-4"); - border-top: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); - border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); + background: govuk-colour("light-grey"); + border-top: solid 1px govuk-colour("mid-grey"); + border-bottom: solid 1px govuk-colour("mid-grey"); @include govuk-media-query($from: tablet) { padding: govuk-spacing(3); @@ -28,4 +28,4 @@ @include govuk-font(24, $weight: bold); } -// scss-lint:enable SelectorFormat +// scss-lint:enable SelectorFormat \ No newline at end of file diff --git a/styles/sass/patterns/_step-by-step-nav.scss b/styles/sass/patterns/_step-by-step-nav.scss index dbf4be4e..e583f767 100644 --- a/styles/sass/patterns/_step-by-step-nav.scss +++ b/styles/sass/patterns/_step-by-step-nav.scss @@ -5,7 +5,7 @@ $stroke-width: 2px; $stroke-width-large: 3px; $number-circle-size: 26px; $number-circle-size-large: 35px; -$top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); +$top-border: solid 2px govuk-colour("mid-grey"); @mixin step-nav-vertical-line($line-style: solid) { content: ""; @@ -13,8 +13,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); z-index: 2; width: 0; height: 100%; - border-left: $line-style $stroke-width - govuk-colour("mid-grey", $legacy: "grey-2"); + border-left: $line-style $stroke-width govuk-colour("mid-grey"); background: govuk-colour("white"); } @@ -32,13 +31,11 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); // custom mixin as govuk-font does undesirable things at different breakpoints // we want to ensure that both large and small step navs have the same size font on mobile // this will stop text resizing if compatibility mode is turned off -@mixin step-nav-font( - $size, +@mixin step-nav-font($size, $tablet-size: $size, $weight: normal, $line-height: 1.3, - $tablet-line-height: $line-height -) { + $tablet-line-height: $line-height) { @include govuk-typography-common(); font-size: $size + px; font-weight: $weight; @@ -95,12 +92,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); color: govuk-colour("black"); .app-step-nav--large & { - @include step-nav-font( - 19, + @include step-nav-font(19, $tablet-size: 24, $weight: bold, - $line-height: 1.4 - ); + $line-height: 1.4); } } @@ -146,6 +141,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); } .app-step-nav__step:last-child { + // little dash at the bottom of the line &:before { content: ""; @@ -156,8 +152,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); margin-left: $number-circle-size / 4; width: $number-circle-size / 2; height: 0; - border-bottom: solid $stroke-width - govuk-colour("mid-grey", $legacy: "grey-2"); + border-bottom: solid $stroke-width govuk-colour("mid-grey"); } &:after { @@ -189,6 +184,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); } .app-step-nav__step--active { + &:last-child:before, .app-step-nav__circle--number, &:after, @@ -221,16 +217,14 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); .app-step-nav__circle--number { @include step-nav-font(16, $weight: bold, $line-height: 23px); - border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2"); + border: solid $stroke-width govuk-colour("mid-grey"); .app-step-nav--large & { - @include step-nav-font( - 16, + @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 23px, - $tablet-line-height: 30px - ); + $tablet-line-height: 30px); @include govuk-media-query($from: tablet) { border-width: $stroke-width-large; @@ -242,13 +236,11 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); @include step-nav-font(16, $weight: bold, $line-height: 28px); .app-step-nav--large & { - @include step-nav-font( - 16, + @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 28px, - $tablet-line-height: 34px - ); + $tablet-line-height: 34px); } } @@ -264,8 +256,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); // to make numbers readable for users zooming text only in browsers such as Firefox text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour, - $shadow-offset 0 0 $shadow-colour, 0 $shadow-offset 0 $shadow-colour, - -#{$shadow-offset} 0 0 $shadow-colour; + $shadow-offset 0 0 $shadow-colour, + 0 $shadow-offset 0 $shadow-colour, + -#{$shadow-offset} 0 0 $shadow-colour; } .app-step-nav__circle-step-label, @@ -292,6 +285,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); } &:hover { + .app-step-nav__button:not(:focus), .app-step-nav__circle { color: $govuk-link-colour; @@ -315,12 +309,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); margin: 0; .app-step-nav--large & { - @include step-nav-font( - 19, + @include step-nav-font(19, $tablet-size: 24, $weight: bold, - $line-height: 1.4 - ); + $line-height: 1.4); } } @@ -355,7 +347,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); margin: 0; font-size: inherit; - + .app-step-nav__list { + +.app-step-nav__list { margin-top: -5px; .app-step-nav--large & { @@ -451,9 +443,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); .app-step-nav__context { display: inline-block; font-weight: normal; - color: govuk-colour("dark-grey", $legacy: "grey-1"); + color: govuk-colour("dark-grey"); &:before { content: " \2013\00a0"; // dash followed by   } -} +} \ No newline at end of file diff --git a/styles/sass/styles.scss b/styles/sass/styles.scss index 2c758d12..20a3ce6c 100644 --- a/styles/sass/styles.scss +++ b/styles/sass/styles.scss @@ -1,4 +1,4 @@ -@import "node_modules/govuk-frontend/govuk/all"; +@import "node_modules/govuk-frontend/dist/govuk/all"; // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you @import "welshgov/_variables"; @@ -26,4 +26,4 @@ $govuk-assets-path: "/govuk/assets/"; @import "patterns/card"; // Components that aren't in Frontend -@import "components/cookie-banner"; +@import "components/cookie-banner"; \ No newline at end of file diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss index 0b5a70fc..981781cf 100644 --- a/styles/sass/welshgov/_application.scss +++ b/styles/sass/welshgov/_application.scss @@ -190,6 +190,16 @@ a.longLinkBreak { padding-top: 12px; padding-bottom: 12px; border-bottom: none; + + .govuk-tag { + font-family: Arial, Helvetica, sans-serif; + background-color: #1d70b8; + text-transform: uppercase; + color: #fff; + font-weight: 700; + letter-spacing: 1px; + padding: 5px 8px 4px; + } } } } @@ -1155,9 +1165,9 @@ textarea, } } -.case .govuk-grid-column-full .govuk-summary-list__key { - width: 100%; -} +// .case .govuk-grid-column-full .govuk-summary-list__key { +// width: 100%; +// } .appealModule { width: 94%;